~frontendfocus | Bookmarks (247)

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.

An Abridged History of Safari Showstoppers — The ‘receipts’ to prove that Safari on iOS is “an inconvenience for developers” and “the fundamental reason interoperability has been stymied in mobile ecosystems”. Uh-oh, we're getting flashbacks to the IE6 days..

WordPress Drama Explained (and How it May Affect Your Site) — Yep, this is still a thing. In fact, #wpdrama is trending on X as we write. Beyond some mud slinging (and disappearing blog posts), the biggest news is likely the forced removal of the Advanced Custom Fields plugin from the WordPress directory.

▶  Drawing a Clay Character with CSS — A roughly 15 minute video tutorial that touches upon CSS positioning, masks, clip-path, custom properties, and more. The source code / demo is on Codepen.

.io Domain Likely Being Phased-out? Seven Suggested Steps — I’m still not wholly convinced this will actually happen (wishful thinking?), but it’s still a good idea to be prepared for that possible eventuality.

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

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

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.

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.

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

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.

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.

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.

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.

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.

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