From Jeremy Keith’s piece “Responsibility”: Dropping in one line of JavaScript seems like a victimless crime. It’s just one small script, right? But JavaScript can import more JavaScript. “It’s just o
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’
The key to side project success Posted on: 31 October 2023 Most start-ups fail. Intuitively, they fail because they run out of money. But what’s the biggest reason for this? The Lean Startup, by Eric Ries, speculates it’s because too many companies build the wrong product for the wrong people. He…
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…
It’s so easy to start with the question, “What should I do?” And end up with a discussion about other people and what they’re doing. Here’s Paul Ford: I’ll give you a good example. Do you go out and raise venture capital? Well, it would be nice to have more money. But then everybody tells us that VC…
Those of you who have been following along with my posts this month may have noticed that I’m participating in Weblog Posting Month 2024. At the end of each of my posts this month, I’ve included about what it is and where to go to learn more about it. Until yesterday, I was manually adding a chunk…
2 May 2024 Follow-up to a previous case study on how I automated my static website publishing workflow. This time, a lean Shortcut script is allowing me to write webmentions in seconds. For a while now I've been using notes to send Indieweb webmentions in the form of replies and likes. As these tend…
22nd May 2024 #Development #OpenWeb #WeblogPoMo Don't care about the backstory? Go check out slashpages.net. While putting Baby Knight to bed I had an idea for a project: a website that acts as a guide to the different slash pages you can add to you website. "Slash pages" is a phrase coined by…
The alpha release of Eleventy v3 became available in December '23. It took me a little while, but I finally upgraded this website to v3.0.0-alpha.10 today. This is what I had to do: Updated package.json and switched to ESM using "type": "module". The old .eleventy.js config file became…
CSS has been undergoing a quiet renaissance lately. Lots of big features which previously required an external tool to use, are now native parts of the language, and its growing more and more all the
I’ve been doing a lot of interviews for designers lately so here’s a list of all the questions I’m asking along the way and maybe this helps someone out there looking for a design gig. Beware though! I have “failed” ten thousand design interviews and screeners and portfolio reviews. But like Dave,…
I’ve been tracking books that I read since 2015, and, frankly, I’m pretty embarassed at how little I read these days. To be fair, there were periods of time where I was pretty burnt out from life and work that I just didn’t log them. But that number of missing books is still pretty miniscule. From…
Imagine someone came to you in a time machine and said, “In the future we will write software that becomes more capable as time passes without any effort on our part.” Wouldn’t that be amazing? Surely
My son gets a weekly magazine delivered to our home. It’s full of his favourite comic strips by fantastic authors and artists, he gets the pleasure of receiving something in the post just for him, and
Before diving in, I think it’s helpful here to note that these filters are defined using JavaScript and made available to use as Nunjucks filters in my Eleventy config file. Because they’re defined in JavaScript, this means that I’m also able to reference them in JavaScript files used in the build…
Web Security Basics: XSS posted on 16.02.2022 I decided to learn more about areas of web development I don’t know a lot about. You know,…stuff like SEO and web security. I’ll share my findings here on
Daily Tips In a previous article, I wrote about the handleEvent() method for working with event listeners in Web Components. Today, let’s look at how we can use that to easily handle multiple event types. By the way, if you’re finding this series interesting, I’m working on a Web Components…
The problem Readers Of The Blog™ may know that I have been experimenting with the View Transitions API as a way to provide animations in my new portfolio site. Once I understood the basics of how View
If you want to be a good web citizen, you might know about the target="_blank" security issue. In the old days, when you linked to a site and wanted to open a new tab with target="_blank", the target site could access your site via window.opener. This means in short: If window A opens window B,…
10th May 2024 #WeblogPoMo Okay so maybe the definition of sitelet doesn't quite fit but it's close enough to describe these common pages people have on their sites. Maybe it needs a better name. Pagelets? Web dongles? Barnacles? Do they need a name? I want one. Update Shellsharks suggested "slash…
11 Comments In response to Patrick H. Lauke. One of the challenges I see here is the limited set of CSS properties that can be set. The text stroke/fill options and text shadow are meh, but text-decoration can at least offer a non-color visual in lieu of border styles (which are disallowed). And for…
I made a directory for /interests pages! If you’ve built your own, why not submit it to the list! Just over a week ago, I published What are you interested in?, and I’ve been really pleased with the responses from around the web! Because people seem to be quite interested in the idea—with some folks…
Daily Tips If you’ve been following my articles on HTML Web Components, you may have come away thinking… This looks a lot like traditional DOM manipulation. And you’d be right! Web Components basically do exactly the same thing you can do with HTML and vanilla JS already. So why would you even…
Daily Tips This morning, I had multiple people ask me how you can nest Web Components inside each other and share information from one to another. Today, we’re going to look at how to do exactly that. Let’s dig in! 🤫 Shhh! I’m working on a new workshop-style course on Web Components. I don’t even…
← All articles Building a Localised Site with 11ty, Sanity & Netlify In this article, we'll explore how I built a localised website for a client of mine using 11ty, Sanity, and Netlify. In this article, we'll explore how I built a localised website for a client of mine using 11ty, Sanity, and…
Daily Tips Yesterday, we learned how to connect a child and parent Web Component to each other. Today, we’re going to look at how to use custom events to provide a more decoupled experience. Let’s dig in! 🤫 Shhh! I’m working on a new workshop-style course on Web Components. I don’t even have a…
Minifying your CSS helps improve your website performance. But as developers, we don’t really talk about minifying CSS anymore. Why? The TL;DR is that the delivery and optimization of CSS have both been improved with modern tech stacks, making it practically a non-issue. The efficient and performant…
I wanted to experiment with the new CSS function light-dark() and get a sense of how to use it in a CSS architecture of nested (web) components. I think it’s going to be a powerful tool in the new res
I mentioned that I overhauled the JavaScript on The Session recently. That wasn’t just so that I could mess about with HTML web components. I’d been meaning to consolidate some scripts for a while. So