Menu Search
Jump to the content X X
Smashing Conf San Francisco

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 San Francisco, dedicated to smart front-end techniques and design patterns.

Web Development Reading List #168: Preload With Webpack, A Guide To Security Headers, And Service Worker Fallacies

With great power comes great responsibility. This week I found some resources that got me thinking: Service Workers that download 16MB of data on the user’s first visit? A Bluetooth API in the browser? Private browser windows that aren’t so private at all?

We have a lot of methods and strategies to fix these kinds of things. We can give the browser smarter hints, put security headers and HTTPS in place, serve web fonts locally, and build safer network protocols. The responsibility is in our hands.

Further Reading on SmashingMag: Link

News Link

  • Joseph Medley tells us about API deprecations and removals in the upcoming Chrome 575. <keygen> will be removed, for example, as well as the prefix in some webkit-prefixed APIs.
  • Chrome 56 is here6 with support for the Web Bluetooth API and the WebGL 2.0 API. The new version also finally supports position: sticky (the only browser still lacking support for it now is MS Edge).
  • Safari 10.1 will be out soon7 with a lot of new features: fetch(), Custom Elements, CSS Grid Layout, Reduced Motion Media Query, and ES6 native modules are notable ones.
  • Thanks to browser vendors pushing it aggressively, HTTPS adoption has now reached the tipping point8. Good to see, especially since man-in-the-middle traffic modifications increased a lot on non-encrypted traffic in the last few months. Sadly, these interceptions are not executed by federal authorities or hackers but by companies like Comcast, Norwegian Airlines, hotel WiFi network companies and the like.
Alexa top 1 Million sites redirecting to HTTPS9
A step into the right direction: Analyzing the Alexa top million websites, the percentage of sites that are redirecting users’ browsers from HTTP to HTTPs has doubled from August 2015 to August 201610. (Image credit11)

Tools & Workflows Link

  • Addy Osmani wrote the Webpack plugin preload-webpack-plugin12 for wiring up <link rel='preload'> (and prefetch) automatically.

Security Link

Privacy Link

  • DuckDuckGo published the results of a study they conducted on the question if private browsing really is private14. Interestingly, most people have no idea about what the private mode in browsers exactly does and 84% of Americans would consider trying another major web browser if it offered more features to help protect their privacy. The full paper15 gives interesting insights into how people actually use search engines and how they try to protect their privacy.
Is Private Browsing Really Private?16
Privacy please! DuckDuckGo surveyed 5,710 random Americans to find out what they know about private browsing17 and how they use the common privacy feature.

Web Performance Link

  • Not too long ago, I mentioned an article about QUIC18, Google’s protocol that uses UDP instead of TCP to make transfers to a client even faster than HTTP/2. Now Facebook shares details about their even faster Zero protocol19 that builds on top of QUIC while still being compatible with TCP. I like that there’s now an alternative to Google’s approach and that people think about innovating the core of the Internet, the network itself, again.
  • Nicolas Hoizey analyzes why it’s not a good idea to just hook up Service Workers20 and save all resources offline. Given the fact that a lot of users might never come back or that they simply won’t read through all the pages of a website, downloading megabytes of data on first load might be a very bad practice — especially when we keep data plan costs in mind. Looking at these numbers, the 3MB of an average web page are nearly negligible if a Service Worker loads 16MB of useless data on initial page load without further ado.

Accessibility Link

  • axe-cli21 brings the accessibility testing tool axe-core to the command line. It does require Webdriver but runs smoothly nevertheless. So integrating it into your local workflow or even on a CI server shouldn’t be a problem.

JavaScript 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 email, RSS and online.

— Anselm

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/
  2. 2 https://www.smashingmagazine.com/2016/09/content-security-policy-your-future-best-friend/
  3. 3 https://www.smashingmagazine.com/2016/02/making-a-service-worker/
  4. 4 https://www.smashingmagazine.com/2016/03/managing-mobile-performance-optimization/
  5. 5 https://developers.google.com/web/updates/2017/02/chrome-57-deprecations
  6. 6 https://developers.google.com/web/updates/2017/01/nic56
  7. 7 https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html
  8. 8 https://www.troyhunt.com/https-adoption-has-reached-the-tipping-point/
  9. 9 https://www.troyhunt.com/https-adoption-has-reached-the-tipping-point/
  10. 10 https://www.troyhunt.com/https-adoption-has-reached-the-tipping-point/
  11. 11 https://www.troyhunt.com/https-adoption-has-reached-the-tipping-point/
  12. 12 https://github.com/googlechrome/preload-webpack-plugin
  13. 13 https://blog.appcanary.com/2017/http-security-headers.html
  14. 14 https://spreadprivacy.com/private-browsing-9276d6d16ea4
  15. 15 https://duckduckgo.com/download/Private_Browsing.pdf
  16. 16 https://spreadprivacy.com/private-browsing-9276d6d16ea4
  17. 17 https://spreadprivacy.com/private-browsing-9276d6d16ea4
  18. 18 https://www.smashingmagazine.com/2016/08/web-development-reading-list-148/#web-performance
  19. 19 https://code.facebook.com/posts/608854979307125/building-zero-protocol-for-fast-secure-mobile-connections/
  20. 20 https://nicolas-hoizey.com/2017/01/how-much-data-should-my-service-worker-put-upfront-in-the-offline-cache.html
  21. 21 https://www.npmjs.com/package/axe-cli/
  22. 22 https://github.com/KyleAMathews/typefaces
  23. 23 https://github.com/KyleAMathews/typefaces
  24. 24 https://paul.kinlan.me/detecting-text-in-an-image/
  25. 25 https://wdrl.info/donate
  26. 26 https://wdrl.info/costs/

↑ Back to top Tweet itShare on Facebook

is a freelance front-end developer and architect and cares about sustainable front-end experiences and ethical choices in life. He curates the WDRL, a weekly handcrafted web development newsletter that thousands of developers love, subscribe to, and donate for.

  1. 1

    Note: When you talk about Security, you should include the security issues and concerns behind the Chrome Bluetooth API, too. It’s not just “yet another fancy tool”, but a (possible) data breach nightmare in the making.

    cu, w0lf.

    -1
    • 2

      Anselm Hannemann

      February 10, 2017 8:17 am

      Thank you for this addition. It’s indeed a valid concern and I agree that the implementation that they chose is very weird since it doesn’t comply with other Web API agreement dialogs but shifts responsibility to show some sort of agreement to the user.

      0

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top