The Height Enigma — A beginner-friendly no nonsense unraveling of the ‘mysterious’ behavior of percentage-based heights in CSS: “Like with so much in CSS, it feels random until you learn about the underlying mechanisms that explain the behaviour, and then it all makes perfect sense”. A great, visualized explainer.

Josh W. Comeau

New Course: Next.js Fundamentals, v4 — Master Next.js with Scott Moss. Learn React Server Components, Server Actions, dynamic routing, authentication, caching, and edge functions. Create a modern React app, deploy it to Vercel, and level up your skills.

Frontend Masters sponsor

📙 Articles, Opinions & Tutorials

How to Have the Browser Pick a Contrasting Color in CSS — Jen shares how the upcoming contrast-color() function should help with accessibility. It’s all in flux right now, but the takeaway being we should be able to declare a color in CSS and then have the browser figure out what should be paired with it — neat.

Jen Simmons (WebKit)

AI Agents and MCP Servers Without Access Control Are a Security Risk — WorkOS AuthKit enables scoped OAuth access and RBAC — lock down what actions each agent or tool is permitted to perform today.

WorkOS sponsor

Add Wide Gamut P3 and Alpha Transparency to Your Color Picker in HTML — Did you know that the native HTML <input type=color> picker recently got an upgrade and it now supports the full range of colors found in the P3 color gamut?

Anne van Kesteren and Jen Simmons (WebKit)

Integrating Localization Into Design Systems — A case study that looks at how two designers tackled the challenges of building a localization-ready design system for a global audience, taking into consideration things such as text overflow, RTL layouts, font inconsistencies, and more.

Rebecca Hemstad & Mark Malek

Container Query for “Is There Enough Space Outside This Element?” — A good, practical example of what container queries are useful for.

Chris Coyier

It Wasn’t the Idea That Failed: It Was the Execution — A look back at the WYSIWYG history of visual web development tools, from Visual Basic and FrontPage in the 90s to modern tools like the aforementioned Figma Sites. It argues that these tools often fail because they produce poor HTML markup, hindering accessibility and developer control. It then positions Nordcraft as an alternative, and yes it’s on the Nordcraft blog.

Salma Alam-Naylor

Creating Flower Shapes using clip-path: shape() — Here's a detailed look at the what can be achieved when using the arc command. Plenty of code examples to help explain what's going on. Geometry, radius, and math problems a plenty here.

Temani Afif

Modern Scroll Shadows Using Scroll-Driven Animations
Kevin Hamer

Enhancements to the Proposed <permission> Element
Thomas Steiner

Why is Nobody Using the hwb() Color Function?
Sunkanmi Fafowora

🧰 Tools, Code & Resources

Fonts Ninja: A Platform to Discover and Build Your Font Collection — The font gallery lets you filter by shape, style, weight, price, etc., and the service also includes a Chrome extension so you can easily bookmark your favorites.

Fonts Ninja

Introducing Clerk Billing — Set up subscriptions in your B2B or B2C app without writing custom payment code or building your own UI.

Clerk sponsor

Basecoat: shadcn/ui's Magic, But Minus React — shadcn/ui is a popular suite of well designed React components, but if you’ve wanted to use them in other contexts too, Basecoat is for you. Basecoat ports the components to a more vanilla form you can use elsewhere.

Ronan Berder

tailwind-animations: Easy Animations for Your Tailwind Project — You can mess around with them on this demo, which allows you to adjust the duration, delay, and “steps”.

Miguel Ángel Durán

HelloCSV: A Drop-In, CSV Importing Workflow for JS Apps — If you or your users have CSV files to import, here’s a complete CSV importing workflow for the frontend that you can drop into your app. Basic docs.

HelloCSV

Flatlogic Templates: Free Web & Mobile Templates for Startups — These were recently open-sourced by the company, as explained in this Reddit post. Includes 29 templates built with React, Vue, Angular, Bootstrap, and React Native. Some nice stuff here.

Flatlogic

