Skip to main content
Fresh Article

#195: How to Draw a Line with CSS

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 mean by a line anyway? We’ll mostly talk about a 1px solid horizontal line, but we’ll veer off a little bit and talk about other lines. Can’t CSS draw a line from any point to any point? Not really, actually — unless we get pretty fancy with SVG that is.… Read article “#195: How to Draw a Line with CSS”



The CSS font-kerning property defines the way specific pairs of letters are spaced.

You see, fonts often contain information about how much breathing room a character has on its left and right edges.

The proper term for the spacing is sidebearings.

When two characters are placed next to each other, their sidebearings add up to form the actual space between characters.

The right sidebearing of A and the left sidebearing of V define the space between them.

Font designers … Read article “font-kerning”


Linearly Scale font-size with CSS clamp() Based on the Viewport

Responsive typography has been tried in the past with a slew of methods such as media queries and CSS calc().

Here, we’re going to explore a different way to linearly scale text between a set of minimum and maximum sizes as the viewport’s width increases, with the intent of making its behavior at different screen sizes more predictable — All in a single line of CSS, thanks to clamp().

The CSS function clamp() is a heavy hitter. It’s … Read article “Linearly Scale font-size with CSS clamp() Based on the Viewport”


#194: Jetpack’s Social Integration

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 it up, and protect it. But it’s a feature I love nonetheless.

CSS-Tricks has social media accounts, for example, the Twitter handle @css. We largely use that account to notify folks when new content has been published to the site, and it’s been that way long enough … Read article “#194: Jetpack’s Social Integration”


A Gentle Introduction to Using a Docker Container as a Dev Environment

Sarcasm disclaimer: This article is mostly sarcasm. I do not think that I actually speak for Dylan Thomas and I would never encourage you to foist a light theme on people who don’t want it. No matter how wrong they may be.

When Dylan Thomas penned the words, “Do not go gentle into that good night,” he was talking about death. But if he were alive today, he might be talking about Linux containers. There is no way to … Read article “A Gentle Introduction to Using a Docker Container as a Dev Environment”


The Empty Box

When I was in high school, we learned about “The Black Box” which is concept in theater. If memory serves me right, the approach was a simple and elegant one: that you can take any space, any black box, and make it come to life with a story. I liked the idea that it’s possible to convey anything, tell any story, and create any reality — all in the confines of what equates to a black box, a … Read article “The Empty Box”



In CSS, the mask-size property specifies the size of a mask layer image. In many ways, it works very much like the background-size property.

.element {
  mask-image: url(star.svg);
  mask-size: 200px 100px;

Masking allows you to display selected parts of an element while hiding the rest. The size of the mask is defined by the mask-size property.… Read article “mask-size”


Using Markdown and Localization in the WordPress Block Editor

If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?

Since the block editor is based on React, we may be tempted to use React components and HTML code for the documentation. That is the approach I followed in my previous article, which demonstrated a way to show documentation in a modal window.… Read article “Using Markdown and Localization in the WordPress Block Editor”


#193: Scully: the SSG for Angular

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 Tara pointed out to me.

I don’t know much Angular at all. In fact, I didn’t have the Angular CLI installed on my machine at all when we started this video, so that ends up being one of the first things we do. Then we get into scaffolding a new … Read article “#193: Scully: the SSG for Angular”


Jamstack Conf

Keep browsing in the archives

Monthly Mixup


Programming Sass to Create Accessible Color Combinations


Need to Test API Endpoints? Two Quick Ways to Do It.


HTTPS is Easy!


Fancy Ampersand

Monthly Sponsor
Thanks, Fauna