Linear easing generator
“Generate linear() easings from JavaScript and SVG”
bookmark“Generate linear() easings from JavaScript and SVG”
bookmarkThis 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…
bookmark“Some collected thoughts and ideas around applying a functional approach to writing and maintaining documentation, especially for design systems.”
bookmarkRather than remove CSS from my website manually on CSS Naked Day, I have employed a short JavaScript function to perform the check for me.
articleA handy trick to add a bit of smoothness to animations that Rach Smith calls Lerp, a nickname for Linear Interpolation between two points.
bookmarkI love rather simple but powerful solutions like this—so clever!
bookmarkI’m still auto-generating ShortURLs for each of my posts using Tantek Çelik’s NewBase60, but in a much more organised fashion and leaning into the JavaScript-based ecosystem of Eleventy.
articleHere’s a fun little demo of some math I found interesting.
codeHere’s a quick run-through of how I retrieve and utilise Webmentions with my Eleventy website.
articleCache Webmentions using eleventy-fetch and make them available to use in collections, templates, pages, etc. in Eleventy.
A Web Component to turn an array of integers into a fun little chart.
For a long time I’ve been searching for a sound solution to storing the entire Webmention history of my blog, as packaging it up with the rest of the repository was not cutting it for me. Enter the world of async.
articleI've been going through @wesbos’ JavaScript30 challenges, enjoying it a lot, and I completed challenge #17 today. Check out my log of completed challenges, follow along with RSS, or even join in if you’re interested!
noteTurn any array of integers into a fun little melody using the Web Audio API.
Discovered that I can make custom waveforms for use with my noisy sparklines. Swapped from the humble sine wave to a an "Ahh" sound—like I used to go crazy for on early MIDI keyboards!
noteOne of my code snippets.
codeI 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.
articleAdded Jeremy Keith’s Canvas Sparklines to my site, to further visually demonstrate the vast spaces of time between my posts! Next step: create less vast spaces of time between my posts (read: publish more).
noteYouTube-like controls for any audio or video elements
Throttle back on your scroll events and watch out for the IntersectionObserver!
articleWhat's really important when reading an article online? Content should always come first, and give users the option for more later.
article