Vigenère Cipher
In this interactive article, I’m going to show how the Vigenère Cipher works and how you can use it as an Eleventy filter.
articleJavaScript
2024 12 posts Permalink ¶
Website Settings
In this post, I’m going to run through how I’m using some exciting new
browser features to power the settings/preferences on my website.
How I’m obfuscating API calls in my front end JavaScript
I use a rudimentary Web Component on my website to pull in data from the LastFM API, but I needed a way to prevent exposing my API key. To get around this, I put a short PHP script on my server that makes the API calls for me.
articleWeb Components from early 2024
I’ve been having a lot of fun creating reusable Web Components, so here are three that I’ve built and been using this so far this year.
note<relative-time>
A Web Component to display a relative time. There are many like it, but this one is mine.
<event-countdown>
A Web Component to display an event countdown.
Lost in Time
A list of reasons to include the time and timezone in Date strings and some JavaScript functions I use to consume and format them.
articleHow I shaved 1.5 minutes off my Eleventy build time
I had a revelation earlier today that solved a long-standing performance issue I’ve been having with the initial build of my Eleventy website, and here’s how it saved me a bunch of time!
article<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 7 posts Permalink ¶
Linear easing generator
“Generate linear() easings from JavaScript and SVG”
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 and imagery to help the detailed explanations!
bookmarkFunctional documentation
“Some collected thoughts and ideas around applying a functional approach to writing and maintaining documentation, especially for design systems.”
bookmarkCSS Naked Day JavaScript Function
Rather than remove CSS from my website manually on CSS Naked Day, I have employed a short JavaScript function to perform the check for me.
articleLerp
A handy trick to add a bit of smoothness to animations that Rach Smith calls Lerp, a nickname for Linear Interpolation between two points
.
Sticky Page Header Shadow on Scroll
I love rather simple but powerful solutions like this—so clever!
bookmarkGenerating Automatic ShortURLs with NewBase60
I’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.
article2022 2 posts Permalink ¶
One Hypotenuse to rule them all
Here’s a fun little demo of some math I found interesting.
codeWebmention Setup for Eleventy
Here’s a quick run-through of how I retrieve and utilise Webmentions with my Eleventy website.
article2021 2 posts Permalink ¶
eleventy-cache-webmentions
Cache webmentions using eleventy-fetch and make them available to use in collections, layouts, pages, etc. in Eleventy.
<spark-line>
A Web Component to turn an array of integers into a fun little chart.
2020 4 posts Permalink ¶
Time to Cache Up
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!
notePentatonic
Turn 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!
note2019 2 posts Permalink ¶
Moon Phases
One of my code demos.
codeSparkline 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.
article2018 2 posts Permalink ¶
Added 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).
noteMedia Controls
YouTube-like controls for any audio or video elements
2017 1 post Permalink ¶
Crossing Guards
Throttle back on your scroll events and watch out for the IntersectionObserver!
article2014 1 post Permalink ¶
On Your Marks, Get Set, Wait
What's really important when reading an article online? Content should always come first, and give users the option for more later.
article