Quick Hit #62
CSS Masonry shaping up now that the CSSWG has landed on display: grid-lanes to trigger the layout switch.
Quick Hit #61
Bramus shares that Chrome Canary no longer forces CSS animations using width and height properties to run on the main thread.
Older Tech In The Browser Stack — Smashing Magazine
There are many existing web features and technologies in the wild that you may never touch directly in your day-to-day work. Perhaps you’re fairly new to web development and are simply unaware of them because you’re steeped in the abstraction of a specific framework that doesn’t require you to know it deeply, or even at all. Bryan Rasmussen looks specifically at XPath and demonstrates how it can b
Smashing Animations Part 6: Magnificent SVGs With And CSS Custom Properties — Smashing Magazine
SVG is one of those web technologies that’s both elegant and, at times, infuriating. In this article, pioneering author and web designer Andy Clarke explains his technique for animating SVG elements that are hidden in the Shadow DOM.
Explaining the Accessible Benefits of Using Semantic HTML Elements
Why should you use a semantic <button> instead of a generic <div>? Accessibility, right? By how exactly does it help accessibility?
How To Leverage Component Variants In Penpot — Smashing Magazine
With component variants, design systems become more flexible, letting you reuse the same component while adapting its look or state with ease. In this article, Daniel Schwarz demonstrates how design tokens can be leveraged to manage components and their variations using Penpot, the open-source tool built for scalable, consistent design.
Build and deploy data applications on Snowflake with v0
The v0 Snowflake integration lets you build and deploy Next.js data applications with natural language. Your data stays secure in your Snowflake account.
Springs and Bounces in Native CSS
The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. I’ve been experimenting with this API for a while now, and in this post, I’ll share all of the tips and tricks I’ve learned for using it effectively. ✨
JavaScript For Everyone: Iterators — Smashing Magazine
Here is a lesson on Iterators. Iterables implement the iterable iteration interface, and iterators implement the iterator iteration interface. Sounds confusing? Mat breaks it all down in the article.
Built-in durability: Introducing Workflow Development Kit
The Workflow Development Kit (WDK) makes async workflows in TypeScript reliable, durable, fault-tolerant, and portable across any cloud.
How we reduced the size of our JavaScript bundles by 33%
Improving the trustworthiness of Javascript on the Web
Today, there's no way to audit a site’s client-side code as it changes, making it hard to trust sites that use cryptography. We preview a specification we coauthored that adds auditability to the web.
Masonry: Watching a CSS Feature Evolve
What can CSS Masonry discussions teach us about the development of new CSS features? What is the CSSWG’s role? What influence do browsers have? What can learn from the way past features evolved?
The thing about contrast-color
One of our favorites, Andy Clarke, on the one thing keeping the CSS contrast-color() function from true glory:
Introducing the React Foundation: The New Home for React & React Native
Meta open-sourced React over a decade ago to help developers build better user experiences. Since then, React has grown into one of the world’s most popular open source projects, powering over 50 million websites and products built by companies such as Microsoft, Shopify, Bloomberg, Discord, Coinbase, the NFL, and many others. With React Native, React […]
Smashing Animations Part 5: Building Adaptive SVGs With , , And CSS Media Queries — Smashing Magazine
SVGs, they scale, yes, but how else can you make them adapt even better to several screen sizes? Web design pioneer Andy Clarke explains how he builds what he calls “adaptive SVGs” using ``, ``, and CSS Media Queries.
Accelerating our Android apps with Baseline Profiles
Key Takeways: With billions of Android app users, we’re always looking to improve the Meta app experience, and in this post, we explore the ways we’ve leveraged Android’s Baseline Profiles to significantly improve their performance. We discuss the performance challenges we’ve faced as Meta’s apps, how the needs of users have become more complex over […]
Quick Hit #60
Alignment might be one of the more confusing (or misunderstood) parts of CSS. I love having a thorough explanation from someone like Temani Afif who has it
Touring New CSS Features in Safari 26
Safari 26 adds:75 new features, 3 deprecations, and 171 other improvements. Here's all the CSS goodness you'll want to know about.
Recreating Gmail’s Google Gemini Animation
John Rhea challenged himself to recreate the fancy button using the new CSS shape() function sprinkled with animation to get things pretty close.
Quick Hit #59
A working draft for CSS Environment Variables is posted. Same concept as var(), but env() is a “global” variable at the document level for values the user
Cap'n Web: A new RPC system for browsers and web servers
Cap'n Web is a new open source, JavaScript-native RPC protocol for use in browsers and web servers. It provides the expressive power of Cap'n Proto, but with no schemas and no boilerplate.
Supporting the future of the open web: Cloudflare is sponsoring Ladybird and Omarchy
We're excited to announce our support of two independent, open source projects: Ladybird, an ambitious project to build a completely independent browser from the ground up, and Omarchy, an opinionated Arch Linux setup for developers.
The Big Gotcha With @starting-style
CSS has been on fire lately, with tons of great new features. @starting-style is an interesting one; it allows us to use CSS transitions for enter animations, something previously reserved for CSS keyframe animations. But is the juice worth the squeeze?
Is it Time to Un-Sass?
Many of the Sass features we've grown to love have made their way into native CSS in some shape or form. So, should we still use Sass? This is how developer Jeff Bridgforth is thinking about it.
Compiling Multiple CSS Files into One
Stu Robson outlines two ways to compile multiple CSS files when you aren't relying on Sass for it.
What're Your Top 4 CSS Properties?
Everyone has a different opinion which is great because it demonstrates the messy, non-linear craft that is thinking like a front-end developer.
Integrating CSS Cascade Layers To An Existing Project — Smashing Magazine
The idea behind this is to share a full, unfiltered look at integrating CSS Cascade Layers into an existing legacy codebase. In practice, it’s about refactoring existing CSS to use cascade layers without breaking anything.
Composition in CSS
CSS is a composable language by nature. This composition nature is already built into the cascade. We simply don't talk about composition as a Big Thing because it's the nature of the language.
Color Shifting in CSS
A little while ago, I was trying to animate an element’s background color, so that it cycled through the rainbow. Seems easy, but it turns out, browsers have a surprisingly big limitation when it comes to color processing! In this tutorial, we’ll dig into the issue, and I’ll share a couple of strategies you can use to work around this limitation.
Migrating to React Native's New Architecture (2025) - Shopify
Shopify successfully migrated two of its largest apps, Shopify Mobile and Shopify Point of Sale (POS) to React Native's New Architecture while maintaining weekly releases and serving millions of merchants. This migration involved a complex codebase with hundreds of screens and native modules, extensive custom components, and deep integration with first-party libraries like FlashList.
Research, Review, Rebuild
The Bahmni open-source hospital management system started over nine years ago with a front end using AngularJS and an OpenMRS REST API. We wished to convert this to use a React + TypeScript front end with an HL7 FHIR API. In exploring how to do this modernization we used a structured prompting workflow of Research, Review, and Rebuild - together with Cline, Claude 3.5 Sonnet, Atlassian MCP server,
Optimizing PWAs For Different Display Modes — Smashing Magazine
Progressive Web Apps (PWAs) are a great way to make apps built for the web feel native, but in moving away from a browser environment, we can introduce usability issues. This article covers how we can modify our app depending on what display mode is applied to mitigate these issues.
3D Layered Text: Interactivity and Dynamicism
In this third and final chapter, we’re stepping into interactivity by adding JavaScript, starting with a simple :hover effect, and ending with a fully responsive bulging text that follows your mouse in real time.
The science of loudness
My watch has a “Noise” app: it shows d B , for decibels. Your browser does not support the video tag. My amp has a volume knob, which also shows decibels, although.. negative ones, this time. Your browser does not support the video tag. And finally, my video editing software has a ton of meters — which are all in decibel or decibel-adjacent units. Your browser does not support the video tag. How d
Announcing the Cloudflare Browser Developer Program
Announcing the Browser Developer Program: Cloudflare’s new collaborative program to help shape Cloudflare challenges that work seamlessly with your browser. Get a direct communication channel, best practices guidelines, and early visibility into major updates. Join us today!
3D Layered Text: The Basics
A client asked me to create a bulging text effect. With a bit of cleverness and some advanced CSS, I managed to get a result I’m genuinely proud of, which is covered in this three-part series.
An Interactive Guide to SVG Paths
SVG gives us many different primitives to work with, but by far the most powerful is the element. Unfortunately, it’s also the most inscrutable, with its compact Regex-style syntax. In this tutorial, we’ll demystify this infamous element and see some of the cool things we can do with it!
On Accessibility Conformance, Design Systems, and CSS "Base" Units
My brain can't help but try to make connections between seemingly disparate ideas. And that's what happened yesterday when I read:
We Might Need Something Between Root and Relative CSS Units for "Base Elements"
I've come to realize that perhaps we need to have a unit between root and relative values. This would bring about a whole new possibility when creating reusable components.
CSS-Questions
CSS-Questions is a mini site where you can test your CSS knowledge with over 100 questions.
Getting Creative With Quotes
How do you design block quotes and pull quotes to reflect a brand’s visual identity and help tell its story? Here’s how I do it by styling the HTML blockquote element using borders, decorative quote marks, custom shapes, and a few unexpected properties.
Quick Hit #54
The WebKit blog is back with a follow-up on its CSS Masonry coverage. It leans into a direction (display: grid), and that direction is different than Chrome's
How to Prepare for CSS-Specific Interview Questions
Get advice answering a set of 10 CSS-related questions you likely will encounter in front-end interviews.
The Power Of The Intl API: A Definitive Guide To Browser-Native Internationalization — Smashing Magazine
Internationalization isn’t just translation. It’s about formatting dates, pluralizing words, sorting names, and more, all according to specific locales. Instead of relying on heavy third-party libraries, modern JavaScript offers the Intl API — a powerful, native way to handle i18n. A quiet reminder that the web truly is worldwide.
Bringing Back Parallax With Scroll-Driven CSS Animations
Parallax is a pattern in which different elements of a webpage move at varying speeds as the user scrolls, creating a three-dimensional, layered appearance. It once required JavaScript. Now we have scroll-driven animations in CSS, which is free from the main-thread blocking that can plague JavaScript animations.
A tale of two parameter architectures—and how we unified them
After launching variables and component properties in quick succession, we were left with two different underlying architectures for parametrization. Here’s how we unified them.
Accelerating on-device ML on Meta’s family of apps with ExecuTorch
ExecuTorch is the PyTorch inference framework for edge devices developed by Meta with support from industry leaders like Arm, Apple, and Qualcomm. Running machine learning (ML) models on-device is increasingly important for Meta’s family of apps (FoA). These on-device models improve latency, maintain user privacy by keeping data on users’ devices, and enable offline functionality. […]
Web Components: Working With Shadow DOM — Smashing Magazine
Web Components are more than just Custom Elements. Shadow DOM, HTML Templates, and Custom Elements each play a role. In this article, Russell Beswick demonstrates how Shadow DOM fits into the broader picture, explaining why it matters, when to use it, and how to apply it effectively.
A Friendly Introduction to SVG
SVGs are one of the most remarkable technologies we have access to on the web. They’re first-class citizens, fully addressable with CSS and JavaScript. In this tutorial, I’ll cover all of the most important fundamentals, and show you some of the ridiculously-cool things we can do with this massively underrated tool. ✨
Handling JavaScript Event Listeners With Parameters — Smashing Magazine
Event listeners are essential for interactivity in JavaScript, but they can quietly cause memory leaks if not removed properly. And what if your event listener needs parameters? That’s where things get interesting. Amejimaobari Ollornwi shares which JavaScript features make handling parameters with event handlers both possible and well-supported.
Setting Line Length in CSS (and Fitting Text to a Container)
The many ways to juggle line length when working with text... including two proposed properties that could make it easier in the future.
CSS Intelligence: Speculating On The Future Of A Smarter Language — Smashing Magazine
CSS has evolved from a purely presentational language into one with growing logical powers — thanks to features like container queries, relational pseudo-classes, and the `if()` function. Is it still just for styling, or is it becoming something more? Gabriel Shoyombo explores how smart CSS has become over the years, where it is heading, the challenges it addresses, whether it is becoming too comp
The Gap Strikes Back: Now Stylable
Styling the space between layout items — the gap — has typically required some clever workarounds. But a new CSS feature changes all that with just a few simple CSS properties that make it easy, yet also flexible, to display styled separators between your layout items.
Meta joins Kotlin Foundation
We are proud to announce that Meta has officially joined the Kotlin Foundation as a gold member, marking a significant milestone in our ongoing commitment to Kotlin and the broader Android development ecosystem. Over the past several years, Meta engineers have been actively migrating our extensive Android codebase—comprising tens of millions of lines—from Java to […]
Quick Hit #51
An early preview of Chrome 139 includes six new CSS features, including the first hint of custom functions.
CSS Blob Recipes
Blob, Blob, Blob. What's the most effective way to create blob shapes in CSS? Turns out, as always, there are many. Let's compare them together!
KelpUI
KelpUI is new library that Chris Ferdinandi is developing, designed to leverage newer CSS features and Web Components. I've enjoyed following Chris as he's published an ongoing series of articles detailing his thought process behind the library, getting deep into his approach. You really get a clear picture of his strategy and I love it.
Poking at the CSS if() Function a Little More: Conditional Color Theming
The CSS if() function enables us to use values conditionally, but what exactly does if() do? Let's look at a possible real-world use case.
Decoding The SVG path Element: Curve And Arc Commands — Smashing Magazine
On her quest to teach you how to code vectors by hand, Myriam Frisano’s second installment of a `path` deep dive explores the most complex aspects of SVG’s most powerful element. She’ll help you understand the underlying rules and function of how curves and arcs are constructed. By the end of it, your toolkit is ready to tackle all types of tasks required to draw with code — even if some of the li
