WebKit Features in Safari 16.4 — This is a mammoth release, adding 135(!) new features including support for Web Push, a slew of new CSS properties (including margin-trim), Declarative Shadow DOM support, iframe lazy-loading support, devtool changes, and the typical bug fixes. WebKit team member Jen Simmons said:

“It’s hard to express just how massive a release Safari 16.4 is for web developers. Last night, I was reading replies web developers posted on Twitter back in 2021, when I asked what developers need most from WebKit — and the vast majority of things you asked for have now shipped.”

What We Can All Learn from Web Performance Leaders — Case studies from companies like Airbnb, Pinterest, BBC, Zillow, Casper, Shopify, and Leroy Merlin. Learn how they speed up their sites, use performance budgets, create a culture of performance, and measure the impact of site speed on their business.

SpeedCurve sponsor

Visually Hidden Content is a 'Hack' That Needs to Be Resolved, Not Enshrined — In issue 583 we shared Ben Myers piece on why he believes the web needs a native .visually-hidden HTML/CSS technique. Here, Scott shares his take: “while there is a common ruleset for visually hiding content, codifying that to me seems more of a silent acknowledgement that a hack is the best we can do. I don’t agree. The web should be better than that”.

Scott O'Hara

The Ultimate Guide to Image Optimization — Image optimization is the web performance ‘lowest hanging fruit’. Here’s a sound look at how to optimise imagery without sacrificing its quality.

Karolina Szczur

Improving CSS Shapes with Trigonometric Functions — This is an excellent dive into how we can use trigonometric functions to simplify how we approach making regular polygons and how to use these new CSS powers to build even more complex shapes by approximating curves. Lots of code examples and demos here too.

Dan Wilson

Health Benefits of Browser Diversity — With rumblings that Apple may be opening up the iOS ecosystem to other browser engines, and the positive progress the WebKit team are taking with Safari (see above), Tim is optimistic that “a pivot in strategy from Apple could open up so many doors to a healthier web”.

Tim Kadlec

Yes-Code Automation with Retool Workflows — A fastest way to create intelligent, code-first integrations across your entire data stack. No extra infra required.

Retool sponsor

CSS-Only Widgets Are Inaccessible — Notes that any claim that a CSS-only interactive widget is accessible “is probably wrong”.

Adrian Roselli

File Uploads for the Web: Uploading Files with HTML — The first post in a series all about uploading files to the web — this post, covers the steps needed to upload files using only HTML. The second covers JavaScript. Austin tells us more are on the way, looking at architecture planning, performance, security, and more.

Austin Gil

Why APCA as a New Contrast Method? — This document isn’t new, but it popped up on our radar this week — it’s a solid intro/overview of the Accessible Perceptual Contrast Algorithm, a proposed solution for handling readability contrast in WCAG 3.0 and beyond. Related repo.

Myndex

ThumbHash: A Very Compact Representation of an Image Placeholder — There’s a demo at the page to give you an idea of what to expect and to give you a brief overview of how things work. Repo here.

Evan Wallace

Accessibility Checker: Scan Any Site for ADA & WCAG Compliance — A nicely designed tool that provides clear instructions on fixing accessibility errors and warnings. Enter a URL and get a report.

Accessibility Checker

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse․io) sponsor

Font-Awesome 6.4.0 Released — This version of "the Internet's icon library" adds an all new ‘Sharp Light’ icon style (pictured), along with a slew of new icons (including a dinosaur). The free library now sits at over 2,000 icons, and balloons to a massive 25,000+ for paid users. Changelog.

Font Awesome

IMG Quest: An Open-Source API to Generate Open Graph Images — Add an image URL, then specify the style you want the image to appear with, along with foreground and background colors, then use the generated URL in your meta tags.

Vincent Will

Bright: A React Server Component for Syntax Highlighting — Customizable and includes all of VS Code’s syntax highlighting themes, some of which are demonstrated on the page.

Code Hike