MoodHue: Generate a Color Palette Based on Mood with AI — Enter a ‘mood’ in the prompt and this will generate a 5-color palette from your description. There’s also an option to use a slider that shows the same colors as a blurry/mesh gradient.

MoodHue

A Bookmarklet for Clearing Cookies for the Current Page
Henry Desroches

🙂 ...and finally

Why We Are Still Using 88x31 Buttons — You don't really see them anywhere near as much as you used to, but as a little image format they sure are cool and bring about a certain unique restrained creativity. This post, from last year, runs through how the specific size came to be, and how it endured.

Brian (Ultrasciencelabs)

Easier Layout with margin-trim — Jen and the WebKit team have been on something of a roll of late with great blog posts on various modern CSS features, and so it goes with this one on the experimental margin-trim property — a way to tell a container to trim the margins off its children.

Jen Simmons

Are 'CSS Carousels' Accessible? — It’s still early days for the recently introduced CSS Carousels, but that hasn’t stopped Sara from diving in for this excellent look at this experimental feature, sharing an objective look at its current accessibility and general usability.

Sara Soueidan

🔒 Protect Against AI Bots, Fraud, and Abuse in Real Time — WorkOS Radar protects your app with advanced device fingerprinting — stop fake signups, free tier abuse, bot attacks and brute force attempts today.

WorkOS sponsor

The GSAP Web Animation Toolkit is Now Entirely Free — Last year the hugely popular GSAP (a.k.a. GreenSock) animation library was acquired by Webflow, and it’s turned out to be great news for us, as from version 3.13 the entire GSAP toolkit is now freely available (including formerly paid addons like MorphSVG and SplitText), even for commercial use. ℹ️ Note: It’s not exactly traditional open source though, using a ‘no charge’ license that prevents you from using it to compete with Webflow directly.

Cassie Evans and Jack Doyle

📙 Articles, Opinions & Tutorials

Reading Flow Will Ship in Chrome 137 — Both the reading-flow and reading-order properties are expected to land in the stable version of Chrome later this month — however before then Rachel is seeking folks to try it out and report any bugs found. There's more on this feature over on the Chrome blog.

Rachel Andrew

WCAG 3.0’s Proposed Scoring Model: A Shift in Accessibility Evaluation — There’s a rethink underway in terms of conformance with the web content accessibility guidelines — moving away from a binary success/fail model to one that prioritizes “usability over compliance [..] shifting the focus toward the quality of access rather than the mere presence of features”.

Mikhail Prosmitskiy

How to Build a React Login Page Template — Learn to build auth with React & Express, compare JWT vs session auth, and get a plug-and-play login page template.

Clerk sponsor

Polyfilling CSS with CSS Parser Extensions — Bramus has had an idea “to fix CSS polyfilling once and for all” by allowing developers to extend the browser’s CSS parser with JavaScript.

Bramus Van Damme

Frontend's Next Evolution: AI-Powered State Management — Here’s how artificial intelligence is changing the complexity of state management in modern frontend apps. “Rethinking state management isn’t about discarding what we know. It’s about augmenting it.”

Alexander T. Williams

Passkeys for Normal People — A solid primer on the mechanics of passkeys and the defensive role they play, encouraging us all to adopt this increasingly popular security method.

Troy Hunt

Masonry in CSS: Should Grid Evolve or Stand Aside for a New Module? — It feels like we’ve been talking about this for a while now, and with three proposals in the ring you may have lost sight of where things are — here’s a solid reminder/recap.

Gabriel Shoyombo

Revisiting Image Maps — Although ultimately image maps weren’t the right fit for the task at hand here, this exploration of the feature and the need to find the right tool for the job make for a good read.

Andy Clarke

Good vs Great Animations — A neat collection of practical tips to help you go from good to great animations.

Emil Kowalski

▶  How to Detect Memory Leaks in Your Web App
Decoded Frontend

UX Localization: Adapting User Interfaces for Diverse Cultures
Magnus Eriksen

