JavaScript in the morning, JavaScript in the evening…

/ / No Comments
I’ve been a huge fan of the Intl spec for sometime, having done multiple presentations and blog posts on the topic. Every time I think I’ve explored it completely, I come across another interesting gem. Today I’m going to share one that is possibly not something you would use, but it’s a curious feature of the spec I wanted to dig more into. When formatting dates with Intl.DateTimeFormat, you’ve got a large set of customizations you can use to display dates exactly as you want. I recently came across an interesting part of the formatting options, dayPeriod. According to MDN, this specifies: The formatting style used for day periods like “in the morning”,... more →
Posted in: JavaScript Tagged with: , ,

Adding PDFs to Your Webpage without JavaScript

/ / No Comments
Edited at 4:03PM to add a small note to the end. In my time at Adobe, one of the products I evangelized was the PDF Embed API, a JavaScript library for adding PDFs to a web page. I still recommend this library of course, but I was thinking this morning about how you could get similar results without JavaScript. Remember, you are allowed to build a web page and not ship any JavaScript. It’s ok, I won’t tell. Before looking at what I built, some context to why someone would use a library like Adobe’s PDF Embed: Browser’s have great built-in PDF support, natively, but the display is typically the entire page, which means you lose the context of the rest of your site. There’s... more →
Posted in: JavaScript Tagged with: , , , ,

Getting and Displaying a Mastodon Post in Client-Side JavaScript

/ / No Comments
I’ve got a few pages here that are primarily built for my own use. One of them, my bots page, is a list of all the dumbsuper useful bots I’ve built for Mastodon (and Bluesky). The idea on this page is to show the latest post from each bot. The bots page makes use of two different shortcodes written in Liquid to do this. The first uses the RSS feed of the bot to get their last toot ID: const lastToot = async (instance, user) => { let rssFeedURL = `https://$ {instance}/users/$ {user}.rss`; try { let feed = await parser.parseURL(rssFeedURL); return feed.items[0].guid.split('/').pop(); } catch(e) { console.log(`getting last toot for $ {user} returned an error`); return... more →
Posted in: JavaScript Tagged with: , , , , ,

JavaScript Clipboard Stuff

/ / No Comments
Forgive the somewhat vague title, but I wanted to point folks to a series of articles I’ve had published on the Frontend Masters blog the past few weeks. I started writing for them recently, and while I note my "external writing" on my About page, I wanted to specifically call out this series. Over three articles, I discuss reading and writing to the clipboard with JavaScript as well as working with paste events: Reading from the Clipboard in JavaScript Writing to the Clipboard in JavaScript Handling Paste Events in JavaScript That last article is an updated version of a post of mine from July, but it’s got some new material in it so I definitely recommend checking it... more →
Posted in: JavaScript Tagged with: , ,

Setting Dynamic Objects Keys in JavaScript

/ / No Comments
It’s always a good day when you get pleasantly surprised by JavaScript, even more so when you find that it’s a feature that’s been around for a while (ES6, which according to Google was standardized in June of 2015). Earlier today I saw some syntax that didn’t look quite right to me. Here’s a simple example of it: let type = 'name';let person = { [type]:'Ray'} Specifically, the thing that surprised me was this portion: [type]:'Ray' If you console.log the code above, you get: { name: 'Ray' } And then it makes sense. This syntax allows you to set a dynamic key in an object literal, much like: person[type] = 'Ray'; Apparently, this has been around for nearly ten... more →
Posted in: JavaScript Tagged with: , , , ,

Working with Pasted Content in JavaScript

/ / No Comments
This began as me wanting to build an Alpine.js application that handled pasted input, but I realized before I looked into handling this with Alpine, it made sense to start with basic vanilla JavaScript at first. I’ve worked with the clipboard before, mainly storing information to it, but this was the first time I looked at handling input from the clipboard. The web platform handles it rather nicely, but as with most things, there are a few interesting things you need to be aware of. Here’s what I found. Listening To the Event # The first thing you need to do is actually listen to the event. While you probably listen on a part of a DOM, it made the most sense to me to listen at the... more →
Posted in: JavaScript Tagged with: , , ,

Looking at the JavaScript Promise Collection Methods

/ / No Comments
Let me begin by saying that "Promise Collection Methods" is not something I’ve seen mentioned elsewhere, but is my own way of referring to the various methods of the Promise API that work with multiple promises. They are: Promise.all Promise.allSettled Promise.any Promise.race I’ve used Promise.all many times in the past, and I was aware of the other methods but had not taken the time to actually build a demo of them. This weekend I changed that. After spending a few hours in Sanctuary grinding my Necro character, I put down the controller and picked up the laptop. Here’s what I built. As a note, everything shown here works in modern browsers, but you can check MDN... more →
Posted in: JavaScript Tagged with: , , , ,

Detect Caps Lock with JavaScript

/ / No Comments
Anyone is capable of having their caps lock key on at any given time without realizing so. Users can easily spot unwanted caps lock when typing in most inputs, but when using a password input, the problem isn’t so obvious. That leads to the user’s password being incorrect, which is an annoyance. Ideally developers could let the user know their caps lock key is activated. To detect if a user has their keyboard’s caps lock turn on, we’ll employ KeyboardEvent‘s getModifierState method: document.querySelector('input[type=password]').addEventListener('keyup', function (keyboardEvent) { const capsLockOn = keyboardEvent.getModifierState('CapsLock'); if (capsLockOn)... more →
Posted in: JavaScript Tagged with: , , ,
1 2 3 … 53