Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Web Development Reading List #113: SVG Optimization and Native DOM Selection Tricks

What’s going on in the industry? What new techniques have emerged recently? What insights, tools, tips and tricks is the web design community talking about? Anselm Hannemann1 is collecting everything that popped up over the last week in his web development reading list2 so that you don’t miss out on anything. The result is a carefully curated list of articles and resources that are worth taking a closer look at. — Ed.

Autumn is nearly over, winter is coming to Germany and on the weekend the forecast predicted the first snow for the Bavarian Alps which is near where I live. Time to read about Service Workers, and some abstract topics like teaching complex algorithms, and how to be more objective.

3
The cost of Frameworks4 explains what obvious and hidden costs using a framework incurs, and how to balance it against (or with) its advantages.

General Link

  • Paul Lewis’ “The Cost of Frameworks5” analyzes the benefits and costs of frameworks but also takes developer’s experience into account. This gives the article a perspective that’s often left out.

Concepts & Design Link

  • Looking at great products that have context-aware content, like Google Now, we realize that anticipatory design is not an easy thing to craft well. Often, less options are more and can provide a better result than too many features prominently displayed in an interface. Aaron Shapiro also shares why less choice can help our brain make better decisions and why the real innovation isn’t about having the best idea but solving real problems.

Tools Link

  • Mapzen6 is an open source mapping lab that offers you great options to build software based on maps. For example, it gives you a client-side routing service or a real-time 3-D map rendering engine.
  • Sara Soueidan shares the best practices how to build and export graphics as SVG7 in your favourite tool as a designer. These are simple tips that make SVGs much better and cleaner.

CSS / Sass Link

Zick-zack line endings with CSS10
Zick-zack line endings with CSS11, using box-decoration-break: clone

Privacy Link

  • With TLS 1.3 we get big improvements12 of the TLS protocol. It enhances privacy and has less latency due to improved handshakes. With it, forward secrecy will be the default and I can’t wait to see it established on the web.
  • With the growing usage of algorithms in our everyday lives, we need to raise the question of ethics13. Our human brain can make irrational and emotional decisions. And sometimes that is a necessary and good thing. But algorithms and computers can’t. This being the biggest challenge for artificial intelligence, we need to face this fact for already existing mechanisms like the Facebook news feed collection, or hiring algorithms. A good way would be to make such algorithms transparent, to give users a possibility to improve them and to make them more objective.

Web Performance Link

  • We all know that performance matters, but Steve Souders’ new article shares practical insights in how to measure real front-end performance14 with the User Timing and Custom Metrics API. Learn how your blocking stylesheets, scripts, fonts or hero images are loaded.

HTML / SVG Link

  • Craig Hockenberry examines the new Safari 9 feature called “pinned tabs”. While that is nothing new for Firefox and Chrome users, it looks and acts slightly different in Safari. But the article is entirely about how to serve the best icon quality for pinned tabs15. Because a nice feature of Safari is that you can reference an SVG file and add a mask on top of it to dynamically style the icon. That could be handy if, for example, you wanted to indicate on which page the user is or to notify the user about dynamic changes. And certainly we want to have that feature in all browsers and for favicons as well.

Accessibility Link

JavaScript Link

  • The AngularConnect 2015 took place this month and there were some notable announcements18 made of the framework: with ngUpgrade you now can seamlessly upgrade from Angular 1 to 2, Angular 2 is much faster due to better start-up times, server-side prerendering and other cool technologies.
  • Working with native DOM still seems to many people like a pain. But today, native JavaScript APIs for the DOM offer you a lot of tiny cool functions to select elements which you probably don’t know of. Louis Lazaris shares practical tips on how to select children and siblings with native DOM methods19
  • keycode.info20 is a little handy tool that returns the JavaScript keycode for a key you press.
  • Ian Feather reflects on What Vanilla JS means today21 by going through examples like a “vanilla todoMVC implementation” that still makes use of tiny libraries and uses abstractions for DOM handlers.
  • David Walsh introduces Mozilla’s new “Service Worker Cookbook22”, which is a great resource containing lots of useful Service Worker examples. In his blog post he also shares the most common code examples23 to help you get started.

