Video Screencasts

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”

(This is a sponsored video I worked on between us at CSS-Tricks and Webflow. I think Webflow is a fascinating product for building websites that is, in my opinion, … Read article “#175: 7 Things to Know About Webflow”

There is a feature of Chrome DevTools that lets you:

1. See the code of any given resource the current web page is using (like CSS and JavaScript).
2. “Pretty Print” it

And by “we’re”, I mean us, front-end developers ;)

Here’s the website that goes with this talk.

This is a talk I put together where I postulate that, over time, … Read article “#173: Ooooops I guess we’re full-stack developers now.”

I find that 98% of all my SVG usage comes from pre-created SVG files or vector art in some design software that I ultimately export as SVG. Not super often … Read article “#172: Hand SVGing a Curved Line”

The same basic idea as the cards on the homepage of v17 of this site. … Read article “#171: Movable Stacked Card Row in CSS”