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
Detect System Theme Preference Change Using JavaScript / / No Comments JavaScript and CSS allow users to detect the user theme preference with CSS’ prefers-color-scheme media query. It’s standard these days to use that preference to show the dark or light theme on a given website. But what if the user changes their preference while using your app? To detect a system theme preference change using JavaScript, you need to combine matchMedia, prefers-color-scheme, and an event listener: window.matchMedia('(prefers-color-scheme: dark)') .addEventListener('change',({ matches }) ={ if (matches) { console.log("change to dark mode!") } else { console.log("change to light mode!") } }) The change event of the matchMedia API notifies you... more → Posted in: JavaScript Tagged with: Change, Detect, JavaScript, Preference, system, theme, using
Land Doesn’t Vote / / No Comments After nearly every U.S. election a Republican will produce a map of the USA with electoral districts colored to show the winning party. This map is normally accompanied by a claim that the Unied States is a majority Republican country. Democrats will then reply with the traditional response, ‘Land doesn’t vote. People do.’The problem with using a traditional geographic map to visualize election Maps Mania… more → Posted in: Interactive Maps Tagged with: Doesn't, land, Vote
Quick Test Post – Sorry! / / No Comments Hey folks, earlier this week I posted about a Pipedream workflow to automatically post new blog entries to Mastodon and Twitter. I discovered an issue with the workflow that ended up being a bug on the Pipedream side. (It happens!) They’ve corrected the issue and I need to test, so I’ve temporarily disabled Mastodon posting and am writing this post just to see if it posts correctly to Twitter. If so, I’ll then restore the Mastodon step (Pipedream makes it easy to disable one part of a workflow) and see what happens when I post again. As I feel guilty "spamming" my subscribers with noise, here’s a quick tip. If you ever need to expose a local web site for external... more → Posted in: JavaScript Tagged with: Post, Quick, Sorry, test
Create a Thumbnail From a Video with ffmpeg / / No Comments Creating a thumbnail to represent a video is a frequent task when presenting media on a website. I previously created a shell script to create a preview video from a larger video, much like many adult sites provide. Let’s view how we can create a preview thumbnail from a video! Developers can use `ffmpeg, an incredible open source media utility, to create a thumbnail. To create a thumbnail from the first frame of a video, execute the following command: ffmpeg -i input.webm -vf "select=eq(n\,34)" -vframes 1 thumbnail.png Providing a video thumbnail is a great tool convert images into video views. You don’t need fancy software and manual labor to create thumbnails — use... more → Posted in: JavaScript Tagged with: create, ffmpeg, from, Thumbnail, video
The National Fast Food Index / / No Comments If you buy a MacDonald’s Big Mac in Lee, Massachuesetts you will have to pay a whopping $ 7.89. That is over twice as expensive as buying the very same burger at a MacDonald’s in Eufaula, Oklahoma, where a Big Mac costs just £3.39. The price of a MacDonald’s Big Mac in the towns of Lee & Eufaula, and in the other 13,271 MacDonald’s outlets in the United States can be explored on the Fast Food Maps Mania… more → Posted in: Interactive Maps Tagged with: Fast, food, Index, National