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
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
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
Convert Fahrenheit to Celsius with JavaScript / / No Comments The United States is one of the last bodies that refuses to implement the Celsius temperature standard. Why? Because we’re arrogant and feel like we don’t need to change. With that said, if you code for users outside the US, it’s important to provide localized weather data to users. Let’s took at how you can convert between Fahrenheit and Celsius. Fahrenheit to Celsius The formula to convert Fahrenheit to Celsius is: °C = 5/9 x (°F - 32) The following function converts Fahrenheit to Celsius: function convertFahrenheitToCelsius(degrees) { return Math.floor(5 / 9 * (degrees - 32)); } Celsius to Fahrenheit The formula to convert Celsius to Fahrenheit is: °F = (°C... more → Posted in: JavaScript Tagged with: Celsius, Convert, Fahrenheit, JavaScript
A Bare-Bones Eleventy Template for Glitch / / No Comments A few weeks ago I blogged about a simple Alpine.js template for Glitch projects. I’m still new to Glitch and wanted to give it a whirl with an Eleventy demo I wanted to share. Glitch has an Eleventy template, but it’s a bit verbose. It sets up a basic blog with sample posts and such, and that’s great to learn, but if you already know Eleventy, you may prefer to start off a bit simpler. With that in mind, I created this repository: https://github.com/cfjedimaster/glitch-eleventy It defines an .eleventy.js file that specifies an input and output directory. It sets up a very basic HTML layout and an empty index page that uses it. I also used Liquid for my demo whereas the Glitch-provided... more → Posted in: JavaScript Tagged with: BareBones, Eleventy, Glitch, Template
How to Use window.crypto in Node.js / / No Comments I’ve been writing a bunch of jest tests recently for libraries that use the underlying window.crypto methods like getRandomValues() and window.crypto.subtle key management methods. One problem I run into is that the window.crypto object isn’t available, so I need to shim it. To use the window.crypto methods, you will need Node 15+. You can set the window.crypto by importing the crypto package and setting it on the global: const crypto = require('crypto').webcrypto; // Shims the crypto property onto global global.crypto = crypto; I really loathe creating mock functions for missing libraries in Node because they can lead to faulty positives on tests; I really appreciate webcrypto... more → Posted in: JavaScript Tagged with: Node.js, window.crypto
How to Internationalize Numbers with JavaScript / / No Comments Presenting numbers in a readable format takes many forms, from visual charts to simply adding punctuation. Those punctuation, however, are different based on internationalization. Some countries use , for decimal, while others use .. Worried about having to code for all this madness? Don’t — JavaScript provides a method do the hard work for you! The Number primitive has a toLocaleString method to do the basic formatting for you: const price = 16601.91; // Basic decimal format, no providing locale // Uses locale provided by browser since none defined price.toLocaleString(); // "16,601.91" // Provide a specific locale price.toLocaleString('de-DE'); // "16.601,91" // Formatting... more → Posted in: JavaScript Tagged with: Internationalize, JavaScript, numbers