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 #122: A Performance Budget Builder, Streams, And The Web Push API

I’ll make it short this week: Thank you so much for the great, constructive discussion last week1 about hiring people and web development basics. I took away some very interesting thoughts from it, and I hope you did so, too. Now, let’s go through the newest things I found.

News Link

  • This week, Firefox 44 has been released2 to the public. The new version offers better video support (VP9, WebM in addition to h.264) and adds support for Brotli compression (a new, better compression than gzip) for HTTPS connections. Service Workers are also supported now. Furthermore, the new Firefox requires add-ons to be signed and it doesn’t connect to sites anymore that allow RC4 ciphers in their HTTPS configuration.
  • The new Chrome Beta channel build now includes a security panel in the developer tools3. This panel shows you how secure your site is, including details on HTTPS and mixed content warnings. Unfortunately, it’s not super detailed yet, and it also doesn’t provide information like HSTS, HKPK and other security details, but I’m excited to see this and bet that they’ll integrate more features over time.

General Link

Concepts & Design Link

  • Most of the time, we see boring data visualizations. But they don’t have to be boring — instead, with inspiration from artists, we can make data very beautiful5 and enhance the user experience through it.
Beautiful data visualization6
Data visualization doesn’t have to be boring7.

Tools Link

  • If you already have your logo as an SVG file, you might want to optimize it not only for bright but also for dark backgrounds. With logomono8 you can now automate the process easily to get a great, reliable SVG that works on both types of backgrounds.

Web Performance Link

  • Brad Frost has built a super-simple Performance Budget Builder9. You just need to enter your personal project goals to see if you match your performance budget or not.
  • Since responsive images are a thing you can (and should) use now in production, we face the problem of resizing our images in various resolutions, sizes and qualities. There are some neat server integrations that help you with that, however, for many cases, it’s still a problem. Luckily, there’s now an open source tool you can use10, along with a guide on the whole topic11.

HTML / SVG Link

  • Many people don’t know that the hidden HTML-attribute has quite decent browser support. Steve Faulkner explains how you can use it12 and also describes other attributes to properly hide elements.

Accessibility Link

JavaScript Link

Streams in JavaScript18
Jake Archibald explains how we can serve content more efficiently and faster using Streams19.

CSS / Sass Link

Work & Life Link

Go beyond… Link

And with that, I’ll close for this week. If you like what I write each week, please support me with a donation25 or share this resource with other people. You can learn more about the costs of the project here26. It’s available via E-Mail, RSS and online.

Thanks and all the best,
Anselm

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2016/01/web-development-reading-list-121/#comments
  2. 2 https://developer.mozilla.org/en-US/Firefox/Releases/44
  3. 3 https://blog.chromium.org/2016/01/introducing-security-panel-in-devtools.html
  4. 4 https://medium.com/@franciov/how-to-make-your-web-app-installable-8b71571605e
  5. 5 https://medium.com/accurat-studio/beautiful-reasons-c1c6926ab7d7
  6. 6 https://medium.com/accurat-studio/beautiful-reasons-c1c6926ab7d7
  7. 7 https://medium.com/accurat-studio/beautiful-reasons-c1c6926ab7d7
  8. 8 http://logomono.com/
  9. 9 http://bradfrost.com/blog/post/performance-budget-builder/
  10. 10 http://www.responsivebreakpoints.com/
  11. 11 https://www.smashingmagazine.com/2016/01/responsive-image-breakpoints-generation/
  12. 12 https://www.paciellogroup.com/blog/2016/01/the-state-of-hidden-content-support-in-2016/
  13. 13 http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html
  14. 14 http://simplyaccessible.com/article/the-accessibility-stack/
  15. 15 https://jakearchibald.com/2016/streams-ftw/
  16. 16 https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/
  17. 17 https://hacks.mozilla.org/2016/01/web-push-arrives-in-firefox-44/
  18. 18 https://jakearchibald.com/2016/streams-ftw/
  19. 19 https://jakearchibald.com/2016/streams-ftw/
  20. 20 http://thatemil.com/blog/2016/01/23/floating-label-no-js-pure-css/
  21. 21 https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a
  22. 22 http://book.mixu.net/css/
  23. 23 http://alistapart.com/article/the-high-price-of-free
  24. 24 http://www.cbc.ca/beta/news/business/uber-canada-gig-economy-1.3414206
  25. 25 https://wdrl.info/donate
  26. 26 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

    Stop linking to Medium, you’re killing the open web:

    http://scripting.com/liveblog/users/davewiner/2016/01/20/0900.html

    0
    • 2

      Anselm Hannemann

      January 29, 2016 7:58 pm

      Hey Anonymouse, as much as I’d love to, I don’t see an alternative. Be sure I always search if this is only a cross-post and link to the original site if it is. But I still want to link great content and can’t make it dependent on some platforms people write on. We should rather try to educate people how to publish elsewhere and maybe should evolve our writing tools so that the experience is as good or even better than on the mentioned site.

      4
  2. 3

    Floating labels in pure CSS is nothing new but that’s still a good reference… here’s an article on CSS Tricks dated 2014: https://css-tricks.com/float-labels-css/

    0
    • 4

      Anselm Hannemann

      January 29, 2016 8:00 pm

      Right, that’s entirely true. Funnily, I stumbled over the link in my list in a tweet from Chris Coyier mentioning this one as the improvement / better version of what you linked here. Thanks for adding it as a reference here :)

      0
  3. 5

    Brad Frost has constructed a super-simple Efficiency Price range Builder. You just need to enter your private project ambitions to see if you match your performance spending budget or not.
    Given that responsive images are a issue you can (and should) use now in production, we face the problem of resizing our photos in various resolutions, sizes and qualities. There are some neat server integrations that support you with that, nonetheless, for numerous instances, it is nevertheless a difficulty. Fortunately, there’s now an open source tool you can use, along with a guide on the complete subject.

    0
  4. 6

    Chrome 48 is stable since Jan 20, and the Security tab is right there in the dev tools. ;)

    1

↑ Back to top