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