Monthly Web Development Update 11/2017: Browser News, KRACK and Vary Header Caching

General

• Kailash Ahirwar has created essential cheat sheets for machine learning and deep learning engineers. A massive resource and very recommended if you’re working with any of these engines.
• David Yates’ plea for “RSS: there’s nothing better” is a thoughtful column that praises the idea of the good old RSS over the siloed, algorithm-driven feeds of social media services.

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.

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.

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

• We know targeted ads can be a bit frightening sometimes when they show up and are incredibly accurate. With mobile ads, it’s even worse: Andy Greenberg shares a study that shows that it takes only $1000 to track someone’s location using mobile ads.

Accessibility

• Scott Vinkle explains how we can create accessible React apps.
• Laura Kalbag wrote a book called “Accessibility for Everyone”. Here’s a short excerpt explaining how to plan for 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.

JavaScript

• Lea Verou shares how we can use different remote and local resource URLs with Service Workers.
• Dustin Driver explains the fundamentals of the Firefox Debugger and how to go beyond console.log.
• Jake Archibald wrote about Netflix removing client-side React and why this step makes the site more robust while still benefiting from the advantages of React.
• GitHub open-sourced their own client-side accessibility error scanner. It’s basically a JavaScript module that you import into your codebase, and that then reports back basic issues such as images without alt attribute, links without labels and similar accessibility errors.

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!