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

Web Development Reading List: Announcing Changes, A Design Kit, DNA Malware, And Why Meaning Is An Advantage

Quick Summary

You might have noticed it already: in the past few weeks you might have missed Anselm’s Web Development Reading List issues here on SmashingMag. No worries, from now on, we’ll switch to collecting the most important news of each month in one handy, monthly summary for you. If you’d like to continue reading Anselm’s weekly reading list (and we encourage you to!), you can still do so via email, on wdrl.info or via RSS. — Editorial Team Hello again! I’ll continue publishing this resource and am grateful for everyone who supports my ongoing work. And to celebrate the last weekly edition, I found a lot of great articles for you: Biohacking news that sound like science fiction, advances in deep learning with JavaScript, and a lot more. Happy reading!

Table of Contents
Membership counter

Members support Smashing

Wonderful, friendly people who keep this lil' site alive — and get smarter every day.

Are you smashing, too? →

You might have noticed it already: in the past few weeks you might have missed Anselm’s Web Development Reading List issues here on SmashingMag. No worries, from now on, we’ll switch to collecting the most important news of each month in one handy, monthly summary for you. If you’d like to continue reading Anselm’s weekly reading list (and we encourage you to!), you can still do so via email, on wdrl.info or via RSS. — Editorial Team

Hello again! I’ll continue publishing this resource and am grateful for everyone who supports my ongoing work. And to celebrate the last weekly edition, I found a lot of great articles for you: Biohacking news that sound like science fiction, advances in deep learning with JavaScript, and a lot more. Happy reading!

News

  • The upcoming Chrome 61 (in beta channel now) brings support for JavaScript modules, the Payment Request API on desktop, smooth-scrolling in CSS, 8-digit hex colors (with alpha transparency), and the new Expect-CT HTTP header.
  • Edward Thomson shares why you should upgrade your git installation to 2.14.1 to fix vulnerabilities.
  • Microsoft will change their Edge rendering engine, making it independent of and asynchronous to the main thread.
  • This week, Opera announced the end of Opera Max, their data-saving browser product. The service will still stay active for a while but probably not for too long.

UI/UX

macOS Desktop Kit
The macOS Desktop Kit includes desktop application and web UI elements a designer could need when building a user flow through a web app or constructing a Mac interface. (Image credit)

Tooling

  • Puppeteer is a Node.js library that provides an API to control headless Chrome. It can also be configured to use full (non-headless) Chrome.

Security

Web Performance

  • Andreya Grzegorzewski explains how we can use the Cache API for offline POST requests in Progressive Web Apps. This super cool trick allows us to queue POST requests, such as a form submission/data upload, cache it, and send it to the server once the user is back online.

HTML & SVG

  • If you want to use <details>/<summary> elements together with rem font-size values on your site, be aware that there’s a bug in Safari that renders parts of a website with that CSS combination useless. After tracking it down and debugging it, I finally summarized the case.

Accessibility

10 guidelines to improve your web accessibility
Eva Ferreira shares ten web accessibility guidelines to guarantee access to your site to any person, in spite of disabilities. (Image credit)

JavaScript

  • deeplearn.js is a hardware-accelerated machine intelligence library for the web. You can use it to build and train neural networks in your browser, to play color sequences or detect objects in images, for example.
  • flatpickr is a dependency-free, lightweight and powerful datetime picker.
  • Peter Kröner shares how he achieved immutable arrays and objects in JavaScript in only 33 lines (German article, automatically translated) without any library with ECMAScript Proxies.

CSS

CodePen Directionally-Aware Hover Only With CSS
Giana uses :hover and the sibling selector to apply different styles to elements based on their position and, thus, create a CSS-only, directionally-aware hover effect.

Work & Life

Going Beyond…

—Anselm