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’
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 w
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
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,
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 favor
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
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
April 25, 2024 eleventy webdev guides What’s up, Internet? When discussing hosting options for personal websites, the usual suspects are mentioned: Netlify, Vercel, Cloudflare, Github, Neocities, or a
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.
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 t
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 o
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
April 15, 2024 web thoughts 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
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. Origi
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 ma
This post from Dan Luu discussing how web bloat impacts users with slow devices caused me to reflect on the supposition that faster connectivity means faster websites. I grew up in an era when slow in
Will Boyd's excellent article Diving into the ::before and ::after Pseudo-Elements includes nifty details about CSS quotes. Let's say you're dealing with a multi-lingual site that quotes statements in
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 he
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 branchs rarely stray far from main. I branch; I
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 the
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 we
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 o
Chris wrote “0 KB Social Media Embeds” and it got me thinking about my own approach to embeds and quotations in my writing. A lot of my blogging is quoting other people. I remember debating the use of
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 meticulo
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
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
I've worked on a few projects where values and ethics were a key part of the clients' mission. They weren't putting profits over everything, they were trying to deliver something that would ultimately
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,
posts 2024-02-21 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
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 disabl
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
System colors have the ability to react to the current used color-scheme value. The light-dark() function exposes the same capability to authors. Bramus System Colors in CSS In CSS you can use many co