Remove Duplicates from Array in JavaScript

A common task required in JavaScript when dealing with arrays is the ability to preserve the array and at the same time remove duplicates from the array. Remove Duplicates from Array in ES5 If you required older browser support, here’s a solution that uses ES5’s Array.reduce() method to remove duplicates from an array: See the Pen Remove Duplicates from Array Using Array.reduce() (ES5) by Louis

(read more)

Add an Event Listener to Multiple Elements with JavaScript

You might have a number of similar elements on a page and you want to add event listeners to all of them and in some cases you might want to add the same event listener to all the elements. For example, a click event to a bunch of button elements. I’ll show you three ways to do this and each of the methods assumes you’re

(read more)

List of All Countries (HTML Select, JavaScript, and JSON format)

If you want to have a list of countries to include in your web page or app in some format for the user to choose, below you’ll find a few different snippets you can copy. One is a list of all countries in a JavaScript array; another is a list of all countries in JSON format; finally, a list of all countries in an HTML

(read more)

15+ Front-End Tools You Should Know About: My Favorite Finds for 2020

Best Front-End Tools

In this post, I’m going to round up (with some screenshots and demos) some of the most interesting front-end tools I’ve found that I think you’ll find useful in 2020. These aren’t necessarily the most popular tools or the hottest tools, but I think each of them is unique in their use case and deserve a little more attention. These are essentially my favorite finds of the year in front-end tools.

(read more)

Sticky Footer with CSS (Two Methods)

A common layout technique, commonly called a sticky footer, was challenging to do in the past with older CSS but is now much easier to accomplish with flexbox. This technique requires that the footer for a given page stays at the bottom of the viewport as long as the content is smaller than the viewport height. When the content exceeds the height of the viewport,

(read more)

Make a Div 100% Height of Browser Window (or Parent)

There are a few modern techniques, as well as an older technique, that can be used to make any element stretch to fit its parent (or the browser window) 100% vertically (that is, 100% height). For our purposes, let’s assume we have a single <div> element (which could be any block element) as a direct child of the <body>. Old technique (for older browsers) First,

(read more)

Change Placeholder Styles for HTML Inputs with CSS

HTML inputs have an attribute called placeholder that allows you to include temporary placeholder text that disappears when the user starts typing in the field. For example: Browsers apply specific styles to the placeholder text by default, which is usually a shade of grey for the font color. You can change the styles of the placeholder in all modern browsers using the ::placeholder pseudo-element: Notice

(read more)

CSS Drop Cap (Fancy Initial Letter)

Similar to what you find in print media, CSS allows you to style the first letter in a composition using a combination of two pseudo-classes. This used to be accomplished in older browsers by wrapping the first letter of a paragraph in <span> tags, then styling the <span> accordingly. Browser support for advanced pseudo-classes is much stronger today so it’s safe to do this with

(read more)

Submit Button with Pure CSS Loading Spinner

Many forms and apps will include a submit button (or similar) that, when clicked, will become temporarily disabled while some action is taking place. During the wait time, a good UI practice is to insert an animated loading indicator. This can be done with pure CSS while the JavaScript is just used to enable/disable the button while also performing some asynchronous action in the process.

(read more)

Use JavaScript to Detect What Key the User Pressed

In some apps and games it may be necessary to enable certain functionality when the user presses a certain key or key combination on their keyboard. You can do this in a cross-browser fashion using the following JavaScript: Here’s a brief breakdown of the code: The doWhichKey() function includes some code for older browsers like old IE The function returns a character code for the

(read more)

Disable Right-Click (Context Menu) with JavaScript

There are some instances where you might want to disable right-click on a web page. For example, if you want to prevent easy downloading of video or images. Or when you want to replace the default browser right-click menu with a custom right-click menu. This is easy to do using JavaScript: In this instance, the only thing the code is doing is preventing the right-click

(read more)

Make a “Download This as HTML” Link

Sometimes on a web page, you want to give the user the ability to download a particular snippet of code or text in a common format like HTML. For example, you could have a text field that allows the user to enter their own HTML: The user can enter any text they want into that <textarea> element, which can then be downloaded using the following

(read more)

Smooth Animated Scrolling with JavaScript

In the past, many plugins (e.g. jQuery) have enabled the ability to cause a page to scroll down in a smooth animated fashion, rather than the sudden jarring fashion that occurs by default. This technique is often used for same-page (local) links that jump to specific sections of longform content. The following script and demo shows how you can do smooth animated in-page scrolling with

(read more)

A Textarea Element That Autoresizes

Due to the fact that the HTML <textarea> element does not automatically grow to fit its content, many developer look for plugins and scripts to enable this feature. This bit of JavaScript will cause any applicable <textarea> elements to resize automatically to fit the content typed or pasted into it. The code has the following features: Uses a hidden clone element (a <div>) that has

(read more)
Scroll to Top