Go beyond… Link

  • These days, having GPS devices, smartphones, geo trackers, interactive maps and guides, we can’t get lost anymore. While for many of us this is a thing of joy, Stephen Smith asks if we may be missing out24. When I read that article, I immediately remembered about Vitaly Friedman sharing a similar experience25 just a few days earlier. It’s interesting to see that we as human beings try to get some uncertainty back to our lives that are so predictable nowadays due to intelligent technology.
  • From time to time I think we should remember to not always think about money. It seems the happiest people in this world have found a way to distance themselves from shopping addictions and unnecessary spending26. Because life is about memories, not diamonds.
  • When Mike Ellis left his job at Waterstone’s Online, his boss told him that it’s okay and that “Leaving a job lets you literally and metaphorically clear your desk, an absolutely vital part of moving through your working life.”. Still today, this sentence was left in Mike’s mind and he keeps thinking about it periodically27. Just removing stuff, ruthlessly, with no remorse, no looking back, no what-if’s can sometimes be the best way to clear one’s life and mind.
  • There’s a part of today’s consumerist world that drives us to want more, buy more, act on our impulses, hoard, spend to solve our problems, create comfort through shopping, seek thrills through travel, do more, be more. What would happen if we broke from our addiction to wanting and buying more? Now, I’m not saying we can free ourselves of all desire but we should try a little harder28

And this was it again for the current week. In case you like what I write here, please support me with a donation29 or share this resource with other people. You can learn more about the costs of the project here30. It’s available via E-Mail, RSS and online.

Thanks and all the best,
Anselm

(ah, vf, ms)

Footnotes Link

  1. 1 /author/anselm-hannemann/?rel=author
  2. 2 https://wdrl.info/
  3. 3 https://aerotwist.com/blog/the-cost-of-frameworks/
  4. 4 https://aerotwist.com/blog/the-cost-of-frameworks/
  5. 5 https://aerotwist.com/blog/the-cost-of-frameworks/
  6. 6 https://mapzen.com/
  7. 7 http://sarasoueidan.com/blog/svg-tips-for-designers/
  8. 8 http://codepen.io/anon/pen/qOvqWy
  9. 9 http://codepen.io/df/pen/KdENZv?editors=110
  10. 10 http://codepen.io/df/pen/KdENZv?editors=110
  11. 11 http://codepen.io/df/pen/KdENZv?editors=110
  12. 12 https://timtaubert.de/blog/2015/11/more-privacy-less-latency-improved-handshakes-in-tls-13/
  13. 13 https://cihr.eu/eoa2015web/
  14. 14 https://speedcurve.com/blog/user-timing-and-custom-metrics/
  15. 15 http://blog.iconfactory.com/2015/11/the-new-favicon/
  16. 16 https://www.linkedin.com/pulse/why-implementing-swipe-gestures-causes-mobile-issue-jennison-asuncion
  17. 17 http://www.sitepoint.com/tips-accessible-svg/
  18. 18 http://angularjs.blogspot.hr/2015/11/highlights-from-angularconnect-2015.html
  19. 19 http://www.sitepoint.com/dom-tips-techniques-parent-child-siblings/
  20. 20 http://keycode.info/
  21. 21 http://ianfeather.co.uk/what-even-is-vanilla-js-these-days/
  22. 22 https://serviceworke.rs/
  23. 23 https://hacks.mozilla.org/2015/11/offline-service-workers/
  24. 24 http://www.bbc.com/news/magazine-34473588
  25. 25 https://www.smashingmagazine.com/smashing-newsletter-issue-147/
  26. 26 http://elitedaily.stfi.re/news/world/people-spend-money-experiences-instead-things-much-happier/983208/?sf=vnldao
  27. 27 https://the-pastry-box-project.net/mike-ellis/2015-november-18
  28. 28 http://zenhabits.net/wantnot/
  29. 29 https://wdrl.info/donate
  30. 30 https://wdrl.info/costs/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Anselm Hannemann is a freelance front-end developer and architect. He curates WDRL — a weekly, handcrafted web development newsletter. Apart from that he helped the RICG, built opendevicelab.com and organizes the NightlyBuild 2015 conference in Cologne, Germany. He is available for freelance jobs.

  1. 1

    Casey (@CAYdenberg)

    November 20, 2015 6:34 pm

    Keycode.info brings up a GoDaddy splash page

    1
  2. 5

    Odd that you fail to mention that .net 5 core is RC and has go live support. That’s huge news. You can now write and deploy .net web apps entirely on Linux. It is properly cross platform.

    1
    • 6

      Anselm Hannemann

      November 26, 2015 6:46 pm

      Hey Rob. I’m sorry, I have no clue what this means and have no experience with .net itself. As you might have seen, the list is mainly front-end related and has barely any back-end links in it. But feel free to send me link suggestions via https://wdrl.info/submit/ so I don’t miss out anything important.

      0
  3. 7

    Great work! keep it up

    1

↑ Back to top