Blogging general thoughts and rambles, code snippets, and front-end web dev discoveries
Managing the position of an element as it travels across the length of its parent container can be tricky. Assuming they both have dynamic, responsive dimensions, we might rely on JS to check the width and/or height of each element and do some calculations for a proper end result. The classic FLIP technique has proven to be a solid solution in the past. For a modern approach, the View Transition…
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…
Whether you've barely scratched the surface of keyframe animations in CSS or fancy yourself 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…
Once again, here I am, hackin' away on horizontal scroll ideas. This iteration starts with a custom HTML tag. All the necessities for scroll overflow, scroll snapping, and row layout are handled with CSS. Then, as a little progressive enhancement treat, button elements are connected that scroll the previous or next set of items into view when clicked. Behold! The holy grail of scrolling rails...…
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…
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…
So there I was, experimenting with HTML password inputs and Web Components. I'm not sure why the idea even came up but it quickly snowballed into a curious expedition. The result from the journey was a set of custom elements that provide extra functionality and information about the text being typed into a password input field. I shared my CodePen demo in a Mastodon post and soon after decided to…
The @property at-rule recently gained support across all modern browsers, unlocking the ability to explicitly define a syntax, initial value, and inheritance for CSS custom properties. It seems like forever ago that CSS Houdini and its CSS Properties and Values API were initially introduced. I experimented sparingly over time, reading articles that danced around the concepts, but I had barely…
Imagine the following section on a website: A collection of elements, like a series of cards with marketing information, are presented in a grid display. The elements are arranged in rows of three. When there are an odd number of elements left over, they will be center-aligned horizontally. There are a few ways to accomplish styling such a layout. Controlling Leftover Grid Items with…
My click-spark web component was a fun, silly project at best. Yet I've seen it's had some love since being shared. So why not publish it as an npm package ? No better time than the present, some say. I had done a major refactor before publishing, the most notable was that the spark would now be contained to the custom element's parent node. After announcing the updates in a Mastodon post , I soon…
My partner and I finally finished our epic three-part claymation saga. It's our first attempt at creating stop-motion videos with clay and it truly is a lot of work for such a short result. That claymation episode of Parks and Recreation is a little too real. I won't compare our movie to Avatar though. Regardless, we had a blast doing it. Making art with our hands brings a different style of…
I had been aware of the scripting CSS media feature but I was still under the impression that cross-browser support was lacking. What a pleasant surprise to discover that it has been available in all modern browsers as of December 2023 according to caniuse.com . With this feature, we can provide alternative CSS rules depending on whether or not JavaScript is available in the user's browser. It can…
Where to start? The grief is heavy and far too real. I barely slept last night. The brain fog is thick but finding the words and placing them here may provide some catharsis. I lost someone great. Oscar was so much bigger than most folks will ever understand. His love, not just for my partner and I, but for all walks of life was unconditional. His level of patience and kindness is aspirational.…
The fifty-fifty split—or 50/50 for a dash of brevity—is a classic layout pattern where two elements occupy the same amount of inline space inside a row. These two elements will stack once it becomes too narrow to properly display them side by side. Both flexbox and CSS grid can accommodate this pattern. I had recently shared a demo on CodePen built with this layout pattern, but the component in…
Topping my CSS wishlist in 2024 are scroll-driven animations and style queries . At the time of writing this post, both lack full support but I've got fingers crossed they become available in all evergreen browsers not too long from now. I had done some exploration of scroll-driven animations but have not yet spent much time with style queries beyond reading and daydreaming about the amazing…
I've been down the road of configuring custom issue templates on GitHub repos before. It even seems like there have been some nice improvements to help make creating them even easier. Thanks for setting me up with a reasonable bug report template to start from so I don't have to build one from scratch. 🐛 However, teams may rely on a variety of other tools—Jira, Asana, Linear, an Excel spreadsheet…
Last week I had made this fun little experiment. When clicking or tapping on the page, sparks (of joy) fly out from the mouse cursor/tap position. It started with me just messing around a bit in CodePen, but after sharing and getting a few friendly nudges on my Mastodon post , this fun little experiment evolved into the <click-spark> Web Component which is now available in a GitHub repo . Try it…
There are very rare occasions that I want <details> element disclosure widget-style funtionality but would like to have the <summary> element detached or live outside of it's related <details> container. This commonly stems from designs that may, for example, expect a toggle button to appear inline with other controls or content. Here's my attempt at a Web Component to handle that pattern. Source…
The functional :has() CSS pseudo class is now shipping in all evergreen browsers! 🎉 With the release of Firefox 121.0 , I'm excited to see that my semi-dusty :has() demos are finally realizing their full potential in Firefox. The amount of opportunity unlocked with this selector seems nearly infinite. It can simplify some of the more complex CSS selectors and hacks used in the past. It also opens…
There are still a few bits to work out, but why wait any longer? The latest version of my site is here and it has been rebuilt from the ground up. I'm feeling pretty good about it and invite you all to celebrate the magic with me! ✨ Inspiration While playing Super Mario Wonder, I found myself intrigued by the title screen transitions before each level. The skewed text atop its grid background…
Just here for the code and demos? Check out the scrollspy-nav repository on GitHub and its corresponding demo page . The backstory A "scrollspy" is a method of tracking which link in a menu is active based on a relevant section of information being visible in the viewport. Typically, the menu position is fixed to the browser window and the active link is indicated with some additional styling. I'm…
CSS Scroll-driven Animations has recently made its debut on the main stage in the latest versions of Chrome and Edge. Before this module became available, linking an element's animation to a scroll position was only possible through JavaScript. I've been (and still am) a huge fan of GSAP ScrollTrigger as one way to achieve such an effect. I never imagined it would become a reality in CSS, but this…
CSS Custom Properties are incredibly versatile and have become especially useful as customizable props in common layout and component style patterns. Here's an example derived from the SmolCSS site: .grid { --min : 15ch ; --gap : 1rem ; display : grid ; gap : var ( --gap ) ; grid-template-columns : repeat ( auto-fit , minmax ( min ( 100% , var ( --min ) ) , 1fr ) ) ; } The --gap and --min custom…
I found the following to be a rather decent solution for having HTML tables overflow the inline edges of smaller/tighter/narrow viewports. Try resizing the width of the browser window if viewing this page on a larger screen. Open CodePen demo Notice that the table overflows beyond the edge of the window. This can be acheived by wrapping the table element with another element. < figure class = "…
We've seen it plenty of times around the web where a website's page header follows us as we scroll down the page. CSS makes doing this a breeze with sticky positioning : .page-header { position : sticky ; top : 0 ; } What if we desired something a little bit extra, like applying a box-shadow to the sticky header as soon as the page is scrolled? I thought it was worth sharing one solution that has…
I was recently prototyping a component layout that included a way to toggle the visibility of sibling elements inside a grid display. What tripped me up was, while these elements were hidden, all of the container's gap gutters remained, leaving undesired extra visual spacing. I expected these gutters to collapse. The reason they stick around is related to explicitly defining grid templates.…
For my birthday, my partner put together the sweetest, most thoughtful surprise I could ever imagine. She recognized that I had been in a complete creative rut the previous year. I'd complain that I work too much, play too little. I'm too tired. Way too busy. This, that, and the other thing is blocking my time. Sometimes I would straight up conclude that I'm just not good at anything—a…
A post about the layout you're looking at right now The previous structure of this page layout was virtually the same, the foundation of it expertly defined in the article Full-Bleed Layout Using CSS Grid by Josh Comeau. It's a technique I've used on many projects. I've even blogged about it previously in Horizontal Scrolling in a Centered Max-Width Container . What I'm documenting here is an…
The deprecated tag The HTML <marquee> element had blessed (cursed?) the early days of the internet with the ability to insert scrolling text onto a webpage. It even included options to control text behavior once it reached the end of its container with a handful of attributes. Review them here on MDN if you're curious. Also, when visiting that MDN link, notice the page starts with a deprecation…
The occasional breakpoint Nowadays I lean on modern CSS solutions , fluid layout patterns , and intrinsic sizing over viewport dimension-based media queries – typically referred to as breakpoints – that adapt a design at particular screen sizes. Let's not forget that container queries will soon join our CSS toolset, expanding the exciting universe of parent context styling. However, I do still…
The layout challenge When I had first assembled a gallery of CodePen projects to include on my personal site redesign in the summer of 2021, I imagined the following layout and interaction: The page's main content container is centered on the page with a max-width set. The first gallery item aligns with the left side of the content container. Items overflow to the right and beyond the viewport,…
Getting into the mode Before we begin, I'd like to preface this article with the following resources that were helpful guides on my theming quest. They explain a lot of the intricacies of setting up dark mode and I recommend reading them before my own. A Complete Guide to Dark Mode on the Web Quick and Easy Dark Mode with CSS Custom Properties Create a user controlled dark or light mode Read those…
What the flip is it? Every time a new GSAP plugin is introduced, I'm close to bursting from excitement. The simplicity of the GreenSock API makes learning and applying these tools in projects such a dream. I had the pleasure of beta testing the ScrollTrigger plugin and was blown away by how easily I was able to dive in and start creating. The Flip plugin is no different. And how about this? As of…
Getting started It was time for a personal site refresh. I didn't plan much for this next iteration, but I knew I wanted to include a showcase of my CodePen projects . With so many to choose from, it was tough deciding on how I'd ultimately like to visibly display project content. To kick things off, a list of linked cards presented in a horizontal scroll container felt worthy of exploring. The…
Hello, world! The time has come. I've finally decided to explore the wonderful world of 11ty ! The migration process for my personal website was dead simple. Not that moving a tiny one-pager over to a static site generator is really a big deal, but getting started was just so easy. Build An Eleventy (11ty) Site From Scratch by Stephanie Eckles was an incredible introduction to helping me…
Donut dessert lollipop dragée pudding marzipan jelly Danish icing cake sugar plum chocolate bar candy canes macaroon pie. Bear claw bear claw biscuit fruitcake icing brownie. Jelly-o pudding tart cake ice cream jelly-o. Danish sugar plum chocolate cake wafer cake pudding sweet roll sesame snaps tiramisu. Carrot cake soufflé chocolate bar biscuit ice cream donut bear claw muffin marzipan. Carrot…