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...| codersblock.com
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...| Coder's Block
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...| codersblock.com
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 b...| Coder's Block
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> element...| Coder's Block
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...| Coder's Block
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 elemen...| Coder's Block
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 s...| Coder's Block
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 th...| Coder's Block
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...| codersblock.com