Together with  Hookdeck
🚀 Frontend Focus

#​630 — February 14, 2024 | Read on the web

Apple 'Broke' Web Apps in iOS 17 Beta; Still Hasn't Fixed Them — There’s been plenty of chatter about App Store changes, and PWAs in iOS 17 this week — all coming as a result of upcoming EU enforcement of the Digital Markets Act. This PWA bust is a change in the current beta, and the overall deadline for DMA compliance is in March — so things may change yet, but right now it’s not looking great for all things PWA on iOS for those in the EU.

Thomas Claburn

Managed Reliability & Observability for Webhooks & Async Events — Receive, verify, authenticate, transform, filter, route, rate limit, and deliver asynchronous messages at scale between third-party services and serverless functions with the Hookdeck Event Gateway. Try Hookdeck for free.

Hookdeck sponsor

CSS Mixins & Functions Explainer — Following a recent update from the CSS Working Group, Miriam captures the overall state of the conversation on developing CSS-native mixins and functions, including looking at how they would differ from existing pre-processors, and what extra functionality (or limitations) could come with such a browser level approach. A thorough, detailed overview.

Miriam Suzanne

Mozilla Downsizes As It Refocuses on Firefox and AI — With a new interim CEO in place, Mozilla is making some major changes to its product strategy, including bringing “trustworthy AI into Firefox” 🤨.

Frederic Lardinois (TechCrunch)

⚡️ Quick Links

📙 Tutorials, Articles & Opinion

The Performance Inequality Gap in 2024 — Just how much HTML, CSS, and JavaScript can we afford to use in our projects? Alex digs in and notes that the answer is “more than in years past, but much less than frontend developers are burdening users with”.

Alex Russell

Things Frequently Heard in My Beginning Frontend Web Development Class — What could we learn from entry-level students in frontend web development? Geoff opines that it's newcomers to the space who ask the most intriguing questions and who make “connections that those of us who have spent years on the front end may have never considered”.

Geoff Graham

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

Can Generative AI Help Write Accessible Code? — An experiment in asking three, free generative AI tools (Gemini, ChatGPT, and Fix My Code) some typical questions about accessible code.

Léonie Watson

The New CSS Math: pow(), sqrt(), and Exponential Friends — These CSS functions are now available in the latest versions of Chrome, Edge, Firefox, and Safari. The pow() function mirrors the Math.pow() JavaScript functionality (for specifying how many times to multiply a number by itself). The sqrt() function is for finding the square root of a number. Dan shares details on these, where you might use them, and more. Handy stuff.

Daniel Wilson

How I Solved My Font Rendering Problem — A quick fix for a variable font rendering issue on iOS.

Michelle Barker

Nested Dark Mode via CSS Proximity — Jonathan notes that ‘inheritance’ is probably the more accurate title here, but ‘proximity’ helped them define the concept better.

Jonathan Dallas

Brutalist Web Design — Guidelines for web design that adhere to the tenets and ethos of brutalism — a term more often associated with architecture. However, David notes that it can apply to other forms of construction, including web design.

David Copeland

How Many Bytes Is "Normal" for a Web Font: A Study using Google Fonts
Stoyan Stefanov

How to Fix the Invisible Scrollbar Issue in iOS Browsers
Šime Vidas

How to Favicon in 2024: Six Files That Fit Most Needs
Andrey Sitnik

🔧 Code, Tools & Resources

Velvette: Making It Easier to Author CSS View Transitions — A small library that adds some features ostensibly missing from the View Transitions API (i.e. temporary classes during transition, unique name generation, and others).

Noam Rosenthal

CheerpJ 3.0: A WebAssembly JVM to Run Real-World Apps in the Browser — CheerpJ 3.0, a state-of-the-art WebAssembly JVM that runs real-world Java applications in the browser, is now available, although note that it’s a commercial project (but free for personal use).

Leaning Technologies

Open-Source Form Builder to Generate Dynamic JSON-Driven Forms Right in Your App — Integrate SurveyJS client-side form libraries in any JS app. Build forms in a no-code UI and maintain full control over the data flow.

SurveyJS sponsor

Tailwind CSS Button Collection: Click-to-Copy Animated Buttons — A gallery of more than 60 hover, click, and loading button effects built using Tailwind classes, some simple and others more unconventional.

Julien Thibeaut

🕰️ ICYMI (Older links, still worth checking out)

🤖 ...and finally

CSS Neural Network (Number Detection) — This is kinda wild, and it feels like magic (but really it's just math!™). You 'draw' in a number and the output updates with its best guess (▶️ Quick video demo). It didn’t work in Safari for me, but seems ok elsewhere. (The true 'magic' here is in the use of SCSS to create a lot of boilerplate – well worth looking through, and then looking at the resulting CSS in DevTools.)

Bali Balo