Will Boyd's portfolio and web development blog.
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…
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…
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…
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…
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…
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)…
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…
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…
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,…
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…