Coder's Block

Announcing WordPress Export to Markdown v3

Fri, 21 Mar 2025 00:00:00 GMT

I’m happy to announce the release of WordPress Export to Markdown v3! With this milestone, I figured I’d take a moment to share some backstory and talk about the development of this project.

What Is It?

WordPress Export to Markdown is a CLI tool (a Node script) that helps you migrate from WordPress to a static site generator (like Eleventy, for example). It does this by converting your WordPress export file into Markdown files, as well as downloading and saving all your images.

The end results is all of your site content, collected and formatted to begin a new life as a static site.

A key feature is the user-friendly wizard that guides you through the process, asking you questions about the output you want. There are command line arguments for more advanced options, if you really want to fine-tune things.

New in v3

The v3 release streamlines the wizard and makes it more intuitive. Some questions were combined into multiple choice questions. Questions that affect filenames and folder structures will now show you an example path for each option, so you can see exactly what the result will be.

Advanced options are easier to use. Previously, you had to edit a settings.js file, which never felt great to me. Now everything can be set via command line arguments.

Draft posts are now saved. This was a long-standing feature request and I’m glad to finally get it in.

And of course, lots of bug fixes, refactoring, and quality of life improvements. Check the full release notes for more details.

I first started working on this thing way back in 2018, in preparation for migrating this very blog from WordPress to GatsbyJS. I thought others might find it useful, so I open-sourced it.

Since then, the project has been starred over 1,200 times and forked over 240 times on GitHub.

WordPress Export to Markdown has been recommended in the official documentation for Eleventy, Astro, and TinaCMS.

It’s also been mentioned in a ton of blog posts by folks writing about migrating from WordPress to their static site generator of choice.

“So long story short: wordpress-export-to-markdown is a phenomenal tool that I’d highly recommend to anybody looking to export WordPress content as Markdown.” – Josh Collinsworth

“Learning about this script made the process SO MUCH EASIER because I didn’t have to manually convert each post 💃🏼” – Kedasha Kerr

“This project made my migration an absolute breeze. Not only did it take a standard WordPress export, but it does a damn amazing job at reformatting everything in markdown… lonekorean my dude, I love you.” – Muffn

Next Steps

So what’s next? Well, I tend to work on this project in waves, as my time and mental energy allows. There are still some feature requests on the list I’ll probably get to eventually. I do have one big idea, but it might be a while before I get to it. We’ll see!

Making Orbit Animations with CSS Custom Properties

Mon, 16 Sep 2024 00:00:00 GMT

Let’s animate some CSS custom properties! This is a powerful way to approach CSS animations that would otherwise be tedious or impractical to implement.

Animate the What Now?

I’ll explain. Take this simple CSS animation, for example.

@keyframes slide-top {
  from { translate: -100px; }
  to { translate: 100px; }
}

.top-potato {
  animation: slide-top 3s infinite alternate;
}

It moves something from left to right, then back, over and over. It works just fine, but we can rewrite it to use a CSS custom property instead.

