Followup to My Intl Short Number Post / / No Comments A few days ago I shared a blog post about using the Intl object in JavaScript to create short, more readable numbers. So for example, instead of 9123456, it would display 9.1M. This was done using the notation option in Intl.NumberFormat. Yesterday I randomly ran into an interesting modification on this using yet another option, compactDisplay. The compactDisplay option is only used when notation is set to compact. It supports two options, short which is default and what I demonstrated in the previous post, and long. So given a number, i, you would use it like so: new Intl.NumberFormat('en-US', { notation:'compact', compactDisplay:'long'}).format(i); And the result is, well, longer. đŸ˜‰ What’s... more → Posted in: JavaScript Tagged with: Followup, Intl, Number, Post, Short
Short Number Formatting in Python / / No Comments Yesterday I wrote a blog post about creating short number formats in JavaScript. Definitely check out that post first, but the idea was to take something like 9496301 and display it as 9.5M. In that post, I used the built-in Intl object and it worked really well. It got me thinking, could you do the same in Python? First off, I checked and was happy to see that like JavaScript, Python supports numeric separators. This makes it much easier to read large numbers in code. It also meant I could take my test array and copy and paste it into a Python program: inputs = [ 999, 1000, 2999, 12_499, 12_500, 430912, 9_123_456, 1_111_111_111, 81_343_902_530, 1_111_111_111_111, 62_123_456_789_011,... more → Posted in: JavaScript Tagged with: Formatting, Number, Python, Short
How to Determine a JavaScript Promise’s Status / / No Comments Promises have changed the landscape of JavaScript. Many old APIs have been reincarnated to use Promises (XHR to fetch, Battery API), while new APIs trend toward Promises. Developers can use async/await to handle promises, or then/catch/finally with callbacks, but what Promises don’t tell you is their status. Wouldn’t it be great if the Promise.prototype provided developers a status property to know whether a promise is rejected, resolved, or just done? My research led me to this gist which I found quite clever. I took some time to modify a bit of code and add comments. The following solution provides helper methods for determining a Promise’s status: // Uses setTimeout with... more → Posted in: JavaScript Tagged with: determine, JavaScript, promises, status
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
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
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