Considerations for making a tree view component accessible
A deep dive on the work that went into making the component that powers repository and pull request file trees.
Bringing Jetpack Compose to Instagram for Android
Introducing a new Android UI framework like Jetpack Compose into an existing app is more complicated than importing some AARS and coding away. What if your app has specific performance goals to meet? What about existing design components, integrations with navigation, and logging frameworks? On this episode of the Meta Tech Podcast Pascal Hartig is […]
Vercel acquires Tremor to invest in open source React components
Tremor, a library of React components to build charts and dashboards, joins Vercel. With this acquisition, all Tremor products—including Tremor Blocks—are now free and open source, bringing elegant UI components to all developers.
How we built the GitHub Skyline CLI extension using GitHub
GitHub uses GitHub to build GitHub, and our CLI extensions are no exception. Read on to find out how we built the GitHub Skyline CLI extension using GitHub!
Five years of React Native at Shopify (2025) - Shopify
Five years ago, we announced that React Native (RN) is the future of mobile at Shopify. Today, we are excited to share the progress we've made, lessons learned, and what the future holds. To recap, we decided to switch to RN for 3 main reasons: Write it once - Stop building the same features twice, once on iOS and once on Android Talent portability - Enable devs to work fluently across iOS, Androi
Lesser Known Uses Of Better Known Attributes — Smashing Magazine
HTML attributes are like little instructions that we add to the markup of elements to make them do certain things or behave in certain ways. For example, most of us know that the `target` attribute with a value of `_blank` opens the link in a new tab or window. But did you know that you can use it on the `form` element, too? John Rhea presents several lesser-known uses for common HTML attributes.
Headless Salesforce: An incremental migration from monolith to composable
Go headless with your Salesforce storefront while keeping your commerce backend intact. Learn how to de-risk migration to Next.js and Vercel, reducing load times & boosting conversions.
Teaching coding with JavaScript and p5.js - Eli Bendersky's website
A CSS Wishlist for 2025
2024 has been one of the greatest years for CSS: cross-document view transitions, scroll-driven animations, anchor positioning, animate to height: auto, and
Translating Java to Kotlin at Scale
Meta has been on a years-long undertaking to translate our entire Android codebase from Java to Kotlin. Today, despite having one of the largest Android codebases in the world, we’re well past the halfway point and still going. We’re sharing some of the tradeoffs we’ve made to support automating our transition to Kotlin, seemingly simple […]
How we think about Threads’ iOS performance
How did the Threads iOS team maintain the app’s performance during its incredible growth? Here’s how Meta’s Threads team thinks about performance, including the key metrics we monitor to keep the app healthy. We’re also diving into some case studies that impact publish reliability and navigation latency. When Meta launched Threads in 2023, it became […]
An Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines — Smashing Magazine
10 years after scroll-driven animations were first proposed, they’re finally here — no JavaScript, no dependencies, no libraries, just pure CSS.
Yet Another Anchor Positioning Quirk
As awesome as I think it is, CSS Anchor Positioning has a lot of quirks, some of which are the product of its novelty and others due to its unique way of working. Today, I want to bring you yet another Anchor Positioning quirk that has bugged me since I first saw it.
Mastering SVG Arcs — Smashing Magazine
SVG arcs demystified! Akshay Gupta explains how to master radii, rotation, and arc direction to create stunning curves. Make arcs a powerful part of your SVG toolkit for creating more dynamic, intricate designs with confidence.
Knowing CSS is Mastery to Frontend Development
Anselm Hannemann on the intersection between frameworks and learning the basics:
The Hype Around Signals — Smashing Magazine
From KnockoutJS to modern UI libraries like SolidJS, Vue.js, and Svelte, signals revolutionized how we think about reactivity in UIs. Here’s a deep dive into their history and impact by Atila Fassina.
A Framework for Evaluating Browser Support
Lots of exciting new features have been landing in CSS recently, and it can be tough trying to figure out if they’re safe to use or not. We might know that a feature is available for 92% of users, but is that sufficient? Where do we draw the line? In this blog post, I’ll share the framework I use for deciding whether or not to use a modern CSS feature
From minutes to seconds: How Meter accelerates delivery with Vercel and Next.js
Highlighted code in slides
I have obsessed about this long enough, I think it’s only fair I (and you!) get some content out of it. When I started writing this article, I was working on my P99 CONF slides. Those slides happen to include some bits of code. And because I’m a perfectionist, I would like this code to be syntax highlighted, like this: let addr : SocketAddr = config . address . parse () ? ; let ln = TcpListener
Solved by CSS: Donuts Scopes
Donut scoping addresses the challenge of preventing parent styles from leaking to nested content. Originating from a 2011 concept by Nicole Sullivan, the issue has evolved, culminating in 2024's @scope at-rule. This allows for more precise CSS styling, safeguarding content from unwanted inheritance while managing global CSS complexities.
Invoker Commands: Additional Ways to Work With Dialog, Popover… and More?
Web browsers are experimenting with two HTML attributes — technically, they’re called “invoker commands” — that are designed to invoke popovers, dialogs, and further down the line, all kinds of actions without writing JavaScript. Although, if you do reach for JavaScript, the new attributes come with some new events that we can listen for.
Complete CSS Course
Do you subscribe to Piccalilli? You should. If you're reading that name for the first time, that would be none other than Andy Bell running the ship and he's reimagined the site from the ground-up after coming out of hibernation this year. You're likely familiar with Andy's great writing here on CSS-Tricks.
Quick Hit #29
I'm interviewing Alex Russell tomorrow for Smashing Magazine — it's free so come and join the chat as we discuss the expensive JavaScript, browser choice, app
Importing a frontend Javascript library without a build system
Anchoreum: A New Game for Learning Anchor Positioning
You've played Flexbox Froggy before, right? Or maybe Grid Garden? They're both absolute musts for learning the basics of modern CSS layout using Flexbox and CSS Grid. Thomas Park made those and he's back with another game: Anchoreum.
Vercel named a Visionary in 2024 Gartner® Magic Quadrant™ for Cloud Application Platforms
Vercel is proud to be recognized as a Visionary; we view this Gartner® Magic Quadrant™ as a validation of the Frontend Cloud ecosystem.
State of CSS 2024 Results
The results from this year's survey are fairly fresh off the presses. We took a little time to sit with them and jot down some things we noticed and found interesting.
Recap: Next.js Conf 2024
Next.js Conf 2024
You can use text-wrap: balance; on icons
The CSS text-wrap property is (rightfully) widely assumed to be used strictly for text elements. But Terrence Eden posted an article on his blog that shows how it can also be used to balance the way other types of elements wrap, including icons.
Mastering theme.json: You might not need CSS
I totally get the goal here: make CSS more modular and scalable in WordPress. Put all your global WordPress theme styles in a single file, including
CSS min() All The Things — Smashing Magazine
Victor Ayomipo experiments with the CSS `min()` function, exploring its flexibility with different units to determine if it is the be-all, end-all for responsiveness. Discover the cautions he highlights against dogmatic approaches to web design based on his findings.
Add 3D to your web projects with v0 and React Three Fiber
How to build 3D web projects with React Three Fiber in v0
2024: More CSS At-Rules Than the Past Decade Combined
More times than I can count, while writing, I get myself into random but interesting topics with little relation to the original post. In the end, I have to
Quick Hit #25
Tab Atkins-Bittner left a comment in our recent notes on the CSS Masonry that thoroughly (and helpfully) counters the view that masonry would be more powerful
React at Meta Connect 2024
At Meta, React and React Native are more than just tools; they are integral to our product development and innovation. With over five thousand people at Meta building products and experiences with React every month, these technologies are fundamental to our engineering culture and our ability to quickly build and ship high quality products. In […]
Quick Hit #21
Seeing a lot more headlines decrying JavaScript and pumping up PHP. Always interesting to see which direction the front-end zeitgeist is leaning.
From CDNs to Frontend Clouds
Content Delivery Networks (CDNs) and Infrastructure as code (IaC) evolved into the next generation of web application delivery.
Quick Hit #19
Two possible syntaxes for CSS masonry, one draft specification, and you get to share your opinions.
SVG Coding Examples: Useful Recipes For Writing Vectors By Hand — Smashing Magazine
Myriam Frisano explores the basics of hand-coding SVGs with practical examples to demystify the inner workings of common SVG elements. In this guide, you’ll learn about asking the right questions to solve common positioning problems and how to leverage JavaScript so that, by the end, you can add “SVG coding” to your toolbox. You’ll also be able to declare proudly, “I know how to draw literal pictu
Creating Custom Lottie Animations With SVGator — Smashing Magazine
Creating ready-to-implement Lottie animations with a single tool is now possible thanks to SVGator’s latest feature updates. In this article, you will learn how to create and animate a Lottie using SVGator, an online animation tool that has zero learning curve if you’re familiar with at least one design tool.
Multiple Anchors
Only Chris, right? You'll want to view this in a Chromium browser:
Two CSS Properties for Trimming Text Box Whitespace
The text-box-trim and text-box-edge properties in CSS enable developers to trim specifiable amounts of the whitespace that appear above the
Anchor Positioning Quirks
I am thrilled to say, that from this week onwards, the CSS-Tricks Almanac has an entry for each property, function, and at-rule related to the new Anchor
The Undeniable Utility Of CSS :has
Of all the latest and greatest CSS features, the “:has” pseudo-class wasn’t exactly at the top of my wishlist. Once I started using it, however, I kept discovering incredible things I could do with it. It’s now become a core part of my toolkit! In this blog post, I'll show you some practical real-world problems I solved using “:has”, as well as some wild experiments that blew my mind!
Sticky Headers And Full-Height Elements: A Tricky Combination — Smashing Magazine
Sticky positioning is one of those CSS features that’s pretty delicate and can be negated by a lot of things, so here’s another one to add to your mental catalog: Sticky elements don’t play nicely if they have to coordinate with other elements to make up a combined height, like `100vh`. Philip Braunen explores why this happens and presents a solution to fix it.
The “Other” C in CSS
I think it's worth listening to anything Sara Soueidan has to say. That's especially true if she's speaking at an event for the first time in four years,
Generating Unique Random Numbers In JavaScript Using Sets — Smashing Magazine
Want to create more randomized effects in your JavaScript code? The `Math.random()` method alone, with its limitations, won’t cut it for generating unique random numbers. Amejimaobari Ollornwi explains how to generate a series of unique random numbers using the `Set` object, how to use these random numbers as indexes for arrays, and explores some practical applications of randomization.
Callbacks on Web Components?
A gem from Chris Ferdinandi that details how to use custom events to hook into Web Components. More importantly, Chris dutifully explains why custom events
Quick Hit #11
Hey look at that, the State of CSS Survey for 2024 is open and taking submissions.
RTL Styling 101
A couple of weeks ago I was super excited about publishing my first CSS-Tricks post: "Letter Spacing is Broken. Forget about that though, what's important is
Regexes Got Good: The History And Future Of Regular Expressions In JavaScript — Smashing Magazine
Although JavaScript regexes used to be underpowered compared to other modern flavors, numerous improvements in recent years mean that’s no longer true. Steven Levithan evaluates the history and present state of regular expressions in JavaScript with tips to make your regexes more readable, maintainable, and resilient.
All About JavaScript Loops
Every programming language has loops. Loops perform an operation (i.e., a chunk of work) a number of times, usually once for every item in an array or list,
HTML Attribute to Allow/Disallow Handwriting Input
A new explainer for a new HTML attribute to handle handwritten inputs. Like this:
Best Of Pro Scheduler Libraries — Smashing Magazine
For teams working remotely across the globe or together in an office, as well as for any group of collaborating users, a scheduler can be a valuable tool indeed. In this post, you’ll find some of the best commercial web scheduler libraries (JavaScript based) with amazing UX and high efficiency that are currently available.
CSS Olympic Rings
It was a few years ago during the 2020 Olympics in Tokyo 2020 that I made a demo of animated 3D Olympic rings. I like it, it looks great, and I love the
It’s Time To Talk About “CSS5” — Smashing Magazine
Have you ever wondered what happened after CSS3? It’s common knowledge that we never saw CSS4 come after it, yet we have a plethora of new features that have no similar way of defining when they were introduced. The W3C CSS-Next community group is actively searching for better approaches for how we describe the evolution of CSS over time and identify feature sets as effectively as we did with CSS3
CSS Functions and Mixins Module Notes
Most days, I'm writing vanilla CSS. Thanks to CSS variables and nesting, I have fewer reasons to reach for Sass or any other preprocessor. The times I reach
Javascript SEO: How Google Crawls, Renders & Indexes JS
Over the years, Google's treatment of JavaScript has changed, leaving us with misconceptions of how it's indexed. Here, we debunk the myths.
Flags as Code in Next.js
The Flags SDK is a free open-source library that gives developers the tools they need to use feature flags in Next.js and SvelteKit applications.
