From 68f67f58393b4f4eb21c23f04f2cdf720f964316 Mon Sep 17 00:00:00 2001 From: Nathan Upchurch Date: Mon, 10 Nov 2025 20:01:42 -0600 Subject: [PATCH] New post --- content/blog/let-it-snow.md | 245 ++++++++++++++++++++++++++++++++++++ 1 file changed, 245 insertions(+) create mode 100644 content/blog/let-it-snow.md diff --git a/content/blog/let-it-snow.md b/content/blog/let-it-snow.md new file mode 100644 index 0000000..4410794 --- /dev/null +++ b/content/blog/let-it-snow.md @@ -0,0 +1,245 @@ +--- +title: "Let it Snow: Adding a Falling-Snow Effect to Your Eleventy Website" +description: As you can see, I'm getting my priorities in order. Here's how I added a falling-snow effect to my website. +date: 2025-11-10 +tags: + - Site Updates + - Eleventy +synopsis: As you can see, I'm getting my priorities in order. Here's how I added a falling-snow effect to my website. +mastodon_id: "115528575840719665" +--- +I'm pretty happy with the look and feel of my website but, looking around the indieweb, I see so many creative and fun websites with neat animations and interactive features. Reader, I was jealous; I wanted my website to be more fun. The [flying toasters](/special/flying-toasters) just weren't enough anymore. My first thought was to add a midi-player. I spent a few hours in a hyperfocus-hole digging up all sorts of fun midi tracks, from Kate Bush to Rammstein. I was *excited.* But reality hit me like a truck when I learned that HTML5 dropped support for midi files. This meant that it was either going to be a monumental pain in the arse to implement my midi payer, or I was going to have to rely on some pretty heavy [dependencies](https://github.com/cifkao/html-midi-player?tab=readme-ov-file#installing-from-npm). And look, I know typing `npm install blah` doesn't seem like a big deal to some folk but, where I can, I would really rather avoid summoning from the ether giant directories full of code that I don't understand for my little website. To add to that, provided you don't want your midi files played by some dead-simple synth sound, there's the business of soundfonts: gigabytes of audio samples from mysterious origins which you have to host yourself if you don't want [Google's servers](https://github.com/cifkao/html-midi-player?tab=readme-ov-file#soundfonts) tracking all of your visitors. At least one popular soundfont also seems to be a bit of a mystery; where does SGM Plus come from? No one seems to know. How is it licensed? I sure couldn't find an answer. + +So, yea, I gave up on that idea and decided to implement a falling-snow effect instead. Here's how I did it. + +## Humble beginnings +I set out to look for an implementation with as little JavaScript as possible. I have nothing against JavaScript, but I figure it's best to try trimming your toenails with clippers before reaching for a chainsaw. The search led me to a codepen with [this HTML and CSS-only solution](https://codepen.io/codeconvey/pen/xRzQay). I tidied up the formatting, stripped out anything unnecessary, and put together my include, `_includes/weather.njk`: + +{% raw %} +``` html + + + {# This include causes a symbol (text, emoji, et cetera; from metadata.weatherSymbol) to fall from the top of the viewport like snow. #} + + + + +``` +{% endraw %} +I added this include in my base layout, after the footer, just before the the closing `` tag. Beyond cleanup, I made the following changes: +* I replaced the snowflakes in the example with {% raw %}`{{ metadata.weatherSymbol }}`{% endraw %} so that I can easily change the symbol that falls (that's right folks, this'll do more than just snowflakes!). +* I added a random amount of rotation to each object. +* I changed the class names from anything snowflake related because I'm a pedant. + +Now all we need to do is make sure {% raw %}`{{ metadata.weatherSymbol }}`{% endraw %} exists and we should be cooking with gas. To `_data/metadata.js` I added: `weatherSymbol: "🍁",`; a falling leaf for autumn. + +## Settings +Now we have our ~~falling-snow~~ falling leaf effect working but, as with anything fun, there are going to be at least a few crabbit souls who are going to hate this. For them, let's implement a toggle. First, the toggle itself, in `_includes/weatherController.njk`: + +``` html +
+ + +
+``` + +Second, a settings modal to hold the toggle, in `_includes/siteSettings.njk` (if the feature happens to be turned on at the moment you should be able to scroll down to the bottom of the page to see this in action): +{% raw %} +``` html +
+ + +

Site Settings

+ {% include "weatherController.njk" %} + + +
+``` +{% endraw %} +Alright, now we just need to pop our site settings include into the site footer and wire everything up together. + +## Wiring it all up +Let's first add a quick rule to our CSS: +``` CSS +.hidden { + display: none; +} +``` + +Then we can work on our script. Let's add it to the bottom of our weather include, `_includes/weather.njk`, as it's positioned right before the closing `` tag. + +First, we'll check local storage to see if the user has set a preference before; if so, we'll add/remove our `.hidden` CSS rule to our weather element and update the weather-controller checkbox accordingly: + +``` javascript + +``` +## Done! +With that, we're done! We now have a "falling-snow" effect that can take any emoji (or arbitrary text) set in `_data/metadata.js`, and can be toggled on and off by the visitor whose preference is retained in local storage across sessions.