Have you ever written the following code? const paragraphsToHide = document.getElementsByClassName("p.hide"); paragraphsToHide.forEach(para => para.hidden = true); // error = paragraphsToHide.forEach is not a function!!! The reason for your bug is that you have received a HTMLCollection iteratable object and not an array from your DOM Selection method!! What is an HTMLCollection? An HTMLCollection is…

It’s Time to Specialize or Be Cut — The software industry is shrinking. The last 30 years from the dot com boom to today produced a huge wave of innovation across so many sectors, leaving healthcare, shopping, food, communications along with countless others completely transformed — but the massive momentum is beginning to slow. Data shows that the…

The simplest way to copy something to your user’s clipboard is with the clipboard API on the navigator object. You can access this API as follows. const clipBoard = navigator.clipboard; You’ll get access to a handful of useful methods using this API. Write Text To the Clipboard The most commonly used is the clipboard.writeText() method…

Originally published on www.builtin.com JavaScript is everywhere on the internet. It’s involved in nearly every aspect of what we do online. When we use Facebook, YouTube or Google, we’re relying on JavaScript code to give us the interactive feel that we expect from the internet today. …

Vanilla JS Advanced Topics — The Web Worker API allows you to run a JavaScript program on a background thread in the browser. …

Semantic HTML Basics — The progress element is used to markup a value that is either progressing from one value to another, or indicating an unknown amount of progress. The tag is rendered as a scalar bar, similar to the meter element. For example, the following HTML: <progress id="file" max="100" value="25"> 70% </progress> Produces…

Semantic HTML Basics — The HTML Form is a very important element to your job as a web developer. It is the most fundamental method of sending data from a web page to a server. A very simple form might look like this: When the form element is submitted, it sends information to…

Semantic HTML Basics — This post is based on a cheatsheet I recently published on my blog. Check it out for a more concise version of this content. There are 3 primary ways to define “list-type” content in HTML. Ordered lists, unordered lists, and description lists. If you weren’t aware of all three you…

Semantic HTML Basics — The <meter> element is used to markup a value that falls within a range, and has an optimum value. The tag is rendered as a scalar bar, similar to the progress element. For example, the following HTML: <p>He got a 20% score <meter min=”0" low=”30" high=”70" max=”100" value=”20" optimum=”100">20%</meter> on…