Video Screencasts

Stupid simple, right? It is! But it’s fun to think about for a few minutes and count a bunch of different ways we could do it. And what do I … Read article “#195: How to Draw a Line with CSS”

Jetpack can help automate your site’s social media.

It’s a pretty small feature compared to all the huge stuff Jetpack can do, like improve your site’s search, back … Read article “#194: Jetpack’s Social Integration”

Tara Z. Manicsic joined me for this video, setting up the very basics of Scully, which is a Static Site Generator for Angular — nay, the SSG for Angular, as … Read article “#193: Scully: the SSG for Angular”

As amazing as Git is for handling your source code, you can certain git (lol) yourself into trouble. What if you make a change to a file and you want … Read article “#192: Git Tricks for Getting Yourself Out of Trouble”

Andy Bell joins me to talk through his CSS methodology he calls CUBE CSS. That’s Composition, Utility, Block, and Exception.… Read article “#191: Learn by doing: CUBE CSS”

One of the whole points of the Shadow DOM is that it provides encapsulation. No styles out, no styles in. But there are ways “through” the Shadow DOM, and one … Read article “#190: CSS Custom Properties Penetrate the Shadow DOM”

This is the last video in our little series on using Notion. We’ve covered how Notion is great for working on web development teams. But another thing that makes Notion … Read article “#189: Notion for Personal & Public Use”

Snook published an article titled “Overlapping Header with CSS Grid” where he looks at a header design pattern that I feel transcends trends and has been popular forever. … Read article “#188: Exploring the Overlapping Header Pattern”

This is the second video in 3-video series on using Notion. In Part 1 we covered a lot of ground on what Notion is how it’s great for any … Read article “#187: Notion for Team Meetings & Documentation”

I’m a big fan of Notion, particularly for keeping teams in sync. I work on teams of developers, and I find it works particularly well for that. If I … Read article “#186: Notion for Web Development Teams”

Masking in CSS is one way to hide parts of the element and show others. Another is clip-path, but let’s not focus on that today. “Masks are images; Clips … Read article “#185: Playing with CSS Masks”

The fact that lists render their markers outside their own box (by default) is slightly weird. Any hidden overflow or overhanging off the edge of the browser will hide them. … Read article “#184: Inside & Aligned Lists”

It’s a bonafide phenomenon!

I’m talking about the idea of image hosting services that allow you to manipulate the URL to the image in order to transform it. … Read article “#183: Art Directing Images, the Picture Element, and Image CDNs”

SFC as in “Single File Component” which is something that Vue offers and Vue people seem to love. I’ve written very little Vue in my days, but I’m a fan! … Read article “#182: Baby’s First Vue SFC”

I had a dumb little issue the other day where a nested list didn’t quite have the right spacing. I was only adding margin-bottom on the list elements and the … Read article “#181: Poking at HTML Lists”

Fair warning: I’m no expert on this stuff, I’m just playing around with video on the web and addressing some issues I have when showing off video clips in blog … Read article “#180: Tinkering with Video on Mobile”

Using CSS grid to make a grid, is, well, the whole point. But what if you want all those grid items to maintain an aspect ratio, like a 1:1 square? … Read article “#179: A Grid of Squares”

I wanted to make sure you understand exactly what Percy can do for you, hence the title. When you commit a change to your websites Git repo, like in a … Read article “#178: Percy Catches Visual Changes in any Workflow”

This is the basics of how I work locally with a WordPress site, and then getting it to production.

Flywheel is a sponsor of CSS-Tricks, and I’m glad they are … Read article “#177: Local WordPress Development to Production Workflow”

Matt Perry from Framer and I take a look at the React animation library Framer Motion.

First, we take a look at how simple the API is. You control … Read article “#176: Working with Framer Motion”