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

Daily Tips Yesterday, we learned about the different ways to instantiate a Web Component. In the article, I mentioned the connectedCallback() lifecycle method. Today, we’ll talk about more of those methods. Let’s dig in! The lifecycle methods As the browser parses and renders your web component into…

I’ve added a directory for /interests pages! Read the blog post or visit the directory. You may or may not be aware of the /about, /ideas, /now, and /uses page initiatives[1] [2], where website authors are encouraged to create pages on their websites at discoverable URLs for expressing who they are,…

Daily Tips As part of this ongoing series on Web Components, we’ve created our first Web Component, learned how to add options and settings, and learned how to progressively enhance Web Components. Today, we’re going to learn about the different ways to instantiate them (and some of the challenges…

I’ve been deep-diving into HTML web components over the past few weeks. I decided to refactor the JavaScript on The Session to use custom elements wherever it made sense. I really enjoyed doing this, even though the end result for users is exactly the same as before. This was one of those refactors…

Daily Tips This week, we’ve looked at how Web Components are different from React, how to create your first Web Component, and how to add options to a Web Component. Today, we’re going to look at one of my favorite Web Component features: progressive enhancement. Let’s dig in! A few different…

JSON RSS feed I quickly created a JSON feed for this website. 28 Apr 2024 While setting up Echo Feed to mirror my blog posts on the fediverse, I’ve discovered how its capabilities to fetch from RSS we

15 April 2024 Have you heard of the “error prevention” heuristic? It means “do everything you can so users don’t make mistakes”. And it’s good advice. But some designers think it means “don’t show an error” which is bad advice. Take the maxlength attribute. If you add maxlength="6" to an input for…

Wed Apr 17 2024 Posted in: 11ty Eleventy (the cool static site generator) has a great feature called Pagination which allows you to iterate over a list of things in chunks and produce multiple output files. As I was migrating this very site over to Eleventy, I found I needed to perform a double…

April 25, 2024 eleventy webweaving guide What’s up, Internet? When discussing hosting options for personal websites, the usual suspects are mentioned: Netlify, Vercel, Cloudflare, Github, Neocities, or a VPS if you want to go off the deep end. All have their strengths and weaknesses, but I’m here to…

Daily Tips Yesterday, we learned how to create your first Web Component. Today, we’ll learn how to add options and settings. Let’s dig in! Our Web Component We’ve got our Web Component from yesterday. When someone clicks the element, the Web Component tracks the number of clicks and updates the…

Daily Tips Yesterday, we talked about why Web Components won’t replace React or Vue. Today, let’s look at how to create your first Web Component. Let’s dig in! A really basic example Let’s kick things off with the most generic and overused of examples: a counter button. When the user clicks the…

I love the new BBC adaptation of Philip Pullman’s His Dark Materials trilogy of novels. There’s also some pretty nice graphic design to appreciate. I’m a sucker for a beautiful title sequence (I need to watch the opening credits of Game of Thrones in full, every single time), and this one certainly…

Over the weekend, I sent an email to my newsletter subscribers asking them what kinds of things they’d like to learn about Web Components. One of the most common questions I got back was some variatio

When I prepare user interviews (or usability tests), I end up coming back to the same resources again. I decided to put them all in one single place. If you follow this blog, you know it’s also kind of my “public bookmarks of resources” and “memos”. I put together this cheat sheet to help you write…

If you take the time to create content online, you probably want people to read it. It doesn't have to go viral, but it'd be nice if some folks read it, right? But for people to read your stuff, they must know about it. And for this, Google (or other search engines) must index your site. Googlebot…

April 15, 2024 indieweb blogging personal While surfing the web this weekend, I saw a curious question from Kev Quirk on Mastodon, attached to a blog post: What About Anonymous Blogging? Have you ever thought about blogging anonymously? I blog under my real name, but wonder if that could have held…

The link-peek Web Component allows you to turn a regular anchor link to a rich preview (also known as an 'unfurled' link) to show description, meta image, website name and more using a JSON API. Origin For a number of years I've been using Ghost to write my website content, and one of its very…

Hi All! 🤗 There are many pages you can add to your personal site that people can visit if they want to learn more about you. A “contact” page or an “about” page are two classics that you’ll find on many sites out there. But what if someone doesn’t want to read your bio, your scope of activities, or…

I've made a change to my site's pagination wherein I've enhanced the page count displayed at the bottom of my home and links pages to display the page count in a select element. The select displays a list of all the pages and navigates to the selected page. If a user does not have JavaScript…

Back in the pandemic, as my personal website started to become a comfort in difficult times, I often asked myself: what can I do with my website this weekend? I would make small changes. Add a link here, write a blog post there, change a background colour every now and again. Sometimes, I would take…

I’ve been blocking various “artificial intelligence” (“AI”) bots on my site. Why, you ask? Well, I don’t like the idea of my work being hoovered up to train “AI” data models; I don’t like that these companies assume my content’s available to them by default, and that I have to opt out of their…

Git Fresh Published on April 7, 2024 I don’t know if this is a personal quirk or a side effect of my role (designer first, developer second), but my Git branches rarely stray far from main. I branch; I whip up whatever prototype, pattern or design adjustment I had in mind; I return to and update…

9 April 2024 When you design a product, you should usability test it. Otherwise, you won’t know how well it works. Typically you either: create and test a prototype build it in production and test there Building it in production is usually the most expensive and risky approach so lets leave that out…

One of my favourite pastimes is clicking around the blogosphere, exploring and reading personal websites. I especially love encountering blogrolls or link lists, wherein a site owner links to other websites that may be of interest. I have maintained a blogroll listing some of the blogs I follow for…

Daily Tips I’m coming to realize that a lot of my dissatisfaction with the state of the web is that I view web development as a craft, but as a profession we’re in the late-stage industrial age. I prefer a web of hand-laid bricks placed by skilled masons. The industry wants poured, stamped concrete.…

We've got it real good when it comes to standing up websites these days (especially static ones). Modern hosts like Vercel and Netlify take care of a lot out of the box, shielding us from the meticulous, complicated stuff. Caching is one of them. To accommodate the widest range of users, many…

There’s no truth teller quite like Google autocomplete. As you type “Design development handoff is…” into the search bar, it quickly fills in the blank with terms like “issues” and “not working.” It’s not that everyone’s handoff is broken; it’s that we’re constantly in search of ways to make it…

Yesterday, we learned about CSS variables. Today, I wanted to show you an advanced approach to working with them that I often use with client projects. Let’s dig in! Globals for system or theme defaul

Yesterday, I mentioned that I love CSS variables. Today, I thought I’d explain what they are and how they work, for those who aren’t already familiar with them. Let’s dig in! You define a CSS variable

Yesterday, I wrote about the importance of understanding the medium that we work in. Today, I wanted to share my best practices for writing code with a team. Here’s the short list: Have and enforce co

I’m not a “[full-stack] developer”, regardless of what my last job title says. I’m not even a front-end developer, thanks to the JavaScript–industrial complex. I’m a front-of-the-front-end developer, but that’s too long. So, I’m a web designer. And I also specialise in accessibility, design systems,…

This post is adapted from the talk I did at the Eleventy Meetup. You can also watch the talk on YouTube. This is what I look like when I try to explain how my website works: There are three main parts that make up this website: Echo, my API server (and Eleventy data files), and standard Markdown…

I'll definitely reference the following blog post in the future. Kitty Giraudel describes when to use disabled and aria-disabled. Ready? Because here comes some solid HTML attribute advice. The disabled attribute is totally fine and should be used when relevant! What’s important is not to use it…

Here’s a full disclaimer upfront: This isn’t something I’ve come up with. Jeffery Way from Laracasts has come up with this technique in one of the videos and I’m just sharing it here for my reference.

The other day on Mastodon, Hawk Ticehurst asked… If you were asked to build a “proper complex” web application (let’s say a full featured mastodon client or similar) and you were going to “use the pla