Using max() for an inner-element max-width
I go into all this in The "Inside" Problem. The gist: you want an edge-to-edge container, but the content inside to have a limited width. I think there is
Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs
Beyond using media queries and modern CSS layouts, like flexbox and grid, to create responsive websites, there are certain overlooked things we can do well to
Supercharging Number Inputs
Speaking of number scrubbing (i.e. adding mouse UX to number inputs), you can also add better keyboard commands to number inputs. Kilian Valkhof explains how
Stroke Text CSS: The Definitive Guide
Whenever I think of stroked text on the web I think: nope.
How to Simplify SVG Code Using Basic Shapes
There are different ways to work with icons, but the best solution always includes SVG, whether it’s implemented inline or linked up as an image file. That’s
State of Jamstack 2020: Data Deep Dive
The Jamstack, a modern approach to building websites and apps, delivers better performance, higher security, lower cost of scaling, and a better developer
How to Make a Media Query-less responsive Card Component
Fun fact: it’s possible to create responsive components without any media queries at all. Certainly, if we had container queries, those would be very useful
A Complete Walkthrough of GraphQL APIs with React and FaunaDB
As a web developer, there is an interesting bit of back and forth that always comes along with setting up a new application. Even using a full stack web
Going Jamstack with React, Serverless, and Airtable
The best way to learn is to build. Let’s learn about this hot new buzzword, Jamstack, by building a site with React, Netlify (Serverless) Functions, and
Deeper DX
Shawn Wang thinks there are deeper, perhaps more uncomfortable, places to go with developer experience (DX) beyond the surface-level stuff that we recently
A Bit on CI/CD
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Doom Damage Flash on Scroll
The video game Doom famously would flash the screen red when you were hit. Chris Johnson not only took that idea, but incorporated a bunch of the UI from Doom
Comparing Data in Google and Netlify Analytics
Jim Nielsen:
Designing a JavaScript Plugin System
WordPress has plugins. jQuery has plugins. Gatsby, Eleventy, and Vue do, too.
Where Does Logic Go on Jamstack Sites?
Here’s something I had to get my head wrapped around when I started building Jamstack sites. There are these different stages your site goes through where you
Leading-Trim: The Future of Digital Typesetting
Update: The leading-trim property was renamed to text-box-trim and is starting to gain browser support. You can read more about text-box-trim (as well as the
Optimize Images with a GitHub Action
I was playing with GitHub Actions the other day. Such a nice tool! Short story: you can have it run code for you, like run your build processes, tests, and
To grid or not to grid
Sarah Higley does accessibility work and finds that "tables and grids are over-represented in accessibility bugs."
Plyr: CSS Styleable Video Player
I just stumbled across Plyr from Sam Potts, a JavaScript library for styled video players. What struck me about it is that you can list YouTube videos as the
The New CSS-Tricks Video Intro by dina Amin
You know we do video screencasts, right? It's not, like, super regular, but I have done them for a long time, still like doing them, and plan to keep doing
CSS-Tricks Chronicle XXXIX
Hey gang! I've been fortunate enough to be a guest in a variety of different here, so I thought it was time for another Chronicle post. You know, those
What I Learned by Fixing One Line of CSS in an Open Source Project
I was browsing the Svelte docs on my iPhone and came across a blaring UI bug. The notch in the REPL knob was totally out of whack. I’m always looking to
That's Just How I Scroll
How do you know a page (or any element on that page) scrolls? Well, if it has a scrollbar, that's a pretty good indication. You might still have to scrapple
zerodivs.com
Pretty neat little website from Joan Perals, inspired by stuff like Lynn's A Single Div. With multiple hard-stop background-image gradients, you don't need
More Control Over CSS Borders With background-image
You can make a typical CSS border dashed or dotted. For example:
What does 100% mean in CSS?
When using percentage values in CSS like this...
Every Website is an Essay
Every website that’s made me oooo and aaahhh lately has been of a special kind; they’re written and designed like essays. There’s an argument, a playfulness
font-weight: 300 considered harmful
Tomáš Janoušek:
HTML for Subheadings and Headings
Let's say you have a double heading situation going on. A little one on top of a big one. It comes up, I dunno, a billion times a day, I'd say. What HTML do
TypeScript, Minus TypeScript
Unless you’ve been hiding under a rock the last several years (and let’s face it, hiding under a rock sometimes feels like the right thing to do), you’ve
JavaScript Fatigue
From Nicholas Zakas' newsletter, on how he avoids JavaScript fatigue:
Chapter 1: Birth
Sir Tim Berners-Lee is fascinated with information. It has been his life’s work. For over four decades, he has sought to understand how it is mapped and
Warp SVG Online
The warping is certainly the cool part here. Some fancy math literally transforms the path data to do the warping. But the UX detail work here is just as
Computed Values: More Than Meets the Eye
Browser DevTools are indispensable for us front end developers. In this article, we'll take a look at the Computed tab, a small corner of the DevTools panel
Making Sense of react-spring
Animation is one of the trickier things to get right with React. In this post, I’ll try to provide the introduction to react-spring I wish I had when I first
Jetpack CRM
About a year ago, Automattic bought up Zero BS CRM. The thinking at the time was that it could be rebranded into the Jetpack suite and, well, that happened.
The Cicada Principle, revisited with CSS variables
Lea Verou digging up the CSS trickery classic and applying it to clip the backgrounds of some code blocks:
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.