Quickly Checking HTTP Response Headers
Henry Desroches

🧰 Tools, Code & Resources

WebTUI: A Modular CSS Library Bringing the Beauty of Terminal UIs to the Browser — You can see it in use on the docs site. Includes ASCII Boxes, a badge, button, checkbox, popover, and other components, along with some plugins.

WebTUI

Your React App Is Fast. Until It Isn’t — From bloated bundles to re-render chaos, this guide breaks down 8 common React perf killers—and how to fix them. Tools, tactics, and just enough salt to keep you from writing another 500ms spinner.

Sentry sponsor

Mantine 8.0: The Full Featured React Components Library — Mantine is one of the most celebrated React component libraries, and for good reason: it’s full featured, modern, and looks great. v8.0 ups its chart game with a little Recharts magic, adds over twenty new components (including a GitHub-style Heatmap, Tree and SemiCircleProgress), submenus, and much more.

Vitaly Rtishchev et al.

VERT: A Fast, Ad-Free File Converter for Media & Documents — All image formats are converted locally, while videos are sent to a server temporarily. You can also convert documents like XML, MD, HTML, RTF, CSV, JSON and others.

vert

9ui: A Curated Library of UI Components Built with Base UI and Tailwind — Includes dozens of standard components that are easy to theme and customize, which you can test drive on the theme page.

Bora Baloglu

Bekuto 3D: Web-Based Tool to Convert SVGs to 3D Models — Works well for simple graphics, allowing you to edit the different parts of the file before exporting to a 3D format (STL, GLTTF, or 3MF). GitHub repo. I just tried it with this rocket SVG — works well.

Rizumu Ayaka

StringTune: A JavaScript Library Designed to Deliver High-Performance, Modular Web Effects — This enables parallax scrolling, dynamic cursor interactions, progress tracking, split text animations, and autoplaying videos. You can try out lots of examples on the demo page.

fiddle digital

😅 ...and finally

The above comic is from comiCSS by Alvaro Montoro – it's notable for being a webcomic both about CSS and that's coded with CSS and well worth a browse around for some edifying technical funnies, like this one featuring the oft-maligned <center> tag.

'Don't Make Google Sell Chrome' — There have been rumblings about Google possibly having to sell off Chrome for a little while now — here, DHH (creator of Rails, Basecamp, etc) weighs in, noting that the web could be worse off if it comes to pass: “Google should not get away with rigging the online ad market, but forcing it to sell Chrome will do great damage to the web”.

David Heinemeier Hansson

🍜 Tonkotsu is a Natural Language IDE for JS & TS Developers — Write out your work in bullet points and delegate to Tonkotsu. You're the tech lead and approver. We just started our FREE early access program and want to hear directly from early adopters. Sign up today.

Tonkotsu sponsor

Polishing Your Typography with Line Height Units — Jen explains how the lh and rlh units give us a direct way “to tie any size in our layout to the vertical rhythm of the text” — be that margins, padding, gaps, width, height, etc.

Jen Simmons (WebKit)

Creating a 3D Split-Flap Display Effect — A split-flap display is a electromechanical display commonly associated with live timetable displays and it makes for a neat effect on the Web too. Jhey breaks down how to replicate it or you can hit up this live demo.

Jhey Tompkins

📙 Articles, Opinions & Tutorials

Seeking an Answer: Why Can’t HTML Alone Do Includes? — Plenty of solutions, but no straightforward, performant HTML one. This has been a tricky issue for decades now and gets worked around in numerous ways whether with JavaScript, a build step, IFRAMEs, or more. There is no answer here, but it's a good question.

Chris Coyier

How to Write Error Messages That Actually Help Users Rather Than Frustrate Them — Solid, straightforward advice on creating error messages that help users recover quickly and continue their path through your products/services.

Amy Hupe

The <canvas> Element — Highlights the accessibility pitfalls and performance trade-offs of using the <canvas> element, along with noting when it’s actually suitable to turn to it.

Heydon Pickering

