As the web continues to be the medium for all users, standards bodies need to continue to provide new APIs to enrich user experience and accessibility. One underused API for unsighted users is speechSynthesis, an API to programmatically direct the browser to audibly speak any arbitrary string. The Code You can direct the browser to utter speech with window.speechSynthesis and…
David Walsh
https://davidwalsh.name/ · 220 posts · history since 2020 · active
20 Nov 2025
17 Nov 2025
Setting up a new computer is bliss — no old, unused apps and the machine performs much better than the previous. Unfortunately, you may encounter new problems based on the new hardware. One such issue I encountered with my new MacBook was a “This video format is not supported” message when I went to YouTube TV. Not being able to…
24 Mar 2025
Managing media is a really difficult task if you try to do all of it yourself, especially if the media comes from other sources. The file can be submitted in any state and size, but what if you need something really specific? You can code it all yourself or you can use an awesome service like Filestack, a utility to…
4 Sept 2024
The ability to download media on the internet almost feels like a lost art. When I was in my teens, piracy of mp3s, movies, and just about everything else via torrents and apps like Kazaa, LimeWire, Napster, etc. was in full swing. These days sites use blob URLs and other means to prevent downloads. Luckily we have tools like yt-dlp…
3 Aug 2024
curl is one of those great utilities that’s been around seemingly forever and has endless use cases. These days I find myself using curl to batch download files and test APIs. Sometimes my testing leads me to using different HTTP headers in my requests. To add a header to a curl request, use the -H flag: You can add multiple…
19 Jun 2024
CSS selectors never cease to amaze me in how powerful they can be in matching complex patterns. Most of that flexibility is in parent/child/sibling relationships, very seldomly in value matching. Consider my surprise when I learned that CSS allows matching attribute values regardless off case! Adding a {space}i to the attribute selector brackets will make the attribute value search case…
17 Jun 2024
Working on a web extension that ships to an app store and isn’t immediately modifiable, like a website, can be difficult. Since you cannot immediately deploy updates, you sometimes need to bake in hardcoded date-based logic. Testing future dates can be difficult if you don’t know how to quickly change the date on your local machine. To change the current…
13 May 2024
Remembering the WiFi password when on a guest network is never easy. Even worse is when it’s no longer posted and someone else is asking you for it. Luckily there’s a built in Windows command to recover the password of a given WiFi network. The Shell Code Open cmd and execute the following command: The result of the command, assuming…
2 May 2024
This past weekend I had the opportunity to be what every father wants, if only for a moment: the “cool dad”. My wife was out of town and my youngest son wanted to play PUBG. I caved in, taught him the basic FPS key binds, and he was having a great time. While he was fragging out, he pressed a…
15 Apr 2024
Modals have been an important part of websites for two decades. Stacking contents and using fetch to accomplish tasks are a great way to improve UX on both desktop and mobile. Unfortunately most developers don’t know that the HTML and JavaScript specs have implemented a native modal system via the popover attribute — let’s check it out! The HTML Creating…
25 Mar 2024
AI media creation has expanded to incredible video art and a host of other important improvements, and LimeWire is leading the way in creating an awesome interface for the average user to become an AI artist. Limewire has just released its Developer API, a method for engineers like us to create dynamic AI art on the fly! Quick Hits Free…
18 Mar 2024
Time can be a funny thing. I still remember discovering HTML, CSS, and JavaScript coding. I still remember my first college programming course. I still remember my first day at my first coding job, then my first day at my second coding job, and then my first day at Mozilla. I still remember my first day coding for MetaMask. This…
6 Feb 2024
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…
5 Feb 2024
One of the HTML elements that frequently comes into collision with CSS is the img element. As we learned in Request Metrics’ Fixing Cumulative Layout Shift Problems on DavidWalshBlog article, providing image dimensions within the image tag will help to improve your website’s score. But in a world where responsive design is king, we need CSS and HTML to work…
24 Jan 2024
Over 50 thousand developers visit DavidWalshBlog every month from around the world to learn JavaScript tricks and fix problems in their code. Unfortunately, some of them have a slow experience on the site. David tracks the performance of his Core Web Vitals and overall performance with Request Metrics. Recently, we noticed that his CLS performance score was trending pretty slow…
17 Jan 2024
Ask any software engineer and they’ll tell you that coding date logic can be a nightmare. Developers need to consider timezones, weird date defaults, and platform-specific date formats. The easiest way to work with dates is to reduce the date to the most simple format possible — usually a timestamp. To get the immediate time in integer format, you can…
16 Jan 2024
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…
15 Jan 2024
Streaming services have revolutionized content delivery, sending linear media companies into a panic as they watch traditional cable services decay. “Cutting the cord” is a common practice these days, but the streaming landscape isn’t perfect. We’re a decade into streaming so I wanted to share my thoughts on the state of new media: first impressions, second thoughts, and the third…
18 Dec 2023
As the demands of the web change and developers experiment with different user experiences, the need for more native language improvements expands. Our presentation layer, CSS, has done incredibly well in improving capabilities, even if sometimes too slow. The need for native support for automatically expanding textarea elements has been long known…and it’s finally here! To allow textarea elements to…
28 Nov 2023
The underground world of creating and streaming Super Mario World-based ROM hacks continues to gain popularity. This popularity is a tribute to the creativity of gamers and the quality of the original 30 year old video game’s mechanics. Over the past decade, incredible ROM hacks like Grand Poo World 1 and 2, Invictus, and Dram World have brought joy (and…
28 Oct 2023
Most developers spoil themselves with fun command line utilities to make their work easier and more efficient. One such command line helper allows developers to always show the git branch in the command line. How can you get the current branch? With this handy snippet: It’s great to keep this snippet around for any automation you may create moving forward!…
23 Oct 2023
Visual Studio Code has taken the crown of most used text editor, at least in JavaScript spheres. VSCode is fast, feature-filled, and supports thousands of plugins to boost productivity. Developers can also tweak hundreds of settings to enrich functionality. One such feature is the autoSave feature. A few months ago I changed my editor setup to autosave code as I…
2 Oct 2023
One of the best things that ever happened to t he user experience of the web has been web extensions. Browsers are powerful but extensions bring a new level of functionality. Whether it’s crypto wallets, media players, or other popular plugins, web extensions have become essential to every day tasks. Working on MetaMask, I am thrust into a world of…
22 Sept 2023
LimeWire was a staple of my youth. LimeWire was software that allowed users to share any type of file during the revolutionary days of file sharing. Fast forward to today and LimeWire is back, again as revolutionary software, but this time in the field of AI content publishing. From creating images to music and video, and then monetizing that media,…
12 Sept 2023
You’ve visited countless websites, and now you’re designing your own. Stop and think for a minute about what you’ve liked and didn’t like about some of those you visited. Was it the front page, the layout in general, or the functionalities that either met with your satisfaction or turned you off? The helpful tools and resources for designers presented here…
7 Sept 2023
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! a + b, 0); The 0 represents the starting value while with…
14 Aug 2023
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…
11 Aug 2023
One of the larger downloads when requesting a webpage are custom fonts. There are many great techniques for lazy loading fonts to improve performance for those on poor connections. By getting insight into what fonts the user has available, we can avoid loading custom fonts. That’s where queryLocalFonts comes in — an native JavaScript function to gather user font information.…
7 Aug 2023
Web debugging tools are so incredibly excellent these days. I remember the days where they didn’t exist and debugging was a total nightmare, even for the simplest of problems. A while back I introduced many of you to Logpoints, a way to output console.log messages without needing to change the source files. Another great breakpoint type is XHR/fetch breakpoints, allowing…
17 Jul 2023
Parsing of URLs on the client side has been a common practice for two decades. The early days included using illegible regular expressions but the JavaScript specification eventually evolved into a new URL method of parsing URLs. While URL is incredibly useful when a valid URL is provided, an invalid string will throw an error — yikes! A new method,…
5 Jul 2023
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: closest looks up the…
Artificial intelligence applications have hit like a massive wave over this past year, with ChatGPT being the most prominent. ChatGPT can take any written command and suggest content to match. What better than having the power of AI content creation than doing so within your own WYSIWYG editor! That’s what Froala can provide you — instant content creation with the…
26 Jun 2023
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…
12 Jun 2023
It’s been quite a while since I’ve gotten a few things off of my chest and since I’m always full of peeves and annoyances I thought it was time to unleash: One day you’re getting recruited by another crypto wallet vendor, the next their users are getting drained of funds. Dodged a bullet there… Apple has released its XR headset…
1 Jun 2023
Creating screen recordings is an essential skill for web developers. Screen recordings can illustrate new features, bugs, or a variety of other ideas. I’m often asked what app I use to create screen recordings and people are shocked when I tell them Quicktime! Let’s review how to create a screen recording with with Mac’s native Quicktime! In Short: Open Quicktime…
9 May 2023
Restarting and shutting down a computer remotely is a frequent task for remote system administrators. As someone that writes many shell scripts, I also find myself automating system restarts. Let’s look at a few ways to restart Mac systems from command line! Restart a Local Mac To restart a local Mac system from command line, you can execute: sudo shutdown…
8 May 2023
Bluesky is a hot new social networking platform that functions like Twitter from Twitter’s original founder. New users are flooding into the platform as a respite from Elon Musk’s vision of Twitter and the fumbles that have happened since his takeover. Upon signing up for Bluesky, your username defaults to {yourdesiredhandle}.bsky.social, but there’s a better and more secure option. One…
2 May 2023
Multipurpose themes are flexible WordPress templates that can be used to create virtually any kind of website. They are often best-sellers, and because they are so popular there are a lot of them to choose from. Too many in fact unless you have time to spare to find one that is best for you. Where there may be an instance…
1 May 2023
Privacy is always incredibly important, especially with visual media where you may not have the permission of individuals in the video. If you’re filming something in public, it’s likely you’ll catch someone’s face who simply doesn’t want or need to be identified. This recently got me to thinking: what’s the easiest way to blur faces in a video via command…
28 Apr 2023
The CSS language is full of small gaps which are frustrating to navigate. Between CSS properties to hide a container and its contents, there is still room for improvement. visibility: hidden keeps height and width integrity while display: none on a container hides everything. You can use .container > * to hide all contents of a container, but what if…
18 Apr 2023
Cheating in online games is a huge issue these days — just ask anyone playing PUBG. Cheaters aren’t difficult for players to spot but vendors oftentimes don’t do enough to punish these villains. Krafton recently announced they would start banning cheaters by hardware ID, which got me thinking about how you can get a user’s hardware ID. There’s no definitive…
17 Apr 2023
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…
13 Apr 2023
A while back I wrote an article on how to Convert Image to Data URI with JavaScript. It’s a neat trick developers can use for any number of reasons. Instead of abusing canvas, however, why not simply get the base64 data from command line? You can use base64 and pbcopy to convert a file to base64 and copy it to…
10 Apr 2023
I’m a big fan of having as much information as I can get within the command line. I couldn’t go without knowing which git branch I’m on, for example. Another important piece of information I like having is my current battery percentage. To get the current battery level from command line, you can run: pmset -g batt | grep -Eo…
27 Mar 2023
As much as content creators want traffic to their website, there is such thing as the wrong type of traffic. Sometimes it’s content scrapers, sometimes it’s malicious bots; either way, it’s important to know how to block problematic IPs from your site. To block a range of IP addresses using an .htaccess file, you can use the * wildcard for…
6 Mar 2023
A user’s clipboard is a “catch all” between the operating system and the apps employed on it. When you use a web browser, you can highlight text or right-click an image and select “Copy Image”. That made me think about how developers can detect what is in the clipboard. You can retrieve the contents of the user’s clipboard using the…
20 Feb 2023
We all love beautifully styled form controls but, due to the differences between operating system displays, styling them can be painful. Due to that pain, we’ve created scores of libraries to mock these controls. Unfortunately that sometimes comes at the cost of accessibility, performance, etc. One control that has traditionally been tough to style is the input[type=file] element. Said input…
6 Feb 2023
I love the Brave web browser for many reasons: ad blocking, Brave rewards, crypto integration, and even a Tor tab feature. I’ll often use the Tor feature but wanted to know how I could automated opening Tor windows from command line. To open a Brave Tor tab, you can use the following command: open -a "Brave Browser" --args --incognito --tor…
31 Jan 2023
Many engineers like myself live in the command line, and perform actions from command line that most others would click an icon for. I’ve always found opening apps from command line on Macs painful. You need to references the Applications directory, add .app to the name, etc. I just want to open apps by name. To open an app from…
30 Jan 2023
When I was a child, I loved looking for Waldo in the “Where’s Waldo?” book series. These days I’m a sucker for TMZ’s “What’s the Big Frigin Difference” images, where TMZ slightly changes an image and you have to spot the differences between the two. That got me to thinking — how easily could I automate diff’ing two images? This…
17 Jan 2023
The start of a new year is usually a time when we start looking for ways to make something a little better. That something could be our life, work, or what we produce. Web designers, for example, might look for ways to make their designs more interesting or effective. In this post we will focus on 5 web design trends…
16 Jan 2023
A few years back I wrote a blog post about how write a fetch Promise that times out. The function was effective but the code wasn’t great, mostly because AbortController , which allows you to cancel a fetch Promise, did not yet exist. With AbortController and AbortSignal available, let’s create a better JavaScript function for fetching with a timeout: AbortSignal…
9 Jan 2023
Form validation has always been my least favorite part of web development. You need to duplicate validation on both client and server sides, handle loads of events, and worry about form element styling. To aid form validation, the HTML spec added some new form attributes like required and pattern to act as very basic validation. Did you know, however, that…
3 Jan 2023
Promises have changed the landscape of JavaScript. Many old APIs have been reincarnated to use Promises (XHR to fetch, Battery API), while new APIs trend toward Promises. Developers can use async/await to handle promises, or then/catch/finally with callbacks, but what Promises don’t tell you is their status. Wouldn’t it be great if the Promise.prototype provided developers a status property to…
2 Jan 2023
A few years ago I wrote an article about how to detect VR support with JavaScript. Since that time, a whole lot has changed. “Augmented reality” became a thing and terminology has moved to “XR”, instead of VR or AR. As such, the API has needed to evolve. The presence of navigator.xr signals that the browser supports the WebXR API…
30 Dec 2022
Reacting to events with JavaScript is the foundation of a dynamic experiences on the web. Whether it’s a click event or another typical action, responding to that action is important. We started with assigning events to specific elements, then moved to event delegation for efficiency, but did you know you can identify elements by position on the page? Let’s look…
It’s one thing to know about what’s in the browser document, it’s another to have insight as to the user’s browser itself. We’ve gotten past detecting which browser the user is using, and we’re now into knowing what pieces of the browser UI users are seeing. Browsers provide window.personalbar, window.locationbar, and window.menubar properties, with the shape of { visible :…
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…
27 Dec 2022
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…
26 Dec 2022
Knowing when resources are loaded is a key part of building functional, elegant websites. We’re used to using the DOMContentLoaded event (commonly referred to as “domready”) but did you know there’s an event that tells you when all fonts have loaded? Let’s learn how to use document.fonts! The document.fonts object features a ready property which is a Promise representing if…
21 Nov 2022
Presenting numbers in a readable format takes many forms, from visual charts to simply adding punctuation. Those punctuation, however, are different based on internationalization. Some countries use , for decimal, while others use .. Worried about having to code for all this madness? Don’t — JavaScript provides a method do the hard work for you! The Number primitive has a…
1 Nov 2022
As a software engineer that lives too much of his life on a computer, I like keeping my machine as clean as possible. I don’t keep rogue downloaded files and removes apps when I don’t need them. Part of keeping a clean, performant system is removing empty directories. To identify empty directories, I use the following command: To remove empty…
31 Oct 2022
One of the ideological sticking points of the first JavaScript framework was was extending prototypes vs. wrapping functions. Frameworks like MooTools and Prototype extended prototypes while jQuery and other smaller frameworks did not. Each had their benefits, but ultimately all these years later I still believe that the ability to extend native prototypes is a massive feature of JavaScript. Let’s…
27 Oct 2022
I’ve been writing a bunch of jest tests recently for libraries that use the underlying window.crypto methods like getRandomValues() and window.crypto.subtle key management methods. One problem I run into is that the window.crypto object isn’t available, so I need to shim it. To use the window.crypto methods, you will need Node 15+. You can set the window.crypto by importing the…
26 Oct 2022
The United States is one of the last bodies that refuses to implement the Celsius temperature standard. Why? Because we’re arrogant and feel like we don’t need to change. With that said, if you code for users outside the US, it’s important to provide localized weather data to users. Let’s took at how you can convert between Fahrenheit and Celsius.…
25 Oct 2022
Creating a thumbnail to represent a video is a frequent task when presenting media on a website. I previously created a shell script to create a preview video from a larger video, much like many adult sites provide. Let’s view how we can create a preview thumbnail from a video! Developers can use `ffmpeg, an incredible open source media utility,…
24 Oct 2022
JavaScript and CSS allow users to detect the user theme preference with CSS’ prefers-color-scheme media query. It’s standard these days to use that preference to show the dark or light theme on a given website. But what if the user changes their preference while using your app? To detect a system theme preference change using JavaScript, you need to combine…
19 Oct 2022
Working on a web extension is an interesting experience — you get to taste web while working with special extension APIs. One such API is storage — the web extension flavor of persistence. Let’s explore how you can use session and local storage within your Manifest V3 web extensions! Enabling Extension Storage The extension storage API isn’t available by default.…
10 Oct 2022
Whenever I start to feel anxiety about a big change I’m making, I start writing more unit tests. I’ll write down my fear and then write a test that attacks, and eventually relaxes, that fear. There are two actions that I’ve been frequently using with test writing: skipping all but one test or single tests. Skip a Test Oftentimes I…
2 Oct 2022
One quality of life improvement any developer can make for themselves is ensuring different file types open in the app they’re most proficient in. If you know me, you know I prefer accomplishing as much as possible from the command line. The duti utility allows users to determine default file type from command line. The duti utility allows developers to…
26 Sept 2022
I’ve been a huge fan of the Brave web browser for years. They’re crypto-friendly, provide native ad-blocking features, and even provide Tor integration. Whenever I set up new systems, I automate Brave as the default browser. You can use the following shell command to set Brave as the default browser: Brave has been an excellent browser with a progressive outlook…
22 Sept 2022
Autofilling HTML input elements is a frequent user action that can drastically improve user experience. Hell, we all autofill for our passwords and address information. But what control do we have when input elements have been autofilled? To add custom CSS styles to inputs whose contents have been autofilled by the browser, you can use the :autofill pseudo-class: I’m really…
29 Aug 2022
Despite having worked on the very complex Firefox for a number of years, I’ll always love plain old console.log debugging. Logging can provide an audit trail as events happen and text you can share with others. Did you know that chrome provides monitorEvents and monitor so that you can get a log each time an event occurs or function is…
22 Aug 2022
One aspect of web development I’ve always loathed was working with forms. Form elements have been traditionally difficult to style due to OS and browser differences, and validation can be a nightmare. Luckily the native HTML APIs added methods for improving the form validation situation. With input[type=number] elements, you can add min and max attributes. Those attributes are great but…
19 Aug 2022
Rebasing is a frequent task for anyone using git. We sometimes use rebasing to branch our code from the last changes or even just to drop commits from a branch. Oftentimes when trying to push after a rebase, you’ll see something like the following: Commonly developers will use the --force or -f flags during a push to force pushing code…
9 Aug 2022
I’ve heavily promoted nvm, a Node.js version manager, over the years. Having a tool to manage multiple versions of a language interpreter has been so useful, especially due to the complexity of Node.js package management. One tip I like to give new developers is adding a .nvmrc file to their repositories. The file contents is just a simple string representing…
8 Aug 2022
For those of you not familiar with the world of web extension development, a storm is brewing with Chrome. Google will stop support for manifest version 2, which is what the vast majority of web extensions use. Manifest version 3 sees many changes but the largest change is moving from persistent background scripts to service workers. This…is…a…massive…change. Changes from manifest…
2 Aug 2022
Image by JK_Studio from Pixabay WYSIWYG editors are one of the core components of any content management system (CMS). A well-coded, feature-filled WYSIWYG HTML editor can distinguish between a CMS users love and one they can’t stand. While all WYSIWYG editors have a set of basic functionality, the power of plugins enhances the editing experience. Plugins allow WYSIWYG editors to…
27 Jul 2022
Whether you started with the old on_____ property or addEventListener, you know that events drive user experiences in modern JavaScript. If you’ve worked with events, you know that preventDefault() and stopPropagation() are frequently used to handle events. One thing you probably didn’t know: there’s a defaultPrevented proptery on events! Consider the following block of code: // Specific to a link…
18 Jul 2022
The vast majority of blogs, news websites, and information websites run on WordPress. While the WordPress developer team and community do their best to ensure wordPress is performant, there are a number of practices you can implement to keep your site blazing fast. Let’s look at some of them! Use Cloudinary WordPress Plugin for Media Cloudinary is the most dynamic…
10 Jul 2022
Working on a web extension can be kinda wild — on one side you’re essentially just coding a website, on the other side you’re limited to what the browser says you can do in the extension execution environment. One change in that environment is coming January 2023 — pushing extensions to move to manifest version 3. I recently got curious…
23 Jun 2022
Modifying visual media via code has always been a fascination of mine. Probably because I’m not a designer and I tend to stick to what I’m good at. One visual effect I love is seeing video reversed — it provides a sometimes hilarious perspective on a given event. Take this reversed water effect for example: To reverse an animated GIF…
22 May 2022
A decade ago HTML and CSS added the ability to, at least signal, validation of form fields. The required attribute helped inform users which fields were required, while pattern allowed developers to provide a regular expression to match against an <input>‘s value. Targeting required fields and validation values with just CSS and HTML was very useful. Did you know that…
9 May 2022
JavaScript Arrays are probably my favorite primitive in JavaScript. You can do all sorts of awesome things with arrays: get unique values, clone them, empty them, etc. What about getting a random value from an array? To get a random item from an array, you can employ Math.random: As for when you would need random values from an array is…
26 Apr 2022
I’m always really excited to see new methods on JavaScript primitives. These additions are acknowledgement that the language needs to evolve and that we’re doing exciting new things. That being said, I somehow just discovered some legacy String methods that you probably shouldn’t use but have existed forever. Let’s take a look! These legacy string methods take a basic string…
25 Apr 2022
I was recently re-reading my Interview with a PornHub Web Developer and one bit I started thinking about was the VR question and the idea of making users not just see but feel` something. The haptic feedback of VR games is what really sets them apart from your standard PC or console game. So when it comes to sex tech,…
5 Apr 2022
Every once in a while I learn about a JavaScript property that I wish I had known about years earlier — valueAsNumber is one of them. The valueAsNumber provides the value of an input[type=number] as a Number type, instead of the traditional string representation when you get the value: This property allows us to avoid parseInt/parseFloat, but one gotcha with…
4 Apr 2022
Web apps are accepting numerous types of inputs, from basic text to code to imagery, files, and more. It’s important that we validate the contents we receive but if you do allow arbitrary text, it’s good to know what exactly has been submitted so you can present it properly. Enter the Code Detection API — an API that allows you…
28 Mar 2022
For as long as developers have written CSS code, we’ve been desperate to have a method to allow styling a parent element based child characteristics. That’s not been possible until now. CSS has introduced the :has pseudo-class which allows styling a parent based on a relative CSS selector! Let’s have a look at a few use cases for :has in…
10 Mar 2022
Many of the web functionalities that we rely on once lived within individual desktop applications. From office suites, games, and financial tools, all of them are now web applications; they’re just as feature packed as their desktop counterparts. In the past I’ve used a variety of JavaScript grid widgets on client sites, and each had a number of pain points:…
7 Mar 2022
It’s been a while since I’ve gotten a few things off of my chest and since I’m always full of peeves and annoyances I thought it was time to unleash: Due to the immensely negative response to any tweet about crypto from my blog account, I created a second account just for crypto musings. I’ll be honest — it hurt…
6 Mar 2022
Automation is a really important skill for engineers, especially when it comes to working with various file types. The more you accept for input, and the more you automate, the better end output you can offer. Filestack’s workflows allow developers to define automated tasks using a their specialized UI. With no coding required, it’s easy to create a document workflow…
21 Feb 2022
Seemingly every website, dapp, and app offers a dark mode preference, and thank goodness. Dark mode is especially useful when I’m doing late night coding, or even worse, trading into altcoins. I’m presently working on implementing a dark theme on MetaMask and it got me to thinking: is there a way we can default to dark mode if the user’s…
1 Feb 2022
One of my aspects of JavaScript that drew me to it as a young developers was that its syntax was loose and I could code quickly. As you gain experience as an engineer, you start to realize that some traditional coding structure is a good thing, even if it slows you down. Using Jest or TypeScript to add typing to…
31 Jan 2022
Readers of my blog will know that I’ve been banging the Cloudinary drum for years. Their awesome media capabilities allow users to optimally deliver images, video, and audio in any format and to any device. Performance, customization, flexibility, optimized delivery… Cloudinary makes media better for everyone. Another aspect of Cloudinary that I like? Their commitment to developing tools to make…
27 Jan 2022
Some things happen in your life at exactly the right time. It could be meeting the right person, discovering an open source project you go on to join, or even starting a blog when you’re bored with a job you don’t enjoy. All of those things happened to me at the right time and brought me to where I am…
19 Jan 2022
There’s a common saying that adults spend more time with coworkers than family; for us software engineers, we spend more time with our text editor than our families. And why shouldn’t we? They’re our main tool to do a variety of things, and as these editors evolve, they’re capable of doing even more. UltraEdit, a paid text editor, has been…
17 Jan 2022
In the last article in this series, Awesome Git Aliases, we took a look at some awesome aliases for Git. However, the true power of Git aliases comes from writing custom scripts. These allow you to build Git commands that can do anything you can imagine. In this article, I’ll show you how you can create script aliases with Git.…
14 Jan 2022
Employing setInterval for condition polling has really been useful over the years. Whether polling on the client or server sides, being reactive to specific conditions helps to improve user experience. One task I recently needed to complete required that my setInterval immediately execute and then continue executing. The conventional and best way to immediately call a function at the beginning…
7 Jan 2022
One of my least favorite tasks as a software engineer is resolving merge conflicts. A simple rebase is a frequent occurrence but the rare massive conflict is inevitable when many engineers work in a single codebase. One thing that helps me deal with large rebases with many merge conflicts is flattening a branch’s commits before fixing merge conflicts. Let’s have…
27 Dec 2021
Replacing a substring of text within a larger string has always been misleading in JavaScript. I wrote Replace All Occurrences of a String in JavaScript years ago and it’s still one of my most read articles. The confusion lies in that replace only replaces the first occurrence of a substring, not all occurrences. For example: 'yayayayayaya'.replace('ya', 'na'); // nayayayayaya To…
16 Dec 2021
There are a number of utilities required to really power a content management system and its users. One of the most important utilities is a performant, feature-rich WYSIWYG editor. We’ve always had to choose between the two exiting editors, CKEditor and TinyMCE, but now we have Froala, a next generation WYSIWYG editor from Sencha. Quick Hits Amazing advanced features like…
14 Dec 2021
Automation is a system administrator, support agent, and tech savvy person’s dream. Automating tasks via scripts remotely helps to get clients out of trouble or even the organization itself. Oftentimes big updates can require users log out. Logging a user out from command line is super easy on Macs! To log a user out of macOS with a confirmation warning,…
13 Dec 2021
Reading from and writing to the user’s clipboard can be both a very useful and dangerous capability. Used correctly and it’s a huge convenience to the user; used dubiously and the user could suffer catastrophic consequences. Imagine a wrong account number or wallet address being copied — yikes! This is why programmatic copy and pasting needs to be protected, and…
22 Nov 2021
From the very beginning of our adventure with GraphQL, we were impressed by how great its community is. The amount of content, libraries and great tools generated by GraphQL users amazed us from the very start. The more time we spent working with GraphQL the more things we saw that could be improved to make working with it easier and…
8 Nov 2021
Working with arrays is an essential skill in any programming language, especially JavaScript, as we continue to rely on external data APIs. JavaScript has added methods like find and `findIndex recently, but one syntax I love from languages like Python is retrieving values by negative indexes. When you want to get the value of the last item in an array,…
3 Nov 2021
In the world of marketing and content targeting, having accurate geolocation data can be the difference between a thriving enterprise and a floundering business. Accurate data is everything, especially in the targeted marketing. When you need trustworthy geolocation data, IPWHOIS.io is a great source: fast, reliable, and accurate! Quick Hits Start for free, very competitive pricing Provides information about location,…
24 Oct 2021
One of the first commands you learn when experimenting with command line is rm, the utility for deleting files and directories. Deletion is a core computer UI operation but operating systems use a “Trash” paradigm, where files are stored before truly deleted. With the rm utility, however, files are immediately, permanently deleted. If you’re like me and afraid to automate…
10 Oct 2021
Once a week I have to deal with a zombie process or try to start a process that’s already running on its designated port. In most cases I use macOS’s Activity Monitor to kill the process, which is time-consuming. What if we could just kill a process on a given port from command line? Well, we can! To terminate a…
4 Oct 2021
For better or worse, form fields have been somewhat difficult to style with CSS. Form control display is dependent upon device, operating system, and browser, so you can imagine the difficulty in making styling easy. We have slowly been given some controls over form control display, as evidenced by accent-color! The accent-color CSS property allows us to change the accent…
30 Sept 2021
The UUID identifier has been used in programming since the days a baby-faced David Walsh became a professional software engineer. My first exposure to UUIDs was via a ColdFusion app I inherited and … the less we say about that the better. In any event, I was recently surprised to see that JavaScript has the ability to create UUIDs. Developers…
17 Sept 2021
One of the big themes of the web these days is concurrency, which leads to accomplishing tasks asynchronously. In doing so, the possibility of multiple errors can occur. Instead of providing a generic error, optimally you’d provide a wealth of error information. TheAggregateError error lets developers throw multiple errors within one single Error. Let’s see how it works. To throw…
27 Aug 2021
I old enough to remember when we thought XML was going to change the programming world…then JSON saved us from that hell. Parsing and querying JSON data is fundamental task we’ve all coded for, but sometimes I just want to get some data locally with minimal fuss. I just learned of a really awesome library to do so: jq. Let’s…
23 Aug 2021
Hooks are essential for the functional component pattern in React. One frequent logic comparison with class components was comparing a previous prop value with a current prop value via lifecycle methods. So what’s an easy pattern for duplicating previous value comparisons in functional components? The useRef and useEffect hooks allow us manage that same functionality in functional components via a…
9 Aug 2021
As I’ve shown you in the past, nvm an excellent utility for switching between Node.js versions. Whether your host machine or CI, building and testing your apps on different Node versions is a necessity. I’ve recently found a few nvm commands that I found really useful during local development. To set a default node version on your machine, without touching…
3 Aug 2021
Coding HTML forms has been painful my entire career. Form controls look different between operating systems and browsers, coding client side and server side validation is a nightmare, and inevitably you forget something somewhere along the line. Some behaviors don’t act the way you’d hope, like onChange, which only fires when the user leaves (blurs) a given form controls. Enter…
19 Jul 2021
Dark mode has seemingly become the desired visual mode for websites and mobile apps alike. Dark mode is easier on the eyes, especially for those like me who like to burn the midnight oil by coding and reading tutorials. Unfortunately not all websites offer dark mode, so it’s up to me to remedy the situation. Though it’s not a true…
9 Jul 2021
The early days of the web felt like the wild west when it came to coding practices — just make it work. Then we became enlightened to better practices, separating HTML from CSS and JavaScript. Then came React and JSX, where we combine JavaScript, HTML, and even CSS with Styled Components — what an elegant mess we’ve made! Every once…
28 Jun 2021
scp ~/Downloads/NestedT.png root@64.207.144.103:/var/www/vhosts/davidwalsh.name/httpdocs/demo My preference for daily work is usually GUI applications, like Visual Studio Code for text editing and Cyberduck for remote file server management. I’m also a huge fan of automation, so I do try to learn the command line equivalents of UI functions. My latest desire was wanting to know how to upload a file via SSH…
21 Jun 2021
While I enjoy small details that make user interfaces more elegant, I also believe that less is more, especially when it comes to native behavior. One native behavior I dislike is that <input type="number" /> elements only show the increment and decrement arrows when the input is focused. It’s a needless focus change — just show those controls all the…
14 Jun 2021
Most websites and mobile apps collect all sorts of data to try to gain insights into what users are doing, not doing, and to gain insight into what users may want. Those metrics are useful but there’s a more valuable way to get information: direct feedback from users. Userwell is an awesome service that makes gathering, implementing, and delivering direct…
10 Jun 2021
Writing good code is important — writing code that’s easily human readable is a next level skill. It’s not often that APIs are introduced whose seemingly only useful function is making code more readable, but let me introduce you to JavaScript numeric separators: an API that lets developers use underscores to make numbers more readable! Consider the following number in…
3 Jun 2021
I recently wrote a .bat script on Windows to mine Ethereum when I’m not using my gaming PC to frag noobs. I have a friend who also tries to mine cryptocurrencies but their machines have AMD processors; every once in a while, the processor and the mining executable start fighting and all mining comes to a halt. Having the mining…
31 May 2021
There are scores of developers who hate CSS; don’t get it, don’t want to get it, etc. Most of that is either down to inefficiencies within the language or misunderstanding of how to properly construct a website structure. I mostly love CSS but there are some parts of the language that I always hated, like having to repeat very similar…
20 May 2021
I have a few processes on my Windows gaming PC that are critical but sometimes get impacted over night as Windows tells my beloved machine to tone it down. My machine has the necessary cooling so I’m happy to let the processes do their work. There is a setting in the UI which allows you to prevent Windows from sleeping…
6 May 2021
From the time we’re children, we’re trusting people. We rely on those close and older than us to point us toward success and “the right way”. One of the toughest days of our lives is when we realize our parents, or people we look up to, aren’t always perfect, aren’t always right, and worst of all, are completely wrong. I…
29 Apr 2021
We all know the stats. Slower website performance is strongly linked to higher abandon rates and lower conversions. What you may not know is that the main culprit is bloated web page payloads, bringing down our otherwise performant web pages via images. That being said, images also drive conversions, social sharing, and overall visitor engagement; which is why their total…
26 Apr 2021
Regular expressions are incredibly powerful but can be difficult to maintain. They’re a skill you learn on the job and, when the suits walk by, make you look incredibly smart if you have a few up on your screen. How can we solve the maintainability problem? With a match groups, as Addy Osmani enlightened me about last week: Tip: You…
20 Apr 2021
Navigating and managing data structures is a really important skill for every level of engineer to have and improve upon. Over the years, the JavaScript language has continued to provide more methods for managing data structures, from Object.keys to Object.values and so on. One of my favorites is Object.entries, an API that provides the keys and values via an array…
19 Apr 2021
Improving the user experience of web applications has always been a priority of mine. I always come back to the same though I’ve had for 20 years: “users expect a web app to work — let’s make the app a joy to use.” Over the years we’ve employed JavaScript to improve the UX, but over time those strategies either become…
16 Apr 2021
Search engine optimization is big business; both SEO experts and their customers want to track the effectiveness of their keywords, campaigns, and competition. To get and measure those results, however, you need the right tooling monitor those results. SEObase is an awesome tool for doing just that — monitoring keywords and results across search engines! Quick Hits SEObase is free…
13 Apr 2021
It’s easy to think about creating beautiful UIs for presenting data when you don’t consider the effort that goes into gathering and serving the data itself. Here’s the thing — thanks to apilayer, you can focus on your UIs and not the pain of API creation. No need to worry about licensing, load balancing, and rate limits when these five…
Formatting numbers on the client side is an important task, especially when you consider how much raw API usage is in play these days. What’s also important is ensuring those numbers are meaningful to users, no matter where they are in the world, especially if you’re an eCommerce website. Writing internationalization code can be a nightmare but luckily JavaScript provides…
8 Apr 2021
Every once in a while you encounter a CSS annoyance that takes some cleverness to discover. One such case rears its ugly head in unwanted and unexpected scrollbars. When I see unwanted scrollbars, I usually open developer tools, click the element inspector, and hover around until I find the villainous HTML element. As a visual person, I find that process…
25 Mar 2021
Note: I expect a large number of people to object to cryptocurrency mining’s energy use and I totally understand. Hell, I agree. A few notes to consider: first, this will soon be remedied by Ethereum switching to proof os stake. Second, much of the energy used to mine cryptocurrencies is renewable. Prerequisites Before attempting to mine Ethereum, realize a few…
23 Mar 2021
Malware has been a problem for decades, one that was exacerbated by the the rise of the internet, file sharing, and digital assets. Whether it’s keyloggers or other types of malware, they’ll make your computer slow and insecure, all without you knowing. And if you’re an employer with remote employees, you’ll want to ensure their computers are secured. Malwarebytes provides…
I’ve been using Microsoft’s Visual Studio Code text editor for years with great success. The app has always been stable, flexible, and the best compliment I can give it: an afterthought. Recently, however, every time I added a console.log to a JavaScript file, VS Code would add import console from 'node:console'; to the top of file. As you could imagine,…
22 Mar 2021
There’s sometimes a tribal attitude about how web developers should be debugging their code and solving problems. There’s the console.log loyalists, then there’s the debugger/breakpoint maximalists. I worked on the Firefox DevTools debugger for years and I can tell you my philosophy — use whichever tool helps you get the job done! I use console.log for very simple problems, other…
15 Mar 2021
Git is an amazingly powerful tool. It can keep track of all the code you write, let you organize your work into different branches, help you seamlessly work with other developers, and even let you time travel and make changes. But wouldn’t it be awesome if Git could do more? What if you could customize it with your own commands,…
11 Mar 2021
As much as I enjoy writing lengthy pieces of JavaScript APIs, techniques, and other tech brilliance, I very much enjoy providing people quick tips to make their daily dev lives better. This is one such post. Oftentimes I’m working with long command line directives, and as you can imagine, I usually screw up the spelling of a command. Despite being…
4 Mar 2021
Authentication is one of those things that just always seems to take a lot more effort than we want it to. To set up auth, you have to re-research topics you haven’t thought about since the last time you did authentication, and the fast-paced nature of the space means things have often changed in the meantime. New threats, new options,…
1 Mar 2021
The landscape of security is changing quite a bit. We’ve gone from basic username and password to 2FA, facial recognition, fingerprint recognition, and so on. Hell, my Mac unlocks simply when I have my Apple Watch near by. In the end, I probably use the Mac fingerprint key the most. One functionality that still requires manually typing a password is…
12 Feb 2021
In my journey to work more quickly with a project containing loads of dependencies, I’ve come across a few techniques I’ve not needed to use before. I previously wrote about How to Push to a Git Remote Branch of a Different Name — this time we’ll talk about installing a module from another repository instead of a published version. To…
9 Feb 2021
Git is one of those tools that I’ve always known just enough about to be dangerous, and usually tend to learn new skills when I’m in a position to truly need them. Shockingly enough it has taken me roughly 15 years of using git for me to encounter the need to push to a remote branch name whose name is…
8 Feb 2021
After 15+ years in the web development industry, and seeing the landscape of tooling change, I’ve really lost patience with tooling errors. Like…Old Man Walsh just wants yarn install to work so he can get on with his work day. One recent error I ran into was from a dependency of a dependency: (/Users/myuser/Projects/metamask-extension/node_modules/node-sass/lib/index.js:14:35) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loade
2 Feb 2021
It’s been quite a while since I’ve gotten a few things off of my chest and since I’m always full of peeves and annoyances I thought it was time to unleash: Sometimes you need to get out of the cult and stop drinking the Kool-Aid to see an organization for what it is. My childhood dream was working for Mozilla,…
25 Jan 2021
An enjoyable web apps rely on engineers implementing the APIs that cover all of the small things. Those small things sometimes improve performance, usability, accessibility, and the app’s relationship with its host system. The Wake Lock API is the latter — an API that allows developers to instruct the host machine to not dim the screen or sleep, especially useful…
11 Jan 2021
Interacting with a user’s host clipboard is something web developers have wanted for both good and evil purposes. On the good side, it’s nice to allow users to easily copy text like wallet addresses or branch names; for evil, copying malicious text that the user may mistakenly paste into a form and have their funds stolen — and there are…
29 Dec 2020
Every year I write a blog post about my goals for the year but I won’t pretend this year’s post is the same. I mean how the hell do I create realistic goals knowing what 2020 was and what 2021 inherits?! Pandemic, drastic political churn, social unrest…and none of that is related to my profession or this blog. Nevertheless, part…
28 Dec 2020
Using command line flags is a great way to subtly improve productivity. Whether saving yourself keystrokes or enabling specific features, it’s very much worth knowing the application flags available to you. To launch a new tab with DevTools in Chrome, you can use the --auto-open-devtools-for-tabs command line flag: Having the DevTools console immediately launch when opening a new tab can…
23 Dec 2020
Last week I tweeted all of you looking for your best JavaScript Array and Promise tricks, and as always, it didn’t disappoint — I learned quite a bit! Today’s JavaScript Promise trick is brought to you by Claudio Semeraro: how to use catch to set a default value instead of a try/catch: // Instead of wrapping this block in a…
22 Dec 2020
I’ve written a number of blog posts about JavaScript tricks: Promise tricks, type conversion tricks, spread tricks, and a host of other JavaScript tricks. I recently ran into another JavaScript trick that blew my mind: how to break a forEach loop, shared by Andrea Giammarchi! To break the forEach loop at any point, you can truncate the array’s length: const…
21 Dec 2020
JavaScript recently turned 25 years old, and while it started by dominating over the client side world, this beautiful programming language is well on its way to taking over the server side. JavaScript isn’t just thriving — it’s evolving with new syntax features, patterns, frameworks, best practices, and platforms…and we as engineers need to evolve with it. To celebrate 25…
14 Dec 2020
Knowing what input type you’ve received is hugely important in JavaScript, which is a big reason for Flow and TypeScript’s rise. One such case where it’s useful to know what an object represents is if the input is a string or a React element. To detect if an object is a React element, you can use React.isValidElement(obj): // Add a…
4 Dec 2020
Looking back on an entire year of one’s professional life is difficult, but when you consider everything that 2020 threw at us, where the hell do you even start? Forget just surviving the professional aspect of 2020, we all deserve a medal, both literally and figuratively, for surviving it. Nonetheless, as is tradition on this blog, I’d like to review…
30 Nov 2020
Cloudinary is my go-to place for transforming and optimizing media before delivery. By simply modifying the URL of an image or video, you can customize its size, presentation, Instagram-like filtering, and various other aspects. I previously posted about the 10 excellent image tricks and enhancements with Cloudinary; here, I’ll cover 10 more awesome video transformations—along with a bonus feature on…
24 Nov 2020
My parents loathe when I use poor language but luckily they don’t read this blog so I’ll just be blunt: 2020 has been an absolute shit show. COVID-19 has been a world-wide source of devastation to lives, jobs, and our quality of life. That said, I’ve found myself feeling incredibly grateful at the end. Despite the pains of 2020, I’d…
Have you ever felt like you’ve been a professional developer or designer forever, and somehow not known something basic, and borderline hate yourself? That’s me with a trick that was introduced to me by Miguel Piedrafita: You can submit forms from a button outside of the form tag by using the form attribute pic.twitter.com/72pjoWu5Ll — Miguel Piedrafita (@m1guelpf) November 22,…
23 Nov 2020
In the current JavaScript climate of new syntaxes, features, and using loads of external libraries, it seems harder than ever to be sure what your functions are being given or even what the data represents. Of course, we’ve come up with Flow and TypeScript to help, but we can’t count on those always being available. That’s why I like doing…
19 Nov 2020
I’ve always said that I know just enough about git to get the job done, but also do something destructive. Nothing embodies that more than my recent mistake. I somehow found a git repository full of untracked files and git stash wouldn’t fix it. Desperation led me to learning how to remove all untracked files, the same way hg purge…
13 Nov 2020
Every so often I discover a property in JavaScript objects that I didn’t know existed, oftentimes using another trick to accomplish the same functionality. One such property I just learned about was isConnected, a node property that attached to a context (i.e. document). Here’s how to use Node.prototype.isConnected: I used to run parentNode checks on the element to see if…
3 Nov 2020
Methods like Promise.all, Promise.allSettled, Promise.race, and the rest are really excellent for managing multiple Promises, allowing for our apps to embrace async and performance. There are times, however, that limiting the number of concurrent operations may be useful, like rate limiting or simply not wanting to put a server under massive stress. Enter an simple utility for limiting Promise concurrency:…
28 Oct 2020
Earlier this month, David’s heartfelt posting about leaving Mozilla made the front page of Hacker News. Traffic increased by 800% to his already-busy website, which slowed and eventually failed under the pressure. Request Metrics monitors performance and uptime for David’s blog, and our metrics tell an interesting story. Here’s what happened, why, and what you can do to prepare your…
26 Oct 2020
There are numerous reasons to want to know which files have been added or modified in a git repository, one of which is your text editor highlighting those files. Another use case is running tasks against only files which are presently changed, like lint or other validation routines. So how can we identify files which are added or changed? Like…
20 Oct 2020
One pattern in the JavaScript API world that web development veterans will notice is that we’ve been creating new methods to accomplish what older, grosser APIs once achieved. XMLHttpRequest became the fetch API, some APIs like Battery became async, and there are dozens of other examples. Another API desperately in need of updating is the cookie API…and we’ve finally got…
19 Oct 2020
Every once in a while I get to a website that doesn’t allow me to paste into a form input. In most cases it’s something to do with login credentials (username and or password) and auth codes. So how are they preventing me from pasting information? It’s as easy as you’d think! Let’s start with the input element: The onpaste…
12 Oct 2020
Most of the side projects I consider starting revolve around sports, since I’m a huge sports fan. I spend my Saturdays watching soccer, Sundays spent watching soccer and NFL, and of course the mid-week Champions League and Europa League matches. One problem I’ve always had is not being able to find a reliable, feature-packed API to get the data I…
6 Oct 2020
In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell in love with Mozilla — a browser that gave developers actual tools to solve…
I used to have a personal aggregator of sites I enjoyed but maintaining it was a nightmare. I needed to grab each site’s RSS feed, categorize their contents, deal with errors and individual rate limits, etc. I had to tear the whole project down because it was a nightmare to manage. Fast forward a few years later and there’s an…
5 Oct 2020
The need for position: sticky was around for years before it was implemented natively, and I can boast that I implemented it with JavaScript and scroll events for ages. Eventually we got position: sticky, and it works well from a visual perspective, but I wondered how can we determine when the element actually became pinned due to scroll. We can…
29 Sept 2020
A few years ago, I released a lightweight alternative to Bootstrap affectionately named Shoelace. Shoelace was small and fast because of its minimal design and pure CSS approach to styling. It used CSS custom properties extensively to enable customizations, even when loaded via CDN — something you can’t do with Sass. At the time, CSS custom properties were still pretty…
28 Sept 2020
Over the past few years, many engineering teams have switched their default git branch name from master to a different, potentially less offensive term. I’m all for choosing to name your default branch whatever you’d like, but not having a universal default branch name can complicate some automation. So how can we detect the default branch name for a git…
24 Sept 2020
One thing I love about JavaScript is that there are many ways to accomplish the same task, one such example being creating functions. There are several patterns for functions; one of the last you see used is the new Function method: /* new Function(arg1, arg2 (...), body) */ const myFunction = new Function('users', 'salary', 'return users * salary'); What if…
21 Sept 2020
I hate slow websites. They are annoying to use and frustrating to work on. But what does it mean to be “slow”? It used to be waiting for document load. Then waiting for page ready. But with so many asynchronous patterns in use today, how do we even define what “slow” is? The W3C has been working on this with…
I really appreciate the amount of different <input> elements we’ve received over the past decade. These elements don’t just bring a new semantic advantage, but also provide UI helpers, which in many cases are useful. In a recent case, I found a UI element not useful: the x (clear) icon in <input type="search" /> elements. In most cases that input…
14 Sept 2020
The Promise API changed the game in JavaScript. We went from abusing setTimeouts and settling for synchronous operations to doing everything possible to leverage this new async API. Let’s check out a handful of awesome Promise API tricks! Cancel a fetch Request One problem we instantly complained about with promises was not being able to cancel them. A simple promiseInstance.cancel()…
10 Sept 2020
I love JavaScript, it’s my favorite programming language, but I love dipping into other languages because they offer a new perspective on coding paradigms. There’ve been syntax additions to JavaScript that I’ve seen I found interesting (think ?? in optional chaining) and now we get more — logical assignment operators. Let’s check out how they can be used! ||= Or-Or-Equals…
19 Aug 2020
When experimenting with unicode property escapes, to identify accented letters in strings, it reminded me of a question I had a few years ago: what is the best way to identify and then replace emojis in a string? I first noticed this practice when using emojis in Facebook — sometimes Facebook would replace an emoji with one of their own…
18 Aug 2020
When I wanted to refresh my React.js skills, I quickly moved to create a dashboard of cryptocurrencies, their prices, and and other aspects of digital value. Getting rolling with React.js is a breeze — create-react-app {name} and you’re off and running. Getting the API working isn’t quick, especially if they don’t accept cross-origin requests. I set out to find the…
6 Aug 2020
Regular expressions are used for a variety of tasks but the one I see most often is input validation. Names, dates, numbers…we tend to use regular expressions for everything, even when we probably shouldn’t. The most common syntax for checking alphabetic characters is A-z but what if the string contains accented characters? Characters like ğ and Ö will make the…
3 Aug 2020
The Promise object has many useful functions like all, resolve, reject, and race — stuff we use all the time. One function that many don’t know about is Promise.allSettled, a function that fires when all promises in an array are settled, regardless of whether any of the promises are resolved or rejected. Promise.all is great but then isn’t called if…
24 Jul 2020
A portfolio site is one of the best marketing and sales tools you as a web developer have in your arsenal. And if it’s set up right, it’ll save you a bunch of time having to: Chase down new clients, Spend time convincing them to work with you, Answer questions about your experience as a coder and what you can…
20 Jul 2020
One of my favorite and most essential Function method is bind, a function we added to MooTools when it wasn’t featured in the JavaScript language itself. We often think of using bind to simply bind a method’s call to its host object, but did you know you can also bind arguments with the host object? You’ve probably done something like…
13 Jul 2020
We’ve known for a decade that lazy loading resources like JavaScript, CSS, and especially images is a massive performance win for web pages. At first we used tricks and JavaScript to do the lazy loading, but more recently native image lazy loading has debuted in browsers. Did you know that you can also lazy load IFRAMEs using the same loading="lazy"…
12 Jul 2020
The stock market is wild right now, at least in the United States. Between pandemic, political events, and everything else going on, the stock market is one swing after another. There are a host of services that give you stock quotes but I don’t trust them; I feel like they delay information, good or bad, so they can get their…
10 Jul 2020
Working on an open source project with a thriving contribution community is one of the great joys I have at Mozilla. In leading this charge, I get to meet amazing people of all different skill sets and interests, as well as different points of view. In the end I receive hundreds of pull requests of varying size. One drawback of…
6 Jul 2020
Accurate shipping and location information is well worth the price you need to pay for it. You can sell that information, you can target consumers to perfection, and save yourself loads of frustration when it comes to shipping. Creating your own location API isn’t worth the time — there are amazing APIs that can do that job for you, like…
30 Jun 2020
SVGs are such an amazing tool for creating custom fonts, animations, size-reduced graphics, and more. They’re part HTML, part image, and all awesome. Many websites have moved toward SVG instead of JPG, GIF, and PNG due to the flexibility that SVG provides. Whats one example of that flexibility? Did you know that you can embed JavaScript directly in your SVG…
23 Jun 2020
The CSS spec is full of gems that sneak their way past most of us web designers and developers. Stuff like :focus-within, prefers-reduced-motion, and prefers-color-scheme suddenly make their way into CSS without us really finding out for months or years. One such example is background-repeat: round. background-repeat: round repeats a background image without clipping! Addy Osmani’s tweet beautifully depicts the…
11 Jun 2020
Whenever I suspect that there’s a timing conflict causing a problem with rendering and directives, I usually opt for a JavaScript setTimeout with a delay. The setTimeout code never makes it to production, but it does help me to understand if my code is the problem or if there’s a timing conflict. In working with Kotlin on Android, I’ve needed…
8 Jun 2020
Monetizing content on the web usually boils down to one thing: advertisements. The problem with adding advertisements to your website, especially from the popular ad services, is that they can be slow and they certainly don’t protect user privacy. That’s where alternative monetizing opportunities come into play. Let’s take a quick look at a few alternative ways that bloggers, streamers,…
27 May 2020
“You’re not really a developer. Sooner or later people are going to realize you don’t know what you’re talking about. You’re just not good enough.” You’ve probably had thoughts like these at one point or another. You’ve never heard someone else tell you that you’re not a developer, but you’re still thinking it. You may be thinking along these lines…
25 May 2020
Steganography. The art of hiding something right under your nose. For as long as humans have been alive, we’ve been trying to hide things — whether it’s our last slice of pizza or the location of a buried treasure. Do you remember the cool invisible lemon ink trick, where we’d write the secret message with lemon and heat the paper…
15 May 2020
The relationship between HTML and CSS is special: mixing content via HTML with presentation from CSS to make an awesome presentation. Sometimes, however, you need to employ CSS tricks solely to enhance functionality. This could be one of those cases. When browsing through the Firefox DevTools console code, I noticed a really clever technique for hiding text on screen but…
13 May 2020
I convinced myself six months ago that I needed to give the Apple Watch a try. While I wear it every day and enjoy a few features, I’ve felt a bit let down by the experience. I do, however, believe that the Apple Watch makes notifications and other “little things” easier. One of those little things is unlocking my Mac…
12 May 2020
During my early years in web development, one of the most costly and annoying tasks was securing and installing security certificates on client websites. Most providers charged hundreds of dollars for SSL certs and getting them configured properly was a huge source of stress. Securing sites is much easier these days, thanks to services like ZeroSSL. With ZeroSSL you get…
6 May 2020
Two of the most prominent utilities in web development today are ESLint and Microsoft’s Visual Studio Code. I enjoy using both, and I love the integration between both tools, but warnings from ESLint inside Visual Studio Code aren’t fulfilling — I’d rather lint errors be fixed each time I save. Complete the following steps to make Visual Studio Code fix…
4 May 2020
Now that we have most of the basics of HTML and CSS in the browser, we’ve begun implementing new features that I would consider “quality of life” improvements, many of which have been inspired by mobile. One great example is the CSS prefers-color-scheme media query, which allows developers to cater their design to system theme (dark or light) preference: /*…
27 Apr 2020
I don’t need to tell you how important search engine placement is. You either earn it with quality content, loads of SEO work, paying for placement, or all of the above. And even we you achieve best placement, you need to be wary of your content becoming stale or someone else coming along with a better ranking. To keep aware…
20 Apr 2020
Video games are always a fun time, something we desperately need during our COVID lockdown. A few years back I shared how to play retro games on Mac, as well as how to patch games to play popular ROM hacks like Grand Poo World and Invictus. One disadvantage that Macs have, however, is performance — your typical gaming PC has…
16 Apr 2020
Those of you who follow this blog know that not every blog post is an endorsement of a technique but simply a tutorial how to accomplish something. Sometimes the technique described is probably not something you should do. This is one of those blog posts. The Babel parser is an essential tool in the web stack these days. Babel helps…
14 Apr 2020
As a huge fan of media on the web, I’m always excited about enhancements to how we can control our media. Maybe I get excited about simple things like the <video> tag and its associated elements and attributes because media on the web started with custom codecs, browser extensions, and Flash. The latest awesome media feature I’m excited about on…
13 Apr 2020
Chris Coyier of CSS-Tricks is an amazing engineer and blogger. He’s not only creative but has always had the drive to put his thoughts to work, no matter how large. He also has a good eye for the little things that can make CSS-Tricks or your site special. One of those little things is his custom scrollbar — let’s have…
2 Apr 2020
One interesting aspect of working at Mozilla is that Firefox lives in a mercurial repository while several other projects live on GitHub in a git repository. While most focus on either Firefox or another project, I switch between both, leaving me running git commands inside the mercurial repository and hg commands inside git repos. It’s a frustration that I’ve lived…
26 Mar 2020
For many of us, git and GitHub play a huge role in our development workflows. Whenever we have a tool that we need to use often, the more fine-tuned we can make that tool, the faster we can get things done. The following are five git commands or helpers that can make your developer life much better! Quickly Pull Down…
23 Mar 2020
Access management can be a bit of a nightmare, especially when we realize that we rely on a number of different, independent services that power our organizations. Many businesses use Gmail for email, Google Docs for documents, Slack for communication, GitHub for their codebase, etc. Yet each of these services provides their own permissions screens, which makes access management a…
17 Mar 2020
JavaScript promises have always been a major win for the language — they’ve led to a revolution of asynchronous coding that has vastly improved performance on the web. One shortcoming of native promises is that there’s no true way to cancel a fetch…until now. A new AbortController has been added to the JavaScript specification that will allow developers to use…
It happens less frequently these days but there are times when we need to accommodate for a HTTP request timing out. The service could be down, under heavy traffic, or just poorly coded, or any host of other issues. Whenever I need to simulate a long HTTP request, I use a bit of PHP to make it happen: <?php //…
9 Mar 2020
With the coronavirus spreading and employers telling employees work from home if possible, there are scores of people getting their first taste of working remotely. Depending on your experience and discipline levels, this could be a welcomed change or a complete culture shock. The amount of freedom your find yourself in can be similar the leaving high school — no…
6 Mar 2020
We’ve used hex colors for years but 8-digit hexadecimal is still relatively new. While rgba is simple to understand, 8-digit hex is more difficult, as you need to provide a hex representation of a numeric value. The following is a hexadecimal chart of opacity! Opacity ValueHex Code 100FF 99FC 98FA 97F7 96F5 95F2 94F0 93ED 92EB 91E8 90E6 89E3 88E0…
2 Mar 2020
Having a default commit message is really useful for a number of reasons: It can formalize your commit messages It serves as a good reminder for the information you should add to your commit message, like issue number If you set it to “Drunk AF, don’t accept this” To set a default commit message on your local machine, start by…
25 Feb 2020
Over the years I’ve shared how to perform a number of actions with cURL: how to send POST data, how to retrieve headers, follow redirects, check GZIP encoding, and more. Another useful cURL directive is sending the user agent, as some servers respond with different content or headers depending on the user agent. Let’s have a look at how easy…
24 Feb 2020
As someone that loves using UI tools, I do pride myself in learning how to accomplish the same feats from command line. Don’t believe me? Check out my Command Line tutorials section — I guarantee you’ll learn quite a bit. Recently I learned that you can view basic calendars from command line with the cal command: ~ $ cal February…
17 Feb 2020
The Firefox DevTools underlying code, which is written with JavaScript and HTML, is a complex application. Due to the complexity and amount of work going on, the DevTools team has done everything they can to load as little as possible. Furthermore the team has a system of lazily importing and initializing objects when they’re needed. I’ve taken a bit of…
Whether you’re an experienced pro or someone new to the industry, finding a great job can be a scary, stressful process. Engineers and designers get inundated with Hacker Rank tests, portfolio requests, and a variety of other queries. Vettery improves the experience for free agents by creating an atmosphere where businesses reach out to you! Quick Hits Vettery is an…
11 Feb 2020
For years the only bit of feedback web developers could get was via alert("{str}") calls. These days we have the web console but, in rare cases, we don’t have a console and alert calls are our only window into a value at a given time. One problem: if an alert sneaks into production code, your site looks like it’s been…
6 Feb 2020
One awesome web functionality we take for granted is geolocation. Based on geolocation data, we can get someone to their destination, provide them suggestions based on their location, and so on. One downside of native geolocation, especially in the browser, is that it’s limited in both input and output. That’s where an awesome service like positionstack comes in — positionstack…
4 Feb 2020
Naming git branches is something most of us have down to a science. My branch naming pattern is usually {issue number}-short-feature-description, though many developers prefer to lead with the description and end with the issue. Regardless of the pattern you use, having a feature like autocomplete can save you a lot of time typing or copy/pasting. Here’s how you can…
20 Jan 2020
An IP address is a simple, numeric piece of information that gets passed to a server, but that IP address can provide a wealth of information with ipdata. With ipdata you can learn user location, language, currency, and much more! Quick Hits ipdata is an IP Geolocation and Threat Intelligence API. It helps you locate users by IP Address and…
9 Jan 2020
I didn’t fly until I was 25 years of age — I was hopeless in knowing I had to be there early, the process of security, and the whole gate structure. Now that I’ve flown dozens of times for Mozilla, I feel much more comfortable with the process of flying, but feel less comfortable about expectations of delays and knowing…