Monthly Web Development Update 10/2017: CSS Grid, CAA Pitfalls, And Image Optimization



Smashing Conf Barcelona

You know, we use ad-blockers as well. 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. our upcoming SmashingConf Barcelona,
dedicated to smart front-end techniques and design patterns.

Editor’s Note: Welcome to this month’s web development update. Anselm has summarized the most important happenings in the web community that have taken place over the past few weeks in one handy list for you. Enjoy!

As web developers, we’re working in a very diverse environment: We have countless options to specialize in, but it’s impossible to keep up with everything. This week I read an article1 from a developer who realized that even though he has been building stuff for the web for over seven years, sometimes he just doesn’t understand what’s going on: “I’m slamming my keyboard in frustration as another mysterious error appears in my build script,” he writes. For him, writing JavaScript isn’t fun anymore. The tool chain got too complex, the workflows are built mainly for developer convenience, and many things that exist in the languages itself are reinvented in external libraries.

Now when I look at the articles I collected for you this month, I can relate to the kind of frustration he’s feeling. Soon we won’t be able to use .dev domains anymore, HTTPS CAA checks don’t work with private network interfaces, and when I look at a (admittedly great) tutorial on how we can replace scroll events with IntersectionObserver, I see code that might have better performance but that is more complex as what we used to do with EventListener.

The web is developing and changing so fast, and we need to acknowledge that we as individual persons can’t know and understand everything. And that’s fine. Choose what you want to do, set your priorities, and, most importantly of all, don’t hesitate to hire someone else for the things you can’t do on your own.

News Link

  • Mattias Geniar reminds us that Chrome, according to a recent commit2 in Chromium, will very soon preload .dev domains as HTTPS via preloaded HSTS3. Google bought the domain name, and they now want it to be accessible only via HTTPS. So if you use a .dev name in your projects (which often is the case on your local machine, registered manually via the hosts file), you should switch to the reserved .test domain name now or consider using localhost instead. Once the patch lands in Chrome, you’ll not be able to access your projects anymore without a valid TLS certificate in place.
  • HTTP Immutable Responses are now an official Internet standard4, and they are already available in most browsers.
  • React 16 is out now5 — under a full MIT license which finally ends the debate about the previously used patent-clause copyright license. The new version comes with a rewritten core, better error handling, custom DOM attributes, and it returns fragments and strings (so no more useless span-elements). Also, it’s footprint has decreased by 30%.

Tooling Link

  • Infusion6 is an inclusive, accessible documentation builder.
  • Sketch 47 is out7 with two major new features: libraries and smooth corners. Especially libraries are a huge step forward as they allow us to sync, share and update symbols from any Sketch document and even in collaboration with other people.

Web Performance Link

  • Essential Image Optimization8” by Addy Osmani is a free eBook that explains almost everything you can and should know about image optimization for the web. Be sure to take a look at it.
  • News from Cloudflare9: You’ll soon be able to deploy JavaScript to Cloudflare’s edge, written against an API similar to Service Workers. Sounds pretty amazing.
Essential Image Optimization10
Images are still the number one bloat on the web. Addy Osmani’s new eBook11 explains how you can change that by compressing your images efficiently. (Image credit12)

CSS Link

Slack Grid17
The Slack engineering team lets us sneak a peek behind the scenes of their recent CSS Grid powered website redesign18. (Image credit19)

JavaScript Link

Accessibility Link

Accessible tabbed interfaces25
Heydon Pickering explains how to make tabbed interfaces accessible26. (Image credit27)

Security Link

Privacy Link

Work & Life Link

Improving Focus36
Get more out of your work week without working more hours. Ivan Mir shares how he did it37. (Image credit38)

Going Beyond… Link

  • More and more people working at Google, Twitter, Facebook and other tech giants disconnect themselves from smartphones. By radically limiting the feature set to a normal wireless phone, they want to gain back control over their lives. Paul Lewis spoke to some people and researched why tech insiders who actually build the apps and operating systems for smartphones and other smart devices fear a smartphone dystopia39. A good read on mental health issues.
  • Here are 10 hours of ambient arctic sounds to help you relax, meditate, or study40.
  • Julian Oliver shares how he used wind energy to mine cryptocurrency and fund climate research41.
  • Jens Oliver Meiert emailed the companies that are responsible for 71% of all greenhouse gas emissions. Here’s what they replied42, but the most important point about this experiment is what the author concludes:
  • “Perhaps I didn’t get to email the people who’re truly responsible here; and what they do with my requests, I don’t know, either.
    But the point is that reaching out is one of the few options we have at our disposal; and if even one small thing changes and improves, it may be a success. And as such I believe more people should reach out. Instead of waiting for politicians or law enforcement to act, let’s act ourselves, let’s make ourselves heard. Constructive action always helps.”

