<svg-sparkline>
A Web Component for building an SVG Sparkline.
HTML
2024 4 posts Permalink ¶
<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…
bookmarkDo 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…
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 5 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.
articleA 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.
article
in reply to
Writing CSS with Purpose
Finding Purpose in CSS
I think you hit the nail on the head with this one. As I like to think CSS is my strongest language (the ego on this guy, honestly), your simile with the layout of a keyboard was spot on—layout, in particular,…
note2021 0 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