~frontendfocus | Issue 633 - A week is a long time in web development (16)

PixiJS v8: Build Striking 2D WebGL Experiences — PixiJS 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.

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

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

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.

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.

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.

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!

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

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.

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

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.

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.

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.

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.