We hope you enjoyed this Web Development Update. The next one is scheduled for November 17th. Stay tuned!

  1. 1 https://medium.com/@paulvm/javascript-development-is-not-fun-for-me-anymore-ac4e9d7b89a3
  2. 2 https://chromium-review.googlesource.com/c/chromium/src/+/669923
  3. 3 https://ma.ttias.be/chrome-force-dev-domains-https-via-preloaded-hsts/
  4. 4 https://tools.ietf.org/html/rfc8246
  5. 5 https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html
  6. 6 https://developer.paciellogroup.com/blog/2017/09/infusion-an-inclusive-documentation-builder/
  7. 7 https://blog.sketchapp.com/introducing-libraries-and-smooth-corners-in-sketch-47-2abc5dfc1fb3
  8. 8 https://images.guide/
  9. 9 https://blog.cloudflare.com/introducing-cloudflare-workers/
  10. 10 https://images.guide/
  11. 11 https://images.guide/
  12. 12 https://images.guide/
  13. 13 https://mozilladevelopers.github.io/playground/
  14. 14 https://github.com/w3c/csswg-drafts/issues/1170
  15. 15 https://kazzkiq.github.io/balloon.css/
  16. 16 https://slack.engineering/rebuilding-slack-com-b124c405c193
  17. 17 https://slack.engineering/rebuilding-slack-com-b124c405c193
  18. 18 https://slack.engineering/rebuilding-slack-com-b124c405c193
  19. 19 https://slack.engineering/rebuilding-slack-com-b124c405c193
  20. 20 https://developers.google.com/web/updates/2017/09/sticky-headers
  21. 21 https://developers.google.com/web/updates/2017/10/intl-pluralrules
  22. 22 https://inclusive-components.design/tabbed-interfaces/
  23. 23 https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939
  24. 24 http://tech.trivago.com/2017/09/26/accessibility-at-trivago/
  25. 25 https://inclusive-components.design/tabbed-interfaces/
  26. 26 https://inclusive-components.design/tabbed-interfaces/
  27. 27 https://inclusive-components.design/tabbed-interfaces/
  28. 28 http://news.uis.cam.ac.uk/articles/2017/09/20/unable-to-issue-tls-certs-for-names-in-private-cam-ac-uk
  29. 29 https://framework.zend.com/blog/2017-08-17-php72-argon2-hash-password.html
  30. 30 https://www.sec-consult.com/en/blog/2017/10/fake-crypto-microsoft-outlook-smime-cleartext-disclosure-cve-2017-11776/index.html
  31. 31 https://carlchenet.com/the-slack-threat/
  32. 32 https://www.theguardian.com/technology/2017/sep/26/tinder-personal-data-dating-app-messages-hacked-sold
  33. 33 https://labs.detectify.com/2017/09/26/trackmania-a-chrome-plugin-to-stalk-your-friends/
  34. 34 https://qotoqot.com/blog/improving-focus/
  35. 35 https://medium.com/@jgolden/lessons-learned-scaling-airbnb-100x-b862364fb3a7
  36. 36 https://qotoqot.com/blog/improving-focus/
  37. 37 https://qotoqot.com/blog/improving-focus/
  38. 38 https://qotoqot.com/blog/improving-focus/
  39. 39 https://www.theguardian.com/technology/2017/oct/05/smartphone-addiction-silicon-valley-dystopia
  40. 40 http://www.openculture.com/2017/03/10-hours-of-ambient-arctic-sounds-will-help-you-relax-meditate-study-sleep.html
  41. 41 https://julianoliver.com/output/harvest
  42. 42 https://meiert.com/en/blog/email-all-the-companies/

↑ Back to top

Tweet itShare on Facebook



Source link