Friction Logs
I first heard the term "Friction Log" from Suz Hinton back in April on ShopTalk. The idea makes an extreme amount of sense: Use a thing, and write down
Getting the Most Out of Variable Fonts on Google Fonts
I have spent the past several years working (alongside a bunch of super talented people) on a font family called Recursive Sans & Mono, and it just
Want to get better at code? Teach someone CSS.
A friend of mine recently asked me to teach her to code. She was an absolute beginner, having no idea what coding really involves. I decided to start where I
The GitHub Profile Trick
Monica Powell shared a really cool trick the other day:
CSS Vocabulary
This is a neat interactive page by Ville V. Vanninen to reference the names of things in the CSS syntax. I feel like the easy ones to remember are "selector,"
Using Trello as a Super Simple CMS
Sometimes our sites need a little sprinkling of content management. Not always. Not a lot. But a bit. The CMS market is thriving with affordable, approachable
Bold on Hover... Without the Layout Shift
When you change the font-weight of a font, the text will typically cause a bit of a layout shift. That's because bold text is often larger and takes up more
Apple declined to implement 16 Web APIs in Safari due to privacy concerns
Why? Fingerprinting. Rather than these APIs being used for what they are meant for, they end up being used for gross ad tech. As in, "hey, we don't know
CMD+Z for Git is Here
Version control with Git has become a "commodity" by now: virtually every software project today uses Git, and virtually every developer knows Git to some
Pausing a GIF with details/summary
Steve Faulkner has a clever idea here. You can show an (animated) GIF and overlay a pause/play button on top of it — which is really a
How to Make a Monthly Calendar With Real Data
Have you ever seen a calendar on a webpage and thought, how the heck did they did that? For something like that, it might be natural to reach for a plugin, or
Levels of Fix
On the web, we have the opportunity to do work that fixes things for people. It's fascinating to me how different the scope of those fixes can be.
Creating a Gatsby Site with WordPress Data
In my previous article last week, I mentioned creating a partially ported WordPress-Gatsby site. This article is a continuation with a step-by-step
CSS Painting Order
Usually, when I see terms like "painting order" or "stacking context" my brain will start to shut off and my eyes will gloss over. Not that my brain doesn't
How to Italicize Text
HTML and CSS offer us the ability to italicize text. I’m talking about text like this. Let’s cover everything you’ll need to know.
Develop, Preview, Test
Guillermo:
Lazy Loading Images in Svelte
One easy way to improve the speed of a website is to only download images only when they’re needed, which would be when they enter the viewport. This “lazy
On dependency
Rob Weychert:
Backdrop Filter effect with CSS
I love these little posts where some tricky-looking design is solved by a single line of CSS using a little-known property. In this case, the design is a
Irregular-shaped Links with Subgrid
Michelle Barker covers a situation where you need offset rectangles part of a clickable area. The tricky part is having just the rectangles be clickable. That
Tradeoffs and Shifting Complexity
This is a masterclass from Dave:
We need more inclusive web performance metrics
Scott Jehl argues that performance metrics such as First Contentful Paint and Largest Contentful Paint don’t really capture the full picture of everyone’s
Memorize Scroll Position Across Page Loads
Hakim El Hattab tweeted a really nice little UX enhancement for a static site that includes a scrollable sidebar of navigation.
Frontity is React for WordPress
Some developers just prefer working in React. I don't blame them really, because I like React too. Maybe that's what they learned first. I've been using it
A little bit of plain Javascript can do a lot
Julia Evans:
How to Make a List Component with Emotion
I’ve been doing a bit of refactoring this week at Sentry and I noticed that we didn’t have a generic List component that we could use across projects and
Displaying the Current Step with CSS Counters
Say you have five buttons. Each button is a step. If you click on the fourth button, you're on step 4 of 5, and you want to display that.
Improving Chromium's browser compatibility in 2020
This is exactly what I love to hear from any browser vendor:
WordPress Contributors Seek Sponsorship for Improving Gutenberg Developer Docs
A couple of WordPress contributors are currently looking for folks to sponsor them to work on the documentation for the WordPress block editor (often referred
Building Serverless GraphQL API in Node with Express and Netlify
I’ve always wanted to build an API, but was scared away by just how complicated things looked. I’d read a lot of tutorials that start with “first, install
Links on Performance II
Just had a couple of good performance links burning a hole in my pocket, so blogging them like a good little blogger.
When Sass and New CSS Features Collide
Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can
Styling Layout Wrappers In CSS
Two things that strike me often about the web are how many ways there are to go about the same thing and how many considerations go into even the most
In Defense of a Fussy Website
The other day I was doom-scrolling twitter, and I saw a delightful article titled “The Case for Fussy Breakfasts.” I love food and especially breakfast, and
Quick Tips for High Contrast Mode
Sarah Higley has some CSS tricks up her sleeve for dealing with High Contrast Mode on Windows, which I learned is referred to as WHCM.
The Return of the 90s Web
One of my forever-lessons here on CSS-Tricks is that having your own website and blogging on it is a good idea. It's probably one of the best decisions I've
Line-Animated Hamburger Menu
This kind of SVG + CSS animation trickery is catnip to me. Mikael Ainalem shares how to draw a hamburger icon (the "three lines" thing you're well familiar
Some Typography Links III
I just can't stop opening excellent typography-related articles, which means I need to subject you to blog posts that round them up so I can clean up my open
The Mad Magazine Fold-In Effect in CSS
This was always my favorite thing in Mad magazine. One page (the inside of the back cover, I think) was covered in a zany illustration. You folded that page
WebP Image Support Coming to iOS 14
Apple announced a ton of new updates at yesterday's WWDC20 keynote address, from new hardware to updated applications. There's lots to gawk at and enough
Let's Make a Multi-Thumb Slider That Calculates The Width Between Thumbs
HTML has an <input type="range">, which is, you could argue, the simplest type of proportion slider. Wherever the thumb of that slider ends up could
An Overview of Scroll Technologies
Scroll-related animations have been used on the web for years. In recent years, they’ve started to become more common, perhaps in part due to devices being
Using Custom Property "Stacks" to Tame the Cascade
Since the inception of CSS in 1994, the cascade and inheritance have defined how we design on the web. Both are powerful features but, as authors, we've had
Rough Notation
This is a neat little library. It uses SVG to insert hand-drawn looking annotations to elements (probably text), like underlines and box highlights (there are
Just another +1 for subgrid
I'd say 85% of my grid usage is in one of these two categories...
Easing Animations in Canvas
The <canvas> element in HTML and Canvas API in JavaScript combine to form one of the main raster graphics and animation possibilities on the web. A
Web Engine Diversity and Ecosystem Health
As front-end developers, our job is working with browsers. Knowing how many we have and the health of them is always of great interest. As far as numbers go,
Everything You Need to Know About FLIP Animations in React
With a very recent Safari update, Web Animations API (WAAPI) is now supported without a flag in all modern browsers (except IE). Here’s a handy Pen
What is Developer Experience (DX)?
Developer Experience¹ is a term² with a self-declaring meaning — the experience of developers — but it eludes definition in the sense that people invoke it at
My Flywheel Landing Page
Flywheel is my WordPress hosting partner here. I use Local every day for my WordPress local development environment and use their hosting for all my WordPress
Striking a Balance Between Native and Custom Select Elements
Here’s the plan! We’re going to build a styled select element. Not just the outside, but the inside too. Total styling control. Plus we’re going to make it
Learn Z-Index Using a Visualization Tool
There are some neat interactive demos in here from Thiru Manikandan. There are a couple of very tricky things with z-index that never fail to confuse. In
On Adding IDs to Headings
Here's a two-second review. If an element has an ID, you can link to it with natural browser behavior. It's great if headings have them, because it's often
CUBE CSS
A CSS methodology from Andy Bell:
How to Reverse CSS Custom Counters
I needed a numbered list of blog posts to be listed with the last/high first and going down from there. Like this:
Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis
You can create stripes in CSS. That’s all I thought about in terms of CSS background patterns for a long time. There’s nothing wrong with stripes; stripes are
CSS :is() and :where() are coming to browsers
Šime Vidas with the lowdown on what these pseudo-selectors are and why they will be useful:
Cool Little CSS Grid Tricks for Your Blog
I discovered CSS about a decade ago while trying to modify the look of a blog I had created. Pretty soon, I was able to code cool things with more
The Trickery it Takes to Create eBook-Like Text Columns
There's some interesting CSS trickery in Jason Pamental's latest Web Fonts & Typography News. Jason wanted to bring swipeable columns to his digital book
How to Get All Custom Properties on a Page in JavaScript
We can use JavaScript to get the value of a CSS custom property. Robin wrote up a detailed explanation about this in Get a CSS Custom Property Value with