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.
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.
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:
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.
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.
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:
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.