💡 Heydon has also just covered the <cite> element too.

▶  🦉 What is the 'Owl Selector' (* + *)? — A quick look at the so-called CSS ‘owl’ selector, including how it works, why you should use it, and the viable alternatives.

Zoran Jambor

How to Take Clerk to Production — How to take a Clerk app to production with custom domains, OAuth credentials, and DNS setup.

Clerk sponsor

Anchor Positioning Just Don't Care About Source Order — Overlapping elements in CSS can often be tricky, but CSS anchor positioning should simplify things. Geoff shares how, noting that it adds another welcome “separation of concerns between content and presentation”.

Geoff Graham

▶  Hello My Name Is St�phanie: A Talk On "Special Characters", Inclusive Design and User Experience — A roughly 15-minute talk on how encoding and database decisions about formats and characters can result in an awful user experience.

Stéphanie Walter

The Hidden Cost of AI Coding — No matter if you’re all in on vibe coding, or find AI development somewhat questionable, this article ponders the joy of the craft. Some food for thought.

Matheus Lima

Blob Shape with Hover Effect — It’s Chrome only for now, but Temani quickly shares a technique for creating CSS-only single-liner blob shapes using clip-path and shape(). There’s a generator too if you want to make your own.

Temani Afif

The Future of Web Design: Will We Even Recognize It in 100 Years?
Noah Davis

Designing for Everyone: Accessible Color Contrast
Ian Culver

🧰 Tools, Code & Resources

Responsive Typographic Scale Generator — Output is in standard CSS or Sass/SCSS and you can use rem or px for the font sizes using the clamp() function.

DK Web Solutions

CSS Editor: An Interactive Visual CSS Editor — Nothing extraordinary here, but a nice way to use sliders and dropdowns to edit CSS on an element live on the page, with both 2D and 3D properties available.

Ciprian Popescu

JavaScript Form Builder with Drag-and-Drop UI & Built-In JSON Schema Editor — Extensible form builder component (React/Angular/Vue3) that outputs form schemas in JSON. Works with any backend. Learn more.

SurveyJS sponsor

Storybook 9 Beta — The popular UI 'workshop' hits v9, with this beta that introduces visual testing, accessibility testing out of the box, component test widgets and more.

Michael Shilman

Annotation Mono: A Lovingly Crafted Handwriting-Style Monospace Font — A legible, variable handwritten typeface inspired by monospace bitmap fonts — could be useful not just in your IDE, but may also work in any informal context, such as labels, headings, etc. Repo here.

Qwerasd

track-list: A Web Component to Enhance a List of Audio Tracks with Playlist Controls — A neat idea to encapsulate a common UI pattern where a single track plays followed by each subsequent track in the list, with play/pause and next/previous functionality. Some demos here.

Miriam Suzanne

Design Tokens Name Generator — For when you need to get started quickly, this tool will create ready-made naming conventions for your design system.

Romina Kavcic

Draggable Carousel: A Draggable Carousel/Slider Component for React, Vue, or Vanila JS — Try it out on this Stackblitz demo.

David Bismut

🍪 Next Steps for Privacy Sandbox and Tracking Protections in Chrome — After years of back and forth and dithering on plans to remove third-party cookies from Chrome it now seems like Google has called it quits and thrown in the towel on the idea: “Taking all of these factors into consideration, we’ve made the decision to maintain our current approach to offering users third-party cookie choice in Chrome, and will not be rolling out a new standalone prompt for third-party cookies. Users can continue to choose the best option for themselves in Chrome’s Privacy and Security Settings.”

Anthony Chavez (Privacy Sandbox)

AG Grid: The Best JavaScript Data Grid In The World — Create high-performance data grids with our open-source library, trusted by 90% of the Fortune 500. Add advanced features like Integrated Charting, Grouping, Pivoting and more with a few lines of code. Supports React, Angular and Vue. Try for free.

AG Grid sponsor

