CodeinWP CodeinWP

Web Design Tutorials

Fading in a Page on Load with CSS & JavaScript

Fading in a Page on Load with CSS & JavaScript 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

Hamburger Menu 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.

Adding CSS to a Page via HTTP Headers

Adding CSS to a Page via HTTP Headers I’ve been coding websites for a long time but even I was a little puzzled when I came across a Hacker News comment where the commenter described their own makeshift CMS that involves using your own file system. The most interesting part to me was when the person said they add CSS to pages on their personal projects by means of HTTP headers.

I had heard of this technique before and the person does say in the comment that this doesn’t work in every browser. But I decided to do some research to figure out how one might do this and why this would be easier than just dropping in one or more <link> elements in the HTML.

The Weird World of Infinity in JavaScript

Infinity in JavaScript 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

DOM Element Dimensions and CSS TransformsIn 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

Using the adoptNode() Method with embedded iframesThere’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

Learning From 'Support' Comments in the jQuery SourceBack 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 Guide for Beginners

What is JSON? An Introduction and Guide for BeginnersIf 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

npm for BeginnersUnless 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:

CSS Positioning Basics (Screencast)

CSS PositioningA couple of years ago I wrote an article for a company called Thinkful on CSS positioning, which also included a screencast that I hosted on my ImpressiveWebs YouTube channel. The video was “unlisted” but I’ve now made it public, and since some time has passed I thought I would post the video here.

It’s pretty basic stuff for most experienced CSS developers, but if anyone wants a quick primer on CSS positioning, this should be a good guide. The video is embedded below and I’ve summarized the content here in this post.