JavaScript

How to Disable JavaScript in Almost Any Browser

By Louis Lazaris / April 4, 2022 / 18 Comments

In 2022 I think it’s still important as a web developer to test your how your websites look and function when users disable JavaScript in their browser. Developing in this way used to be a cornerstone of Progressive Enhancement and can be handy on both desktop or mobile.

I still find myself wanting disabling JavaScript on pages I visit. Sometimes it’s to test a page I’m working on, but in other instances it’s simply to visit a web page that’s not functioning correctly and I want to see if JavaScript is the culprit.

Fading in a Page on Load with CSS & JavaScript

By Louis Lazaris / December 9, 2020 / 19 Comments

When I visit a page, I get annoyed when I try to interact with elements while the website is still loading. Often stuff is moving around, fonts aren’t quite loaded, and it feels broken.

I know nowadays we’re obsessed in this industry with gaining every millisecond in page performance. But in a couple of projects that I recently overhauled, I added a subtle and clean loading mechanism that I think makes the experience nicer, even if it does ultimately slightly delay the time that the user is able to start interacting with my page.

Accessible and Keyboard-Friendly Hamburger Menu + Slide Out Navigation

By Louis Lazaris / June 25, 2020 / 7 Comments

This week I did some research to try to build a hamburger menu that opens a slide-out navigation panel, a common design pattern nowadays. But I wanted to ensure the whole thing was keyboard-friendly and as accessible as possible.

I’m not 100% sure what I’ve come up with is the most accessible solution, but I did consult a number of decent sources on building accessible navigation menus like these. I also did some rudimentary testing using the free NVDA screen reader, to ensure there are no major problems.

The Weird World of Infinity in JavaScript

By Louis Lazaris / September 23, 2019 / 7 Comments

You are probably aware that ECMAScript has something called Infinity, which is a numeric value that you can apply to any variable, the same way you can apply other numbers as values for variables.

Infinity of course is not the same as other numbers, so I thought I’d summarize, with examples, many of the quirks and useful facts around JavaScript Infinity and how it works.

DOM Element Dimensions and CSS Transforms

By Louis Lazaris / June 13, 2019 / 2 Comments

In a recent issue of my newsletter, I briefly discussed many (if not all?) of the different ways you can retrieve a DOM element’s dimensions via JavaScript.

These include getBoundingClientRect()‘s width and height properties, offsetWidth and offsetHeight, window.getComputedStyle(), the document.styleSheets object, and scrollWidth and scrollHeight.

Using the adoptNode() Method with Embedded iframes

By Louis Lazaris / January 16, 2019 / 9 Comments

There’s an interesting DOM feature that I just came across that’s a method of the document object that allows you to remove elements from an <iframe> that’s embedded on a page and drop them into the current page (or vice versa).

In other words, you adopt the elements from the child frame into the parent. The code for document.adoptNode() looks like this:

Learning From “Support” Comments in the jQuery Source

By Louis Lazaris / April 17, 2017 / 4 Comments

Back in 2014 a couple of developers launched a website called You Might Not Need jQuery that listed alternatives to jQuery features using vanilla JavaScript and DOM techniques, along with browser support. The site was shared quite a bit in the community.

In response, a couple of other developers released a Google doc that explains why you should not be too quick to drop jQuery without careful consideration of all the problems it overcomes.

In this post, based on some instructions in that Google doc, I’ll describe how you can examine the DOM bugs and incompatibilities that jQuery attempts to address.

What is JSON? An Introduction and Tutorial for Beginners

By Louis Lazaris / March 1, 2017 / 33 Comments

If you’re new to web development and have some basic knowledge of HTML, CSS, and possibly a little bit of JavaScript, a practical area in which to expand your front-end skills is JSON.

But even if you already have a basic understanding of what JSON is and have used it in some of your projects, there might be a few things you weren’t aware of. So in this JSON tutorial and guide, I’m attempting to provide a fairly comprehensive discussion of JSON, its history, and its usefulness. I’ll close with a list of some practical JSON tools that might come in handy in future projects.

npm for Beginners: A Guide for Front-end Developers

By Louis Lazaris / January 25, 2017 / 36 Comments

Unless you’ve been living under a rock for the past five years or you’re an absolute beginner to front-end coding, then you’ve probably heard of npm, and npm for beginners is a subject you’re looking into.

Maybe you’ve clicked through to the GitHub repo of a tool of some kind, and you noticed the installation instructions had a couple of different possibilities, including something like this:

Animating from “display: block” to “display: none”

By Louis Lazaris / November 20, 2013 / 108 Comments

As you might already know, CSS transitions and animations allow you to animate a specific set of CSS properties. One of the properties that cannot be animated is the display property.

It would be great if we could do it, but it’s not currently possible and I’m guessing it never will be (e.g. how would you animate to “display: table”?). But there are ways to work around it, and I’ll present one way here.