⭐ A Flowing WebGL Gradient, Deconstructed — Even if you don’t want to render a neat plasma-style effect on the Web, this is a wonderfully deep exploration of the math and technology behind doing so using simple GLSL code that could be easily understood by most frontend developers.

Alex Harri

📙 Articles, Opinions & Tutorials

AI is the Future of Accessibility — “Let’s treat AI not as a threat to accessibility, but as a tool we must shape—because the future belongs to those who build it. Stop being afraid of change and, instead, work to make sure change is for the better”.

Karl Groves

What Does It Really Mean for a Site to be 'Keyboard Navigable' — A look at why being able to navigate our sites with a keyboard matters, how to test your current set up, and ultimately improve it.

Eleanor Hecks

Why You Need to Know Your Site's Performance Plateau (and How to Find It) — So you’ve made your site faster, but that hasn’t shifted the metrics like you’d hoped. Maybe you’ve hit a performance plateau — the point at which changes to your website’s rendering metrics cease to matter because you’ve bottomed out in terms of business/user engagement metrics.

Tammy Everts

Building an Offline-Friendly Image Upload System — How to leverage PWA tech such as IndexedDB, service workers, and the Background Sync API to help improve the reliability of web apps for users, particularly those with unreliable internet connectivity.

Amejimaobari Ollornwi

So, You Want to Give Up CSS Pre- and Post-Processors... — How native CSS, new features and new tools can help us inch towards ditching pre-processors.

Zell Liew

Mastering Carousels with GSAP: From Basics to Advanced Animation — A solid overview of creating a carousel that makes use of scroll snapping, utility functions, 3D effects, draggable interactions, and more.

Tom Miller

A Note About WCAG Conformance Levels — A quick high-level primer on the various conformance levels of the Web Content Accessibility Guidelines (A, AA, AAA).

Dennis Deacon

Magick Images — Here’s how Ethan made use of image library Imagemagick to create new social media og:image preview images.

Ethan Marcotte

Fixing Vercel's Landing Page — Tomi spotted a small visual quirk in a background pattern of Vercel’s site and set out to fix it.

Tomi Kalmi

Creating CSS Theme Variables from a JS File
Michelle Barker

What is llms.txt, and Should You Care About It?
Ryan Law

Writing the Onboarding Experience
Nick DiLallo

🧰 Tools, Code & Resources

Introducing Kermit: A Typeface for Kids — Nothing to do with the famous frog — no, this new font aims to empower children by making reading easier, and improving comprehension. Pretty friendly and approachable I’d say.

Rob McKaughan (Microsoft)

Frimousse: A Lightweight, Unstyled, and Composable Emoji Picker for React — The picker is accessible and won’t display any emojis that aren’t supported on the device. You can explore some demos here.

liveblocks

Polypane 24: Recording, 3D View, Custom Tab Colors and HTML Editing — A new version of developer browser Polypone has just released, adding a built-in video recorder, a 3D view (shown above) for looking over your stacking context / z-index rules, and more.

Kilian Valkhof

Tailwind Trainer: A Game for Practicing Tailwind Utility Classes — From the same folks that created the popular Flexbox Froggy and Grid Garden games, this one helps you learn Tailwind syntax and it promises that no two play-throughs are the same.

Codepip

Astro Font: An Astro Plugin to Automatically Optimize Your Fonts — Supports optimization for custom fonts, local fonts, fonts over any CDN, and Google Fonts.

Rishi Raj Jain

Symbl: Easily Search, Copy, and Use HTML Symbols, Emojis & More
Revend Group

JSONMocker: A Web-Based Editor to Create Reusable JSON Mock Data Schema Files
Laura Sofia Heimann

Markdown to Slides: An Online Tool to Convert Markdown to PDF/PPTX Slides
ztabs

🔥 ...and finally

CSS Hell — This CSS-based puzzle game has you changing properties to meet certain criteria. 15 to complete, and rather challenging. The repo has the intended solutions if/when you get stuck. (Note: It's not mobile friendly at all.)

Marcos Acosta