Can I :has()
I just joked that we're basically getting everything we want in CSS super fast (mostly referring to container queries, my gosh, can you imagine they are
A Crash Course in WordPress Block Filters
Blocks in WordPress are great. Drop some into the page, arrange them how you like, and you’ve got a pretty sweet landing page with little effort. But what if
Front-End Testing is For Everyone
Testing is one of those things that you either get super excited about or kinda close your eyes and walk away. Whichever camp you fall into, I’m here to tell
Jetpack Boost Handles Critical CSS For You
Critical CSS is one of those things I see in my performance reports but always seem to ignore. I know what it means. It means to put only the CSS required to
Serverless Functions: The Secret to Ultra-Productive Front-End Teams
Modern apps put high demands on frontend devs. Use serverless functions to avoid complexity & helps your team ship more with less stress.
Local: Always Getting Better
I've been using Local for ages. Four years ago, I wrote about how I got all my WordPress sites running locally on it. I just wanted to give it another high
A Thorough Analysis of CSS-in-JS
Wondering what’s even more challenging than choosing a JavaScript framework? You guessed it: choosing a CSS-in-JS solution. Why? Because there are more than
Awesome Standalone (Web Components)
In his last An Event Apart talk, Dave made a point that it's really only just about right now that Web Components are becoming a practical choice for
Links on Web Components
Two years ago, hold true:
Creating Powerful Websites with Serverless-Driven CMS Development
Choosing the right tools to build a website for your organization is essential, but it can be tough to find the right fit. Simple site builders like Wix and
What I Learned Building a Word Game App With Nuxt on Google Play
I fell in love with coding the moment I created my first CSS :hover effect. Years later, that initial bite into interactivity on the web led me to a new goal:
Links on Performance III
Making GitHub’s new homepage fast and performant — Tobias Ahlin describes how the scrolling effects are done more performantly thanks to IntersectionObserver
Wrangling Control Over PDFs with the Adobe PDF Embed API
By our last estimate, there are now more PDFs in the world than atoms in the universe (not verified by outside sources) so chances are, from time to time,
Should DevTools teach the CSS cascade?
Stefan Judis, two days before I mouthed off about using (X, X, X, X) for talking about specificity, has a great blog post not only using that format, but
Svelte for the Experienced React Dev
This post is an accelerated introduction to Svelte from the point of view of someone with solid experience with React. I’ll provide a quick introduction, and
CSS Hell
Collection of common CSS mistakes, and how to fix them
Learn CSS!
Ooo look at this mighty SEO flex from Google: Learn CSS! Well deserved — this is great content. Twenty-three chapters taking you through all the fundamentals
JSON in CSS
Jonathan Neal tweeted a heck of a little CSS trick the other day, putting JSON inside CSS and plucking it out with JavaScript. Valid values for custom
fit-content and fit-content()
Here's some hardcore deep-dive CSS nerdery from PPK. If you can wrap your mind around min-content (the smallest an element can be based on the content it
Notion API
The Public Beta of the Notion API dropped! Woot! Here's their guide. I've been a Notion user and fan for a long time, for both personal and professional team
How to Create Neon Text With CSS
Neon text can add a nice, futuristic touch to any website. I’ve always loved the magic of neon signs, and wanted to recreate them using CSS. I thought I’d
Auto-Generated Social Media Images
I've been thinking about social media images again. You know, the images that (can) show up when you share a link in places like Twitter, Facebook, or
Making Disabled Buttons More Inclusive
Let’s talk about disabled buttons. Specifically, let’s get into why we use them and how we can do better than the traditional disabled attribute in HTML
Next Gen CSS: @container
Chrome is experimenting with @container, a property within the CSS Working Group Containment Level 3 spec being championed by Miriam Suzanne of Oddbird, and a
CSS Pie Timer Re-Revisited
Kitty reflected on an ancient blog post here on CSS-Tricks on how to make an animated pie timer. The old technique is still clever. The new technique is
I could build this during the weekend
How many times have you heard that (or even uttered it under your own breath)? I know I've heard it in conversations. I also know I've wondered the same thing
Variable Aspect Ratio Card With Conic Gradients Meeting Along the Diagonal
I recently came across an interesting problem. I had to implement a grid of cards with a variable (user-set) aspect ratio that was stored in a --ratio custom
Migrating from Parcel to Snowpack
I find build tooling endlessly interesting, especially right now as we're in a juicy next-gen transitional period with players like Vite, wmr, Snowpack, and
Some Typography Links IV
These are a few great links about typography that have been burning a hole in my saved bookmarks folder that I'm just now getting around to sharing. There's good stuff in there, from how to choose typefaces for app design to ideas for how to fix the concept of font sizing in CSS.
Jetpack Backup: Roll Back Your WooCommerce Site Without Losing Orders
Here's a dilemma: what happens if your WooCommerce site has a problem and the quickest and best way to fix it is to roll back to a previous version? The
Let’s use (X, X, X, X) for talking about specificity
I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and
Creating Colorful, Smart Shadows
A bona fide CSS trick from Kirupa Chinnathambi here. To match a colored shadow with the colors in the background-image of an element, you inherit the
Swipey Image Grids
I hope people think of SVG as a vector format that is good for drawing things. There is plenty more to know, but here's one more: SVG is good for composition.
Safari 14.1 Adds Support for Flexbox Gaps
Yay, it's here! Safari 14.1 reportedly adds support for the gap property in flexbox layouts. We've had grid-gap support for some time, but true to its name,
Web Languages as Compile Targets
Jim Nielsen quoting Eric Bailey:
How to Monitor Core Web Vitals and Take Action with Raygun
Raygun is an error and performance monitoring software for websites and mobile apps. In the case of websites, you install their JavaScript snippet onto your
List Markers and String Styles
Lists—we’ve all worked with them in one form or another. I’m talking about HTML’s <ol> and <ul>. Much of the time, because we desire styling
Exploring color-contrast() for the First Time
Update! The color-contrast() function has been renamed to contrast-color(). See this article to get more recent information and use cases.
Text That Sometimes Turns to Emojis
There are some Unicode characters that some browsers just decide they are going to turn into emojis for you. I couldn't tell you why exactly, but here's what
The Almost-Complete Guide to Cumulative Layout Shift
Here's Jess B. Peck writing all about Google's Core Web Vitals:
The Making (and Potential Benefits) of a CSS Font
Not a typical one, at least. Each character is an HTML element, built with CSS. A true web font!
Still Hoping for Better Native Page Transitions
It would be nice to be able to animate the transition between pages if we want to on the web without resorting to hacks or full-blown architecture choices to
Sticky Headers: 5 Ways to Make Them Better
Page Laubheimer says that if you're going to do a sticky header...
How to Add a Double Border to SVG Shapes
Let’s say someone asks you to add a double border to some random geometric SVG shapes. For some reason, you can’t use any graphic editor — they need to be
Say Hello to CSS Container Queries
Container queries are finally here! Now available behind a flag in the latest version of Chrome Canary, you can go ahead and experiment to your heart’s
Intrinsic Typography is the Future of Styling Text on the Web
The way we style text hasn’t changed much over the years. There have been numerous advancements to help make things more flexible, like layouts, but in terms
How to Improve CSS Performance
There is no doubt that CSS plays a huge role in web performance. Milica Mihajlija puts a point on exactly why:
The Importance of Career Laddering
The title of this article is misleading. It’s not actually very important for an Engineering Manager to use career laddering, per se, or my process. It is,
Comparing the New Generation of Build Tools
A bunch of new developer tools have landed in the past year and they are biting at the heels of the tools that have dominated front-end development over the
The `ping` attribute on anchor links
I didn't know this was a thing until Stefan Judis's post:
axe DevTools Pro
I'm going to try to show you some things I think are useful and important about axe™ DevTools and use as few words as possible.
CSS Is, In Fact, Awesome
You've seen the iconic image. Perhaps some of what makes that image so iconic is that people see what they want to see in it. If you see it as a critique of
Coordinating Svelte Animations With XState
This post is an introduction to XState as it might be used in a Svelte project. XState is unique in the JavaScript ecosystem. It won’t keep your DOM synced
SvelteKit is in public beta
Rich Harris:
Some Articles About Accessibility I've Saved Recently
"Good news about display: contents and Chrome" — Rachel Andrew notes that the accessibility danger of using display: contents; is fixed in Chrome. The problem
Space Jam
It's certainly worth noting that the Space Jam website, which made its way into umpteen conference talks for being fabulous evidence of the web's strength in
Gaps? Gasp!
At first, there were flexboxes (the children of a display: flex container). If you wanted them to be visually separate, you had to use content justification
Jetpack Turns 10!
Ten years! That's a huge milestone for a project, especially one that had a pretty simple goal in mind from the start: give self-hosted WordPress sites many
Designing calculator apps
It is extremely weird that the calculator apps, even the default ones baked into desktop operating systems, embrace the UI and UX of those little cheap-o
Where the World Wide Web Shines
Here’s a fabulous post by Vitaly Friedman that looks at how to make accessible front-end components and what problems there are today when it comes to