~frontendfocus | Issue 630 - 💔 Apple and PWAs: It's not me, it's EU.. (14)

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...

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.

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” 🤨.

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”.

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”.

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.

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...

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

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.

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.

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).

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).

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.

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 –...