Tagged with: javascript

Removing the :target psuedo-class

I was working on a page with a link to a document fragment and put an animation on it using the :target pseudo-class. Scrolling back to the anchor and pressing it again skips to the fragment, but the animation does not run again. That’s because it still has the pseudo-class, it doesn’t disappear when scrolling.

Screenshot a node with JavaScript

One of my kids wanted a way to record their sports predictions and their notes app system was getting unwieldy, so I built a website for them. It’s on a Netlify subdomain with no search engine indexing as it’s a personal record, not a way to show off how good the predictions are, and they have no interest in monetising it. That means they’d rather not share pages with other fans, but screenshots. If it’s a big event with multiple predictions it extends beyond the viewport, so a regular OS screenshot won’t work.

Skiplinks in Opera Mini

Usually when I build a navigation it is at the end of the source and a skiplink appears at the top of small viewports linking to it. I then enhance it using CSS and JavaScript so that most devices and browsers get something nicer—an off-canvas interaction perhaps.

The for loop in JavaScript

The for loop is most commonly used for iterating over an array and performing an action on each item. For example:

Adventures in font loading

More and more of the sites I’m building recently are using webfonts, and some of these fonts are very heavy. I care about load time and page weight, so I set about finding ways to ensure I could use webfonts while minimising some of the associated problems, viz. FOUT and missing content.