#408 — September 11, 2019

Read on the Web

Frontend Focus

▶  Horrible Web Interfaces and How to Build Them — This entertaining talk from React Rally looks at a variety of ‘horrible’ Web-based interface approaches and the underlying technologies involved. I particularly like the ‘gravity’-based volume control.

Anthony Frehner

Google Is Evolving “nofollow” with New Ways to Identify The Nature of Links — Google introduced rel=’nofollow’ in 2005 as a way for site owners to mark untrusted links that shouldn’t receive any PageRank-related credit in Google’s algorithms. It took off, but now Google is introducing two new rel values for specific types of content.


New Course: ♿️ Accessibility in JavaScript Applications — Make innovative and inclusive JavaScript-powered web apps. You'll learn to remove barriers and allow people with disabilities to use your modern JavaScript web applications in Marcy's new course.

Frontend Masters sponsor

Speeding Up The Web with the Save-Data Header — The Save-Data header field is a request header that indicates a client’s preference for reduced data usage — it’s not particularly new, but this is a good look at what it can achieve.

Matt Hobbs

Caniuse and MDN Compatibility Data Collaboration — MDN’s browser compatibility data is now integrated into the popular caniuse website, with the goal of surfacing even more web compatibility info to web developers.

Florian Scholz & Alexis Deveria (Mozilla Hacks)

What's New In DevTools for Chrome 78 — Including Lighthouse 5.2 in the Audits panel, and Largest Contentful Paint in the Performance panel.

Google Developers

An Animated Chart of Browser Usage Share 1996 - 2019 — One of those popular visuals showing the rise and fall of browsers over the last 20 or so years.


💻 Jobs

Mobile App Dev Wanted for High-Growth Fundraising Platform — This company has a big vision, and everyone embraces it, not because it’s a weird cult or something, but only because it’s ethical and cool.


Find a Frontend job through Vettery — Make a free profile, name your salary, and connect with hiring managers from top employers.


📙 Articles, Tutorials & Opinion

So You’re Being Sued for Accessibility Non-Compliance? — Compliance with web accessibility requirements is an important legal consideration — here are some tips to get started.

Bekah Rice (Telerik)

Less Data Doesn't Mean a Lesser Experience — Thoughts on how you can provide a good user experience for those looking to save data, without breaking things.

Tim Kadlec

Learn GraphQL in 2 Hours — Open-source tutorials for React, React Native, Vue, Angular, Android, iOS & Flutter developers that'll take you just 2 hours to complete.

Hasura sponsor

The Making of an Animated Favicon — Dynamically changing the pixels in a favicon to display upload progress – A lot of effort here, but it’s a neat little detail.

Preethi Sam

Mastering The HTML <audio> Tag — An in-depth guide covering the HTML <audio> tag and how it can be used.

Jean-Baptiste Jung

Understanding Specificity in CSS — Covers the basics of specificity in CSS and why you should never need !important.

Jess Mitchell

A Beginner's Guide to 'Scrollytelling' — Plenty of examples here on how scrolling can help tell a compelling and dynamic story.

Jeff Cardello

Using rel="preconnect" to Establish Network Connections Early and Increase Performance

Chris Coyier

Why to Stop Infinite Scrolling on Your Website Now — We can’t say we’re fans either.

Monish Reddy

💡 Tip of the Week

supported by https://pantheon.io

Using :focus-within to highlight a form

If you're working on a form with multiple sections, then the :focus-within property may prove useful.

This CSS pseudo-class can be utilised to highlight an entire form area when the user selects any of a form container's input fields.

The example image below demonstrates this (you can also see it in action in this little CodePen demo). The user has selected the Name input, and the entire form is highlighted in green:

Using this property is simple enough — just append the :focus-within selector on to the element you wish to highlight. Then, when any of the elements descendants are bought into focused, the desired change will occur.

form:focus-within { background: #98FB98; }

Browser support for this currently sits at around 82% — IE, Edge and Samsung Internet are amonst those yet to implement support.

This Tip of the Week is sponsored Pantheon, the WebOps platform built for agility. Learn what WebOps is and how it can help drive agile transformation and business results.

🔧 Code, Tools & Resources

ruffle: A Flash Player Emulator — An Adobe Flash Player emulator written in the Rust programming language. Ruffle targets both the desktop and the web using WebAssembly. There's a demo here. Related: The once-popular Flash website Newgrounds are planning to make use of this.


Make Your Images & Videos Load Fast & Look Beautiful with Cloudinary

Cloudinary sponsor

A Flexbox Cheatsheet Inside VS Code — This little VS Code extension builds upon the work done by Darek Kay - offering a quick reference guide within VS Code, meaning you can look things up quickly without switching context.

Dzhavat Ushev

   🗓 Upcoming Events

CSSConf, September 25 — Budapest, Hungary — A community conference dedicated to the designers and developers who love CSS.

Fronteers Conference, October 3-4 — Amsterdam, Netherlands — One of Europe’s premiere conferences on front-end web development.

SmashingConf New York, October 15-16 — New York, USA — The conference is sold out, but some workshop tickets are still available.

Accessibility Scotland, October 25 — Edinburgh, UK — One day of talks. Friendly, open discussion about accessibility.