Louis Lazaris14 articles /

Louis Lazaris is a writer, speaker, author, and front-end web developer who's been involved in the web development industry in various forms since 2000. He blogs about code at Impressive Webs and curates the newsletters Web Tools Weekly and Tech Productivity.

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)

Highlighted Footnotes like Wikipedia with CSS

You may have noticed on Wikipedia when you click a footnote, the footnote is highlighted to visually indicate which one you should be looking at. This can be done using CSS’s :target pseudo-class. In your main content, you might have a paragraph of text with a footnote where the HTML looks like this: Notice the ID attribute. This will be used in the footnote so

(read more)

Pure CSS Tooltips

Here is a solution for flexible, near-bulletproof pure CSS tooltips. The code uses HTML5 data-* attributes along with attribute selectors and some CSS positioning. Here is the HTML: Here is a live demo (use the range slider to adjust the font size, which confirms that the tooltip will resize automatically based on the font size): See the Pen Bulletproof CSS Tooltips by Louis Lazaris (@impressivewebs)

(read more)
Scroll to Top