Unit Formatting with Intl in JavaScript

/ / No Comments
It’s been a little while since I last blogged about my favorite web platform feature, Intl. I think it was maybe two or so years ago when I was prepping for my first conference talk on the topic and using that as an opportunity to dig much deeper into the spec then I had before and wow, I was unprepared for how flexible, and powerful, this functionality is in the browser. I blogged about localized relative timings back in March of 2024 (ah, I remember March 2024, I had a job then), and discussed how to dynamically handle different quantities of time differences. More recently, I blogged about dynamic time durations and how best to select the right duration for the formatter object. In both... more →
Posted in: JavaScript Tagged with: , , ,

Intl is your Superhero

/ / No Comments
Last week I had the pleasure of presenting at the Mid-Michigan ColdFusion Users Group on the topic of Intl, the web platforms internationalization spec. I gave this presentation again this week at connect.tech as well. I greatly enjoyed working on this deck as I’ve been using Intl for a while, but had not had the opportunity to look into every nook and cranny. The slide deck may be found here https://github.com/cfjedimaster/intl-is-your-superhero/ and viewed online at https://cfjedimaster.github.io/intl-is-your-superhero/decks/main/. The demos are all up on CodePen within one collection, which you can peruse here: https://codepen.io/collection/oEKOwR And then finally, if you love hearing... more →
Posted in: JavaScript Tagged with: ,

Integrating Intl with Alpine.js Mask

/ / No Comments
I’ve been using Alpine.js for quite a while now (although I still make silly mistakes, see the p.s. at the end) but haven’t yet looked at the "official" plugins. Listed in the docs, those plugins include: Intersect – a simple hook to recognize when an element is visible (I plan on blogging about this later) Persist – a simple hook to add persistence to Alpine data (another plugin I plan on blogging about) Focus – a way to manipulate focus Collapse – a simple UI plugin for collapsible content Morph – another UI plugin that attempts to transform one set of HTML into another (I honestly don’t quite get this one – yet) And finally,... more →
Posted in: JavaScript Tagged with: , , ,

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: , , , ,