Monthly Web Development Update 22018: The Grown-Up Web, Branding Details, And Browser Fast Forward

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.

Staying on top of the newest techniques, browser updates, and hot topics can be hard. Anselm Hannemann summarized what happened in the web industry in the past few weeks, so you can easily catch up on everything new and important.

Every profession is a wide field where many people find their very own, custom niches. So are design and web development today. I started building my first website with framesets and HTML4.0, images and a super limited set of CSS, and — oh so fancy — GIFs and inline JavaScript (remember the onclick="" attribute?) about one and a half decades ago. It took me four days to learn the initial, necessary skills for that.

But times are very different today, and when I see how capable the web has become, it’s reasonable to say that it can give people a hard time to start out in this field, and it can be reasonable for people to say that they want to focus on one specific part of web development only. Nowadays, we have JavaScript developers who don’t know much HTML or CSS, and we have developers who aren’t able to work on a modern JavaScript stack but are heroes in what they achieve with CSS. There are people specializing in web font loading, in web performance, in security, in privacy, or in usability.

Web development has grown up to be a solid profession — something that needs a vast amount of knowledge to be an expert in, something that cannot be learned in a few days anymore. Instead, we’re now able to build applications on the web and do things I would never have imagined the web to be capable of when I started out 16 years ago. If we look at how much effort it is to get into woodworking, for example, we realize that web development isn’t much different. Of course, one can achieve some result in a few hours, but producing something that lasts, something that is solid and looks great requires a lot of knowledge, experience, failures, and patience. So does building a great web experience.

News

  • The big news from browser vendors don’t stop coming in: Google Chrome now announced that starting in Chrome 68 (to be released in July 2018) the browser will mark non-secure sites (HTTP) as “not secure” — the end of non-HTTPS websites. I just imagine all the clients with their small business sites and portfolios desperate about this change. It’s great to see the shift to a more secure web, but sometimes I have the feeling that those who decide don’t think enough about the impact their decisions have on small entities using the Internet as well.
  • Safari’s Technology Preview 49 brings some interesting features: The Intelligent Tracking Protection now has a debug tool in experimental mode, column-gap is now supporting %-values, active-descendant is supported, too, and Console will throw a warning if AppCache is used.
  • Here we go with the announcement of the last major browser vendor to support Progressive Web Apps: this time Microsoft in Windows and the Edge browser. Edge 17 will come with Service Workers and push notifications, but what's even more interesting is that the company shares their strategy on how they will support such apps at an operating system level: The Microsoft Store will start listing Progressive Web Apps by manual submission which is a big step forward for making web apps as usable as native apps. I can imagine many Electron apps to become obsolete if this concept gets adopted by other OS vendors as well.
  • Google Chrome 64 is out and brings ResizeObserver, a way stronger popup blocker mechanism. window.alert won't change the focus anymore, and, to save bandwidth, the new Chrome also changes the preload behavior of media files to metadata only.
  • In the upcoming Chrome version 65, the browser will block certificates from Symantec’s Legacy PKI and, to protect users' safety, the download-attribute if the target is a cross-origin reference.
  • Firefox 58 was released this week with big performance improvements. It throttles timers in background tabs, brings font-display as a CSS property, and supports Intl.PluralRules. Also new is that the WebVR API is enabled by default on macOS now, and WebAssembly has gotten the amazing streaming compiler.
  • Safari 11.1 is shipping with iOS 11.3 and macOS 10.13.4. It is also available in older macOS 10.12.6 and 10.11.6 versions. The update brings Service Workers, the Payment Request API including Apple Pay, HTMLImageElement.decode(), the File and Directory Entries API, Beacon API, video as an image asset in `` elements, support for Encrypted Media Extensions in Safari on iOS, support for allow="camera" in WebRTC and Media Capture, the CSS font-display property to control flash of unstyled text with web fonts, and the Web App Manifest. Security-wise it adds support for subresource integrity, "website not secure" warnings, a frozen Safari User-Agent string. I think this marks quite a milestone that shows that Apple is putting a lot of effort into keeping Safari up to date. It's also interesting to see that Safari automatically drops old Service Workers that haven’t been used in a long time to not waste users’ disc space.
Firefox streaming and tiering compiler
Firefox 58 includes a new two-tiered compiler that compiles code 10–15 times faster than the optimizing compiler. (Image credit)

General

  • Frank Chimero published a new article in which he explains that it's normal to struggle with constantly changing technologies. It's also a fun journey through starting out in a business and exploring the in-depth details of a craft.
  • Eric Meyer is one of the people who have worked with CSS since the beginning and have deep insights into how it developed. He now wrote up some thoughts on how the complexity of CSS changed over time.
  • Vitaly Friedman wrote an article in which he asks us as developers, us as company founders to respect users, and why it should matter more to all of us.
  • Last year, Matt Ludwig published an article about the problem of software compatibility over time and why a Progressive Web App rewrite will be the solution to make it still work in fifty years. The fallacy here is to think that the web is the same as twenty-five years ago. Today we face browsers removing a lot of APIs after a few years, putting existing features behind an HTTPS wall, and developers building code based on countless dependencies that are abandoned after some time by their authors. And once we’re building upon anything that is not the plain web standard, we’re not in a position anymore to say that the code will last for long.
  • Tim Kadlec is questioning the two faces of Google AMP and claims that it can be either a Google search marketing tool or a tool for the open web to improve site performance but not both, as it’s trying to be.
  • John Cobb shares why he started to think about code quality differently and why code reviews need to involve more than just viewing the code.

UI/UX

  • This case study of how the Lufthansa brand evolved its design language and logo over time, including the latest subtle but still very different branding change, shows how much small details matter when it comes to improving a brand’s visual appearance.
  • Naema Baskanderi shares best practices for modal windows and dialogs, analyzing well-known modals and improving them.
Best Practices For Modals
Modals can be annoying and users often automatically dismiss these windows. Naema Baskanderi shares what you can do to ensure your modal doesn't get in the way. (Image credit)

Privacy

Security

Tooling

DevTools Contrast Checker
Coming soon to Chrome DevTools: a contrast ratio checker in the color picker. (Image credit)

Web Performance

HTML & SVG

  • Did you know that for accessible tables it is required to have a caption element in your HTML? Stefan Judis explains how to do it.

JavaScript

Stimulus
The JavaScript framework Stimulus is designed to augment your HTML. (Image credit)

CSS

Accessibility

Work & Life

Going Beyond…

Finally, I wrote up some personal notes about dealing with Slack notifications and about why using acronyms is a bad idea. If you have any thoughts about it, you're welcome to reply to me here or on Twitter.

We hope you enjoyed this Web Development Update. The next one is scheduled for March 16th. Stay tuned.

Further Reading

Smashing Editorial (cm, mrn)