✍️ Your usual editor, Chris, is currently busy braving the crowds at Disneyland Paris, so I'm stepping into his shoes – just in case you notice a slight difference to the style of this issue ;-) Chris will be back – a little grayer – next week.. 😅
Your other editor, Peter Cooper

Together with  logo
🚀 Frontend Focus

#​633 — March 6, 2024 | Read on the web

PixiJS v8: Build Striking 2D WebGL ExperiencesPixiJS is a very mature, long standing rendering library that abstracts away the pain of building fast 2D graphical experiences for the Web. v8 boasts significant performance improvements, a WebGPU-backed renderer, and a variety of API improvements. If you’re new to Pixi, there’s an interactive tutorial.

PixiJS Team

Apple Reverses Course on 'Death' of Progressive Web Apps in EU — For the past couple of weeks, we’ve focused on the recent, worrying developments of Apple dropping support for PWAs in iOS as a part of complying with EU regulations, but a week is a long time in the world of Web development, and Apple has “reversed course because of numerous requests by consumers to keep the feature.” That’s one way to put it!

Apple Insider

🧩 Build Your Products 8.6x Faster. Put FrontEnd on Autopilot — Customize and theme React templates or drag & drop components coming from top open-source libraries like MUI, Tailwind UI, and more. Need more headstart? Generate UI with AI. When you’re done, just copy the production-ready code off the design.

UXPin Merge sponsor

WebKit Features in Safari 17.4 — Just like Safari 15.4 and 16.4, Safari 17.4 is a significant update for developers targeting users across the board, whether on desktop, phones, tablets, or even Vision Pro. CSS Scoping is a big step, there are improvements to white space and text wrapping properties, and we get support for percentages in letter-spacing and word-spacing.

Jen Simmons and Jon Davis (WebKit)

Safari Switching It Up with.. an HTML Switch Control“We’re very excited to introduce a new HTML form control as part of Safari 17.4: a switch.” Essentially, it slots in as a more Apple-y variant of a checkbox.

Anne van Kesteren and Jon Davis (WebKit)

⚡️ Quick Links

📙 Tutorials, Articles & Opinion

Modern CSS Tooltips and Speech Bubbles — Everyone knows what tooltips are, but despite their ubiquity, there’s no single, universal way to create them. The author of this post presents some modern techniques to create tooltips with the smallest amount of markup while retaining the most flexibility.

Temani Afif

Playing with Infinity in CSS — Did you know CSS has an infinity constant that can be used within calc()? Never lose a z-index battle again!

Will Boyd

Sentry Launch Week: Making Debugging Fun — We’ll be making debugging fun, raffling swag and talking about all things developer, every. single. day. (For one week.)

Sentry sponsor

'AI' and Accessible Frontend Components: Is the Nuance Generatable? — Are LLMs helpful tools to assist with making accessible front-end components? A little bit of yes, but also a lot of no.

Hidde de Vries

Reporting Core Web Vitals with the Performance API — The Performance API provides an interface to ways to measure and evaluate Web performance metrics from JavaScript. Geoff demonstrates how to use its features to do your own performance reporting.

Geoff Graham

Bugs I’ve Filed on Browsers“I think filing bugs on browsers is one of the most useful things a web developer can do.”

Nolan Lawson

JavaScript Bloat in 2024 — What’s the average size of JavaScript code downloaded per website? Spoiler alert: it’s a lot and will make anyone from the 56k dialup days scream.

Nikita Prokopov

Creating a CSS-Only Bottom-Anchored Scrolling Area
Kitty Giraudel

CSS Scroll-Triggered Animations with Style Queries
Ryan Mulligan

CSS for Printing to Paper
Ethan Dalool

🔧 Code, Tools & Resources

NSFW JS 4.0: Client-Side Indecent Content Checking — The last thing most folks want uploaded to their site or app is inappropriate content. NSFW JS is an interesting client-side TensorFlow.js-powered option for detecting potentially improper content before it even reaches your server. GitHub repo.

Infinite Red, Inc.

Simple Icons: 3000+ Free SVG Icons for Popular Brands — This project that we link to every year or two continues to go from strength to strength and is frequently adding new icons.

Simple Icons

Tuple 'Makes Pair Programming with Co-Workers and Friends Fun Again' — Try Tuple for free and find out why staff engineers at Figma can't stop talking about Tuple.

Tuple sponsor

Brainsum's Cookie Consent Bar — Few people love them, but cookie consent messages are required in many (though not all!) circumstances and Brainsum says theirs is as compliant as it gets, and can block third party cookies without you needing to refactor your site. There’s also some support for Google’s ‘Consent mode’.GitHub repo.


🩻 Skeleton Generator: Generate Tailwind-Based 'Loading Skeletons' for HTML Content — An online generator that will take your HTML structure and provide animation-based Tailwind equivalents, to display while content is loading.

AE Studio

🏳 All Country Flags in SVG (Plus CSS for Easier Integration)

Panayiotis Lipiridis