Video Screencasts

• static: the default
• relative: allows you to nudge around with top/right/bottom/left, making z-index work, gives you a positioning context
• absolute:

The Stackbit app helps you kick out a new Jamstack site very quickly. Pick a theme, a static site generator, and a CMS and it’ll get a repo going for … Read article “#197: A Look at Stackbit and Stackbit Studio”

Kyle is a JavaScript guy. He knows a ton about the web, and plenty about CSS too, but isn’t as up-to-date on modern CSS layout tools like flexbox and grid… Read article “#196: Learning Grid & Flexbox with Kyle Simpson”

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”