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
JavaScript waitFor Polling / / No Comments 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 Tagged with: JavaScript, Polling, waitFor
JavaScript closest / / No Comments 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 Tagged with: closest, JavaScript
JavaScript: Reverse Arrays / / No Comments 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 Tagged with: Arrays, JavaScript, Reverse
Updating and Supporting URL Parameters in JavaScript / / No Comments 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 Tagged with: JavaScript, Parameters, Supporting, Updating
JavaScript Array Group / / No Comments Managing, sorting, and manipulating data with JavaScript is a skill we’ve often delegated to third party libraries like lodash. As the JavaScript language progresses, however, these features eventually get. added to the JavaScript specification. Two such APIs for grouping of Array data are `Array.prototype.group and Array.prototype.groupToMap. Array.prototype.group To group an array of objects by a given property, call the group method with function that returns the grouping string: const teams = [ { name: "Arsenal", origin: "London", tier: "legendary" }, { name: "Manchester United", origin: "Manchester", tier: "legendary" }, { name: "Liverpool", origin: "Liverpool", tier: "legendary"... more → Posted in: JavaScript Tagged with: Array, Group, JavaScript
How to Control CSS Animations with JavaScript / / No Comments When it comes to animations on the web, developers need to measure the animation’s requirements with the right technology — CSS or JavaScript. Many animations are manageable with CSS but JavaScript will always provide more control. With document.getAnimations, however, you can use JavaScript to manage CSS animations! The document.getAnimations method returns an array of CSSAnimation objects. CSSAnimation provides a host of information about the animation: playState, timeline, effect, and events like onfinish. You can then modify those objects to adjust animations: // Make all CSS animations on the page twice as fast document.getAnimations().forEach((animation) ={ animation.playbackRate... more → Posted in: JavaScript Tagged with: animations, Control, JavaScript
JavaScript print Events / / No Comments Media queries provide a great way to programmatically change behavior depending on viewing state. We can target styles to device, pixel ratio, screen size, and even print. That said, it’s also nice to have JavaScript events that also allow us to change behavior. Did you know you’re provided events both before and after printing? I’ve always used @media print in stylesheets to control print display, but JavaScript provides beforeprint and afterprint events: function toggleImages(hide = false) { document.querySelectorAll('img').forEach(img ={ img.style.display = hide ? 'none' : ''; }); } // Hide images to save toner/ink during printing window.addEventListener('beforeprint',... more → Posted in: JavaScript Tagged with: events, JavaScript, print