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…
Juan Fernandes
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
A user interview is a popular UX research method often used in the discovery phase. User interview: A research method where the interviewer asks participants questions about a topic, listens to their responses, and follows up with further questions to learn more. The term “user interview” is unique…
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…
No articles.