Custom Properties as State
Here's a fun idea from James Stanley: a CSS file (that presumably updates daily) containing CSS custom properties for "seasonal" colors (e.g. spring is
Cloudinary Tricks for Video
Creating video is time consuming. A well-made 5-minute video can take hours to plan, record, and edit — and that's before we start talking about
The Rules of Margin Collapse
Josh Comeau covers the concept of margin collapsing:
Simulating Drop Shadows with the CSS Paint API
Ask a hundred front-end developers, and most, if not all, of them will have used the box-shadow property in their careers. Shadows are enduringly popular, and
Create a Tag Cloud with some Simple CSS and even Simpler JavaScript
I’ve always liked tag clouds. I like the UX of seeing what tags are most popular on a website by seeing the relative font size of the tags, popular tags being
A Utility Class for Covering Elements
Big ol' same to Michelle Barker here:
Integrating TypeScript with Svelte
Svelte is one of the newer JavaScript frameworks and it’s rapidly rising in popularity. It’s a template-based framework, but one which allows for arbitrary
Continuous Performance Analysis with Lighthouse CI and GitHub Actions
Lighthouse is a free and open-source tool for assessing your website’s performance, accessibility, progressive web app metrics, SEO, and more. The easiest way
"Yes or No?"
Sara Soueidan digs into this HTML/UX situation. "Yes" or "no" is a boolean situation. A checkbox represents this: it's either on or off (uh, mostly). But is a
Recognizing Constraints
There’s a “C” word in web development that we don’t give enough attention to. No, I’m not talking about “continuous integration”, or even “CSS”. The “C” word
Retrospective on Fela
I really appreciate a real-world walkthrough of a technology. Not only in what that technology does, but why it was chosen and how it worked for a team.
Optimizing Image Depth
Something I learned (or, I guess, re-learned) this year is how important it is to pay close attention to the bit depth of images. Way back in the day, we used
Change vs. Inertia
Recently, I've become more deeply aware of the inherent tension between change and inertia, as it applies to the evolution and use of web technologies. These
What Makes CSS Hard To Master
Tim Severien:
I learned to love the Same-Origin Policy
I spent a good chunk of my work life this year trying (in collaboration with the amazing Noam Rosenthal) to standardize a new web platform feature: a way to
What's Old is New
This year, I learned a lot about how "old" tricks can solve a lot of modern problems if you use the right tools. Following the growth of Jamstack-style
25 Years of JavaScript & 25 Free Courses
Pluralsight is giving away 25 courses on JavaScript for free to celebrate JavaScript's 25th birthday. It's no cheapie, either. The courses range from getting
Write Code, Get Confetti
This year I learned about the canvas-confetti npm package. It is a simple JavaScript package that injects a (virtual, <canvas>) confetti explosion into
Three Ways to Distinguish a Site From the Norm
In an age where so much web design is already neat, clean, and simple, I can think of three ways to distinguish your site from the norm:
Learning to Simplify
When I first got this writing prompt, my mind immediately started thinking stuff like, “What tech have I learned this year?” But this post isn’t really about
Slow Movement
There was a time when I felt overwhelmed by how fast the web developed. It seemed like not a single day passed without a new plugin, framework, technique, or
How to Use the Locomotive Scroll for all Kinds of Scrolling Effects
I was recently looking for a way to perform scrolling effects on a project and I stumbled on the Locomotive Scroll library. It lets you perform a variety of
The Power of Lampshading
I enjoyed this blog post from Shawn. Lampshading is apparently the idea of a TV show calling attention to some weakness (like an implausible plot point) so
What’s New in WCAG 2.1: Label in Name
WCAG 2.1 Recommendations rolled out in 2018. It’s been a couple years now and there are some new Success Criterion. In this article, I will discuss Label in
Hell Yes! CSS!
Speaking of cool CSS stuff you can buy, Julia Evans' zine Hell Yes! CSS! is hot off the presses. A "zine" being 28 pages of "short, informative, and fun
Give Users Control: The Media Session API
Here’s a scenario. You start a banging Kendrick Lamar track in one of your many open browser tabs. You’re loving it, but someone walks into your space and you
HTTP Archive’s Annual State of the Web Report
The HTTP Archive looked at more than 7 million websites and compiled their annual report detailing how the sites were built. And there’s an enormous wealth of
Let’s Create a Lightweight Native Event Bus in JavaScript
An event bus is a design pattern (and while we’ll be talking about JavaScript here, it’s a design pattern in any language) that can be used to simplify
Why I love Tailwind
Max Stoiber wrote some interesting notes about why he loves Tailwind. (Max created styled-components, so he has some skin in the styling methodology game.)
Unconventional Stock Image Sources
This year, I learned that there is a wide world of free stock imagery available beyond Unsplash and Pexels. You see, I’ve been working on designing WordPress
Using CSS Custom Properties to Adjust Variable Font Weights in Dark Mode
Black isn’t always slimming.
2020 was not a good year for learning
There, I said it.
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
Super Tiny Icons
A bunch of SVG icons (of popular things) all under 1KB. SVG is awesome for golfing.
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
CSS Background Patterns
Nice little tool from Jim Raptis: CSS Background Patterns. A bunch of easy-to-customize and copy-and-paste backgrounds that use hard stop CSS gradients to
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.
