A Little Map Fun x 3 / / No Comments If you want to celebrate New Year’s Eve in style then you should boogey on down to the Map Disco. The animated GIF above really doesn’t do Map Disco justice – because this GIF is missing sound. Visit Map Disco yourself and you can watch the countries of the world lighting-up to the amazing sounds of the Bee Gee’s classic ‘Staying Alive’. Slightly more ambient sounds can be enjoyed on Steve Maps Mania… more → Posted in: Interactive Maps Tagged with: Little
Wrapping Up 2022 / / No Comments I have a tradition here where – usually – I write up a "here’s what I did this year" post. Typically I write this just for myself as I figure it’s a good way to take stock and really appreciate what I’m accomplished. Sometimes it’s just a nice way to say goodbye and look forward to the next year. I feel like every year is incredibly busy as well as exciting, but kind of in the Chinese curse manner. That being said – my kids are healthy and happy, my wife is healthy and happy and I’m well employed. No matter what else happens, that’s a win for the year over all. What I Accomplished This was a huge year for my blog and I’m very... more → Posted in: JavaScript Tagged with: 2022, Wrapping
Detecting Fonts Ready / / No Comments Knowing when resources are loaded is a key part of building functional, elegant websites. We’re used to using the DOMContentLoaded event (commonly referred to as “domready”) but did you know there’s an event that tells you when all fonts have loaded? Let’s learn how to use document.fonts! The document.fonts object features a ready property which is a Promise representing if fonts have been loaded: // Await all fonts being loaded await document.fonts.ready; // Now do something! Maybe add a class to the body document.body.classList.add('fonts-loaded'); Font files can be relatively large so you can never assume they’ve loaded quickly. One simply await from... more → Posted in: JavaScript Tagged with: Detecting, Fonts, Ready
Santa Tracker Maps / / No Comments Santa has begun work on his busiest day of the year. This year you can follow Santa’s journey around the world, as he delivers presents to all the world’s children, on both the Google Santa Tracker and the NORAD Santa Tracker.The Official NORAD Santa Tracker uses NORAD’s geo-synchronous satellites to detect the heat signature of Rudolph’s red nose. It is then able to track Santa’s sleigh as it Maps Mania… more → Posted in: Interactive Maps Tagged with: maps, Santa, tracker
Adding Download Support in an Eleventy Site / / No Comments I was thinking recently about how I would add "Downloads" support to an Eleventy site. By that I mean, a site where you have various resources (PDFs, zip, etc) and want to provide a way to let users download them in a consistent manner, as well as how basic tracking could be done as well. I came up with a few ideas I’d like to share, but as always, please let me know what you’ve done and what you would suggest. Method 1 – Meta Refresh For my first attempt, I imagined a site where I’ve got some files up in S3 (like I do for my images here) and I’d like to take a directory and set them up as resources. So for example, imagine a _data file named downloads.json: {... more → Posted in: JavaScript Tagged with: Adding, download, Eleventy, Site, Support
Santa’s Map of the World / / No Comments A World of Good Wishes at Christmastime is a pictorial map which was published by the General Drafting Company in 1950. The map shows Santa Claus participating in a range of ‘local’ activities around the world. As you might imagine the map relies on a number of perceived Western stereotypes. For example in Scotland Santa is depicted playing the bagpipes, in Australia he is seen boxing with a Maps Mania… more → Posted in: Interactive Maps Tagged with: Santa's, World
Download Data as a File with Alpine.js / / No Comments As my readers know, I’ve been updating some of my earlier Vue.js examples to demonstrate how they would work with Alpine.js. Normally I post these "conversions" when I see one of the Vue posts pop up in my stats. Today I noticed this entry was "trending" – Vue Quick Shot – Downloading Data as a File. I thought it would be a great candidate for showing an Alpine version. Let’s take a look. While I won’t repeat everything from the previous post, I’ll quickly cover how it worked. First, it makes use of the download attribute of the anchor tag. This will take a normal link operation and instead ask the browser to download the resource at the... more → Posted in: JavaScript Tagged with: Alpine.js, data, download, file
Scrolling the Mekong River / / No Comments Reuters has created a very impressive scrollytelling map which is being used to illustrate how dams are having a devastating impact on the farms and livelihoods of people living on the Mekong River Delta. In How Dams Starve the Mekong River of Vital Sediment Reuters explores how the construction of hydroelectric dams has blocked the flow of sediment in the Mekong River. Sediment which is needed Maps Mania… more → Posted in: Interactive Maps Tagged with: Mekong, River, Scrolling