CSS :out-of-range

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 ... more

How Plugins Enhance The WYSIWYG Editing Experience (Sponsored)

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 ... more

JavaScript Event.defaultPrevented

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 ... more

7 Ways to Optimize Performance for Your WordPress Site (Sponsored)

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 ... more

Get a Random Array Item with JavaScript

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, ... more

Legacy String Methods for Generating HTML

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 ... more

Interview with an Intiface Haptics Engineer

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 ... more

Input valueAsNumber

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 ... more

Advanced Code Display with Code Detection API (Sponsored)

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 ... more

Flexible, Powerful DataGrad from Sencha (Sponsored)

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 ... more

Simplify Your File Handling With Filestack Workflows (Sponsored)

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 ... more

Detect Dark Mode Preference with JavaScript

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 ... more

JavaScript Class Privates

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 ... more

Immediately Executing setInterval with JavaScript

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 ... more

JavaScript S

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 ... more

navigator.clipboard API

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 ... more

GraphQL Editor – The Journey from Initial Release to Version 5.0

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 ... more

Array.prototype.at

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 ... more

How to Create a UUID in JavaScript

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, ... more

onInput Event

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 ... more

Fix Seeing “0” in Your JSX Code

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, ... more

Gather Feedback Using the Amazing UserWell (Sponsored)

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 ... more

JavaScript Numeric Separators

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 ... more

Image Optimization Strategies Compared (Sponsored)

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. ... more

Regular Expression Match Groups

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? ... more

Object.entries

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 ... more

CSS Smooth Scroll

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 ... more

Intl.NumberFormat

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 ... more

Detect CSS Overflow Elements

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, ... more

VS Code node:console Fix

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 ... more