Full Width 
Shortcuts 
Sign Up 
Log In 
Articles 
Reading List More from Ryan Mulligan
Hey there. It has been a minute since my last post. I was semi-recently tagged by Zach Leatherman to (optionally) participate in this year's Blog Questions Challenge. I had planned on doing it then. But life really hit hard as we entered this year and it has not let up. Energy dedicated to my personal webspace has been non-existent. I am tired. Hopefully this post can help shake off some of the rust, bring me back to writing and sharing with you lovely folks. I won't be tagging anyone to do this challenge. However, if you're inspired to write your own after reading mine, I'd love for you to share it with me. Why did you start blogging in the first place? Blogging has always been a part of my web experience. Earliest I can remember is building my band a GeoCities website back in high school. I'd share short passages about new song ideas, how last night's show went, stuff like that. I also briefly had a Xanga blog running. My memory is totally faded on what exactly I wrote in there—I'm not eager to dig up high school feelings either—but fairly certain all of those entries are just lost digital history. Having an "online journal" was such a fresh idea at the time. Sharing felt more natural and real before the social media platforms took over. [blows raspberry] I've completely dated myself and probably sound like "old man yells at cloud" right now. Anyway, I pretty much stopped blogging for a while after high school. I turned my efforts back to pen on paper, keeping journals of lyrics, thoughts, and feelings mostly to myself. My dev-focused blogging that you may be familiar with really only spans the last decade, give or take a couple years. What platform are you using to manage your blog and why? At the moment and the forseeable future, I'm using 11ty. I published a short post about migrating to 11ty back in 2021. I still feel the same sentiments and still admire those same people. And many new community friends as well! Have you blogged on other platforms before? I've definitely used WordPress but I can't remember what the heck I was even blogging about during that time. Then I switched to just writing posts directly in HTML files and FTP'ing them up to some server somewhere. Pretty silly in retrospect, but boy did I feel alive. How do you write your posts? Always via laptop, never on my phone. I manage posts in markdown files, push them up to a GitHub repo and let that automatically redeploy my site on Netlify. Editing content is done in VSCode. I've debated switching to some lightweight CMS, connecting to Notion or Obsidian, but why introduce any more complexity and mess with what works fine for me? When do you feel most inspired to write? Typically I'll write up a post about something new I discovered while on my wild coding escapades, whether at work or in my free time. If I have trouble finding solutions to my particular problem on the world wide webs, I'm even more inclined to post about it. Most of my ideas are pursued on weekends, but I've had some early morning or late night weekday sessions. What I'm trying to say is that anytime is a good time for blogging. It's like pizza when it's on a bagel. Do you publish immediately after writing, or do you let it simmer a bit as a draft? It depends. If I had been writing for a long period of time, I find it best to take a breather before publishing. When I feel ready, I'll post and share with a small group for feedback, find grammatical errors. Then I eventually add it to whatever social channels feel right. Used to be Twitter, but straight up screw that garbage temple. I'll likely post on Bluesky, toot on Mastodon. Other times I'll slap a new post on this site and not share it on any socials. Let the RSS feeds do their magic. What's your favorite post on your blog? I don't know if I have a favorite. Can I love them all equally? Well, besides that CSS Marquee one. Damn that blog post for becoming so popular. Any future plans for your blog? Once things settle down in life, I think I'll be ready for a redesign. I had a blast building the current version inspired by Super Mario Wonder. Until then? More blogging. It won't be super soon, but I do have a few zesty article ideas percolating in this old, tired brain.
Whether you've barely scratched the surface of keyframe animations in CSS or fancy yourself as a seasoned pro, I suggest reading An Interactive Guide to Keyframe Animations. Josh (as always) does an impeccable deep dive that includes interactive demos for multi-step animations, loops, setting dynamic values, and more. This is a quick post pointing out some other minor particulars: Duplicate keyframe properties The order of keyframe rules Custom timing function (easing) values at specific keyframes Duplicate keyframe properties Imagine an "appearance" animation where an element slides down, scales up, and changes color. The starting 0% keyframe sets the element's y-axis position and scales down the size. The element glides down to its initial position for the full duration of the animation. About halfway through, the element's size is scaled back up and the background color changes. At first, we might be tempted to duplicate the background-color and scale properties in both 0% and 50% keyframe blocks. @keyframes animate { 0% { background-color: red; scale: 0.5; translate: 0 100%; } 50% { background-color: red; scale: 0.5; } 100% { background-color: green; scale: 1; translate: 0 0; } } Although this functions correctly, it requires us to manage the same property declarations in two locations. Instead of repeating, we can share them in a comma-separated ruleset. @keyframes animate { 0% { translate: 0 100%; } 0%, 50% { background-color: red; scale: 0.5; } 100% { background-color: green; scale: 1; translate: 0 0; } } Keyframe rules order Another semi-interesting qwirk is that we can rearrange the keyframe order. @keyframes animate { 0% { translate: 0 100%; } 100% { background-color: green; scale: 1; translate: 0 0; } /* Set and hold values until halfway through animation */ 0%, 50% { background-color: red; scale: 0.5; } } "Resolving Duplicates" from the MDN docs mentions that @keyframes rules don't cascade, which explains why this order still returns the expected animation. Customizing the order could be useful for grouping property changes within a @keyframes block as an animation becomes more complex. That same section of the MDN docs also points out that cascading does occur when multiple keyframes define the same percentage values. So, in the following @keyframes block, the second translate declaration overrides the first. @keyframes animate { to { translate: 0 100%; rotate: 1turn; } to { translate: 0 -100%; } } Keyframe-specific easing Under "Timing functions for keyframes" from the CSS Animations Level 1 spec, we discover that easing can be adjusted within a keyframe ruleset. A keyframe style rule may also declare the timing function that is to be used as the animation moves to the next keyframe. Toggle open the CSS panel in the ensuing CodePen demo and look for the @keyframes block. Inside one of the percentages, a custom easing is applied using the linear() CSS function to give each element some wobble as it lands. Open CodePen demo I think that looks quite nice! Adding keyframe-specific easing brings an extra layer of polish and vitality to our animations. One minor snag, though: We can't set a CSS variable as an animation-timing-function value. This unfortunately means we're unable to access shared custom easing values, say from a library or design system. :root { --easeOutCubic: cubic-bezier(0.33, 1, 0.68, 1); } @keyframes { 50% { animation-timing-function: var(--easeOutCubic); } } Helpful resources An Interactive Guide to Keyframe Animations @keyframes on MDN Easing Functions Cheat Sheet Linear easing generator The Path To Awesome CSS Easing With The linear() Function
Over the last few months or so, I have been fairly consistent with getting outside for Sunday morning runs. A series of lower body issues had prevented me from doing so for many years, but it was an exercise I had enjoyed back then. It took time to rebuild that habit and muscle but I finally bested the behavior of doing so begrudgingly. Back in the day (what a weird phrase to say, how old am I?) I would purchase digital copies of full albums. I'd use my run time to digest the songs in the order the artist intended. Admittedly, I've become a lazy listener now, relying on streaming services to surface playlists that I mindlessly select to get going. I want to be better than that, but that's a story for another time. These days, my mood for music on runs can vary: Some sessions I'll pop in headphones and throw on some tunes, other times I head out free of devices (besides a watch to track all those sweet, sweaty workout stats) and simply take in the city noise. Before I headed out for my journey this morning, a friend shared a track from an album of song covers in tribute to The Refused's The Shape Of Punk To Come. The original is a treasured classic, a staple LP from my younger years, and I can still remember the feeling of the first time it struck my ears. Its magic is reconjured every time I hear it. When that reverb-soaked feedback starts on Worms of the Senses / Faculties of the Skull, my heart rate begins to ascend. The anticipation builds, my entire body well aware of the explosion of sound imminent. As my run began, I wasn't sure if I had goosebumps from the morning chill or the wall of noise about to ensue. My legs were already pumping. I was fully present, listening intently, ready for the blast. The sound abruptly detonated sending me rocketing down the street towards the rising sun. My current running goal is 4-in-40, traversing four miles under forty minutes. I'm certainly no Prefontaine, but it's a fair enough objective for my age and ability. I'll typically finish my journey in that duration or slightly spill over the forty-minute mark. Today was different. Listening to The Shape Of Punk To Come sent me cruising an extra quarter mile beyond the four before my workout ended. The unstoppable energy from that album is truly pure runner's fuel. There's certainly some layer of nostalgia, my younger spirit awakened and reignited by thrashing guitars and frantic rhythms, but many elements and themes on this record were so innovative at the time it was released. New Noise is a prime example that executes the following feeling flawlessly: Build anticipation, increase the energy level, and then right as the song seems prepped to blast off, switch to something unexpected. In this case, the guitars drop out to make way for some syncopated celestial synths layered over a soft drum rhythm. The energy sits in a holding pattern, unsure whether it should burst or cool down, when suddenly— Can I scream?! Oh my goodness, yes. Yes you can. I quickly morphed into a runner decades younger. I had erupted, my entire being barreling full speed ahead. The midpoint of this track pulls out the same sequence of build up, drop off, and teasing just long enough before unleashing another loud burst of noise, driving to its explosive outro. As the song wraps up, "The New Beat!" is howled repeatedly to a cheering crowd that, I would imagine, had not been standing still. I definitely needed a long stretch after this run.
I recently stumbled on a super cool, well-executed hover effect from the clerk.com website where a bloom of tiny pixels light up, their glow staggering from the center to the edges of its container. With some available free time over this Thanksgiving break, I hacked together my own version of a pixel canvas background shimmer. It quickly evolved into a pixel-canvas Web Component that can be enjoyed in the demo below. The component script and demo code have also been pushed up to a GitHub repo. Open CodePen demo Usage Include the component script and then insert a pixel-canvas custom element inside the container it should fill. <script type="module" src="pixel-canvas.js"></script> <div class="container"> <pixel-canvas></pixel-canvas> <!-- other elements --> </div> The pixel-canvas stretches to the edges of the parent container. When the parent is hovered, glimmering pixel fun ensues. Options The custom element has a few optional attributes available to customize the effect. Check out the CodePen demo's html panel to see how each variation is made. data-colors takes a comma separated list of color values. data-gap sets the amount of space between each pixel. data-speed controls the general duration of the shimmer. This value is slightly randomized on each pixel that, in my opinion, adds a little more character. data-no-focus is a boolean attribute that tells the Web Component to not run its animation whenever sibling elements are focused. The animation runs on sibling focus by default. There's likely more testing and tweaking necessary before I'd consider using this anywhere, but my goal was to run with this inspiration simply for the joy of coding. What a mesmerizing concept. I tip my hat to the creative engineers over at Clerk.
More in design
This gin is based on the industrial revolution that began in England in the last third of the 18th century...
Milhóc Whisky, is located in the middle of France’s famous Armagnac producing region! Their first-born single-grain whiskey, Le Premier-Né and...
Before users can meaningfully act, they must understand — a principle our metrics-obsessed design culture has forgotten. Today’s metrics-obsessed design culture is too fixated on action. Clicks, conversions, and other easily quantified metrics have become our purpose. We’re so focused on outcomes that we’ve lost sight of what makes them valuable and what even makes them possible in the first place: order and understanding. The primary function of design is not to prompt action. It’s to bring form to intent through order: arranging and prioritizing information so that those who encounter it can see it, perceive it, and understand it. Why has action become our focus? Simple: it’s easier to measure than understanding. We can track how many people clicked a button but not how many people grasped the meaning behind it. We can measure time spent on a page but not comprehension gained during that time. And so, following the path of least resistance, we’ve collectively decided that what’s easy to measure must be what’s most important to optimize, leaving action metrics the only means by which the success of design is determined. This is backward. Action without understanding is merely manipulation — a short-term victory that creates long-term problems. Users who take actions without fully comprehending why become confused, frustrated, and ultimately distrustful of both the design and the organization behind it. A dirty little secret of action metrics is how often the success signal — a button click or a form submission — is immediately followed by a meandering session of actions that obviously signals confusion and possibly even regret. Often, confusion is easier to perceive from session data than much else. Even when action is an appropriate goal, it’s not a guaranteed outcome. Information can be perfectly clear and remain unpersuasive because persuasion is not entirely within the designer’s control. Information is at its most persuasive when it is (1) clear, (2) truthful, and (3) aligned with the intent of the recipient. As designers, we can only directly control the first two factors. As for alignment with user intent, we can attempt to influence this through audience targeting, but let’s be honest about the limitations. Audience targeting relies on data that we choose to believe is far more accurate than it actually is. We have geolocation, sentiment analysis, rich profiling, and nearly criminally invasive tracking, and yet, most networks think I am an entirely different kind of person than I am. And even if they got the facts right, they couldn’t truly promise intent-alignment at the accuracy they do without mind-reading. The other dirty secret of most marketing is we attempt to close the gap with manipulation designed to work on most people. We rationalize this by saying, “yeah, it’s cringe, but it works.” Because we prioritize action over understanding, we encourage designs that exploit psychological triggers rather than foster comprehension. Dark patterns, artificial scarcity, misleading comparisons, straight up negging — these are the tools of action-obsessed design. They may drive short-term metrics, but they erode trust and damage relationships with users. This misplaced emphasis also distorts our design practice. Specific tactics like button placement and styling, form design, and conventional call-to-action patterns carry disproportionate weight in our approach. These elements are important, but fixating on them distracts designers from the craft of order: information architecture, information design, typography, and layout — the foundational elements essential to clear communication. What might design look like if we properly valued order over action? First, we would invest more in information architecture and content strategy — the disciplines most directly concerned with creating meaningful order. These would not be phases to rush through, but central aspects of the design process. We would trust words more rather than chasing layout and media trends. Second, we would develop better ways to evaluate understanding. Qualitative methods like comprehension testing would be given as much weight as conversion rates. We would ask not just “Did users do what we wanted?” but “Did users understand what we were communicating?” This isn’t difficult or labor intensive, but it does require actually talking to people. Third, we would respect the user’s right not to act. We would recognize that sometimes the appropriate response to even the clearest information is to walk away or do nothing. None of this means that action isn’t important. Of course it is. A skeptic might ask: “What is the purpose of understanding if no action is taken?” In many cases, this is a fair question. The entire purpose of certain designs — like landing pages — may be to engage an audience and motivate their action. In such cases, measuring success through clicks and conversions not only makes sense, it’s really the only signal that can be quantified. But this doesn’t diminish the foundational role that understanding plays in supporting meaningful action, or the fact that overemphasis on action metrics can undercut the effectiveness of communication. Actions built on misunderstanding are like houses built on sand — they will inevitably collapse. When I say that order is more important than action, I don’t mean that action isn’t important. But there is no meaningful action without understanding, and there is no understanding without order. By placing order first in our design priorities, we don’t abandon action — we create the necessary foundation for it. We align our practice with our true purpose: not to trick people into doing things, but to help them see, know, and comprehend so they can make informed decisions about what to do next.
Glenmorangie wanted to celebrate their Head of Whisky Creation’s combined passion for whisky and wine, through the release of three...