@property --x {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@keyframes slide-bottom {
  from { --x: -100px; }
  to { --x: 100px; }
}

.bottom-potato {
  translate: var(--x);
  animation: slide-bottom 3s infinite alternate;
}

The first thing we do is register an --x custom property using @property. This is important, since it enables the value of --x to be animated. Then instead of animating translate directly, we animate --x and set translate to var(--x).

And here are the results, with the “classic” approach on top and the CSS custom property approach on bottom.

See the Pen Simple Custom Property Animation by Will Boyd (@lonekorean) on CodePen.

You might be wondering why we went through all that trouble just to end up with the same animation. Fair point! This was just a basic example to show the concept and syntax.

From this point on, we’ll work through a series of increasingly interesting orbit animations and see how CSS custom properties help us craft them.

Simple Orbit Animation

Here’s a demo of a moon orbiting around a planet while staying upright. Take a look, then we’ll go through the CSS.

See the Pen Simple Orbit Animation by Will Boyd (@lonekorean) on CodePen.

At the heart of this animation is a custom property named --angle that goes full circle from 0deg to 360deg. Since these are angle values, we need to make sure we register the custom property as an <angle>.

@property --angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@keyframes revolve {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}

We can use some basic trigonometry to turn that animated angle value into (x, y) coordinates that follow a perfectly circular path. Don’t worry if you’re not a trigonometrist (real word, believe it or not)! The formula for this is pretty easy.

x = cos(angle) * amplitude
y = sin(angle) * amplitude

Together, cos() and sin() create points along a circle with a radius of 1. That’s pretty small (and unitless) which is where amplitude comes in — we’ll use it to scale the circle up by some pixel value.

Now that we have the formula, let’s translate it into CSS and add some finishing touches.

.moon {
  --amplitude: 150px;
  --x: calc(cos(var(--angle)) * var(--amplitude));
  --y: calc(sin(var(--angle)) * var(--amplitude));
  translate: var(--x) var(--y);
  animation: revolve 12s linear infinite;
}

It’s the same math discussed above, with --x and --y fed into the translate property to position the orbiting moon. The animation declaration gets --angle moving, putting it all in motion.

Note that --angle was registered via @property but --x and --y were not. They didn’t need to be registered since their values were not being directly animated, just indirectly animated via --angle.

Elliptical Orbit Animation

Let’s modify the animation to follow an elliptical path and add a bit of layering.

See the Pen Elliptical Orbit Animation by Will Boyd (@lonekorean) on CodePen.

We’ll keep --angle from before, but add an animated --z custom property, which we’ll use to control the z-index of the moon to make it pass in front of or behind the planet.

We could just animate z-index directly, but I’m leaning into the animated custom properties approach to show how it works and share a quirk I came across.

@property --angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@property --z {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@keyframes revolve {
  from {
    --angle: 0deg;
    --z: -1;
  }
  to {
    --angle: 360deg;
    --z: 0;
  }
}

--z is registered as an <integer> and animated from -1 (behind the planet) to 0 (in front of the planet). Integers in CSS are animated in whole number steps, meaning there are no intermediate decimal values. The value will flip at the midpoint of the animation, which is perfect since that’s when the moon will be off to the left of the planet.

The elliptical path is accomplished by decreasing the amplitude on the y-axis while keeping the same amplitude on the x-axis. So instead of a single --amplitude, we’ll have an --x-amplitude and a --y-amplitude with different values.

Here are the updated styles for the moon.

.moon {
  --x-amplitude: 150px;
  --y-amplitude: 40px;
  --x: calc(cos(var(--angle)) * var(--x-amplitude));
  --y: calc(sin(var(--angle)) * var(--y-amplitude));
  translate: var(--x) var(--y);
  z-index: calc(var(--z)); /* calc() is for Safari */
  animation: revolve 6s linear infinite;
}

Note that var(--z) is wrapped in a calc(). It shouldn’t be necessary to do that, but it fixes an issue in Safari with z-index not taking the value. Why? I don’t know.

Multiple Elliptical Orbits Animation

Why stop with just a moon?

See the Pen Multiple Elliptical Orbits Animation by Will Boyd (@lonekorean) on CodePen.

This continues to build on things we’ve already figured out. The twist here is that the satellite and potato follow a tilted elliptical orbit. Here’s the CSS to make that happen.

.moon, .satellite, .potato {
  --x-amplitude: 150px;
  --y-amplitude: 40px;
  --x: calc(cos(var(--angle)) * var(--x-amplitude));
  --y: calc(sin(var(--angle)) * var(--y-amplitude));
  transform:
    rotate(var(--rotation))
    translate(var(--x), var(--y))
    rotate(calc(var(--rotation) * -1));
  z-index: calc(var(--z)); /* calc() is for Safari */
  animation: revolve 6s linear infinite;
}

Mostly familiar stuff in there, but the difference is we’ve replaced translate with transform to do a sequence of three transformations.

rotate to tilt the orientation of the elliptical path by --rotation degrees.
translate to position like before, but now within the rotated orientation.
rotate again the opposite way to undo image rotation (compare this potato to the potato in the very first demo — its orientation is the same).

The moon, satellite, and potato each have their own --rotation. They also have staggered negative animation-delay values, so they don’t crash into each other.

.moon {
  --rotation: 0deg;
  animation-delay: 0s;
}

.satellite {
  --rotation: 60deg;
  animation-delay: -2s;
}

.potato {
  --rotation: 120deg;
  animation-delay: -4s;
}

Multiple Wobbly Elliptical Orbits Animation

One more, just for fun. Let’s make it wobbly.

See the Pen Multiple Wobbly Elliptical Orbits Animation by Will Boyd (@lonekorean) on CodePen.

The CSS is the same as before, except with an updated formula for --x and --y.

.moon, .satellite, .potato {
  --x-amplitude: 150px;
  --y-amplitude: 40px;
  --wobble-multiplier: 20;
  --wobble-amplitude: 5px;
  --x: calc(cos(var(--angle)) * var(--x-amplitude) + cos(var(--wobble-multiplier) * var(--angle)) * var(--wobble-amplitude));
  --y: calc(sin(var(--angle)) * var(--y-amplitude) + sin(var(--wobble-multiplier) * var(--angle)) * var(--wobble-amplitude));

  /* and all the other stuff from before */
}

I won’t go too deeply into the math, but basically it’s the same orbit formula as before but with another smaller and faster orbit added (literally, with a +).

You know what’s great about this demo? Thanks to the animated custom property approach, all we needed to do was update the math for a single animation. No HTML changes to add extra elements, no keyframe animations added.

Performance

Currently, CSS custom property animations are always handled by the main thread, even if they’re used with properties that can be GPU-accelerated (like translate and transform). In other words, these animations won’t be quite as smooth. For more details, Bramus has a good explanation of the issue.

Something I’ve noticed in particular is a visible jankiness when text is animated via CSS custom properties. Take a look at this demo.

See the Pen Custom Property Text Animation by Will Boyd (@lonekorean) on CodePen.

If you look closely, you can see the word “chunky” is jumping pixel by pixel. It doesn’t have sub-pixel animation. It’s easier to see on a non-retina display.

However, I’ve found that using will-change can smooth things out a bit (in Chrome and Safari at least, unfortunately not in Firefox). This is what I’m using to make the word “smooth” less jittery.

.smooth {
  will-change: translate;
}

The animation is still running on the main thread, but at least we get sub-pixel animation to make it smoother.

Until Next Time

Using CSS custom properties for animation is incredibly useful because it allows us to compose animations in a sensible way. We’re able to pass animated values through a bit of math to create custom animations, without resorting to tedious keyframing or nesting multiple animated elements.

Anyway, hope you had fun making orbital potatoes with me.

Anchor Links and How to Make Them Awesome

Mon, 20 May 2024 00:00:00 GMT

Anchor links (also called jump links) are an easy way to provide in-page navigation. For example, a table of contents could use anchor links to take readers straight to various sections in a page.

They’re super easy to set up, but sprinkle a little CSS on top and you can really make them shine. Let’s start with the basics and build from there.

A Humble Anchor Link

To create a page anchor, give an element an id. That’s it. You can use all sorts of elements as page anchors, though it’s pretty common to use headings.

<h1 id="my-anchor">Page anchor</h1>

Now you can link to the page anchor by using # with the id as an href.

<a href="#my-anchor">Jump to the page anchor</a>

There are two special values you can use as the href of an anchor link: #top or simply #. They both do the same thing, taking you to the very top of the page. No need to create a page anchor for these.

Let’s see these anchor links in action.

DemoAnchor Link: Basic

Notice in the demo how clicking an anchor link adds a hash (like #my-anchor) to the page’s URL in the address bar — which can be copied and used to link directly to a page anchor, like this.

Now let’s see what adding a little CSS can do.

Adding Smooth Scrolling

In the previous demo, the jump to the page anchor is instant, which can be a little disorienting. Fortunately, we can enable smooth scrolling with just CSS.

html {
  scroll-behavior: smooth;
}

Now give those anchor links another go.

DemoAnchor Link: Smooth

Adding Scroll Margin

Our anchor links so far have scrolled the page anchor to the very top edge of the viewport. Wouldn’t it be nice if there was a little breathing room there? We can make that happen by setting scroll-margin-top on the page anchor.

h1 {
  scroll-margin-top: 40px;
}

This will leave 40px of space between the top of the viewport and the page anchor. Check it out.

DemoAnchor Link: Smooth + Margin

This trick is super useful when you have a sticky header, to push page anchors down a bit so they aren’t positioned behind it.

Adding Targeted Page Anchor Styles

You can use the CSS :target pseudo-class to add styling to a page anchor when jumping to it.

h1:target {
  color: #71a819; /* green */
}

In this demo, clicking “Jump to the page anchor” enables the CSS above, making the page anchor text green. Clicking “Jump back to top” causes the <h1> to no longer be targeted, so the text will no longer be green.

DemoAnchor Link: Smooth + Margin + Styling

Fancier Target Styling

We can do more complex things with :target than just changing text color. Here’s a demo that highlights areas of content and animates a “Back to top” link into view.

DemoAnchor Link: Fancier Styling

Here’s the (abbreviated) HTML to show how things are set up.

<nav>
  <a href="#kiwis">Kiwis</a>
  <a href="#limes">Limes</a>
  <a href="#pears">Pears</a>
</nav>

<article>
  <h1 id="kiwis">Kiwis</h1>
  <p><!-- blurb about kiwis --></p>
</article>

<!-- more article elements here -->

<a class="back-to-top" href="#top">Back to top</a>

The article highlighting is accomplished with this CSS.

/* border is initially transparent */
article {
  border: 3px solid transparent;
}

/* border turns green for an article when the targeted h1 is within */
article:has(h1:target) {
  border-color: #71a819;
}

And here’s the CSS to show/hide the “Back to top” link.

.back-to-top {
  /* position link to be fixed in top right corner */
  position: fixed;
  top: 10px;
  right: 10px;

  /* link is initially faded out and shifted off right edge of viewport */
  opacity: 0;
  translate: calc(100% + 10px);

  /* half a second transition duration */
  transition: all 0.5s;
}

/* when body has a targeted h1 within, fade link in and shift into view */
body:has(h1:target) .back-to-top {
  opacity: 1;
  translate: 0px;
}

Nested Scrolling

All the examples so far had a single scroll container: the page itself. However, it’s possible to have nested scroll containers — for example, a scrollable <div> in the page. If you put a page anchor within a nested scroll container, anchor links pointing to it will scroll all necessary containers to bring the target into view. Neat!

Here’s a demo. Note that the scroll positions feel a bit off — scroll-margin hasn’t been added. We’ll talk about why next.

DemoNested Scroll Anchor Link: Without Padding

Scroll Margin vs. Scroll Padding

Now let’s fix those scroll positions. We’ve used scroll-margin-top before, but in Chrome and Edge, it won’t work here. The scroll margin won’t extend outside of the nested scroll container.

Fortunately, there’s another way to handle this. Instead of scroll-margin, we can use scroll-padding. They both give similar results, but the difference is:

scroll-margin is used on the page anchor.
scroll-padding is used on the scroll container.

Let’s update that demo with some scroll-padding.

html {
  scroll-padding-top: 130px;
}

.slide-container {
  scroll-padding-inline: 20px;
}

This adds some generous top scroll padding to the page so the buttons stay in view. It also adds some inline (left and right) scroll padding to the scrollable <div> so each slide is nicely centered in the scroll container.

DemoNested Scroll Anchor Link: With Padding

Scroll Into View with JavaScript

You can also use JavaScript to scroll to a page anchor by calling scrollIntoView(). At its simplest, it looks something like this.

const anchor = document.getElementById('my-anchor');
anchor.scrollIntoView();

Actually, you don’t even need a page anchor with an id on it. You can use scrollIntoView() to scroll to any element.

const element = document.querySelector('.whatever');
element.scrollIntoView();

In either case, the scrolling will be the same as we’ve seen so far, but with some caveats.

The page’s URL in the address bar won’t be updated with a hash.
The element that is scrolled to is not considered targeted, so the CSS :target pseudo-class won’t work.
In Chrome, Firefox, and Edge, when scrollIntoView() is used inside an iframe, it can “break out” and also affect the scroll position of the parent page.

If these are showstoppers for you, and you really need to use JavaScript, there is a workaround.

window.location.assign('#my-anchor');

This will behave as if an anchor link to #my-anchor was clicked.

ScrollIntoView() Options

Let’s talk more about scrollIntoView(). You can fine-tune how it scrolls by providing an (optional) object parameter. Here’s what it looks like with default values.

element.scrollIntoView({
  behavior: 'auto',
  block: 'start',
  inline: 'nearest'
});

The behavior property determines whether scrolling is instant or smooth.

'auto' - Uses the value of scroll-behavior in CSS.
'instant' - Jumps instantly to the element.
'smooth' - Scrolls smoothly to the element.

The block property determines the vertical scroll alignment.

'start' - Scrolls the top of the element to the top of the scroll container.
'center' - Scrolls the center of the element to the center of the scroll container.
'end' - Scrolls the bottom of the element to the bottom of the scroll container.
'nearest' - Scrolls just enough to make the element fully visible within the scroll container — or if the element is taller than the scroll container, scrolls just enough so that the element fills the scroll container. If the element is already within or completely filling the scroll container, nothing happens.

The inline property has similar logic, but for horizontal scroll alignment.

'start' - Scrolls the left of the element to the left of the scroll container.
'center' - Scrolls the center of the element to the center of the scroll container.
'end' - Scrolls the right of the element to the right of the scroll container.
'nearest' - Scrolls just enough to make the element fully visible within the scroll container — or if the element is wider than the scroll container, scrolls just enough so that the element fills the scroll container. If the element is already within or completely filling the scroll container, nothing happens.

There can be situations where the scroll alignment you ask for cannot be achieved — usually when an element is at the edge of a scroll container and there’s not enough scroll space to do it. Your browser will still scroll as close as it can.

Alright, that was a lot of words. It’s probably easier to see for yourself, so here’s a scrolling playground to test things out.

DemoScrollIntoView() Playground

Behind-the-Scenes Notes

I’ll end with some technical notes from making this article. There were some quirky things I had to deal with that I want to share.

I usually embed Codepen demos right into my articles, using <iframe>. As you can see, I didn’t do that this time, for two reasons.

Clicked anchor links counts as navigation, which go into your browser’s history. This is true even when those links are inside an <iframe>. So if you clicked a couple anchor links in embedded demos, then tried to hit the back button on your browser, you’d still be on this blog page.
This was briefly mentioned earlier, but using scrollIntoView() in an <iframe> will affect the scroll position of the parent page. There is no sandbox option to fix this. Especially with the last “playground” demo, it was super weird playing with an embedded demo and having the entire page move around. In my testing, Safari was the only browser to not do this.

Another note, when I was researching scroll-margin and scroll-padding, I saw a lot of sources that confusingly only talked about their relevance to scroll snapping, to the point that I wondered if using them for page anchors was an unintentional hack. This is not the case, as I discovered that the CSS scroll snap spec itself was amended to address this confusion specifically.

Playing with Infinity in CSS

Thu, 15 Feb 2024 00:00:00 GMT

CSS has an infinity constant. When I first learned about this, my brain lit up with all kinds of absurd possibilities. Let’s discuss! There might even be some practical use cases.

No promises, though.

Before we get into things, there’s one important ground rule: infinity can only be used inside a calc() statement. Alright, let’s go.

Never Lose a z-index Battle Again

Have you ever needed an element to appear on top of everything else, but the constantly escalating z-index arms race forces you to resort to higher and higher z-index values?

End the battle. Use infinity to get the highest possible z-index and win forever.

In the demo below, there is no possible z-index value for the blue card that will put it above the purple card with z-index: calc(infinity). Give it a try!

See the Pen Unbeatable z-index by Will Boyd (@lonekorean) on CodePen.

The Largest Possible Element

What happens when you create a <div> with a width and height of infinity pixels?

.big {
  width: calc(infinity * 1px);
  height: calc(infinity * 1px);
}

Notice we’re multiplying infinity by 1px to turn it into a pixel length.

Here’s a demo showing the result, with some extra output so we can get a better idea of what’s happening in the browser.

See the Pen The Largest Possible Element by Will Boyd (@lonekorean) on CodePen.

The values under getComputedStyle() are what the CSS properties resolve to. The values under getBoundingRect() reflect the actual size of the rendered <div> in the viewport. Here’s the code snippet.

// getComputedStyle()
const computed = window.getComputedStyle(bigEl);
const computedWidth = computed.getPropertyValue('width');
const computedHeight = computed.getPropertyValue('height');

// getBoundingRect()
const rect = bigEl.getBoundingClientRect();
const rectWidth = rect.width + 'px';
const rectHeight = rect.height + 'px';

First of all, infinity in CSS is not actually infinite. It’s just a really big number. My disappointment is immeasurable, unlike infinity in CSS.

On my machine (Windows desktop using Chrome) the total area of the <div> in the demo is 33,554,428px squared, which works out to roughly 79km². Not bad! But also not infinite.

Different Infinities?

Notice I said “on my machine” in that last paragraph. Although infinity is supported in all major browsers, the value it resolves to can be inconsistent across browsers and operating systems.

Some examples from the demo above:

Chrome on macOS gives me 16,777,214px for both the width and height, half what I get on Windows.
Firefox reports a width of 1.78957e+7px when using getComputedStyle() and 8,947,849px when using getBoundingRect().
Firefox doesn’t even try with height: calc(infinity * 1px) — just ignores it. But setting height: 17895697px (the largest CSS length Firefox allows) works. I don’t know why Firefox doesn’t resolve height to that value like it seems to do with width.

On top of all that, infinity can resolve to different values based on which CSS property you’re using it with. Remember that z-index example from earlier? The value of infinity there was 2,147,483,647 — consistent across all browsers I tested, but different from the various width and height values we just saw.

All these wacky values for infinity are not randomly picked, of course — they are a result of how the numbers are being stored. For example, 2,147,483,647 is 2³¹ - 1, the largest possible value for a signed 32-bit integer.

Animating to Infinity

What happens if you try to animate an element to infinity, like this?

.interstellar {
  animation: go 10s;
}

@keyframes go {
  to { translate: calc(infinity * 1px); }
}

Turns out the element will immediately jump to the end of the animation and stay there for the duration. So in this case, the element stays as far off to the right as the browser can handle for the entire 10 seconds.

Makes sense. There are no incremental values on the way to infinity. A fraction of infinity is still infinity. So for every frame of the animation, the animated value is infinity.

What happens when you set an infinite animation-delay?

.interstellar {
  animation-delay: calc(infinity * 1s);
}

You can probably guess. The animation never starts.

Practical Use Cases

Would you ever actually want to use infinity in your CSS? Maybe! Sometimes you just need a huge value (whatever it is) and infinity can give that to you.

For example, you can make a pill shape by using border-radius with a (non-percentage) length value. Using a value bigger than you need won’t change the shape and is actually a good idea in case the element changes size.

div {
  border-radius: calc(infinity * 1px);
}

See the Pen Pill Shape by Will Boyd (@lonekorean) on CodePen.

Another possible use is with a common snippet of CSS used to make content “screen reader only” by positioning it way off the side of the page.

.screen-reader-only {
  position: absolute;
  left: calc(infinity * -1px);

  /* and some other things */
}

But is infinity really any better than some arbitrarily big value like 9999px? Functionally, no. Same end result. But I think it does help make code more self-documenting, because infinity conveys intent. It expresses that it’s all about the magnitude, not a specific magic number.

Dividing by Zero and Going Negative

Dividing by zero will give you infinity. In other words, calc(1 / 0) and calc(infinity) are the same. This also works with units. So you can do something like calc(1px / 0) and get the same value as calc(infinity * 1px).

Good to know, but I’d still use infinity directly to make the CSS more obvious.

There’s also a -infinity constant that gives you the smallest possible value. No surprises here, it’s the same as multiplying infinity by -1.

The End

To recap, the main thing to know about CSS infinity is that it’s essentially shorthand for the largest possible value in a particular situation. This value can and will change between browsers, operating systems, and CSS properties.

Whether or not to use infinity is up to you. Browser support is pretty good, and infinity can be a good indicator of intention that makes your CSS more readable, but it’s certainly not mandatory.

Acronym Frustration

Mon, 05 Feb 2024 00:00:00 GMT

This is me trying to convince you to use acronyms less — or at least be more considerate when you do use them. Let me explain!

And yes, before someone calls me out on it, I am lumping initialisms in with acronyms.

The Frustration

We use a lot of acronyms. People in just about any industry could say that, but it’s especially true for those of us working in tech. And sure, acronyms are convenient when everyone knows them, but it’s easy to overestimate how often that’s the case.

I’ve been “the new guy” at a company enough times to know how frustrating it is when you’re trying to get up to speed, but everyone is speaking in archaic acronym lingo that obfuscates what they’re talking about.

It’s not just industry standard acronyms — at least you can google these. Acronyms for company-specific or internal-only things are more difficult. I’ve even seen people use acronyms that turned out to be someone’s initials. How could I have possibly known that? I don’t even know that person!

It’s frustrating. It feels like gatekeeping.

What to Do?

Obviously you can spell things out instead of using acronyms. That certainly works, but can sometimes be unwieldy.

Another option is to spell out an acronym the first time you use it. This works great for self-contained communication (like emails or docs). For example:

We’ll be enabling SQM (subscriptions queue manager) on March 2. If you have NOT migrated your apps to SQM yet, please reach out to…

Something else that can really help is providing an easily accessible “cheat sheet” of acronyms and their definitions. It’s not the perfect solution, since you’re still making people look things up, but it can be incredibly useful when unfamiliar acronyms are inevitably used.

Know Your Audience

I’m not asking for the complete eradication of all acronyms. They have their place. But thinking about who you’re talking to and using acronyms accordingly can be a massive help.

For example, when I’m talking to other web developers, I will absolutely use “CSS”. It would be kind of weird to say “cascading style sheets” every time.

On the other hand, when I’m talking to non-developers, I usually won’t even mention CSS. My team at work has settled on the term “custom styling” instead, which is great — it conveys what is actually being done while sidestepping a tech acronym entirely.

Bonus: Ridiculous Acronym

I’ll close this out with my favorite ridiculous acronym, just because of the sheer density of it: XHR. It’s actually an acronym of acronyms that fully expands to “extensible markup language hypertext transfer protocol request”. That’s 56 letters from 3. Not bad!

Nicer Text Wrapping with CSS text-wrap

Sun, 28 Jan 2024 00:00:00 GMT

Let’s take a look at the CSS text-wrap property and how we can use it to improve the way text flows on a web page.

Balanced Text

We can use text-wrap: balance to tell the browser to equalize (as much as it can) multiple lines of text. Check out the example below comparing default text wrapping with balanced text wrapping (works in Chrome, Edge, and Firefox).

See the Pen text-wrap: balance (basic) by Will Boyd (@lonekorean) on CodePen.

Nice. Manually balancing lines of text with <br> elements is a hassle and doesn’t fare well with responsive layouts. I’ve also seen JavaScript used to dynamically insert the <br> elements, but resorting to JavaScript to wrap text is not something I’m excited about. Letting the browser handle it for us with a single line of CSS is much nicer.

Headings are the prime candidate for text-wrap: balance, especially when they’re centered. Compare these two versions of a heading, unbalanced versus balanced (again, works in Chrome, Edge, and Firefox).

See the Pen text-wrap: balance (heading comparison) by Will Boyd (@lonekorean) on CodePen.

Just a note of caution, sometimes applying text-wrap: balance to left/right aligned headings can make text stack too much to one side, causing your layout to appear lopsided. In other words, ironically, balanced text can unbalance a layout. Use your best judgement!

Pretty Text

There’s also text-wrap: pretty, which tells the browser to use a better but slower algorithm for flowing text. This is intended to be used on body text to improve readability.

Probably the most popular benefit it provides is preventing orphans (an orphan is a word at the end of a paragraph that wraps into a line by itself, which can look a bit awkward). Here’s an example (works in Chrome and Edge).

See the Pen text-wrap: pretty (orphan) by Will Boyd (@lonekorean) on CodePen.

Notice how “wanted” would normally be an orphan, but text-wrap: pretty prevents that. There’s more going on than just wrapping an extra word before the orphan, though. See how “bit” was wrapped to the second line? That’s the algorithm adjusting multiple lines to improve readability. Much better than trying to avoid orphans by “gluing” the last two words of a paragraph together with a  .

Another benefit of text-wrap: pretty is reducing excessive hyphenation. Take a look at how it affects text with hyphenation enabled via hyphens: auto (again, works in Chrome and Edge).

p {
  hyphens: auto;
}

p.bottom {
  text-wrap: pretty;
}

See the Pen text-wrap: pretty (hyphenation) by Will Boyd (@lonekorean) on CodePen.

If, towards the end of a paragraph, there are multiple consecutive lines ending with hyphenated words, then text-wrap: pretty will adjust them. It’s a nice little readability improvement.

Browser Support

At the time of writing, text-wrap: balance is not yet supported in Safari, and text-wrap: pretty is not yet supported in Safari and Firefox. I do expect that full support will come eventually (it’s already in development for Safari).

The great thing though, is you can safely use text-wrap anyway. Browsers that don’t support it will just ignore it and wrap text normally, so you’re not any worse off.

Performance

Using text-wrap with balance or pretty invokes layout algorithms that do more work, which can lead to increased rendering time.

For text-wrap: balance, browsers safeguard against this by only doing the work if the text doesn’t exceed a certain number of lines. Currently, the limit is six lines for Chrome and Edge, and ten lines for Firefox. If the text goes beyond that, text-wrap: balance is ignored.

There is no such limit for text-wrap: pretty, which honestly had me slightly concerned. So I tested it.

For my test, I created a simple page that repeated a ten-line paragraph 200 times. I made sure the paragraph ended with an orphan for text-wrap: pretty to fix. Then in the Chrome dev tools performance tab, I enabled 6x CPU slowdown and checked how long it took the page to render — ten times without text-wrap: pretty and ten times with.

Averaged results:

Without text-wrap: pretty: 96.7ms
With text-wrap: pretty: 101.6ms

Not much of a difference, considering the amount of text and the 6x CPU slowdown. This makes me feel alright about using text-wrap: pretty. The render times were pretty stable during my testing, so I’m fairly confident in them, but will acknowledge that this wasn’t the most scientifically rigorous experiment.

In Closing

Generally speaking, you’ll want to use text-wrap: balance for headings and text-wrap: pretty for body text. Give them a try in your layout and see how they look. If they look good, great! It’s an easy way to improve the overall readability of your web pages. If not, that’s fine, you certainly aren’t required to use them.

If you’re interested in specific situational techniques for controlling text wrapping, check out my deep dive into text wrapping and word breaking.

Writing Is Hard

Mon, 01 Jan 2024 00:00:00 GMT

I didn’t blog a single time in 2023. In fact, I haven’t blogged since June of 2022.

I kept telling myself “hey, I should write something” but never did, and then enough of the year passed that I decided to just lean into it and make 2023 the year I took a break from writing.

It’s a Slow Process

The thing is, writing does not come naturally to me at all. I’m a terribly slow writer. Words don’t flow out of my brain, they just sort of… fall out like a game of Tetris where none of the pieces are stacking well. It’s hard to make them stack well.

So when I’m writing the sorts of long-form deep dive CSS articles that I tend to write, it’s an incredibly laborious process. And that’s just the writing part. There’s also the research, experimentation, coding up the demos, and testing. These types of blog posts typically take me about a month to finish, sometimes longer.

Yeah, Burnout

I love web development. It’s amazing that I can have a job doing something I enjoy so much. It’s also my favorite hobby, because, again, I love web development. There have been many times where, after a hard day of web development, I’d find myself relaxing with… more web development.

I’ve created a life for myself where my day job is web development, I run a web development blog, and I have multiple web development side projects. You can see where this is going.

Burnout is inevitable. When it hits, I have to prioritize what I put my energy into. Naturally, I prioritize the thing that pays the bills, putting the rest aside so that burnout doesn’t swallow me whole.

And that’s why I didn’t blog a single time in 2023.

I’m Not Done

This isn’t “goodbye” or anything like that. Just sharing my headspace. I still love web development, in case that wasn’t clear. I want to get back into blogging, but in a way that doesn’t consume too much of me. Maybe I’ll try writing more short-form blog posts.

We’ll see!

Star Wars Scene Transition Effects in CSS

Wed, 01 Jun 2022 00:00:00 GMT

You know those wipe transitions between scenes in Star Wars movies? Have you ever thought it would be awesome to recreate them with CSS? Probably not, but, well, here we are. Let’s do it.

Spoiler alert: this article is secretly a tutorial on animating CSS masks.

A Simple Gradient Mask

CSS masking allows you to control which pixels of an element are visible and which are transparent — masked, if you will. A mask comes in the form of an image or gradient. When a mask is applied to an element, it acts as a sort of map that determines the visibility of every pixel of the element.

Masking is not always binary. Pixels can be partially masked, resulting in semi-transparent pixels.

As an example, the demo below uses CSS masking to cross-fade two scenes together.

See the Pen Simple Gradient Mask by Will Boyd (@lonekorean) on CodePen.

The first scene has the Death Star. The second scene has Jyn Erso, and is positioned directly on top of the first scene. A gradient mask is used on the second scene to make its left side transparent, revealing the first scene.

Here’s how it’s set up in the HTML.

<div class="wrapper">
  <div class="scenes">
    <div class="scene-1"></div>
    <div class="scene-2"></div>
  </div>
</div>

And here’s the CSS. It’s mostly positioning and sizing, along with setting the scene images, but pay attention to the -webkit-mask-image declaration on .scene-2.

.wrapper {
  width: min(1000px, 100%);
}

.scenes {
  position: relative;
  aspect-ratio: 2.4 / 1;
}

.scene-1, .scene-2 {
  position: absolute;
  inset: 0;
  background-size: cover;
}

.scene-1 {
  background-image: url(scene-1.jpg);
}

.scene-2 {
  background-image: url(scene-2.jpg);
  -webkit-mask-image: linear-gradient(to right, transparent 33%, #fff 67%);
}

The mask is set on -webkit-mask-image and expressed as a linear-gradient() going from left to right. Let’s dissect it.

The first third is entirely transparent, so this portion of the scene is not visible.
The middle third progresses from transparent to opaque white, gradually fading the scene in.
The last third is entirely opaque white, causing this portion of the scene to be fully visible.

To sum it up, transparent pixels hide and opaque pixels show. The color doesn’t even matter. I like to use white, but any color will do. It’s all about the opacity.

It’s also worth mentioning that I’m using the vendor prefixed -webkit-mask-image (supported in all major browsers) but not mask-image (currently only recognized by Firefox and Safari). I’m doing this for the sake of brevity, but feel free to use them both together if you want.

.scene-2 {
  -webkit-mask-image: linear-gradient(to right, transparent 33%, #fff 67%);
  mask-image: linear-gradient(to right, transparent 33%, #fff 67%);
}

Horizontal Wipe Transition

Let’s build on top of what we’ve covered so far to create our first scene transition effect, a horizontal wipe. Take a look.

See the Pen Horizontal Wipe Transition by Will Boyd (@lonekorean) on CodePen.

The basic HTML and CSS set up is the same as last time. And once again, the mask is a linear-gradient() that fades from transparent to #fff in the middle.

So how is the fade animated across the scene? The small visualizer underneath gives you a hint. The mask is stretched to be wider than the actual scene, and is then animated to slide horizontally. Here’s the relevant CSS.

.scene-2 {
  background-image: url(scene-2.jpg);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 47.5%,
    #fff 52.5%
  );
  -webkit-mask-size: 210%;
  -webkit-mask-position: left;
}

/* these styles are activated on the .scene-2 element
   when the .scenes element is hovered or focused */
.scenes:is(:hover, :focus) .scene-2 {
  -webkit-mask-position: right;
  transition: -webkit-mask-position 2s linear;
}

The mask is sized with -webkit-mask-size: 210% — this provides a width of 100% for the scene to initially be fully transparent + 10% for the fade + another 100% for the scene to end up fully opaque.

To reveal the scene, we transition the value of -webkit-mask-position so the mask shifts from left-aligned to right-aligned. Note that the background-image doesn’t move, only the mask does.

CSS masking doesn’t just mask an element’s background, it masks the entire element and everything in it. See that “BB-8 and Rey” text on the second scene? That’s an <h2> element within the scene element, also being affected by the mask.

Iris Wipe Transition

Next up is an iris wipe, fading a scene in from the middle out. Heads up, the animation relies on the CSS properties and values API, which is not yet ready in Firefox and Safari, but is expected to come in the future.

See the Pen Iris Wipe Transition by Will Boyd (@lonekorean) on CodePen.

The basic HTML and CSS are still the same, but this time we’re using a radial-gradient() as the mask. We’ll need to approach the animation differently, since animating the mask’s position won’t give us the effect we want. This is a job for CSS custom properties.

The plan is to define the radial-gradient() with a custom property in it. Then we can animate that custom property to animate the gradient. But before we can do that, we need to register the custom property with @property.

@property --radius {
  syntax: '<percentage>';
  inherits: true;
  initial-value: -5%;
}

This tells the browser that there’s a custom property named --radius that holds percentage values and defaults to a value of -5%. With that done, we can animate --radius with a simple keyframes animation.

@keyframes scene-transition {
  to { --radius: 105%; }
}

Here’s the CSS for .scene-2 to bring it all together.

.scene-2 {
  background-image: url(scene-2.jpg);
  z-index: -1;
  -webkit-mask-image: radial-gradient(
    circle,
    #fff calc(var(--radius) - 5%),
    transparent calc(var(--radius) + 5%)
  );
}

.scenes:is(:hover, :focus) .scene-2 {
  z-index: 1;
  animation: scene-transition 2s linear forwards;
}

As --radius animates, so do the color-stop positions in the radial-gradient(). They are calculated to be -5% and +5% of the value of --radius to create the gradual fade that gives the wipe a soft edge.

The fade is why the value of --radius goes from -5% to 105%. We pull back an extra 5% at the start to ensure all pixels are fully hidden, then progress an extra 5% at the end to ensure all pixels are fully visible.

As mentioned earlier, the animation doesn’t work in Firefox and Safari. As a fallback, .scene-2 starts with z-index: -1 to hide it behind the first scene, which is flipped to z-index: 1 to show it on top of the first scene. So at least the scenes will still switch on all browsers.

Clock Wipe Transition

The clock wipe is probably the most iconic wipe transition from Star Wars. Let’s make it. Once again, we’ll be animating a CSS custom property.

See the Pen Clock Wipe Transition by Will Boyd (@lonekorean) on CodePen.

It uses a lot of the same techniques as the iris wipe, except this time we’re using conic-gradient() and animating an angle value.

@property --angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: -10deg;
}

@keyframes scene-transition {
  to { --angle: 370deg; }
}

.scene-2 {
  background-image: url(scene-2.jpg);
  z-index: -1;
  -webkit-mask-image:
    conic-gradient(
      #fff 0deg,
      #fff calc(var(--angle) - 10deg),
      transparent calc(var(--angle) + 10deg),
      transparent 360deg
    ),
    conic-gradient(
      transparent 340deg,
      #fff 360deg
    );
}

.scenes:is(:hover, :focus) .scene-2 {
  z-index: 1;
  animation: scene-transition 2s linear forwards;
}

We’re using two gradients in -webkit-mask-image. The first conic-gradient() is animated to create the clock wipe effect, but it leaves a hard edge at its starting point (at 0deg). That’s why there’s a second conic-gradient() to create a small fade right before the hard edge and soften it out. The gradients combine together to create the mask for the scene.

Shape Zoom Transition

Now for something different. I call this one a “shape zoom” transition. It’s not in any Star Wars movie, but I think it’s a pretty cool effect. It doesn’t animate a CSS custom property, so it works in all major browsers.

See the Pen Shape Zoom Transition by Will Boyd (@lonekorean) on CodePen.

I’ll just go ahead and spill the CSS for animating .scene-2, then talk through it.

@keyframes scene-transition {
  25% {
    filter: brightness(100%);
  }
  100% {
    filter: brightness(100%);
    -webkit-mask-size: 1800%;
  }
}

.scene-2 {
  background-image: url(scene-2.jpg);
  filter: brightness(0%);
  -webkit-mask-image: url(jedi-crest.svg);
  -webkit-mask-size: 10%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}

.scenes:is(:hover, :focus) .scene-2 {
  animation: scene-transition 4s cubic-bezier(1, 0, 1, 1) forwards;
}

No gradients this time. Instead, -webkit-mask-image is given an SVG of the Jedi crest, masking .scene-2 into the shape that you see. The mask is positioned in the center of the scene and sized to 10%. Adding filter: brightness(0%) removes all brightness, resulting in the Jedi crest being completely black.

The animation uses an aggressive cubic-bezier() curve that starts out really slow, then gets really fast.

-webkit-mask-size is animated from 10% to 1800% so that the narrow bit in the middle of the Jedi crest grows large enough to cover the entire scene, fully revealing Darth Maul.

filter: brightness() is animated from 0% to 100%, fading the scene from black back to normal. This part of the animation is set to finish at the 25% time mark, before -webkit-mask-size is done growing.

Until Next Time

We’ve covered quite a few CSS ingredients in this article, including different types of gradients, registering custom properties, and of course masking and animation.

I used Star Wars scenes as my examples, but my hope is that you can take these techniques and use them to create your own neat visual effects for other things.

Have fun with it. Thanks for reading!

Deep Dive into Text Wrapping and Word Breaking

Mon, 02 May 2022 00:00:00 GMT

Let’s talk about the various ways we can control how text wraps (or doesn’t wrap) on a web page. CSS gives us a lot of tools to make sure our text flows the way we want it to, but we’ll also cover some tricks using HTML and special characters.

Protecting Layout

Normally, text flows to the next line at “soft wrap opportunities”, which is a fancy name for spots you’d expect text to break naturally, like between words or after a hyphen. But sometimes you may find yourself with long spans of text that don’t have soft wrap opportunities, such as really long words or URLs. This can cause all sorts of layout issues. For example, the text may overflow its container, or it might force the container to become too wide and push things out of place.

It’s good defensive coding to anticipate issues from text not breaking. Fortunately, CSS gives us some tools for this.

Getting Overflowing Text to Wrap

Putting overflow-wrap: break-word on an element will allow text to break mid-word if needed. It’ll first try to keep a word unbroken by moving it to the next line, but will then break the word if there’s still not enough room.

See the Pen overflow-wrap: break-word by Will Boyd (@lonekorean) on CodePen.

There’s also overflow-wrap: anywhere, which breaks words in the same manner. The difference is in how it affects the min-content size calculation of the element it’s on. It’s pretty easy to see when width is set to min-content.

.top {
  width: min-content;
  overflow-wrap: break-word;
}

.bottom {
  width: min-content;
  overflow-wrap: anywhere;
}

See the Pen overflow-wrap + min-content by Will Boyd (@lonekorean) on CodePen.

The top element with overflow-wrap: break-word calculates min-content as if no words are broken, so its width becomes the width of the longest word. The bottom element with overflow-wrap: anywhere calculates min-content with all the breaks it can create. Since a break can happen, well, anywhere, min-content ends up being the width of a single character.

Remember, this behavior only comes into play when min-content is involved. If we had set width to some rigid value, we’d see the same word-breaking result for both.

Breaking Words without Mercy

Another option for breaking words is word-break: break-all. This one won’t even try to keep words whole — it’ll just break them immediately. Take a look.

See the Pen word-break: break-all by Will Boyd (@lonekorean) on CodePen.

Notice how the long word isn’t moved to the next line, like it would have been when using overflow. Also notice how “words” is broken, even though it would have fit just fine on the next line.

word-break: break-all has no problem breaking words, but it’s still cautious around punctuation. For example, it’ll avoid starting a line with the period from the end of a sentence. If you want truly merciless breaking, even with punctuation, use line-break: anywhere.

See the Pen word-break: break-all vs line-break: anywhere by Will Boyd (@lonekorean) on CodePen.

See how word-break: break-all moves the “k” down to avoid starting the second line with “.”? Meanwhile, line-break: anywhere doesn’t care.

Excessive Punctuation

Let’s see how the CSS properties we’ve covered so far handle excessively long spans of punctuation.

See the Pen Excessive Punctuation by Will Boyd (@lonekorean) on CodePen.

overflow-wrap: break-word and line-break: anywhere are able to keep things contained, but then there’s word-break: break-all being weird with punctuation again — this time resulting in overflowing text.

It’s something to keep in mind. If you absolutely do not want text to overflow, be aware that word-break: break-all won’t stop runaway punctuation.

Specifying Where Words Can Break

For more control, you can manually insert word break opportunities into your text with <wbr>. You can also use a “zero-width space”, provided by the &ZeroWidthSpace; HTML entity (yes, it must be capitalized just as you see it!).

Let’s see these in action by wrapping a long URL that normally wouldn’t wrap, but only between segments.

  <!-- normal -->
  <p>https://subdomain.somewhere.co.uk</p>

  <!-- <wbr> -->
  <p>https://subdomain<wbr>.somewhere<wbr>.co<wbr>.uk</p>

  <!-- &ZeroWidthSpace; -->
  <p>https://subdomain&ZeroWidthSpace;.somewhere&ZeroWidthSpace;.co&ZeroWidthSpace;.uk</p>

See the Pen Manual Word Break Opportunities by Will Boyd (@lonekorean) on CodePen.

Automatic Hyphenation

You can tell the browser to break and hyphenate words where appropriate by using hyphens: auto. Hyphenation rules are determined by language, so you’ll need to tell the browser what language to use. This is done by specifying the lang attribute in HTML, possibly on the relevant element directly, or on <html>.

<p lang="en">This is just a bit of arbitrary text to show hyphenation in action.</p>

  p {
    -webkit-hyphens: auto; /* for Safari */
    hyphens: auto;
  }

See the Pen hyphens: auto by Will Boyd (@lonekorean) on CodePen.

Manual Hyphenation

You can also take matters into your own hands and insert a “soft hyphen” manually with the  HTML entity. It won’t be visible unless the browser decides to wrap there, in which case a hyphen will appear. Notice in the following demo how we’re using  twice, but we only see it once where the text wraps.

<p lang="en">Magic? Abraca&shy;dabra? Abraca&shy;dabra!</p>

See the Pen Soft Hyphen by Will Boyd (@lonekorean) on CodePen.

hyphens must be set to either auto or manual for  to display properly. Conveniently, the default is hyphens: manual, so you should be good without any additional CSS (unless something has declared hyphens: none for some reason).

Preventing Text from Wrapping

Let’s switch things up. There may be times when you don’t want text to wrap freely, so that you have better control over how your content is presented. There are a couple of tools to help you with this.

First up is white-space: nowrap. Put it on an element to prevent its text from wrapping naturally.

See the Pen white-space: nowrap by Will Boyd (@lonekorean) on CodePen.

Preformatting Text

There’s also white-space: pre, which will wrap text just as you have it typed in your HTML. Be careful though, as it will also preserve spaces from your HTML, so be mindful of your formatting. You can also use a <pre> tag to get the same results (it has white-space: pre on it by default).

<!-- the formatting of this HTML results in extra whitespace! -->
<p>
  What's worse, ignorance or apathy?
  I don't know and I don't care.
</p>

<!-- tighter formatting that "hugs" the text -->
<p>What's worse, ignorance or apathy?
I don't know and I don't care.</p>

<!-- same as above, but using <pre> -->
<pre>What's worse, ignorance or apathy?
I don't know and I don't care.</pre>

p {
  white-space: pre;
}

pre {
  /* <pre> sets font-family: monospace, but we can undo that */
  font-family: inherit;
}

See the Pen Preformatted Text by Will Boyd (@lonekorean) on CodePen.

A Break, Where Words Can’t Break?

For line breaks, you can use <br> inside of an element with white-space: nowrap or white-space: pre just fine. The text will wrap.

But what happens if you use <wbr> in such an element? Kind of a trick question… because browsers don’t agree. Chrome/Edge will recognize the <wbr> and potentially wrap, while Firefox/Safari won’t.

When it comes to the zero-width space (&ZeroWidthSpace;) though, browsers are consistent. None will wrap it with white-space: nowrap or white-space: pre.

<p>Darth Vader: Nooooooooooooo<br>oooo!</p>

<p>Darth Vader: Nooooooooooooo<wbr>oooo!</p>

<p>Darth Vader: Nooooooooooooo&ZeroWidthSpace;oooo!</p>

See the Pen white-space: nowrap + breaking lines by Will Boyd (@lonekorean) on CodePen.

Non-Breaking Spaces

Sometimes you may want text to wrap freely, except in very specific places. Good news! There are a few specialized HTML entities that let you do exactly this.

A “non-breaking space” ( ) is often used to keep space between words, but disallow a line break between them.

<p>Something I've noticed is designers don't seem to like orphans.</p>

<p>Something I've noticed is designers don't seem to like&nbsp;orphans.</p>

See the Pen Non-Breaking Space by Will Boyd (@lonekorean) on CodePen.

Word Joiners and Non-Breaking Hyphens

It’s possible for text to naturally wrap even without spaces, such as after a hyphen. To prevent wrapping without adding a space, you can use &NoBreak; (case-sensitive!) to get a “word joiner”. For hyphens specifically, you can get a “non-breaking hyphen” with ‑ (it doesn’t have a nice HTML entity name).

  <p>Turn right here to get on I-85.</p>

  <p>Turn right here to get on I-&NoBreak;85.</p>

  <p>Turn right here to get on I&#8209;85.</p>

See the Pen Word Joiners and Non-Breaking Hyphens by Will Boyd (@lonekorean) on CodePen.

CJK Text and Breaking Words

CJK (Chinese/Japanese/Korean) text behaves differently than non-CJK text in some ways. Certain CSS properties and values can be used for additional control over the wrapping of CJK text specifically.

Default browser behavior allows words to be broken in CJK text. This means that word-break: normal (the default) and word-break: break-all will give you the same results. However, you can use word-break: keep-all to prevent CJK text from wrapping within words (non-CJK text will be unaffected).

Here’s an example in Korean. Note how the word “자랑스럽게” does or doesn’t break.

See the Pen CJK Text + word-break by Will Boyd (@lonekorean) on CodePen.

Be careful though, Chinese and Japanese don’t use spaces between words like Korean does, so word-break: keep-all can easily cause long overflowing text if not otherwise handled.

CJK Text and Line Break Rules

We talked about line-break: anywhere earlier with non-CJK text and how it has no problem breaking at punctuation. The same is true with CJK text.

Here’s an example in Japanese. Note how “。” is or isn’t allowed to start a line.

See the Pen CJK Text + line-break by Will Boyd (@lonekorean) on CodePen.

There are other values for line-break that affect how CJK text wraps: loose, normal, and strict. These values instruct the browser on which rules to use when deciding where to insert line breaks. The W3C describes several rules and it’s possible for browsers to add their own rules as well.

Worth Mentioning: Element Overflow

The overflow CSS property isn’t specific to text, but is often used to ensure text doesn’t render outside of an element that has its width or height constrained.

.top {
  white-space: nowrap;
  overflow: auto;
}

.bottom {
  white-space: nowrap;
  overflow: hidden;
}

See the Pen Element Overflow by Will Boyd (@lonekorean) on CodePen.

As you can see, a value of auto allows the content to be scrolled (auto only shows scrollbars when needed, scroll shows them always). A value of hidden simply cuts off the content and leaves it at that.

overflow is actually shorthand to set both overflow-x and overflow-y, for horizontal and vertical overflow respectively. Feel free to use what suits you best.

We can build upon overflow: hidden by adding text-overflow: ellipsis. Text will still be cut off, but we’ll get some nice ellipsis as an indication.

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

See the Pen text-overflow: ellipsis by Will Boyd (@lonekorean) on CodePen.

Bonus Trick: Pseudo-Element Line Break

You can force a line break before and/or after an inline element, while keeping it as an inline element, with a little bit of pseudo-element trickery.

First, set the content of a ::before or ::after pseudo-element to '\A', which will give you the new line character. Then set white-space: pre to ensure the new line character is respected.

<p>Things that go <span>bump</span> in the night.</p>

span {
  background-color: #000;
}

span::before, span::after {
  content: '\A';
  white-space: pre;
}

See the Pen Pseudo-Element Line Breaks by Will Boyd (@lonekorean) on CodePen.

We could have just put display: block on the <span> to get the same breaks, but then it would no longer be inline. The background-color makes it easy to see that with this method, we still have an inline element.

Bonus Notes

There’s an older CSS property named word-wrap. It’s non-standard and browsers now treat it as an alias for overflow-wrap.
The white-space CSS property has some other values we didn’t cover: pre-wrap, pre-line, and break-spaces. Unlike the ones we did cover, these don’t prevent text wrapping.
The CSS Text Module Level 4 spec describes a text-wrap CSS property that looks interesting, but at the time of writing, no browser implements it.
Update: Browsers have implemented it! Read more about how to use it for nicer text wrapping.

Time to “Wrap” Things Up

There’s so much that goes into flowing text on a web page. Most of the time you don’t really need to think about it, since browsers handle it for you. For the times when you do need more control, it’s nice to know that you have a lot of options.

Writing this was definitely a rabbit hole for me as I kept finding more and more things to talk about. I hope I’ve shown you enough to get your text to break and flow just the way you want it.

Thanks for reading!

Making a Heart Light with IFTTT and Netlify Functions

Wed, 01 Dec 2021 00:00:00 GMT

I had an idea. What if I put a heart icon on my blog, and when people click it, an actual (heart-shaped) light in my room turns on? Just a fun little way for folks reading my blog to send some love.

So I built it. It was fun! Here’s a quick video of the end result.

If you’re interested in how I did it, read on.

The Main Pieces

There were 3 main pieces I put together to make this work.

Wemo Smart Plug — The physical device that turns the light on and off.
IFTTT — To set up a webhook that sends a signal to the Wemo Smart Plug.
Netlify Functions — To create an intermediary between my blog and the webhook. Not strictly necessary, but a good idea for reasons I’ll get into later.

Let’s talk through each one.

Wemo Smart Plug

First we need something that can receive signals over the internet to turn the light on and off. I’m not much of a hardware engineer, so I was happy to get a wi-fi enabled smart plug to handle this job. I settled on the Wemo Smart Plug. I got a 3-pack, but you could just buy a single.

Setup was simple enough. Plug the smart plug into an outlet and the light into the smart plug. Download the app, create a Wemo account, and connect the smart plug to your wi-fi network (it’s easy to do in the app).

At this point you can use the app to turn the smart plug (and consequently, the light) on and off. That’s cool, but the real fun is getting something else to control the smart plug. That’s where IFTTT comes in.

IFTTT

IFTTT (IF This Then That) is a service that lets you connect things by creating cause-and-effect relationships in the form of applets. It’s great because the interface for setting up an applet is very easy to work with, while all the tricky API stuff is handled for you. IFTTT lets you create up to 5 applets for free.

For this project, we want to create an applet such that if a webhook receives a request, then turn the smart plug on and off. The webhook will live at a specially crafted URL that IFTTT will host for us. Pinging the URL triggers the webhook (which triggers the smart plug).

Here are the steps to set this up.

Head over to IFTTT and create your account.
Once you’ve logged in, create an applet.
Click If This, search for “webhooks”, click on it.
Click Receive a web request.
Name the event (“heart_light” is what I used) and click Create trigger.
Now click Then That, search for “wemo smart plug”, click on it.
Click Turn on then off.
Click Connect and sign into your Wemo account.
Select your smart plug from the dropdown and click Create action.
Click Continue, then click Finish.

To find your webhook URL, go to this webhooks page and click the Documentation button. The URL will look something like this.

https://maker.ifttt.com/trigger/heart_light/with/key/YOUR_KEY

You can test that URL from that same page, or you can go to it directly from your browser. When you do, you should see your light turn on and off.

Now we have everything we need to add a clickable <button> to a web page that pings the webhook and triggers the light.

<button>❤️ click me!</button>

document.querySelector('button').addEventListener('click', ping);

function ping() {
  fetch('https://maker.ifttt.com/trigger/heart_light/with/key/YOUR_KEY');
}

It’s happening!

Netlify Functions

We have a working project at this point, but there’s one thing I’m not thrilled about. The client-side JavaScript shown above pings the webhook URL directly, which means the URL and our key are exposed publicly. Sometimes this is totally fine, but personally I’d prefer to keep them secret.

My solution is to use Netlify Functions to create an API endpoint — basically just a different URL to ping. When pinged, it’ll run server-side JavaScript that turns around and pings the IFTTT webhook URL. Since it’s server-side, the webhook URL and key are not exposed. As a bonus, this also gives us an opportunity to do other things server-side, like logging.

I put together an example repo to show exactly how to do this. Let’s cover the highlights.

The code for the server-side function is in /netlify/functions/heart-light.js. It pings the IFTTT webhook URL, logs the response, and then returns its own response depending on if the ping went OK or not.

const fetch = require('node-fetch');

exports.handler = async () => {
  const url = 'https://maker.ifttt.com/trigger/heart_light/with/key/YOUR_KEY'; // change this!
  const response = await fetch(url);

  const text = await response.text();
  console.log(response.status, text);

  if (response.ok) {
    return { statusCode: 200, body: 'Success!' };
  } else {
    return { statusCode: 500, body: 'Error.' };
  }
}

The code has a single dependency on node-fetch, so we need to declare that in /package.json.

"devDependencies": {
  "node-fetch": "^2.6.6"
}

Note that we’re using node-fetch v2. That’s because node-fetch was converted to an ES module as of v3, which doesn’t work with Netlify functions out of the box. You can make it happen with some extra steps or just install v2 explicitly.

npm install node-fetch@^2 --save-dev

Now the client-side JavaScript can call the function instead of calling the IFTTT webhook directly. You can see this in /page.js. Note that the function file lives at /netlify/functions/heart-light.js but we call the function at /.netlify/functions/heart-light!

document.querySelector('button').addEventListener('click', ping);

function ping() {
  fetch('/.netlify/functions/heart-light');
}

The example repo we’ve been looking at is a (small) fully functional Netlify site. You can get it up and running locally via the command line.

Install the Netlify CLI with npm install netlify-cli -g.
Install the example repo’s dependencies with npm install.
Start a local dev server with netlify dev.

Here’s what you’ll see when you run netlify dev and then click the button on the page. Success!

My site is already hosted on Netlify, so I incorporated the Netlify function into my existing codebase. If that’s not the case for you, then you can still deploy a standalone Netlify site with just the function and have your existing site ping it with an absolute URL.

Wrapping Up

That’s about it. You’ve probably already noticed the heart icon on this page. Now you know what it does and how it works. Thanks for reading!