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: Clientside, Displaying, Getting, JavaScript, Mastodon, Post
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: Clipboard, JavaScript, Stuff
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: dynamic, JavaScript, Keys, Objects, setting
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: Content, JavaScript, Pasted, working
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: collection, JavaScript, Looking, methods, promise
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: Caps, Detect, JavaScript, Lock
Extract a Number from a String with JavaScript / / No Comments User input from HTML form fields is generally provided to JavaScript as a string. We’ve lived with that fact for decades but sometimes developers need to extract numbers from that string. There are multiple ways to get those numbers but let’s rely on regular expressions to extract those numbers! To employ a regular expression to get a number within a string, we can use \d+: const string = "x12345david"; const [match] = string.match(/(\d+)/); match; // 12345 Regular expressions are capable of really powerful operations within JavaScript; this practice is one of the easier operations. Converting the number using a Number() wrapper will give you the number as a Number type. The... more → Posted in: JavaScript Tagged with: Extract, from, JavaScript, Number, String
Sum an Array of Numbers with JavaScript / / No Comments It’s rare that I’m disappointed by the JavaScript language not having a function that I need. One such case was summing an array of numbers — I was expecting Math.sum or a likewise, baked in API. Fear not — summing an array of numbers is easy using Array.prototype.reduce! const numbers = [1, 2, 3, 4]; const sum = numbers.reduce((a, b) =a + b, 0); The 0 represents the starting value while with a and b, one represents the running total with the other representing the value to be added. You’ll also note that using reduce prevents side effects! I’d still prefer something like Math.sum(...numbers) but a simple reduce will do! The post Sum an Array of Numbers... more → Posted in: JavaScript Tagged with: Array, JavaScript, numbers