npm ruin dev
In 2020, I rediscovered the enjoyment of building a website with plain ol’ HTML, CSS, and JavaScript — no transpilin’, no compilin’, no build tools other than
How to Create a Favicon That Changes Automatically
I found this Free Favicon Maker the other day. It’s a nice tool to make a favicon (true to its name), but unlike other favicon generators, this one lets you
Creating websites with prefers-reduced-data
Spoiler alert: There is no support for it yet. But it is defined in the Media Queries Level 5 spec that includes other recent, but more familiar user
TypeScript & Relevance
In our wide world of building for the web, we have every opportunity to talk about tools. We lunge to fill every gap we find in our projects with a definitive
Very Extremely Practical CSS Art
I've always enjoyed the CSS art people create, but I’ve never ventured into it much myself. I'm familiar with many of the tricks involved, but still find it
Web Performance Calendar
The Web Performance Calendar just started up again this year. The first two posts so far are about, well, performance! First up, Rick Viscomi writes about the
Painting With the Web
Matthias Ott, comparing how painter Gerhard Richter paints (do stuff, step back, take a look) to what can be the website building process and what can wreck it:
Under-Engineered Responsive Tables
I first blogged about responsive data tables in 2011. When responsive web design was first becoming a thing, there were little hurdles like data tables that
Native CSS Masonry Layout In CSS Grid
Rachel Andrew introducing the fact that masonry layout is going to be a thing in native CSS via CSS grid layout. The thing with masonry is that we can already
Lots of Ways to Use Math.random() in JavaScript
Math.random() is an API in JavaScript. It is a function that gives you a random number. The number returned will be between 0 (inclusive, as in, it’s possible
A Complete State Machine Made With HTML Checkboxes and CSS
State machines are typically expressed on the web in JavaScript and often through the popular XState library. But the concept of a state machine is adaptable
Considerations for Making a CSS Framework
Lessons learned from building a framework (Halfmoon) using CSS variables, and the future of customizability and user personalization on the web.
How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy
A web font workflow is simple, right? Choose a few nice-looking web-ready fonts, get the HTML or CSS code snippet, plop it in the project, and check if they
The Core Web Vitals hype train
Some baby bear thinking from Katie Sylor-Miller:
Creating UI Components in SVG
I’m thoroughly convinced that SVG unlocks a whole entire world of building interfaces on the web. It might seem daunting to learn SVG at first, but you have a
Graphery SVG
I've compared SVG and Canvas before. If you're trying to decide between them, read that. I'd say the #1 difference between them is vector (SVG) versus raster
A Dynamically-Sized Sticky Sidebar with HTML and CSS
Creating page content that sticks to the viewport as you scroll, something like a jump-to-anchor menu or section headings, has never been easier. Throw a
How You Might Build a Modern Day Webring
I'm sure different people picture different things when they think about webrings, so let me clarify what I picture. I see an element on a website that:
Thinking Outside the Box with CSS Grid
Great tutorial from Alex Trost (based on some demos, like this one, from Andy Barefoot) showcasing how, while CSS grid has straight grid lines across and
Creating WebGL Effects with CurtainsJS
This article focuses adding WebGL effects to <image> and <video> elements of an already “completed” web page. While there are a few helpful
Upptime
GitHub Actions are like free computers.
Copyediting with Semantic HTML
Tracking changes is a quintessential copyediting feature for comparing versions of content. While we’re used to tracking changes in a word processing
Jetpack Backup
It's no secret that CSS-Tricks is a WordPress site. And as such, we like to keep things WordPress-y, like enabling the block editor and creating some custom
How Film School Helped Me Make Better User Experiences
Recently, I finished a sixty-day sprint where I posted hand-coded zombie themed CSS animation every day. I learned a lot, but it also took me back to film
My WordPress Comments Wishlist
A built-in commenting system is one of the reasons people reach for WordPress (and often stay there long-term). While I do think having a comment system is
Libraries for SVG Drawing Animations
In 2013, Jake Archibald introduced this cool trick of animating an SVG path to look like it’s drawing itself. It’s 2020 now, and the trick is still popular.
The Cleanest Trick for Autogrowing Textareas
Earlier this year I wrote a bit about autogrowing textareas and inputs. The idea was to make a <textarea> more like a <div> so it expands in
The Raven Technique: One Step Closer to Container Queries
For the millionth time: We need container queries in CSS! And guess what, it looks like we're heading in that direction.
ARIA in CSS
Jeremey reacting to Sara's tweet, about using selectors instead of classes when the styling you are applying is directly related to the ARIA state.
Netlify Background Functions
As quickly as I can:
How to Detect When a Sticky Element Gets Pinned
Totally agree with David, on CSS needing a selector to know if a position: sticky; element is doing its sticky thing or not.
JavaScript Operator Lookup
Okay, this is extremely neat: Josh Comeau made this great site called Operator Lookup that explains how JavaScript operators work. There are some code
A Continuous Integration and Deployment Setup with CircleCI and Coveralls
Continuous Integration (CI) and Continuous Deployment (CD) are crucial development practices, especially for teams. Every project is prone to error,
How to Create a Commenting Engine with Next.js and Sanity
One of the arguments against the Jamstack approach for building websites is that developing features gets complex and often requires a number of other
Quick LocalStorage Usage in Vue
localStorage can be an incredibly useful tool in creating experiences for applications, extensions, documentation, and a variety of use cases. I've personally
This page is a truly naked, brutalist html quine.
Here's a fun page coming from secretGeek.net. You don't normally think "fun" with brutalist minimalism but the CSS trickery that makes it work on this page is
Little Things on My Personal Site
I updated my personal website the other day. Always a fun project since it's one of the few where it's 100% just me. It's my own personal playground with no
Comparing Static Site Generator Build Times
There are so many static site generators (SSGs). It’s overwhelming trying to decide where to start. While an abundance of helpful articles may help wade
Anima 4.0: Go Straight From Design to React in the Design Handoff
Imagine this scenario: You get an email from the design team. It contains a link to a high-fidelity prototype of a React app they want you to build. You click
WordPress and Jamstack
I recently moderated a panel at Netlify's virtual Jamstack Conf that included Netlify CEO Matt Biilman and Automattic founder Matt Mullenweg. The whole thing
WooCommerce Payments, Now with Support for Subscriptions and Saved Cards
A little while back we shared the news that WooCommerce shipped a beta payments feature as part of its 4.0 release. It's a free plugin with no monthly costs
Smarter Ways to Generate a Deep Nested HTML Structure
A look at using HTML preprocessors to generate HTML, particularly deeply nested HTML, which is useful for a variety of interesting browser art and experimentation.
"Durable"
Looks like the word "durable" is an emerging term in the world of serverless. As I understand it, it's like allowing for state in places you wouldn't normally
Announcing the 2020 State of CSS Survey
Last year's State of CSS Survey yielded interesting results. There's the quick adoption of features, like calc() and CSS custom properties. There's also the
Comparing Styling Methods in 2020
Over on Smashing, Adebiyi Adedotun Lukman covers all these styling methods. It's in the context of Next.js, which is somewhat important as Next.js has some
The failed promise of Web Components
Lea has some words:
Our Best Posts on Web Components
A grouping of hand-selected posts from our site about Web Components. We've published a very useful article series from Caleb Williams, so that's here, but also sprinkled in some other informational and link posts on the subject.
The :focus-visible Trick
Always worth repeating: all interactive elements should have a focus style. That way, a keyboard user can tell when they have moved focus to that element.
People Problems
Just the other day, Jeremy Keith wrote that problems with performance work isn’t only a matter of optimization and fixing code, but also tackling people
Layoutit Grid: Learning CSS Grid Visually With a Generator
Layoutit Grid is an interactive open source CSS Grid generator. It lets you draw your designs and see the code as you go. You can interact with the code, add
Balancing on a Pivot with Flexbox
Let me show you a way I recently discovered to center a bunch of elements around what I call the pivot. I promise you that funky HTML is out of the question
Looking at AWS Amplify
AWS Amplify is a collection of tools from AWS to help you build applications.
On the Web Share API
I think the Web Share API is very cool (here's our coverage). In a nutshell, it taps into the native sharing features on whatever platform you're on, if that
CSS Media Queries Guide
CSS Media queries are a way to target browser by certain characteristics, features, and user preferences, then apply styles based on those things.
Parsel: A tiny, permissive CSS selector parser
If you've ever thought to yourself, gosh, self, I wish I could have an Abstract Syntax Tree (AST) of this CSS selector, Lea has your back.
There's a good reason why experienced devs say "it depends" so often
I feel like Jerod Santo really understood what I was trying to say in Weaved Webs, when I was trying to cover the emerging WordPress ("versus") Jamstack
Some Industry Podcasts
It's called The Clearleft Podcast if you can believe that. It gets into new (at least to me) concepts like Design Ops and Design Sprints, which are loaded
The Paper Prototype Rule
I’ve been lucky to have worked with some of the best designers in the industry, including Zhenya Rynzhuk, Louis Paquet, Maria de la Paz Vargas, and of course,
Make Your Own Dev Tool
Amber Wilson on making bookmarklets to help yo-self. She shows off one that injects an accessibility script — I like this approach, as it means you don't have
Some New Icon Sets
I've bookmarked some icon sets lately, partly because I can never find a nice set when I need to. I figured I'd even go the extra mile here and blog them so I