🏝️ In an attempt to see some sunshine, the newsletter is taking a break next week — I'll be back in your inbox on Wednesday, August 30. Catch you then!
Chris Brandrick, your editor

Together with  Bryntum
🚀 Frontend Focus

#​606 — August 16, 2023 | Read on the web

How to Make Lists Accessible — This guide covers why accessible lists and tables matter, how to make them accessible, and how to fix inaccessible lists and tables.

Whitney Lewis

Testing Your Refresh Rate with a CSS Trick? — This is a fascinating way to show users the refresh rate of their screen by spinning a specially designed zoetrope-like disc graphic at speed. As it spins, the numbers representing the viewer’s refresh rate should remain visually stable unlike surrounding numbers.

Luna on cohost

Bryntum Grid - A Lightning Fast JavaScript Data Grid — Try a professional JS data grid component which lets you edit, sort, group and filter datasets with fantastic UX & performance. Includes a TreeGrid, API docs and lots of demos. Seamlessly integrates with React, Angular & Vue apps.

Bryntum Grid sponsor

Alt Text Hall of Fame: Celebrating Well-Written Image Descriptions — Why is alt text important? This site goes some way to explain via a showcase of good examples.

Stefan Bohacek

'It’s Time to End Damaging Website Design Practices That May Harm Your Users' — The UK’s Information Commissioner’s Office (ICO) along with the Competition & Markets Authority (CMA) have released a joint paper on harmful design in digital markets. PDF here.

Almond and Hayter


📙 Tutorials, Articles & Opinion

Four New CSS Features for Smooth Entry and Exit Animations — This is a solid look at new capabilities found in Chrome 116 and 117 that enable smooth animations and transitions for discrete properties. Lots of good visuals and code examples.

Kravets and Arhar (Chrome Developers)

An Overview of CSS Sizing Units — Explore the four broad categories of CSS sizing units, how to apply them in your layouts, and how to choose the best ones in each scenario.

Tiffany Brown

Chrome Extension Maker Tells of Pressure to Sell Out — A popular Chrome extension creator has received more than 130 solicitations to monetize their browser tool over the years. “Anyone with sizable audience in this surveillance economy is invited to stuff their add-ons with tracking and ads”.

Thomas Claburn interview

The Future of Open Source: SaaS, the Final Frontier — Software has moved to the cloud … and open source is moving with it. Join SaaS leaders for the discussion on Sept 7.

Sentry sponsor

A Fancy Hover Effect For Your Avatar — A quick look at how to create a neat ‘pop out’ hover effect using CSS.

Temani Afif

User-Adaptive Interfaces with AccentColor — A quick tip on respecting user preferences for form controls via the new AccentColor keyword.

Ollie Williams

Bringing Sharp to WebAssembly and WebContainers — A look at how it’s possible to bring Sharp, a popular Node.js image manipulation module, into the browser. This is futuristic stuff.

Ingvar Stepanyan

▶  Drawing a Cute Character with CSS — In roughly ten minutes Alvaro shows us how to create an Anime-style character using just CSS. The effort took around an hour and twenty minutes, but we get to watch along via a time-lapse.

Alvaro Montoro

Prepare Your Firefox Desktop Extension for the Upcoming Android Release“Firefox will become the only major Android browser to support an open extension ecosystem.”

Scott DeVaney (Mozilla)

Introducing the Energy Saving Concept of Lower Carbon Graphics — This article is focused specifically on TVs and saving energy based on what colors are shown on screen, but the findings may be of interest to us frontend devs — who often make a lot of decisions about what ends up on many a variety of screen.

Colin Warhurst (BBC)

▶  Create Direction-Aware Effects using Modern CSS
Kevin Powell

How to Use the CSS Grid repeat() Function
Ralph Mason

Tailwind, and the 'Death of Web Craftsmanship'
Jeff Sandberg opinion

'It's Pretty Rude of OpenAI to Make Their Use of Your Content Opt‑Out'
Hidde de Vries

🧑‍💻 JOBS

Find Frontend Engineering Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

🔧 Code, Tools & Resources

OddContrast — A straightforward color contrast checker with Oklch, Oklab, Display P3, and more – results all meet WCAG 2 accessibility standards.


Iconbuddy: An Icon Search Engine with 180K+ Open Source Icons — You can search for an icon collection or individual icon (SVG, PNG, etc.), or create an account to manage your collections. Any icon you select can be edited and customized before exporting.


React Authentication — Without Complexity — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now.

Userfront sponsor

Primo — A visual CMS that generates a static site. Primo itself is a SvelteKit application using Supabase as a backend.


twentyhq/favicon: Fetch Favicons From Any Website — It’s an API that lets you grab a website’s favicon/logo via a URL like the following for Apple's site: https:​//favicon.twenty​.com/apple.com


LangUI: An Library of 60+ Tailwind Components for AI and GPT Projects — The components are fairly generic, so not necessarily restricted to use for AI/GPT, as advertised. But they’re nice and include dark and light modes, which you can try out live in the docs.

Ahmad Bilal

✏️ Web Font of the Week

Bricolage Grotesque — A versatile free, open-source variable font designed by Mathieu Triay with "French attitude and British mannerisms" across three axis: weight, width and optical size.

It's on Google Fonts too.

🍞 ..and finally

Flying Toasters Screensaver — After Dark in CSS — ..remember this? It’s a CSS recreation of the iconic Flying Toasters screensaver from the After Dark collection (which was sold on CD in the late 80s / early 90s). Bryan has been busy recreating a handful of them - a lovely little blast of nostalgia.

Bryan Braun