Monthly Web Development Update 112017: Browser News, KRACK and Vary Header Caching

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.

Our dear friend Anselm Hannemann summarizes what happened in the web community in the past few weeks in one handy list, so that you can catch up on everything new and important. Enjoy!

Welcome back to our monthly reading list. Before we dive right into all the amazing content I stumbled upon — admittedly, this one is going to be quite a long update — I want to make a personal announcement. This week I launched a personal project called Colloq, a new conference and event service for users and organizers. If you’re going to events or are organizing one or if you’re interested in the recorded content of conferences, this could be for you. So if you like, go ahead and check it out.

In this issue, we’ll focus on some usually rather underaddressed things, such as numerals in web typography, variable fonts, or the image async attribute that’s coming to Chrome soon. So without further ado, let’s get started.

News

  • WebKit just got support for the Touch Bar Web API that will make use of the menuitem. It’s still in WebKit trunk currently and likely to land in Safari next year at the earliest.
  • Chrome 62 was released this week with some important updates to the Network Information API that now reflects the actual connection type even when tethering. Support for OpenType Variable Fonts and Media Capture from DOM elements also landed in the new version. Notably, Chrome 62 on iOS got support for the Payment Request API which is interesting because the iOS WebKit doesn’t support it yet in stable channel. It seems that they used a custom extension to support this feature. Might get interesting to see what else could be supported this way.
  • This week’s Safari Technology Preview 42 brings along font-display loading behaviors and <link rel=preconnect> support.
  • With the new Windows 10 fall update, Edge 16 is pushed to customers — with full CSS Grid support, object-fit and object-position, the Payment Request API, Service Worker preview behind flags, and Motion Controllers in WebVR.
Motion controllers in Edge
WebVR for Edge has added support for motion controllers that allow for fine grained interaction with digital objects in virtual reality. (Image credit)

General

UI/UX

  • Right-to-left development is quite hard already but designing for mobile design is a challenge.
  • Inter UI is a nice, completely free to use open-source font family optimized for screen readability.
  • Adobe announced the first stable version of their screen design tool XD at this year’s MAX conference. Besides a lot of smaller improvements, XD now supports sharing, as well as first-class integrations of third-party tools like Zeplin and Sympli. Apart from that, Adobe provided major updates for nearly all their software products during the event.
  • InVision had a big announcement to make this week: They are going to bring a new screen design tool called “Studio” to the market in January and now invite beta testers to preview it.
Studio
InVision announced Studio, a new screen design tool that will be released publicly in January. (Image credit)

Web Performance

  • Vlad Krasnov got the chance to compare the newest server processors at Cloudflare. The results are pretty interesting: Qualcomm achieves a similar performance as the fastest Intel processors, but it needs about 30% less power, sometimes even less. So while newer Qualcomm chips might have some issues with software incompatibilities, it’s going to be interesting what will happen on the server market. Especially with large data centers in mind where saving energy is quite important — not only because our planet benefits from less power consumption but also because it’s cheaper.
  • David Jonathan Ross compared the file sizes of normal web fonts to a variable font file. Depending on how many font styles are used on a website, you can save 44% with a variable font.
  • Nikita Prokopov shares how one single option that Chrome promoted ruined the performance of his web application.
  • Andrew Betts summed up his knowledge about a great HTTP feature in the article “Understanding The Vary Header”.
  • Chrome is implementing an async attribute for HTMLImageElement and SVGImageElement. It’ll have two states: “On” will indicate that the developer prefers responsiveness and performance over the atomic presentation of image and non-image content, while “off” will indicate that the developer prefers atomic presentation of content over responsiveness.
  • Alexey Ivanov shares how to optimize web servers for high throughput and low latency. But please note: These are small, fine-tuning methods that can be very useful but we should apply them one after another, measure them and then decide if they are useful for the project or not. A thoughtful post that gives us insights into how the Dropbox team improves their edge network servers.

Tooling

  • Webpack Monitor is a nice dashboard for your JavaScript toolchain. It gives insights into bundle size, the individual parts of the bundle and how the bundle and its size change over time. With tips for optimizing the output, the dashboard is quite useful if you care about reducing the payload for users on your website.
Webpack Monitor
Webpack Monitor displays your bundle so you can make informed decisions about your optimizations. (Image credit)

Security

  • This week, the “KRACK”-attack was widely discussed. It’s effectively breaking WPA2 encryption on most WiFi hardware. But vendors aren’t sleeping, some already updated their systems and offer software updates for the devices which you should patch as soon as possible. One thing to note here is that websites that use HSTS preloading aren’t affected by the issue, which reminds us that we should consider adding this header to our websites.

Privacy

Accessibility

CSS

  • Vincent De Oliveira wrote about the amazing CSS element() function which is only available in Firefox currently (but that might change). Actually, it’s not even a new function, but it allows us to use images from the HTML DOM in our CSS, e.g. for a background-image.
  • Richard Rutter wrote a guide about how to use old-style numerals on the web with the font-variant-numeric CSS property, if available. Proper sub- and superscripts are explained, too, and we can learn when to use which feature for a specific purpose.
Web typography
Medieval scribes and Renaissance printers placed notes in the margins rather than at the bottom — no need for superscripts. But how should we handle sub- and superscripts on the web? (Image credit: Einsiedeln, Stiftsbibliothek, Codex 172(1128), via Richard Rutter)

JavaScript

Work & Life

  • 200 universities just launched 560 free online courses. Here’s the full list.

Going Beyond…

  • The Guardian recently published an interesting article called “Ashamed to work in Silicon Valley: how techies became the new bankers”. Seeing that working at tech giants like Facebook is considered negatively by a growing number of people is something I didn’t expect. The article also shares that employees at such companies are even ashamed of their jobs — an interesting change when you remember how most people craved to land a job at one of these companies only until this year.
  • It’s a common question that I’ve asked myself quite often in the past that now has been answered: Electric cars emit significantly fewer greenhouse gases over their lifetimes as diesel engines, as a new study found out. Even when they are powered by the most carbon-intensive energy.
  • A chatbot called DoNotPay has saved motorists millions in parking fines — without charging a cent. Its next target: divorce law. And airlines, landlords, and telemarketers will follow, too, in the future.

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

Further Reading

Smashing Editorial (mrn)