<relative-time>
A Web Component to display a relative time. There are many like it, but this one is mine.
HTML
2024 6 posts Permalink ¶
<event-countdown>
A Web Component to display an event countdown.
<paper-stamp>
A Web Component to display an img as a paper stamp.
<svg-sparkline>
A Web Component for building an SVG Sparkline.
<instant-photo>
A Web Component for presenting an img like an instant photograph.
<theme-selector>
A Web Component to set a site-wide theme preference using a native select element, saved to local storage.
2023 3 posts Permalink ¶
Getting started with View Transitions on multi-page apps
This post really helped me understand just how surprisingly easy it is to start using View Transitions—as quick as a single meta tag in the head to enable fade/opacity transitions—and a slew of other great tips, tricks, and things to watch out for as we prepare for this great new browser feature to become stable!
Gotta love a good Animorphs reference, too.
Do you know color-scheme?
This post by Sara really helped solidify my understanding of color schemes in the browser, how they affect HTML’s default appearance in browsers, and how we can make use of them in CSS and JavaScript. Lots of useful code examples and imagery to help the detailed explanations!
bookmarkWhy I participated in CSS Naked Day
CSS Naked Day has come and gone for this year, but I’ll be making it a point to participate for many years to come.
article2022 4 posts Permalink ¶
Moving Targets
I was just working on some styling changes to my website and fell into a rabbit hole on URLs, the <mark> element and :target pseudo-class, and ended up writing an animation as a handy technique for drawing the reader’s attention.
A Case for the 1-Dimensional Grid
Reaching for Grid might feel like overkill for a one-column layout, but I hope this technique shows how useful it is in understanding what your CSS is doing!
articleIt’s all relative!
What’s the deal with relative units? Let’s find out.
articleChanging with the times
Lessons learned, pieces of wisdom (and folly), and other things I have to say after running a website blog for a while.
article2021 1 post Permalink ¶
<spark-line>
A Web Component to turn an array of integers into a fun little chart.
2019 1 post Permalink ¶
Sparkline Sound-Off
I have been following in the footsteps of Jeremy Keith for a few months now. Dotted around my website, now, are sparklines, representing my activity over time. As an added bonus, a little tune based on the sparkline's values plays when you click on it. With a moderate amount of musical theory under my belt, here's how I accomplished that audio delight.
article2013 1 post Permalink ¶
Viewport Woes
I've been around the block and seen many variations of variables and syntax in viewport meta tags. What's the correct way to go about it? And maybe I'll comment on the state of browsers today as well.
article