Code

The perfect link — Rian Rietveld defines them: “When you click on them, they take you somewhere else.” Not much code in here (we’ve got that), just a lot of practical accessibility advice. For example, the alt text for a linked image can allude to the fact that it is a link. Just an image: “A cherry..

While learning Vue.js, I started building free web tools that involved the exploration of SVG, with the goal of learning something about both! Let’s take a look at one of those tools: a generator that makes SVG loaders and lets you choose between SMIL or Sass animation, different styles, colors, sha..

A question: If you copy a code sample that uses two-space indentation and you want to convert it to four-space indentation, what’s the *fastest* and easiest option? Matt Stauffer, Twitter I wrote about doing this in Sublime Text a few years back. It’s not terribly different in VS Code, I don’t thi..

Today’s websites are overflowing with animations—often too many. They get in the way of the content and slow down our busy users. But at the same time: they’re wonderful. They bring websites to life, are fun to implement and can be incredibly impressive to show off. I think they’re great. Sorry impa..

This is a bit of advice for developers on Macs I’ve heard quite a few times, and I’ll echo it: go into System Preferences > General > Show scroll bars and set to always. This isn’t about you, it’s about the web. See, the problem is that without this setting on, you’ll never experience scrollbar-trig..

(This is a sponsored post.) Free event hosted by Netlify coming up next week (Wednesday, August 25th): Architecting with Next.js. It’s just a little half-day thing. No brainer. Join us for a special event where we’ll highlight business teams using Next.js in production, including architecture deep..

Solid is a reactive JavaScript library for creating user interfaces without a virtual DOM. It compiles templates down to real DOM nodes once and wraps updates in fine-grained reactions so that when state updates, only the related code runs. This way, the compiler can optimize initial render and the..

You can’t just do @media (prefers-reduced-data: no-preference) alone because, as Kilian Valkhof says: […] that would be false if either there was no support (since the browser wouldn’t understand the media query) or if it was supported but the user wanted to preserve data. Usually @supports is th..

We can update the URL in JavaScript. We’ve got these APIs: // Adds to browser history history.pushState({}, "About Page", "/about"); // Doesn't history.replaceState({}, "About Page", "/about"); JavaScript is also capable of replacing any content in the DOM. // Hardcore document.body.innerH..

I appreciated this bit of nuance from a post on Viget’s blog: There could be a whole article written about the many flavours of Tailwind, but broadly speaking those flavours are: 1. Stock tailwind, ie. no changes to the configuration, 2. Tailwind that heavily relies on @apply in CSS files but still..