~frontendfocus | Bookmarks (267)

On the Web, and Optimism — “I feel we’ve perhaps learned some painful lessons, become less naive. And on this more realistic foundation, there’s a chance to build things differently this time”.

AuthKit: The World’s Best Login Box — Powered by WorkOS & Radix — AuthKit is a complete solution for authentication, authorization, and user management. It’s free up to 1 million MAUs and comes standard with RBAC, bot protection, MFA, and more.

Motion Canvas: Create Dynamic Canvas-Rendered Animations — There’s two parts. A library where you use generator functions to procedurally define animations, and an editor that provides a real-time preview of said animations which you can see in action here.

Creating Blogs with Astro — How to use the popular Astro content site framework to create a full-featured blog.

Searching for a New CSS Logo — Did you know that there's an active, ongoing search for a logo to help visualize all things CSS and “aid in the marketing and promotion of the new CSS era”? There’s a bunch of discussion and suggested designs being shared in the CSS-Next repo.

Firefox 131 'Supercharges' CSS Variables Debugging — Version 131 of Mozilla’s browser was released last week adding notable improvements to debugging CSS variables along with other Inspector improvements.

Debugging a Slack Integration with Sentry’s Trace View — Read how our engineers used Sentry on Sentry to fix a Slack integration issue, improving the overall user experience.

▶  State Queries — Una and Adam discuss a future web capability that builds on container queries: state queries. This upcoming feature will, for example, be able to detect if a container is overflowing, when an element is scroll snapped, and when an element is stuck from position: sticky.

Plain Vanilla: A Tutorial Website for Plain Vanilla Web Development — The incentive behind this project is to teach building complex and dynamic apps without complex tools – just HTML, CSS, and JS, using modern features like Web Components, hash-based routing, etc.

CSS Nesting Improves with CSSNestedDeclarations — CSSNestedDeclarations is a new, CSS Working Group approved interface to fix some quirks of CSS nesting, such as declarations that come after style rules confusingly shifting up. It’s in Chrome from v130, and testing is underway in Firefox and Safari. Bramus shares a quick behind-the-scenes here but in short: "This means that CSS nesting got a whole lot better...

Uh-oh, .io? The Disappearance of an Internet Domain? — The British government recently announced it was transferring sovereignty of the Chagos Islands to Mauritius. But how can geopolitics alter digital infrastructure? The decision may result in the loss of one of the tech and gaming industry’s much-loved (though problematic) top-level domains: .io.

"Automattic is Doing Open Source Dirty" — DHH (of Ruby on Rails fame) chimes in on the ongoing WordPress saga, which seems to show no sign of abating soon. He states a concern “about the integrity of open source licenses”, adding that such “integrity is under direct assault by Automattic’s grotesque claim for WP Engine’s revenues”. Matt Mullenweg of WordPress replied on X.

player.style: Video & Audio Player Themes for Every Web Player & Framework — A collection of well-presented, good looking web component media players (...and one that looks like how you remember WinAmp). Lots of customization options and easy copy and paste results too.

PlaceholderJS: Ridiculously Simple and Lightweight Placeholders — Available for use via a CDN or as a React component, these are simple SVG-based placeholders that you can customize (size, color, background, etc.) using URL or component parameters.

Securing Node.js Express APIs with Clerk and React — Secure Express API endpoints and integrate authentication without the complexity of building it from scratch.

Statichunt: A Directory of 3900+ Composable Themes, Templates & Tools for Static Site Generators — An organized collection of tools that you can filter using categories like Astro, Hugo, Gatsby, Eleventy, Jekyll, etc., as well as framework keywords like Tailwind, Bootstrap, Bulma, etc.

qrframe: A Library to Generate 'Pretty' QR Codes — An odd project as the QR codes generated aren’t always guaranteed to scan reliably, but if you can generate one that does, they're very striking. Could be useful for branding/fun use cases. You can play around with a live demo here.

▶  Web Components: Little Bits — In this ~20 minute video from the recent State of the Browser conference, David shares how he is using Web Components to help develop complex design systems as well as custom open-source tools. More videos from the event are available too.

Building a Robust Frontend with Progressive Enhancement — The UK government website is a rare and successful example of running a huge, behemoth of a site, with strong, robust systems and sound user experience considerations. Here, they touch upon how progressive enhancement plays a crucial role in making things tick.

Catching Up on the WordPress & WP Engine Situation — There’s been plenty of continued drama in the WordPress world between Automattic and WP Engine — and this post attempts to bring us up to speed. More has happened since including ▶️ Matt Mullenweg sitting down with Theo Browne for a chat about the situation, and some new terms have been shared.

Web Components Are Okay — Spent any time on social this week? You may have spotted many in the frontend community talking about and questioning the overall merit and utility of Web Components. Nolan ties a few of these arguments together, concluding that folks are generally “talking past each other because they’re building different things with different constraints”.

Build a Native App Experience with PWAs — Join Maximiliano Firtman for a detailed video course exploring how to create installable, offline-capable web apps. You'll learn how to create impressive Progressive Web Apps, explore various UI techniques, dig into how best to test and debug, and how to deploy your efforts to end users.

The HTTP QUERY Method — A draft spec for a new QUERY HTTP method, a “safe, idempotent request method that can carry request content”. It’s said to be desirable “when the data conveyed in a request is too voluminous to be encoded into the request’s URI”. It's not quite GET, but it's not quite POST..

CSS Masonry & CSS Grid — As mentioned last week, steam is picking up on a formal CSS solution for masonry layouts, but with two competing proposals and lots of various opinions on both flying around, it’s good to take a high-level overview of where things stand — that’s what this is.