Daily Tips A few weeks ago in one of my YouTube videos, I used the [hidden] attribute to hide and show some elements in the DOM. One of my subscribers mentioned that they hadn’t heard of that attribute before, and were glad I mentioned it. Because JavaScripts always has at least two or three ways to…

Daily Tips For years, advocates of the lean web have lamented that there’s no such thing as HTML imports—me included. But turns out, you probably don’t actually need them. Let’s dig in! JS and CSS have them. Why not HTML? In JavaScript, you can import one JS file into another using the import…

Suppose you want to be a good web citizen; you use semantic and accessible HTML. Elements "leading places" are a elements, your navigation lives in a nav element, buttons are ... well ... buttons, and your form controls are surrounded by a good old form. Using the correct elements gives your HTML…

Daily Tips Last week, I pushed a big update to the Lean Web Club that removed all JavaScript dependencies. While most of the platform was server-rendered HTML stuff, some things required JavaScript, including… The login form The password update form The buttons to mark items as complete or bookmark…

You know those One Time Password inputs? Typically 4 or 6 numbers, something like: Well I came across an article by Phuoc Nguyen about them called Build an OTP input field. I’d say all-in-all, Phuoc did a good job. The design and user experience was considered, like using the arrow keys to move…

Daily Tips AI is shit. There is no nuance to this for me. It steals other people’s work without permission, washes away copyright and attribution, and makes shit up. Most importantly, it uses an absurd amount of electricity and water to do the same things we could do before AI, but worse. AI is…

Over the last year+ I've seen AI quickly increase its dominance in the social feeds I follow. I know I'm in an echo chamber, but it feels like working on the web, you/we must understand how AI works and have some kind of integration in our products. It feels like it's being bulldozed by private…

Something that has always bugged me about CSS is the dullness of most gradients. You’d have this beautiful idea for your design, set up the gradient in your CSS, and when it rendered in the browser it

I went down a bit of a rabbit-hole recently learning about CSS Nesting , specifically regarding the new & selector. I heard that it behaves like the :is() selector, and in the course of researching, I

Daily Tips Last year, I wrote about how all web browsers kind of suck. Every single one has turned into an AI-and-ad-driven piece of garbage. Amazing garbage that does incredible things. But still garbage. In my article, I wrote… Vivaldi is alright, I guess, but made some weird UI updates just for…

Today on Mastodon, Nils asked how to detect support for @property. While in theory you could use @supports at-rule() for this, in practice you can’t because it has no browser support (😭). Thankfully,

Subscribe Blog RSS feed Notes RSS feed or Combined and follow Mastodon Bluesky Wednesday 3 Jul 2024 Play Synthesised Audio I listened to Mostly Technical episode 42 — great podcast btw — Aaron Francis talks about the struggles of sending an email newsletter. Google are quick to rate limit new…

A service worker is a special type of JavaScript file that acts like middleware for your site. Today, I want to talk about why every website and web app should have one. Let’s dig in! What a service w

I was watching Kevin Powell and Adam Argyle rapidfire through 23 CSS features. They are all cool tricks, but one stood out to me. Even as an extreme CSS connoisseur I hadn’t seen it before. It’s a jui

I remember feeling numb learning that my writing had been sucked up by OpenAI. It came out of nowhere and was done without my permission or consent. I have a lot of ethical issues with contemporary AI productization, notably notions around consent, ownership, and environment. These concerns have all…

Homepage Contact No No-JavaScript Saturday 22 Jun 2024 I’m blogging this quick tip because the old technique is so ingrained I keep forgetting there is a new way. You ever used that no-js class? The o

I’d wager that most of the developers who build modern websites and web apps don’t start off thinking… I’m going to make this as complex as possible. Most of the time, I hear stuff like… React/Vue/Ang

Daily Tips This week, I’ve written about classless vs. class-based CSS, and how I approach CSS architecture. I’ve also written a fair bit recently about how I’m starting to consider build tools and anti-pattern. This has led to a few conversations about how to structure CSS and and work with modular…

In response to Kai Pepler. If a screen reader user is navigating the page by landmark, then they are getting each landmark in sequence. Essentially the rotor exposes a serialized set of landmarks. They would move past the header landmark and then to the navigation landmark (whether or not it’s…

Day 104: animation with registered custom properties posted on 02.11.2023 It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve

The other day, I wrote about how every dependency is a potential vulnerability. While that article as about third-party libraries and frameworks, you can make a similar argument about infrastructure v

Why are CSS margin and padding so closely related? The CSS margin and padding properties are often talked about together for two reasons: They both affect whitespace and sit right next to each other i

I took some time this week to upgrade my site to the newest version of Eleventy. Although v3.0.0 is still in alpha, I wanted to give it a try. This iteration of mxb.dev is already 7 years old, so some of its internal dependencies had become quite dusty. Thankfully with static sites that didn’t…

How do you animate an element as it leaves the DOM? You can’t, is the historical answer. As soon as an element is removed from the DOM, it immediately disappears, there is no animation opportunity. Th

Over the last few days, I’ve been working on some minor redesign of my website’s overall layout that I mentioned in yesterday’s post, Indent Outdent. After some thinking, I’ve decided to do away with

Published: May 26, 2024 • Reading time: 2 min External links are everywhere, and I’m using tons of them on this rather small website. They’re often used as sources of quoted text and for references scattered across articles, but I’m also maintaining lists of bookmarks, projects and even random…

Yesterday, we looked at two different ways to build more resilient websites and web apps. Today, let’s talk about how to add dynamic user interactions to static HTML. Let’s dig in! Most of what we bui

Yesterday, I talked about how your site should work without JavaScript. Today, I wanted to talk about some different approaches for building a resilient website or web app. Let’s dig in! Static HTML T

I’m amazed at how often this is a controversial opinion, but… your site or app should work as much as possible without JavaScript. The most common argument I hear against this is that in 2024, JavaScr

Oct 29, 2023 CSS added many new Math functions to supplement the old favorites (think calc() and the more recent clamp() ). They all ultimately represent a numeric value, but the nuance in how they wo

A lot of new CSS features have shipped in the last years, but actual usage is still low. While there are many different reasons for the slow adoption, I think one of the biggest barriers are our own b

The CSS Anchor Positioning specification enables us to position elements relative to an anchor, wherever they are in our web page. As I wrote recently, one thing that particularly excites me is being

Day 103: the prefers-reduced-transparency media feature posted on 01.11.2023 It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’

On this site, I write and publish in a variety of different forms, each serving their own unique purpose. I want to describe what these different are and how / why I use them across the site. Multiple different post types is an important characteristic of an IndieWeb site. Elsewhere, I cover my…