Monthly Web Development Update 102017: CSS Grid, CAA Pitfalls, And Image Optimization

About The Author

Anselm is a freelance front-end developer who cares about sustainable front-end experiences and ethical choices in life. He writes the WDRL, and is co-founder … More about Anselm ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 200,000+ folks.

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. In this article, 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 article 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

  • Mattias Geniar reminds us that Chrome, according to a recent commit in Chromium, will very soon preload .dev domains as HTTPS via preloaded HSTS. 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 standard, and they are already available in most browsers.
  • React 16 is out now — 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

  • Infusion is an inclusive, accessible documentation builder.
  • Sketch 47 is out 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

  • Essential Image Optimization” 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 Cloudflare: 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 Optimization
Images are still the number one bloat on the web. Addy Osmani’s new eBook explains how you can change that by compressing your images efficiently. (Image credit)

CSS

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

JavaScript

Accessibility

Accessible tabbed interfaces
Heydon Pickering explains how to make tabbed interfaces accessible. (Image credit)

Security

Privacy

Work & Life

Improving Focus
Get more out of your work week without working more hours. Ivan Mir shares how he did it. (Image credit)

Going Beyond…

“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!

Further Reading

Smashing Editorial (mrn)