Looking at the JavaScript Promise Collection Methods

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

Detect Caps Lock with JavaScript

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

Extract a Number from a String with JavaScript

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

Sum an Array of Numbers with JavaScript

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

JavaScript waitFor Polling

As more of the JavaScript developers write becomes asynchronous, it’s only natural to need to wait for conditions to be met. This is especially true in a world with asynchronous testing of conditions which don’t provide an explicit await. I’ve written about waitForever, waitForTime, and JavaScript Polling in the past, but I wanted to have a more modern way of awaiting a given state. Let’s have a look at this super useful waitFor function! waitFor is an async function that allows developers to provide a condition function, polling interval (in milliseconds), and optional timeout (in milliseconds). // Polls every 50 milliseconds for a given condition const waitFor = async... more →
Posted in: JavaScript

JavaScript closest

When it comes to finding relationships between elements, we traditionally think of a top-down approach. We can thank CSS and querySelector/querySelectorAll for that relationship in selectors. What if we want to find an element’s parent based on selector? To look up the element tree and find a parent by selector, you can use HTMLElement‘s closest method: // Our sample element is an "a" tag that matches ul > li > a const link = document.querySelector('li a'); const list = a.closest('ul'); closest looks up the ancestor chain to find a matching parent element — the opposite of traditional CSS selectors. You can provide closest a simple or complex selector to look upward... more →
Posted in: JavaScript

JavaScript: Reverse Arrays

Manipulating data is core to any programming language. JavaScript is no exception, especially as JSON has token over as a prime data delivery format. One such data manipulation is reversing arrays. You may want to reverse an array to show most recent transactions, or simple alphabetic sorting. Reversing arrays with JavaScript originally was done via reverse but that would mutate the original array: // First value: const arr = ['hi', 'low', 'ahhh']; // Reverse it without reassigning: arr.reverse(); // Value: arr (3) ['ahhh', 'low', 'hi'] Modifying the original array is a legacy methodology. To avoid this mutation, we’d copy the array and then reverse it: const reversed = [...arr].reverse();... more →
Posted in: JavaScript

Updating and Supporting URL Parameters in JavaScript

Not quite a long time ago, but roughly two years ago I wrote a blog post on updating and supporting, URL parameters with Vue.js. The idea was this: Given an application that lets you perform various tweaks, it would be nice if the URL was updated to reflect the current state of the application. This would let you bookmark, or share, the URL with others and they would get the same view as you. In that post, I built a very basic "data filtering" application and then updated it to support updates to the URL. I thought I’d revisit that post and demonstrate building it in vanilla JavaScript. As always, I’d love to hear your thoughts on this, especially if you’ve done something... more →
Posted in: JavaScript
1 2 3 52