Things have been beyond busy at work for the past two years, and time for side projects was the first thing to go. I’m hoping to improve that balance in the coming year.

Despite that, I did manage to do one little project. 2025 marked my 30 year anniversary in New York City, and to mark the occasion I posted one photo of New York City for each year that I’ve lived here over the course of a month. I wrote about the project over at the Junk Drawer and created a Pixelfed account to post the images. I’d like to eventually add it here via a subdomain, but it’s low on the priority list.

As for this site, I’ve started to imagine how I want to change it to better accommodate my current state and interests. When I launched the site five years ago I was very much reacquainting myself with front-end skills that had I let lapse. Building a site and writing about all the things I was learning was the perfect way to learn and share.

Despite letting this site wither into a collection of old forgotten posts, there are several posts that still get regular traffic. When I think about all the posts that I’ve found helpful over the years, and ones that I’ve visited with regularity when I need to remember to how to do something, I feel like the spirit of the web is alive and well knowing that something I’ve posted here could be helping someone.

One of the things I’ve chuckled about, especially over the last couple of years, is that anyone visiting this site would probably not realize that I’m a designer. Especially since I don’t write about design or have a case studies section. Most designer’s sites that I’ve seen are geared towards job hunting rather than having a place on the web to do one’s own thing. And this site is very much the latter.

Of course there are exceptions, and a few notable designers that post with regularity that I enjoy are Tyler Sticka, Stéphanie Walter and Benjy Stanton.

Stéphanie publishes a helpful weekly roundup and has loads of great learning material. Tyler’s journal is a nice mix of personal interest and many helpful “where the rubber meets the road” CSS and design posts. If you’re looking to learn more about how to prototype in code check out Why I like designing in the browser and Designing in the browser: five tips for beginners. Benjy frequently shares his process and experiences working predominantly in the Government space in the Wales. It’s great to a peak into a thoughtful, mature practice that focuses on accessibility and web standards as well usability, research and the craft of interaction design.

Monday mornings are an onslaught of design newsletters. It kills me that everyone sends everything on Monday morning. I don’t give a shit about inbox zero, but I have a strict RSS zero policy, and Monday mornings are challenging.

That annoyance aside, for the last year or so most design newsletters are predominately full of “how to survive and thrive in our new AI world” Medium articles. These generally take two forms, "why aren’t you doing it already OMG you’re going to be left behind’ or “yikes, it’s happening already you’re going to be left behind”. A little hyperbolic? Perhaps, but the uptick in these types of posts has been notable, and tiresome.

As my winter break kicked off I saw that post that not only broke the aforementioned mold, but resonated in a way that crystalized some disparate thoughts I’ve had about this site. A bit of a clickbait-y title, Why AI is exposing design’s craft crisis, but if you care about design it’s well worth a read.

The first part of the article does the ground work to layout the issues of AI tools in the absence of expertise, but the article isn’t really about AI. It’s about the design industry’s decision to abandon technical literacy when the Great Web Design Split happened 15 or so years ago, and what we’ve lost in the process.

This wasn’t gatekeeping by engineers. This was the design industry telling itself a story about what designers needed to know. The story went like this: designers focus on users, empathy, and problem-solving. Engineers focus on implementation, code, and technical constraints. Clean separation of concerns. Everyone stays in their lane.

What we lost wasn’t the ability to code. What we lost was the ability to participate in technical conversations.

This article feels a bit like the design flip side of Chris Coyier’s 2019 juggernaut The Great Divide about what’s been lost in front-end development in a framework world. It’s truly depressing to highlight the reality of there being so few people who understand what I like to call the “where the rubber meets of the road of design”. When there aren’t many developers or designers who understand the particulars, and specifically how to make good trade-offs, we end up with all the WTF moments we too often have when trying to go about our daily digital business.

I’m all for designers learning to code, but that’s not the argument here.

Let me be crystal clear: this is not an argument that designers should learn to code production software.

This is about strategic literacy. Understanding enough about technical systems to make informed design decisions and advocate effectively for users when those decisions are being made.

There’s a difference between writing production code and understanding what code does. Between implementing a database schema and knowing why data models influence user workflows. Between configuring a build pipeline and recognizing when technical debt is accumulating in ways that will limit future design possibilities.

As a ancient person who came out of the Web Design era and stuck with design rather than switching to a development role, I cannot underscore how true these statements are. And it’s not like designers don’t want to better understand technical considerations, at least the ones I work with. It’s just not something that’s taught or prioritized as a design skill.

I do a lot of mentoring and upskilling in my team. Some of it’s front-end focused along the lines of how to evaluate code or make suggestions to developers who lack front-end skills (and just do whatever Figma Dev Mode says, which is not always great).

But more often it’s understanding data models and APIs, or thinking about validation, both front-end and back-end, and how it informs error handling and error messaging. And all the other technical considerations along the way that can inform design, or more importantly, can be informed BY design.

As an example, my advice to designers who want to improve their interaction design skills and technical understanding is to work on upload patterns. Some considerations…

• What are all the constraints? (e.g., file type(s), max file size, amount of files)
• Is this validation happening before the files are uploaded? (see above)
• Are there any additional validations happening after the file has been uploaded? (e.g., validating field types and values, this is one is common if using a spreadsheet template, hello Enterprise Design!).
• In the case of multiple file uploads, how should the various error states be handled across multiple files? (e.g., one file is the wrong the type, one is too big, etc.)

My point is that “users need to a way to upload files” is much more complex than making sure the text in your dropzone has sufficient contrast (it usually doesn’t) and the instructional text is easy to understand (it usually isn’t). Have a discussion with the developers on your team to understand their approach or make sure they’re thinking about solving the problem in a way that makes it easy for user’s to gracefully handle all the many errors that can occur.

In the upload scenario, and so many others, the trick is that you as the designer also need to have some understanding of the developer’s choices, if not you not could end up a with technical debt cluster if you insist on things that can be hard to achieve.

The consequences show up everywhere. UXPin research found that 62% of developers spend significant time redoing designs due to communication breakdowns. Not because designers made bad aesthetic choices. Because designers proposed things that were technically nonsensical, or missed constraints that would have changed the entire approach.

But honestly I don’t think there are a lot of ways for designers to go about learning these sorts of things outside of mentoring. And that’s a problem. I’m not saying there’s nothing out there, part of what I’m going to do as I narrow down ideas is to see what is out there. I know there are some good deep dives on Smashing and Baymard that I’ve referenced from time to time, but that doesn’t mean there shouldn’t be more. And if you’re a designer with technical literacy you should share that knowledge too!

Back to the site updates. This made me think that the way to back to this site is write more about technical literacy in design. Not because it’s something I’m learning about as was the case for most of the writing on this site to date, but because I want to share what I know. And the above article does a great job of outlining why these are important skills for designers.

As I said on Mastodon, mostly to try to hold myself accountable, “Hoping to focus on giving designers more technical context for decision making & collaboration.”

I don’t have a grand plan and I’m not brimming with energy at the moment. And next week I’ll be back in the work vortex. But, I do want to do several things…

• Rework the homepage to be a bit more simple - will probably take the “working in the open” approach and strip it back and slowly build it up
• Start to write about technical concerns for designers, again, no grand plan but I have a few notes
• Try REALLY hard not to ignore the first two bullets and just rearchitect my CSS and call it a day

I think I’m going to leave the interior pages the same for now, and maybe always. We’ll see. Hopefully I’ll eek out a post or two in the coming months and see where it takes me. And I guess if I get my act together and actually do this I’ll have to stop calling this my web dev site! My design dev site?

Until then, here’s to a better 2026.

• Mail server: Dreamhost
• Mail client: Thunderbird, Mail.app on iOS
• Calendar: Calender.app but interested in trying BusyCal (but still haven’t yet)
• Contact management: Contacts.app
• Browser: Firefox on desktop, Safari on iOS (not like there’s a choice!)
• Chat: Messages.app, Signal
• Notes: Obsidian and Standard Notes
• To-do: Obsidian, Standard Notes, Reminders.app
• Photography: Camera.app and currently iPhone 15 Pro
• Photo management: Photos.app
• Photo editing: Acorn
• Image compression: Squoosh
• Word processing: Libre Office, Google Docs
• Spreadsheets: Google Sheets, Libre Office
• Presentations: I don’t do these often, but the only one I did in 2023 was with Miro
• Visual thinking / wireframing: Miro, Freeform.app
• Color picker: Pika
• Shopping lists: Not really, but sometimes I’ll note something out of the regular rotation I want to remember in Standard Notes or Obsidian
• Meal planning: Nope
• Budgeting and finance: Nope
• News: RSS feeds
• Music: Apple Music
• Podcasts: Nope
• Code editor: VS Code (minor 2024 update: waiting for better HTML autocomplete in Nova)
• Text editor: BBedit
• Mastodon: Web on Desktop, PWA of web app on mobile
• Backups: Weekly Time Machine back-ups to a G-Technology 4TB drive
• FTP: Transmit, yes I still use FTP for a few things and Transmit is awesome
• Batch image processing: Retrobatch
• Screenshots: Mostly built in OS screenshots with some CleanShot X when I need to annotate, use backgrounds, etc.
• Search: DuckDuckGo, with occasional follow-up Google for code questions

These are the ones where I did change my default app.

Last year’s entry went like this: “Mostly Dropbox, some iCloud, testing out Proton Drive”.

I went on to discuss my dislike of the Dropbox app’s mobile privacy settings and that I wanted to give Proton a proper try to see if it was ready for prime time.

Perhaps this time next year Proton Drive will be my main cloud storage.

Yeah, no. In my limited tests the desktop version encountered syncing issues on a multiple occasions. Their support was prompt and helpful, but I wouldn’t feel comfortable using it beyond copying specific files I’d like be to be able to access on mobile from Dropbox to Proton. Maybe next year? But guessing probably not.

From last year’s post…

After writing the above paragraph (that noted that I had previously tried Inoreader and wasn’t willing to switch) I went back and signed in to my Inoreader and NetNewsWire accounts. Happy to report Inoreader seems much more like a contender than my first review, and they’re having a nice holiday special. I’ll probably grab the holiday deal and slowly migrate/test it out.

And…

We’ll see if Inoreader has replaced Feedly by this time next year.

Ding, ding. We have a winner! Not only was it an easy transition, I like Inoreader much more than I ever liked Feedly.

Ugh, Omnivore. It was going so well at this time last year!

Aside from a few galling choices, such as lack of flexibility in export options and handwaving repeated requests for a simple export to CSV (“people can just use the the API”), Omnivore was exactly what I wanted in an read-it/find-it-later app.

An unfortunate thing that turned out to be fortunate was that I noticed that the “ai-ideas” channel in their Discord server was active enough to prompt me to have an exit plan.

Because of this I found a python script to export my library to CSV, and created a reminder (Reminders.app, still a default!) to run the script weekly. This meant I had an up to date CSV file of all my 900+ saved articles that I may never read again ready to go when the inevitable happened.

In fairness, the save to Obsidian feature turned out to be the thing I liked the most, and the thing I can’t find anywhere else. I ended up migrating to Raindrop, and while it doesn’t have offline reading in the way that I would like, I am making great use of the Collections feature and have so far imported bookmarks from all my failed bookmarking attempts of yore, including Pinboard, Instapaper, Pocket, and Evernote. I’m also going to create collections for my saved mobile tabs, which I have been backing-up annually since 2021. I might make a post about all of this later.

The most annoying thing is that I would use the Apple weather app if I could read it during the day.

Yeah, I just gave in and now use Apple’s weather app exclusively, despite still hating the lack of daytime contrast and ability to customize appearance.

Nothing on the radar to swap for next year, we’ll see if anything changes. Hopefully I’ll even make a post or two between now and then. Happy defaulting in 2025!

This year’s Year in Review, or “Year four in the books” as it would’ve been named, will be very short. Ready? Nothing happened. At least here at the this site.

Elsewhere in life plenty happened. And while things were going not great in my personal life, things were also much busier in my work life, although with some notable bright spots. Basically my attention has been elsewhere, and that will probably continue for the time being.

Back to the matter at hand, in my usual Year in review post I note whatever I’ve done and things that I want to accomplish the next year. Last year I was pleased with my progress. This year, not so much…

• Tinkering? Nope.
• Rearchitecting CSS? Nope.
• Reworking the homepage? Nope.
• Hedging? Should’ve done more of that.

What, if anything, did I manage to do?

• The only thing I did around here was add update my ineffectual robots.txt to keep with bad doers and clean up some link rot introduced by Google’s Web Dev redesign.
• I did revamp the TV Blurbs sections at the Junk Drawer.
• I also managed to launch a new site!

Yes, even in a year where I could barely do anything other than keep my head above water I launched a site, and promptly forgot to mention it here or on Mastodon. The site is an archive of a pet blog I wrote between 2006-2007 called Home Zoo.

It was sitting around gathering dust on a very old version of WordPress, so I moved it to Eleventy. It only has about 20 or so posts so it was easy to convert. And I find doing that kind of work oddly relaxing.

I kept the design similar to the original site. The gigantic poor quality header image is the original image used on the old WordPress site, but set to the take the full width of the screen so it looks extra bad on big screens. That was the intended outcome.

The sidebars use the design of the old version and the color palette is roughly the same, now with better contrast. At any rate, if you’d like to read some not interesting posts from an almost 20 year old pet blog, please visit the Home Zoo!

As for next year? Not holding my breath, but I will be posting my 2024 Defaults post here tomorrow. And I’m planning to do my annual Junk Drawer Wake Up Song recap (2023) and one sentence about everything I watched in 2024 post (2022, 2023). Fingers crossed.

I’ve enjoyed reading them and picked up a few good ideas here and there, but didn’t initially think about doing one. Eventually it occurred to me that it might be fun or useful to track them year over year.

Here are mine as of December 2023. I’m on MacOS and iOS, ** indicate more detailed notes and thoughts below the list. Multiple items are listed in order of most used.

• Mail server: Dreamhost
• Mail client: Thunderbird, Mail.app on iOS
• Calendar: Calender.app but interested in trying BusyCal
• Cloud file storage: Mostly Dropbox, some iCloud, testing out Proton Drive **
• Contact management: Contacts.app
• Browser: Firefox on desktop, Safari on iOS (not like there’s a choice!)
• Chat: Messages.app, Signal
• RSS: Feedly, would like to move away but have a lot of workflows built in **
• Bookmarks: All over the place, slowly migrating to Omnivore and liking it **
• Notes: Obsidian and Standard Notes **
• To-do: Obsidian, Standard Notes, Reminders.app **
• Photography: Camera.app and currently iPhone 15 Pro, would love to get back to using standalone cameras **
• Photo management: Photos.app
• Photo editing: Acorn
• Image compression: Squoosh
• Word processing: Libre Office, Google Docs
• Spreadsheets: Google Sheets, Libre Office
• Presentations: I don’t do these often, but the only one I did in 2023 was with Miro
• Visual thinking / wireframing: Miro, Freeform.app
• Color picker: Pika
• Shopping lists: Not really, but sometimes I’ll note something out of the regular rotation I want to remember in Standard Notes or Obsidian
• Meal planning: Nope
• Budgeting and finance: Nope
• News: RSS feeds
• Music: Apple Music
• Podcasts: Nope
• Password management: Hodgepodge of memory and saving in browsers
• Code editor: VS Code **
• Text editor: BBedit **
• Mastodon: Web on Desktop with occasional posting using Semaphore (really dislike the tiny little sidebar compose box of the web client), PWA of web app on mobile
• Weather: Combo platter of Hello Weather, Merry Sky and Weather Underground **
• Backups: Weekly Time Machine back-ups to a G-Technology 4TB drive
• FTP: Transmit, yes I still use FTP for a few things and Transmit is awesome
• Batch image processing: Retrobatch
• Screenshots: Mostly built in OS screenshots with some CleanShot X when I need to annotate, use backgrounds, etc.
• Search: DuckDuckGo, with occasional follow-up Google for code questions, want to try Kagi (not any more).

I’ve been back and forth between Dropbox and iCloud multiple times, and ultimately find Dropbox a bit less annoying than iCloud. Oddly the files in Dropbox feel more integrated into my system than iCloud. I currently use iCloud to share OS-y generated things between devices, like photos and messages. For everything else I use Dropbox.

The biggest Dropbox ugh to me is their mobile app…

If I use your product for free then OK, I get it, you may want some of my data in exchange. I don’t like it, and I’ll think long and hard about agreeing to use your service, but it at least it has the veneer of fairness. Dropbox ain’t cheap! I don’t mind paying for it, but I do mind also giving them this much data (and the third party AI thing, which I immediately disabled thanks to thoughtful people at Mastodon letting everyone know).

For now I don’t have Dropbox on my new phone. This isn’t terrible, but it means I need to plan ahead if there are things I want access to when I’m out and about. Enter Proton Drive.

I have a Proton account that includes Proton Drive. I’ve been waiting for a desktop app to give it a try, and last month it became available. So far so good. It’s easy to share and files are available offline and when signed out of your account. Perhaps this time next year Proton Drive will be my main cloud storage.

I’ve used Feedly for many years, and have plenty of useful workflows built into it. I like the ability to create boards, the title-only layout and that read articles don’t disappear into the void.

I don’t use any of the AI they’ve been pushing and hadn’t paid much attention to it. Then in the spring of this year they started advertising “How to track protests posing a risk to your company’s assets with Feedly AI”. Ugh.

They immediately stated that they flubbed the communication, and didn’t intend for it be used for things like strikebreaking as a service. Even if that’s true, it was a wake up call to try to find another option not heavily invested in “whoopsie we made strikebreaking AI, sorry!” product lines.

I did some initial research trying Inoreader and NetNewsWire, but at the time neither of them had enough of what I wanted to spend the time reworking all the stuff I used Feedly for. I think Feedbin also seemed like a contender, but didn’t get around to giving them a shot.

After writing the above paragraph I went back and signed in to my Inoreader and NetNewsWire accounts. Happy to report Inoreader seems much more like a contender than my first review, and they’re having a nice holiday special. I’ll probably grab the holiday deal and slowly migrate/test it out.

This is my must-have feature list…

• Be able easily find articles once they are read
• Be able to either tag articles or add to a board, bonus if the tag or board has its own RSS feed or can be easily shared
• Be able to easily set up automations using Zapier or IFTTT
• Be able to view as a title only list view layout for maximum scanning and minimal visual noise

We’ll see if Inoreader has replaced Feedly by this time next year.

This is really more find-it-later than read-it-later for me. I have saved links all over the place and even started a bookmarking site, Pile of hrefs, during the early lockdown stage of the pandemic. I have saved links in Pocket, Feedly, an ancient Pinboard account and probably strewn about in a few other places.

A few weeks ago I discovered Omnivore, an open source read-it-later app. So far I’m really loving it. It’s easy to add and label links in a variety of ways. It can even consume RSS feed, so theoretically it could be used as an RSS reader as well. It’s relatively new and doesn’t have many of my RSS must-haves, but if you’re looking for a nice lightweight RSS reader, Omnivore could be right for you.

On my list of potential articles (in Obsidian), I have an item for “Note taking approach (Standard Notes / Obsidian)”. I used to use a combination of Apple Notes and Notion, and prior to that a combination of sticky notes (physical and digital) and TextEdit.app.

My note taking needs range from quick little things I don’t want to forget to post drafts and longer thoughts. For many years I handled the first type with physical Post It notes. I still have some handy for notes on the fridge and the like. I also used to make good use Apple Stickies before I moved away from using my desktop as de facto junk drawer.

Eventually Apple Notes took up the job of stickies, and it was mostly fine as a user experience. Eventually I wanted notes to be actual files that could be used with any other application. I was also increasingly interested in privacy/security.

For the stickies category I settled on the privacy focused Standard Notes. It’s perfect for tossing together lists of all kinds and random things I don’t want to forget. I’ve use it for research notes, recipes, my very long series watch list, tracking deliveries and a bunch of other things.

After becoming a markdown devotee in recent years I wanted to find a tool that allowed me to author in markdown for the longer notes and writing category. At first I tried iA Writer, and mostly liked it. The deal breaker for me was the lack paired brackets via keystrokes. Then I discovered Obsidian and have not looked back.

Much like my brain, I only use a small fraction of Obsidian’s capabilities. I’ll never be a personal knowledge management overachiever or a digital garden tender, but Obsidian knocks it out of the park for my meager and disorganized note taking!

I do use Reminder.app for a few reoccurring things like the dog’s monthly preventatives and my weekly back-ups. I also keep a weekly to-to list running in Obsidian.

For Default post purposes the category is meant for apps, but I’m more interested in hardware for this one. My current camera is an iPhone 15 Pro, which I’m very happy with so far. I haven’t tried out the high res mode yet but it’s nice to have it as an option. A friend needed a headshot for print over the summer and I dusted off an old Nikon D70, which got the job done. And it made me miss standalone cameras. I can see getting back into it more seriously if I had more time on my hands, but unless some unforeseen windfall happens that won’t be anytime in the near future.

I use Acorn for image processing. It’s straightforward and powerful. I don’t do too much, especially with images from iPhone 15 Pro. The D70 images were another issue! But if you’re looking for an affordable image processing app, check out Acorn. Flat fee, no subscription.

For photo management I’ve been using Photos.app for several years. I used my own filing system prior to that and have a pretty large, somewhat organized filing system. I still routinely back-up my photos from Photos.app into actual files that live in my filing structure. It’s not as organized as I’d like, but the photos are also not solely locked in Photos.app.

One of the things I’m hoping to do in 2024 is to tack a photos subdomain on here and make a full on photo site. I’ve been posting regularly all year at my Pixelfed account and think I’m ready to step it up.

VS Code is like twenty pounds of shit in a five pound bag, at least for my purposes. I loved Atom, but since it’s no longer being maintained I thought it was best to move to another tool.

I tried Nova when it first came out and have to admit I was completely turned off that it made itself the default application for every code related file type. It also didn’t have many features at the time. Enough time has passed and many people I follow seem to like it as a VS Code alternative, so I’ve added it to my to list to try again.

For text-munging and wrangling I still love BBEdit. Want to easily strip out all markup or comments? Need powerful search and replace? Easy case changes? BBEdit has your back, since 1992. Whenever I have an unwieldy file, BBEdit is my go to.

The demise of Dark Sky has left a gaping hole in my formerly solid weather knowing situation. In this household we like to joke that it takes three apps to not be able to figure out when it’s actually going to rain.

I use a combination of Hello Weather, Merry Sky and Weather Underground, and for the most part they’re fine. I don’t love any of them. And yes, I’ve tried all the other ones, or rather the other ones that don’t feel the need to track my purchaes, etc.

The most annoying thing is that I would use the Apple weather app if I could read it during the day.

It looks easier to read in the above screenshots, but I find it impossible to read on a screen. If they would just provide an option for a non-dynamic background with sufficient contrast I would happily use it.

We’ll see what, if anything, has changed in my application situation for 2024. Hoping for a few improvements here and there.

I’m not 100% convinced that I’ll make it public. I’ve been active on Twitter since the spring of 2007, but honestly most of it’s just chit chat and blather. I’m not a Thought Leader or a Big Account. I didn’t share any meaningful insights. I had no viral shitposts, notable bangers or things generally worthy of a public archive for all eternity. However, in the spirit of IndieWeb, I may tack it on to this site with a subdomain.

In addition to being unsure if I even wanted to share it publicly, I was unsure of how much I’d be able to modify the layout…

I’ve fiddled around with some of the CSS and may restructure it a bit. […] Although I may not be brave enough to muck around with the layout as its using Javascript as the templating language. I could very easily mess that up! I may just stick to fiddling with the CSS, we’ll see.

A few weeks ago I randomly picked it back up again. I’m happy to report that I overcame my fear and was able to make almost all of the changes I wanted, even modifying a fair bit of JavaScript. And now I’ve unleashed it into the wild.

It felt pretty good to be able to make modifications that I thought were beyond my ability. I won’t be using JavaScript as a templating language in my own projects, but that’s one of the many great things about Eleventy, I don’t have to. We all can chose to work in the way that suits us.

• Adding a skip link
• Changing the top level navigation to include most recent and “popular”
• Reworking <h1> to be page specific instead of the site title
• Adding focus indication
• Adding some open graph meta tags
• Giving the search input border more contrast, wanted to remove, or give the Pagefind placeholder more contrast, but couldn’t figure out how to do it
• Swapping out the Twitter icon with a local one, the original was calling it from Twitter
• Removing the account avatar link at the tweet level

The search is a great addition. I had a lot of fun playing around with it, finding random missives and WTF worthy stuff.

A sampling, including links to relevant examples…

• Mentioned procrastinating 25 times
• Said “ugh” 186 times (see image below)
• Mentioned The Sopranos 10 times (that seems low)
• Mentioned NYC, where I’ve lived for almost 30 years, 229 times (garbage piles, snobbery, nightmares)
• Mentioned L&O, my shorthand for Law and Order, 38 times and used #LawAndOrder 10 times and mentioned my favorite detective, Lennie Briscoe, 12 times
• General wreckiness
• Out of context missives
• Unspecified shout outs
• And an early observation

I stuck with my original idea of tacking it on here with a subdomain, which was very easy. One bonus that I didn’t think of when I decided on the approach was that there was no propagation time because the top-level was already propagated. And of course there’s always not paying for yet another domain.

I also noticed some love for subdomains recently. Gaston Rampersad mentioned being on the bandwagon when sharing a cool site he made for his dog. Chris Coyier also recently had a pro-subdomain post.

And now that I have my subdomained Tweet Archive, I have to figure out how to link to it from here. I have a few ideas for reworking all the navigation. Until then I added it to my Links page at the Junk Drawer.

How did I stack up to last year’s What’s Next?

• Tinkering? Check.
• Revamp the Projects section? Check.
• Rework the homepage? Check.
• Integrate the Junk Drawer? Kind of?
• Studio site? Change of plans.

If you like reading about tinkering, you may enjoy my changelog. Here are some tinkering highlights from the past year…

• Lots of footer fiddling! Including removing some links (Twitter, and the like) and adding some links (Mastodon and the like). Also added <nav aria-label="Secondary"> to the footer links.
• Moved the Contact link from the footer to the primary navigation.
• Removed meta tags for Twitter specific social cards.
• Reworked front matter for the Changelog from using only the ISO date to “Changelog: yyyy-mm-dd” in the page title and open graph title. The permalink still uses /changelog/yyyy-mm-dd.
• Added robots.txt in hopes of blocking ChatGPT.
• Removed a few organizational tags like “all” and “writing” from listing on the All Tags page.
• Lots of little streamlining, like removing “Published on” in front of post dates and on listing screens.
• Added print styles to remove the navigation, footer, tag list, previous/next links, Kofi link and “back to top” link on posts (a late addition, forgot to include this before publishing!)

This was the biggest effort of the year, and it happened in two parts.

Initially I removed the “Additional Projects” on the Projects landing page and “archived” a few older projects by excluding them from the Projects collection. The pages still exist and the URLs remain the same, but they no longer display on the landing page and are not included in the section’s pagination. This was accomplished by adding eleventyExcludeFromCollections: true to the front matter for the project.

The second part happened just under the wire, and only because I remembered to look at last year’s post! After doing the first part I was procrastinating reworking the landing page because I thought it would be a lot of work to redo all the images and make a grid of cards.

I was recently looking at Stephanie Eckles excellent resource SmolCSS for something else and noticed the Smol Composable Card component. It was great timing, and in combination with the Smol Responsive Grid as starting point I had a new Projects landing page in a couple of days.

I never really liked the original page and kept putting off making this change. I’m happy with the outcome and glad to knock it off the list.

This was pretty minimal. I removed the “Featured Projects” section and replaced it with “From the Studio” section. I also updated the cards used for the studio projects.

Does adding it to the Projects section count? I originally thought I’d come up with a clever way to include some Junk Drawer content here, but the ah-ha moment hasn’t hit me yet. Or maybe it won’t, which is fine.

At this time last year I was working on a client project for an attorney and thought that I would actively pursue more freelance work on completion of the project. File under “things don’t always work out the way you envisioned”.

The project was paused as the attorney was considering joining an established firm. This happened to coincide with an uptick in activity at the day job that left me too fried at the end of the day to do any work.

The attorney eventually joined an existing firm and my workload continued to be mentally taxing. Making a real go at freelancing wasn’t meant to be at the moment. We’ll see if that changes in the future. I would love to work on small projects and create well built, well thought out accessible sites that perform well. The web needs much more of that, and honestly when people hire someone to make them a site, that’s what they should get.

I did a fair amount of writing in the past year, but differently than in previous years. Usually I write one or two bigger posts that I categorize as Articles. These are usually a deep dive “how-to” posts on something I’ve recently learned. For example last year I wrote a two part series on using WordPress as a headless content management system for Eleventy.

Over the past year I wrote no articles, but I wrote a series, which was a first. Hot HTML Summer was a 22 post series where I wrote a post for each lesson of the fabulous web.dev Learn HTML course by Estelle Weyl. I highly recommend taking the course, even if you’ve been writing HTML for a long time. You’re guaranteed to learn at least a thing of two that you didn’t already know, I sure did.

I also contributed my first article article elsewhere. For the 2022 HTMHell Advent calendar I contributed Reading the Meter. I didn’t submit an idea for this year’s calendar, but recommend it as a welcoming place to contribute! I also wrote a bit about the process and article here at this site.

As always, the tinkering will continue! I got a last minute round of tinkering in that knocked the remaining things off of my Tinkering To Do list. I’m sure I’ll come up with additional things, all I have to do is check my RSS reader or timeline to find something interesting to try out. Or something that I could be doing better.

Speaking of which, when I was working on the Projects section landing page I found myself wanting to rearchitect the current CSS. There have been plenty of CSS changes in the last three years, and my skill has improved along the way. I think this year’s big ticket item will be a CSS overhaul. I started a note titled “Uh oh” as I was working on the Projects page to track all the little observations and ideas, it will be nice to give it a good clean up.

Another thing I’d like to do is give the homepage a slight refresh. I don’t have any ideas at the moment, we’ll see if I come up with anything. As an aside, that’s what we call hedging.

Here’s to another year!

As noted in the changelog, around here I cleaned up my <section> usage, added a <nav> element to the footer links and added rel="next" and rel="previous" to some pagination links I missed the first time around.

Over at the Junk Drawer I’ve made two major changes. One to address the incorrect usage of <cite> within the WordPress quote block, and adding the lang attribute to text where I’ve used different languages.

While learning about <blockquote> and <cite> in the Text Basics module of Learn HTML I discovered that the WordPress quote block incorrectly applies the <cite> element if you use the “citation” feature.

As a refresher, <cite> belongs outside of the <blockquote> element. Since I’ve used this pretty extensively at the Junk Drawer I had to figure out to remove <cite> but still keep my design intact. It wasn’t that hard, but making the updates was a bit of a pain.

I was using the <cite> element to set the style, so moved the styles to a new class selector. Then the fun began. I had to add a new paragraph in the quote, edit it as HTML to add my class selector to the paragraph tag, then convert it to an HTML block. Sounds easy, right?

It would’ve been much easier if every time I tried to preview the HTML or just click out of the HTML editing area I didn’t get the above error. If this happens to you, don’t click the “Attempt Block Recovery” button, it doesn’t recover the block and you’re back to step one. Click on the tiny, easy to miss, options menu to the right of the button and select “convert to HTML”. Now it’s an HTML block.

Going forward it will be a lot easier as I made a reusable block that will place an HTML block within the content that includes a paragraph tag and my class selector. There’s more information about creating and using reusable blocks in the WordPress documentation.

After all that, the kicker is that even if using <cite> within <blockquote> was the correct approach, I was still using it incorrectly! From the course…

The content of the <cite> is the work, not the author.

Good thing all those references to the authors are no longer cite elements or attributes!

In the Document Structure module of the course I made note of wanting to add the language attribute at the Junk Drawer,. I mention non-US TV shows by their original title with some frequency, many times this is in a different language.

I thought I was going to have to go the “convert to HTML” route again, but found a really useful plugin called Lang Attribute for the Block Editor. This makes it easy to select text and apply the ISO language code.

The only small issue I have is that is also applies class selector and dir, the direction attribute. The upside is that you can also change the text direction to match the language, but the selection is defaulted so it’s always applied.

I’ll probably add an issue and suggest that it would be a nice addition if the class selector and direction attribute were optional, but having the redundant attributes is a small price to pay for such a useful plugin!

You can see the results in action in this post at the Junk Drawer, which may also be of interest if you like crime drama series. The first show in the list is a Swedish show (lang="sv").

I don’t know if there’s a definitively inclusive list of codes, but here are a couple of lists that I found useful. The Wikipedia list includes more languages but the Gist includes regions.

• Wikipedia, use the two letter 639-1 codes
• Gist, not a full list but includes regions

I still have one outstanding item on my Hot HTML Summer to list, and that’s to try markdown-it-table-captions. I’ll give that a shot on my starter project and if it works out well I’ll integrate it here.

I’m hoping to come up with a submissions for this year’s HTMHell Advent Calendar. The deadline is a fast approaching August 24, you should definitely consider submitting an idea!

I have two whopper older WordPress sites that I’m in the process of archiving. That includes moving a slimmed down version of each to Eleventy. I’ve already spent a fair amount of time working out the process and overall design, but I’ll probably be spending most of my time on that for the foreseeable future.

Other than that I’ll be doing my usual fiddling here and at the Junk Drawer. I’d like to clean up the Projects section of this site before the end of the year. Just saying that out loud to up the chances of it happening.

All good things must come to an end as the saying goes. But much like energy or matter, our Hot HTML Summer will not end, it will change from one form to another.

I’ve completed the web.dev Learn HTML course, and indeed it’s been a fun Hot HTML Summer. The fun isn’t ending there, now I can take all the things I learned and apply them. In fact, I’ve now got a boat load of things of double check, update and improve from all the things I learned along the way.

I came up a big list of things to check, things to learn more about and things to try to find in the wild.

In no particular order…

• Make sure I’m using <section> correctly, I can think of a few places where I know I’m not.
• See if I can use microdata to improve reader view.
• Check for instances of using different languages within the body of text and apply the language attribute.
• Add <nav> to the footer links on this site.
• Check for calling SVGs with image element, if so add role="img" (pretty sure I haven’t done this anywhere but will check anyway).
• Test markdown-it-table-captions to see if it’s a good way to add captions to tables in my Eleventy sites.
• Add rel="next" and rel="prev" attributes to pagination links (already added on this site).
• Fix all the incorrect instances of <cite> that the WordPress quote block incorrectly applies to <blockquote> at the Junk Drawer.
• Find a reason to use <data>.

• Element interfaces
• Aria roles

Scavenger hunt!

• rel="author"
• rel="bookmark"
• Form controls with more than one label (even Mr. HTMHell didn’t know this one!)

There’s a lot to like about this course. It’s broken down into easy to digest pieces. There are a lot of good tips and best practices. Modules reinforce things learned in previous modules without explicitly saying it, and there’s plenty of backstory and tea spilling.

The web would be a much better place if fullstack, framework-focused developers used Learn HTML to better understand the basics, but we all can learn something from the course. Course creator Estelle Weyl noted that the course was targeted towards beginners, but created for all skill levels, including “super-advanced people who don’t realize that they don’t know things”. Indeed.

In his recent CSS Day talk, That’s not how I wrote CSS 3 years ago, Manuel Matuzović mentioned that when he wrote 100 Days or More Less Modern CSS one of the biggest things he learned was the basics. He goes on to list a few examples where the thought he understood how something worked, but was wrong. I had the exact same experience here. There were things I thought I knew but didn’t, things I didn’t know at all, and things where I didn’t know the proper name.

Most of all, it was fun to learn from a place of comfort, building on something I already know. With only a few gaps, I’ve been writing HTML since 1996. I’m not employed as a developer, but I write production ready HTML and CSS at my job (delivering my designs in code to be integrated into whatever stack). Before this course I was confident in my HTML skills, and I learned a LOT.

I’ve noticed plenty of HTML content so far this summer. Here’s what I’ve seen so far.

• 4 More HTML Concepts You Didn’t Know
• Fieldsets, Legends and Screen Readers again
• Form and search landmarks
• Learn HTML by Building a Cat Photo App (YouTube)
• Implementing Tic Tac Toe with 170mb of HTML - no JS or CSS
• O dialog focus, where art thou?
• The article element and screen readers
• The case against self-closing tags in HTML
• The details element and in-page search
• You can also help design the inaugural State of HTML survey

Thanks for all the boosting, favoriting, sharing, general words of encouragement, and camaraderie along the way. I decided to do this as a series of posts to help me absorb the lessons and refer back to my notes in the future. It’s nice to know there were parts or posts that resonated with people!

If I had to sum up the course, it would be a slightly updated version of something I mentioned in the Navigation module post, “come for all the things you don’t know about HTML, stay for the tips on how use it more effectively”. In case it’s not yet clear, I highly recommend the course.

I’ll make an occasional post with updates on my punch list. Until then, enjoy the rest of your Hot HTML Summer.

This post covers the Dialog module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

There’s no anchor for this section, it’s the first part of the module.

Dialogs can be either modal (only the content in the dialog can be interacted with) or non-modal (it’s still possible to interact with content outside of the dialog).

Learning new things right out of the gate.

Go to this section at Learn HTML.

Once opened, there are three ways to close the dialog: the escape key, submitting a form with a button that has the formmethod="dialog" set (or if the form itself has method="dialog" set), and the HTMLDialogElement.close() method.

This is in reference to an example CodePen. Good to know the different ways to handle closing the modal.

When the dialog is opened, focus moves into the dialog. Focus is set on the first element in the sequential keyboard navigation order within that dialog.

I learned about this a few lessions ago in the focus module. Manuel Matuzović also has a recent post testing various content combinations across browsers that provides more detail.

Go to this section at Learn HTML.

The HTMLDialogElement.show() similarly opens a dialog, but without adding a backdrop or causing anything to become inert. The escape key does not close non-modal dialogs. Because of this, it is even more important to ensure you include a method of closing the non-modal dialog. In doing so, if the closer is outside the dialog, realize the focus will go to the element that opened the dialog, which may not be the best user experience.

Woof, yeah. The heading in the non-modal dialog in this example is appropriately titled Bad User Experience.

Go to this section at Learn HTML.

You don’t need the HTMLDialogElement.close() method to close a dialog. You don’t need JavaScript at all. To close the <dialog> without JavaScript, include a form with a dialog method by either setting method="dialog" on the <form> or formmethod="dialog" on the button.

When I first saw that <dialog> was available I ran to CodePen to try it out. I can’t remember where I read it so I don’t know where the code example came from, but it used Javascript to both open and close the dialog via onclick on the button element (window.dialog.showModal() and window.dialog.close()). Upon reading the above passage I ran back to CodePen and created a new example setting formmethod="dialog" on the buttons (one “X” close in the upper right and one text labeled close below the text).

Out of habit I added :focus-visible to the button elements instead of :focus, this may not visually indicate focus on the first interactive element in your dialog even though it will still receive focus. The same goes for explicitly setting autofocus, the focus will be set but may not visually indicated.

As Hidde de Vries explains, when using :focus-visible the browser decides if it’s best to indicate focus based on a number of different heuristics. As an example, in Chrome if the dialog was opened via keyboard the focus was indicated. If the dialog was opened via mouse the focus was not indicated. This was a simplistic test, but best to use good old :focus for this one to ensure proper indication.

Also of note, you currently still need JavaScript to open the dialog via the showModal() method. Although there has been active discussion about the adding the ability to open without JavaScript at the repository for the HTML spec that started in 2018.

This post covers the Details and summary module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

There’s no anchor for this section, it’s the first part of the module.

jQuery has included an accordion UI pattern since at least 2009. The original JavaScript-free accordion solution included making each FAQ question a <label> followed by the checkmark it labeled, and then displaying <div> answer when the checkmark was checked.

I didn’t know this bit of history.

Like all semantic content, you can progressively enhance the default features and appearance.

Heart emoji.

Go to this section at Learn HTML.

The hidden content in the collapsed state is searchable in some browsers but not others, even though the collapsed content is not part of the DOM. If you search in Edge or Chrome, the details containing a search term will expand to display the occurrence. This behavior is not replicated in Firefox or Safari.

I knew this one because Manuel Matuzović posted about this earlier in the Hot HTML Summer. He also has a post on inconsistencies for screen reader users that’s worth a look if you are planning on using <details>.

Go to this section at Learn HTML.

If you don’t include a <summary>, the browser will create one for you: with a marker and the word “details”. This summary is part of a shadow root, and therefore will not have author CSS summary styles applied. Unfortunately, Safari does not include the details in the keyboard focus order.

Didn’t know this, good to keep in mind. And…

If you do include a <summary>, but it is not the first element in the <details>, the browser still displays the summary as it should. It will also not fail if you include a link, label, or other interactive element within the summary, but browsers handle interactive content within interactive content differently. For example, if you include a link in a summary, some browsers will add both the summary and the link to the default tabbing order, but other browsers will not focus on the link by default. If you click on a <label> nested in a <summary>, some browsers will give focus to the associated form control; other browsers will give focus to the form control and toggle the <details> open or closed.

I couldn’t find any examples of screen reader test results for interactive elements within the summary, but if you planned on taking this approach it would be best to test it.

This post covers the Other inline text elements module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

There’s no anchor for this section, it’s the first part of the module.

Contrary to popular belief, HTML was originally intended for sharing documents, and not cat videos.

I’m going to pretend I didn’t read that.

Go to this section at Learn HTML.

The <data> element links a given piece of content with a machine-readable translation; the element’s value attribute provides the machine-readable translation of the content of the element.

Huh, I don’t think knew that. And now I can’t wait to think of a reason to use it.

If the <data> content is time- or date-related, the <time> element, which represents a specific period in time must be used instead.

This one I know! And love, and use, I even wrote it a love letter.

Go to this section at Learn HTML.

When including abbreviations or acronyms, always provide the full expanded version of the term in plain text on first use, as you introduce the shortened representation of the term between opening and closing <abbr> tags; unless the term is well-known to the reader, such as “HTML” and “CSS” in this series. Only on this first occurrence, when the abbreviation or acronym is being defined, is <abbr> needed. The title attribute is not necessary nor helpful.

Good guidance on a best practice.

When defining a term that is not an abbreviation or acronym, use the definition <dfn> element to identify the term being defined within its surrounding content.

I thought I knew this one but was wrong. It’s basically tagging the term being defined within the definition. Here’s an example of a word I learned recently, definition courtesy of Lit Charts.

<p>
<dfn>Synecdoche<dfn> is a figure of speech in which, most often, a part of something is used to refer to its whole. For example, "The captain commands one hundred sails" is a synecdoche that uses "sails" to refer to ships—ships being the thing of which a sail is a part.
</p>

Some character sets include small annotations placed above or to the right of characters to provide information on pronunciation. The <ruby> element is the container to use to contain these annotations that make written languages like Korean, Chinese and Japanese easier to read. Ruby can also be used for Hebrew, Arabic, and Vietnamese.

Ha, I thought this was related to Ruby on Rails, wrong again. Hopping over to MDN reveals the origin of the term…

The term ruby originated as a unit of measurement used by typesetters, representing the smallest size that text can be printed on newsprint while remaining legible.

Go to section at Learn HTML.

Use the <em> element to emphasize or stress a span of content. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis. This element has semantic meaning and can be used to inform auditory user agents like screen readers, Alexa, and Siri, to provide emphasis.

I did not know about the levels of nesting.

Use the <mark> element to identify or highlight text that is somehow relevant, like highlighting (or “marking”) the occurrence of search terms in search results. This enables marked content to be quickly identified without adding emphasis or importance.

I like to use this one, and you can easily change the blaring yellow user agent styles with good old CSS.

There are three elements that were temporarily deprecated, but have been added back into HTML. They should be used sparingly, if at all, as they provide little to no semantic value and CSS should always be used for styling over HTML elements.

Use with caution! The elements are <i>, <u>, and <b>. And specifically about <b>…

The <b> element can be used to draw attention to text that is not otherwise important. This element doesn’t convey any special semantic information and should only be used when none of the other elements in this section fit the purpose. No example is provided as I couldn’t come up with a valid use case; that’s how “last resort” this element is.

I imagine that ending with a finger snap.

This post covers the Focus module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

Go to this section at Learn HTML.

The tabindex attribute takes as its value an integer. A negative value makes an element focusable but not tabbable. A tabindex value of 0 makes the element focusable and tabbable, adding the element on which it is applied to the sequential focus navigation order in source code order. A value of 1 or greater makes the element focusable and tabbable, but adds it to a prioritized tabbing sequence, and, as we saw above, should be avoided.

I know all of this! But unfortunately I encounter it being used incorrectly with regularity. At the time of writing this post I was brought into a project to help with UX, which means I immediately starting using only my keyboard to see how it behaved.

For reasons I can’t even guess, the inert table headers were set to tabindex="0", putting them in tab order for no good reason. This added about seven or so useless tabs before getting to an interactive element. Eric Bailey also noted all the ways this usage can negatively impact screen reader users at The a11y Project.

Go to this section at Learn HTML.

The autofocus attribute doesn’t alter the document’s sequential focus navigation order. The elements in the sequence coming before the autofocused element are simply skipped. For these reasons, it is not advised to include the autofocus attribute.

I’ll admit that I have used autofocus on sign in screens for internal projects where the username field is the first interactive element. I don’t feel good about it though. Especially considering these five examples of how it degrades user experience by Adam Silver.

When a dialog is opened, the browser will automatically focus on the first focusable interactive element within the <dialog>, meaning autofocus to an element is not necessary.

I didn’t know this! The <dialog> module is three modules away. Spoiler alert?

Go to this section at Learn HTML.

The boolean disabled attribute makes the form controls on which it is applied and their descendants, if any, unfocusable. Disabled form controls can’t be focused, don’t get click events, and are not submitted upon form submission.

Sorry, more UX chat. Instead of spelling out all the issues with disabling form buttons prior to submission, I’ll send you to my two go-articles when I need source material to make an impassioned plea to a team.

Adam Silver has a pithy summary of six potential problems and what to do instead. Vitaly Friedman has a deeper dive on eight specific design patterns where using a disabled button can have disastrous results at Smashing Magazine. I highly recommend both posts. And if you HAVE to used disabled buttons, the post at Smashing Magazine has a section of suggestions from Sandrina Pereira of how to make disabled buttons more inclusive.

This post covers the HTML APIs module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

Go to this section at Learn HTML.

The browser provides numerous APIs providing natively supported methods, events, and property querying and updating. Element nodes contain information about all the attributes set on the element. You can use HTML interfaces to access information about an element’s attributes. For example, we can use HTMLImageElement.alt get the alt attributes of all the images.

If I ever get around to properly learning JavaScript all of this going to be really helpful.

Go to this section at Learn HTML.

The base interface for all elements is aptly named Element. The HTMLElement inherits from Element and all HTML element-specific interfaces inherit from it. Some element-specific interfaces are implemented by multiple, similar elements.

There’s a list of all the interfaces with links to their respective pages at MDN. I’m adding “Familiarize myself with all the available element interfaces” to my Hot HTML Summer to-do list.

Go to this section at Learn HTML.

Every browser tab contains its own Window object. The Window interface can query the contents of the tab as well as the overall window and device.

What I lack in JavaScript skills I make up for in search engine skills. I’ve been working on archiving an old project and wanted a way to provide a link to the Internet Archive version of a page when there’s a 404.

I landed on using window.location.href to append the page url to the known Internet Archive link that has the entire site to create a “view this page at the Internet Archive” link. Once I validated that it worked I was pretty pleased with myself, and almost felt like I knew JavaScript.

This post covers the Template, slot, and shadow module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

There’s no anchor for this section, it’s the first part of the module.

The Web Component standard is made up of three parts—HTML templates, Custom Elements, and the Shadow DOM. Combined, they enable building customized, self-contained (encapsulated), reusable elements that can be seamlessly integrated into existing applications, like all the other HTML elements we’ve already covered.

Building web components is something I’ve been wanting to learn for some time. I’ve fiddled around here and there, but don’t have a solid understanding. I don’t think I’ll learn everything in this module, but I’m excited to get a proper introduction and better understanding.

Go to this section at Learn HTML.

The <template> element is used to declare fragments of HTML to be cloned and inserted into the DOM with JavaScript. The contents of the element are not rendered by default. Rather, they are instantiated using JavaScript.

This section steps through exactly what this means with code examples and CodePens. The description above is clear, but the further detail is worth looking through to illustrate the concept.

I did the example star rating component along with the module, and found it to be a good approach for grasping the concepts. Since the entire module was something I didn’t know much about I’ll summarize what I learned rather than listing each section with along with relevant quotes.

In no particular order…

• I finally have a solid understanding of the <template> element, the <slot> element (and attribute!), custom elements, and shadow DOM.
• Finally wrapped my head around how <slot> works. Before I learned Eleventy I played around with a little SSG called Sergey that used slots. I kept stumbling on when slot was an element (in the template) and when to use the slot attribute (in the custom element).
• What the shadow DOM is and how it’s created. What’s included in it and what’s not (e.g., slotted content within the custom element is not in the shadow-root and not encapsulated).

I tested out my new knowledge by reading a couple of posts I had saved in open tabs. Happy to report that I had a much better understanding. In some of that reading I discovered that CSS custom properties can be used in the shadow DOM. And in further investigation that constructible stylesheets can be used to create reusable styles for the shadow DOM. The module also touched on using the part attribute and ::part() pseudo-element to style elements within the shadow-tree from CSS that is not encapsulated (e.g., your global stylesheet).

No doubt there’s a lot to learn, but now that I have a solid foundation it doesn’t feel unsurmountable. In addition to doing the exercise in the module I created a small little card component at CodePen as a test. It was nice to play around with a couple of different things and drill what I had learned into my head. Especially the slot element and attribute usage.

This post covers the Audio and Video module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

Go to this section at Learn HTML.

The <video> and <audio> elements can be used to embed media players directly with the src attribute or can be used as the container element for a series of <source> elements, each providing a src file suggestion. While <video> can be used to embed an audio file, the <audio> element is preferable for embedding sound files.

My experience with audio and video is limited to copy and pasting code from YouTube, Vimeo or the like. This entire module is something I know nothing about, at least in a hands-on way.

Fallback content is included between the opening and closing tags. If the user agent doesn’t support <video> (or <audio> this content is shown.

Always good to know the fallbacks.

If no src attribute is included on the opening <video> or <audio> tags, include one or more <source> elements, each with a src attribute to a media file.

There’s a code example at the site that illustrates this, it’s similar to using <picture>.

Within the type attribute, you can include a codecs parameter, which specifies exactly how the resource is encoded. Codecs give you a way of including media optimizations that are not yet supported in all browsers. The codec is separated from the media type with a semicolon. For example, the codec can be written using intuitive syntax, such as <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis"> which indicates that the WebM files contain VP8 video and vorbis audio.

I’m so going to know what I’m doing if I ever have to do this.

Make sure to define the aspect ratio of your video, because when the video loads, a size difference between the poster and the video will cause a reflow and repaint.

As always, good tip.

Omitting controls creates a bad user experience, especially if the boolean autoplay attribute is included.

This should be seared into the brains of anyone adding audio or video files to a site.

Go to section at Learn HTML.

Between the opening and required closing tags of both audio and video, include one or more <track> elements to specify timed text tracks. […] There are five enumerated values for the track kind attribute: subtitles, captions, descriptions, chapters, and other metadata.

As previously mentioned, YouTube and Vimeo are my only real hands-on experience with integrating audio and video. But as a consumer, chapters is an incredibly useful way to navigate a video.

The value kind="caption" should be reserved for transcription and translations that include sound effects and other relevant audio information. This isn’t just for deaf viewers. Maybe a user can’t find their headphones so they turned on the captions. Or maybe they didn’t quite catch the last few talking points from a favorite podcast, so they want to read the transcript to confirm their understanding. Having alternative ways to access audio and video content is both important and convenient.

If you get tired of my writing “another good tip”, let me know. Otherwise, another good tip.

The kind="description" is for text descriptions of the visual content in the video for users who can’t see the video, whether they are using a system without a screen such as Google Home or Alexa, or are blind.

I didn’t realize there was a distinction between caption, or what’s commonly referred to as captions, and description. Also, another important aspect of this point, and the previous one, is broadening our understanding of how things are used and by whom.

Program note: Hot HTML Summer is taking a summer break next week. The next post will be on Monday July 24, happy Hot HTMLing!

This post covers the Images module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

There’s no anchor for this section, it’s the first part of the module.

Decorative images, such as background gradients on buttons or background images on sections of content or the full page, are presentational and should be applied with CSS. When an image adds context to a document, it is content and should be embedded with HTML.

This is a useful guideline. In the Navigation module there was also a good tip for using CSS generated separators in page breadcrumbs.

If the image is of SVG file type, also include role="img", which is necessary due to VoiceOver bugs.

I didn’t know this! I haven’t included SVG images as foreground images using the <img> tag at this site, but I’ll be checking my other sites and updating if necessary.

Go to this section at Learn HTML.

The srcset attribute enables suggesting multiple image files, with the browser selecting which image to request based on multiple media queries including viewport size and screen resolution.

No matter how many tutorials or step-by-step how-to articles I read on this approach I’m not confident in my ability to create the correct images sizes, so I feel like I never quite get the full benefit of this approach. Just like JavaScript, some day I will figure this out!

Go to this section at Learn HTML.

The <source> attributes include srcset, sizes, media, width, and height. The srcset attribute is common to img, source, and link, but is generally implemented slightly differently on source as media queries can be listed in the <srcset>'s media attribute instead. <source> also supports image formats defined in the type attribute.

This is my go-to approach. Instead going the head-scratcher math route of providing images of different sizes, I provide highly optimized images in JPG, WebP and AVIF formats and let the user’s browser sort out which one is best. I’ve used Cloudinary occasionally but prefer keeping my images within my project. If you’re interested learning about using an image CDN I’d recommend this conversation with Ben Meyers and Alistair Shepherd as a good starting point.

Go to this section at Learn HTML.

The loading attribute tells the JS-enabled browser how to load the image. The default eager value means the image is loaded immediately as the HTML is parsed, even if the image is outside the visible viewport.

I had no idea the default value was called that, and will probably chuckle every time I remember it.

This post covers the Forms module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

Go to this section at Learn HTML.

The attributes of the <form> element set the HTTP method by which the form is submitted and the URL that processes the form submission. Yes, forms can be submitted, processed, and a new page can be loaded without any JavaScript. The <form> element is that powerful.

My work with forms has been focused on styling, layout, and accessibility. Handing off my design in code means that the fullstack developers don’t mess up the layout or not associate the labels correctly only have to focus on integrating the form, including submission and validations. tl;dr I will be learning a lot in this module of the course!

The data sent is made up of name/value pairs of the form’s various form controls. By default, this includes all the form controls nested within the form that have a name. However, with the form attribute, it is possible to include form controls outside the <form> and to omit form controls nested within the <form>. Supported on form controls and <fieldset>, the form attribute takes as its value the id of the form the control it is associated with, not necessarily the form it is nested in. This means form controls don’t need to be physically nested in a <form>.

The name attribute I knew, but not the form attribute. Very helpful to know that a form element could be anywhere in the document and be included in the form submission.

Form buttons can have more than the attributes described at the start of this section. If the button includes a formaction, formenctype, formmethod, formnovalidate, or formtarget attribute, the values set on the button activating the form submission take precedence over the action, enctype, method, and target set on the <form>. Constraint validation occurs prior to form submission, but only if there is neither a formnovalidate on the activated submit button nor a novalidate on the <form>.

I knew none of this and have not heard of any of those attributes. If I ever strike out on my own and need to actually submit forms I will head directly to the Learn Forms course.

Go to this section of Learn HTML.

The value of a <textarea> is its inner text. The value of a <select> is the selected <option>'s value or, if the <option> doesn’t include a value attribute, the value is the selected option’s inner text.

Good to know. There’s an example illustrating the <select> behavior.

There are 22 input types, so we can’t cover them all. Just note that including a value is optional, and often a bad idea, when you want the user to enter information. For <input> elements where the user can’t edit the value, you should always include a value, including for input elements with a type of hidden, radio, checkbox, submit, button, and reset.

More useful information.

Go to this section at Learn HTML.

If the user is required to pick a radio control from a group of radio buttons, add the required attribute to at least one of the controls. Including required on a radio button in a group makes a selection required for form submission, but it doesn’t have to be the radio with the attribute that gets selected to be valid.

Another note for my future form submitting self.

Go to this section at Learn HTML.

If you don’t include a value on a checkbox, the value of the selected checkboxes will default to on, which probably isn’t helpful.

Agree.

Go to this section of Learn HTML.

Associating labels with form controls has several benefits. Labels make form controls accessible to screen reader users by providing the control with an accessible name. Labels are also “hit areas”; they make the site more usable for users with dexterity issues by increasing the area.

Happy to report I didn’t find anything I didn’t already know in this section. I wanted to highlight it because incorrectly associating labels to form controls is by far the most frequent mistake I’ve seen in teams I’ve worked with, and it has a big impact on accessibility.

Go to this section at Learn HTML.

Using the maxlength attribute can lead to a poor user experience. It’s generally a better experience to allow the user to enter more than the allowed character length providing a counter, optionally in the form of an <output> element, which is not submitted with the form, enabling them to edit down the text until the output shows the maximum allowed length has not been exceeded.

Another good usability tip. Similarly in regard to minlength in the Other considerations section…

…it is important to consider that not everyone is like you. Someone may have a single letter as a last name (or no last name at all)

In some cases you might be constrained by a minimum character requirement in a database that’s not immediately in your control, but if that’s not a constraint it’s important to keep in mind how you could impact users by setting arbitrary minimums or constraining characters with pattern. If you’re willing to traverse Twitter, the Your Name Is Invalid! account is worth a look as an example of the many ways arbitrary constraint validations can make forms unusable.

I could easily share many more useful insights from the Built-in validation, Example, and Other considerations sections. But you should just go read it for yourself.

This post covers the Tables module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

Go to this section at Learn HTML.

If the table maintains a selection state, has two-dimensional navigation, or allows the user to rearrange cell order, set role="grid". If the rows of the grid can be expanded and collapsed, use role="treegrid" instead.

Off to a good start with something I didn’t know!

Rows contain table header (<th>) and table data (<td>) cells which, in turn, contain all the data. In the DOM, before any of this, you may find two additional features: the table caption (<caption>) and column groups (<colgroup>). Depending on whether or not the <colgroup> has a span attribute, it may contain nested table column (<col>) elements.

I always wondered about <colgroup>, there’s more information later in the lesson and I can’t wait to learn about it.

Go to this section at Learn HTML.

The <caption> element should be the first element nested in the <table> element. Including it lets all users know the purpose of the table immediately without having to read the surrounding text. Alternatively, you can use aria-label or aria-labelledby on the <table> to provide an accessible name as the caption. The <caption> element has no element-specific attributes.

Good tip that using aria-label or aria-labeledby instead of <caption> is an option. More good tips on the various ways to handle captions and descriptions in general…

Preferably, data tables should have clear headers and a caption, and be simple enough to be almost self-explanatory. Bear in mind that not all users have the same cognitive abilities. When the table is “making a point”, or otherwise needs interpretation, provide a brief summary of the main point or function of the table. Where that summary is placed depends on its length and complexity. If brief, use it as the inner text of the caption. If longer, summarize it in the caption, and provide the summary in the paragraph preceding the table, associating the two with the aria-describedby attribute. Putting the table in a <figure> and putting the summary in the <figcaption> is another option.

Note to my fellow Eleventy users, markdown-it, which includes the ability to create tables in markdown, doesn’t provide captions by default, or if it does, I couldn’t figure it out. I found the markdown-it-table-caption plugin that adds the ability to use captions and will try it out. If it works I’m adding this to my Hot HTML Summer to-do list.

Go to this section at Learn HTML.

There were attributes to add padding between cells and within cells, for borders, and for text alignment. Cellpadding and cellspacing, which define the space between the content of a cell and its border, and between the borders of adjacent cells, should be set with the CSS border-collapse and border-spacing properties, respectively.

Forgot about those attributes! Perhaps more like burned them from my layout table memory, never to be spoken of again.

Border-spacing will have no effect if border-collapse: collapse is set. If border-collapse: separate; is set, it’s possible to hide empty cells completely with empty-cells: hide;.

I didn’t know about empty-cells: hide;, could be useful.

The <th> cell has semantic meaning, with implicit ARIA roles of columnheader or rowheader. It defines the cell as the header for the column or row of table cells, depending on the value of the enumerated scope attribute. The browser will default to col or row if scope is not explicitly set.

I always forget that rows can have headers too. There’s an example CodePen in the section that has a nice illustration of the approach of using both column and row headers.

Go to this section at Learn HTML.

In cases where a cell is defined by multiple header cells with associations that cannot be set by the scope attributes alone, include the headers attribute with a space-separated list of the associated headers. As this example is a more complex table, we explicitly define the scope of the headers with the scope attribute. To be even clearer, we added the headers attribute to each cell. […] In such complex tables, explicitly associate each data cell with each corresponding header cell with a list of space-separated id values of all the associated headers as the value of the headers attribute.

There are aspects of tables that I’ve heard of and don’t know much about, but I’ve never even heard of the headers attribute for tables. The example CodePen in this section, and the additional detail, are definitely worth checking out.

Go to this section at Learn HTML.

There are two relatively obscure elements that were briefly mentioned: the column group, <colgroup>, element and its only descendant, the empty <col> column element. The <colgroup> element is used to define groups of columns, or <col> elements, within a table.

Speaking of things I’ve heard of, but don’t know too much about.

Neither <colgroup> nor <col> has semantic meaning in terms of helping to make the table more accessible, but they do allow for limited column styling, including setting a width for the column with CSS.

Ah ha! There’s an example of how and where to add <colgroup> within your table code, but no CodePen illustrating its usage. So I created one to try it out, and in the process I discovered the limited part of limited column styling.

My first attempt included background and color properties for the column, but only background worked. The MDN colgroup page and the WHATWG spec didn’t have any information, but the Table Basics page at MDN did…

Note: Styling columns like this is limited to a few properties: border, background, width, and visibility. To set other properties you’ll have to either style every <td> or <th> in the column, or use a complex selector such as :nth-child.

The MDN Table Basics page also links to the W3 CSS spec, which has the information about the limited properties, and additional information about how the visibility property has limited values…

If the ‘visibility’ of a column is set to ‘collapse’, none of the cells in the column are rendered, and cells that span into other columns are clipped. In addition, the width of the table is diminished by the width the column would have taken up. Other values for ‘visibility’ have no effect.

Only visibility: collapse; works for colgroup. According to the MDN CSS > visibility page, the bonus of using collapse is that it removes the columns (or rows, or cells, depending on how you use it) without forcing the recalculation of the widths or heights for the entire table.

For <table> rows, columns, column groups, and row groups, the row(s) or column(s) are hidden and the space they would have occupied is removed (as if display: none were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This value allows for the fast removal of a row or column from a table without forcing the recalculation of widths and heights for the entire table.

There’s additional information in the dynamic row and column effects in the CSS spec.

But there you have it, the colgroup is a mystery no more. One thing to keep in mind about accessibility, if you do use <colgroup> be sure to set a background color that has enough contrast with the existing text color as you aren’t able to change the text color (via the color property) with <colgroup>.

Go to section at Learn HTML.

If you want to lay out content in many columns, use multi-column layout.

A what? column-count? Somehow I missed this option. I threw together a quick CodePen to test it out, and found this helpful article from Rachel Andrew. I’m only learning about HTML right now, I’ll have to come back to this.

This post covers the Navigation module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

Go to this section at Learn HTML.

The link text reads “skip to main.” This is the link’s accessible name. This is a technical site, and users probably know what “main” means. Like all link text, the accessible name should clearly indicate where the link takes the user.

This is a nice usability tip. Even though readers of this site are likely to know what “Skip to main” means, I use “Skip to main content”. The only mention of wording best practices for skip links that I could find was at WebAIM. The suggestions are all variations on either “Skip navigation” or “Skip to main content” with the following explanation:

Any of these may be sufficient so long as the purpose of the link is clearly described. In general, we prefer “Skip to main content” as it explains where the user is navigating to versus what they are navigating past.

I wonder if using “Skip to article” on content pages and “Skip to main content” other types of pages, such as landing pages or a homepage, would be a nice contextual improvement or confusing? If the goal of link text is to be as specific as possible, using a mixed approach could be an improvement. If anyone has done user testing I’d love to know!

Go to this section at Learn HTML.

When providing an accessible name on an element, don’t include the name of the element. Screen readers provide that information to the user. For example, when using the <nav> element, don’t include “navigation”; that information is included when using semantic elements.

I knew this one too, but wanted to highlight it. It’s hard to pull quotes out of this section because they’re specifically related to the examples. It’s worth reading the section to see the examples in context, but to illustrate the above passage the primary navigation of this site uses:

<nav class="site-nav" aria-label="Primary">

Since the screen reader will announce that it’s navigation based on the element, I only needed to add “Primary” for the additional context. This will be announced along the lines of “Navigation, primary” (which may vary by screen reader). I don’t currently have my footer links in a <nav> element and am adding that to my Hot HTML Summer to-do list. I’ll use aria-label="Secondary" when I do add it.

Go to this section at Learn HTML.

Between links there are CSS-generated content separators. The separators come before each list item starting with the second <li>.

(example CSS at site)

Screen readers will not “see” them, which is best practice: separators between breadcrumb links should be hidden from screen readers. They must also have enough contrast against their background, the same as regular text.

Another nice tip! Come for all the things you don’t know about HTML, stay for the tips on how do it more effectively.

This post covers the Lists module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

Go to this section at Learn HTML.

The <ol> has three element-specific attributes: type, reversed, and start.

(code example at site)

The enumerated type attribute sets the numbering type. There are five valid values for type, the default being 1 for numbers, but you can also use a, A, i, or I, for lower and upper case letters or roman numerals.

I don’t use ordered lists very often, when I do use them it’s straightforward and doesn’t stray from the default behavior. Pretty sure I’ve used reversed and start, but not type.

Go to this section at Learn HTML.

There is only one element-specific <li> attribute: value, an integer. The value is only useful on an <li> when the <li> is nested within an ordered list and has no meaning for unordered lists or menus. It overrides the value of the <ol>'s start if there is a conflict.

More ordered list mysteries revealed.

The value is the number of the list item within an ordered list. With subsequent list items, continue the numbering from the value set, unless that item also has a value attribute set. The value doesn’t have to be in order; though if it isn’t in order, there should be a good reason.

There’s an example CodePen worth checking out that illustrates the behavior. I can’t think of an occasion where this would’ve been useful, but maybe there’s a use case out there where this would solve the problem. If so, make sure to consider if or how this could be confusing to assistive technology users and be sure to provide proper context.

Go to this section at Learn HTML.

A description list is a description list (<dl>) element containing a series of (zero or more) description terms (<dt>) and their description details (<dd>). The original names for these three elements were “definition list,” “definition term,” and “definition definition.” The name changed in the living standard.

I was not using my front-end skills in a meaningful way when HTML 5 was released, so I missed this name change. And, in my prior web dev life I don’t recall ever using the definition list, but I did know of it.

Fast forward to not too long ago when I found myself thinking that I had somehow remembered the element name incorrectly, like when you meet someone new and get their name wrong, and the wrong name sticks. Sometimes missing a crucial transition can result in scenarios like this!

Ben Meyers has a great in-depth article on the ~definition~ description list that’s full of useful examples.

This post covers the Links module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

Go to this section at Learn HTML.

Absolute URLs include a protocol, in this case https://, and a domain name. When the protocol is written simply as //, it is an implicit protocol and means “use the same protocol as is currently being used.”

I didn’t know that // could be used for the same protocol. I made a little CodePen to test it out. It feels a little too close to relative address to become a go-to for me, but I love learning all the little particulars of a language I though I knew pretty well.

The mailto link doesn’t need to include an email address, but it can, along with cc, bcc, subject, and body text to prepopulate the email. By default, an email client will be opened. You could prepopulate the subject and body of the email with no email address, to allow site visitors to invite their own friends.

I knew this one, but wanted to share it because it can be handy.

Go to this section at Learn HTML.

Every browsing context—basically, every browser tab—has a browsing context name. Links can open links in the current tab, a new unnamed tab, or a new or existing named tab. By default, the name is the empty string.

You guessed it, didn’t know this! It gets better…

A link with target="_blank" will be opened in a new tab with a null name, opening a new, unnamed tab with every link click. This can create many new tabs. Too many tabs. For example, if the user clicks on <a href="registration.html" target="_blank">Register Now</a> 15 times, the registration form will be opened in 15 separate tabs. This problem can be fixed by providing a tab context name. By including the targetattribute with a case-sensitive value—such as <a href="registration.html" target="reg">Register Now</a>—the first click on this link will open the registration form in a new reg tab. Clicking on this link 15 more times will reload the registration in the reg browsing context, without opening any additional tabs.

This is a nice way to reduce potential annoyance if you find yourself with a scenario that warrants opening a link in a new tab.

The prev and next values can be used on links pointing to the previous and next document in a series.

I’ve added these to my pagination links!

Similar to <link rel="alternative">, the meaning of <a rel="alternative"> depends on other attributes. RSS feed alternatives will also include type="application/rss+xml" or type="application/atom+xml, alternative formats will include the type attribute, and translations will include the hreflang attribute. If the content between the opening and closing tags is in a language other than the main document language, include the lang attribute. If the language of the hyperlinked document is in a different language, include the hreflang attribute.

There’s a good example that combines rel="alternative", lang, and hreflang. There’s also a list of list of user experience considerations and tips for links in general that’s worth reviewing.

This post covers the Text basics module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

Go to this section at Learn HTML.

There are six section heading elements, <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>, with <h1> being most important and <h6> the least. For many years, developers were told that headings were used by browsers to outline documents. That was originally a goal, but browsers haven’t implemented outlining features.

More tea spilling, and indeed still a point of consternation. Just today Manual Matuzović posted an example of “how to prove that there is no document outline algorithm even though user agent styles are telling a different story”. The resulting discussion illustrates the frustation.

However, screen reader users do use headings as an exploration strategy to learn about the content of the page, navigating through headings with the h key. So ensuring that heading levels are implemented as you would outline a document makes your content accessible and is still very much encouraged.

I knew this, but wanted to highlight this because it’s important!

Interestingly, browsers by default also decrement the <h1> font size based on how many <article>, <aside>, <nav>, or <section> elements it is nested in.

This I didn’t know! There’s an image example that’s worth checking out. I also did a quick CodePen example to see for myself.

In HTML, paragraphs are marked up with the <p> tag; the closing tag is optional but always advised.

Optional? I didn’t know that one either. I tried it, but I didn’t like it, although nothing horrible happened.

Go to this section at Learn HTML.

The information about the quote author, or citation, is not part of the quote and therefore not in the <blockquote>, but comes after the quote.

Whoops! I’m doing this wrong in at least a few places. One of those places is the Junk Drawer, which uses headless WordPress as a CMS with Eleventy. The default WordPress quote block offers the ability to add a citation below the quote. The citation is wrapped in <cite> and is part of the <blockquote>, which is not valid.

There’s no mention of the citation in the current WordPress quote block documentation. Perhaps I’ll add “Hot Learn How to Make WordPress Blocks Summer” to the list. In the meantime I have a plan on how to manually fix these that may or may not warrant a post.

If the review (in the example, view at CodePen) was pulled from a review website, book, or other work, the <cite> element could be used for the title of a source. The content of the <cite> can be the title of a book, the name of a website or TV show, or even the name of a computer program. The <cite> encapsulation can be used whether the source is being mentioned in passing or if the source is being quoted or referenced. The content of the <cite> is the work, not the author.

At MDN there’s a long list of examples of potential uses for <cite>.

To provide credit where credit is due when you can’t make the content visible, there is the cite attribute which takes as its value the URL of the source document or message for the information quoted. This attribute is valid on both <q> and <blockquote>. While it’s a URL, it is machine readable but not visible to the reader.

In other words, adding a link to the cite attribute does not make the element, for example a <blockquote>, a clickable link. I can confirm since I’ve used it! But I will be checking my sites to make sure I’m using <cite> or cite correctly with <blockquote> (or <quote>!). The good news it that both WordPress and Eleventy by way of markdown-it correctly apply paragraph tags within a <blockquote>.

This post covers the Attributes module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

Go to this section at Learn HTML.

If a boolean attribute is present, it is always true. Boolean attributes include autofocus, inert, checked, disabled, required, reversed, allowfullscreen, default, loop, autoplay, controls, muted, readonly, multiple, and selected. […] If the attribute value is false, omit the attribute. If the attribute is true, include the attribute but don’t provide a value.

I never thought of these as boolean, but of course that makes sense. There were two attributes in that list I didn’t recognize: default and multiple.

The default attribute belongs to the <track> element (which I’ve never used), according to MDN indicates “Indicates that the track should be enabled unless the user’s preferences indicate something different”.

The multiple attribute is valid for the email or file input type and <select>. according to MDN “if set, means the form control accepts one or more values”. OK, I should’ve known that one! Maybe I did and didn’t remember? Either way, noted!

Go to this section at Learn HTML.

Enumerated attributes are sometimes confused with boolean attributes. They are HTML attributes that have a limited set of predefined valid values.

Another name I didn’t know. I feel like I’m getting a low-key Basics of Computer Science lesson by learning all the proper names. I feel confident in my ability to sling the HTML, but knowing the proper names for things is an unexpected confidence booster. I think it’s good to find confidence boosters in general, but they can be especially helpful if you’re self taught.

Go to this section at Learn HTML.

Global attributes are attributes that can be set on any HTML element, including elements in the <head>. There are more than 30 global attributes.

I knew the name for this one! I mention this section because I visited the linked list of global attributes at MDN and recommend taking a look. It includes warhorses like class and id. There’s the well known, but use sparingly (role) or ideally not at all (autofocus, style, title). And there are plenty that I’ve seen mentioned not had the occasion to use.

A group that seemed particularly interesting were itemscope, itemprop, and itemtype. These attributes allow you to add structured microdata.

SEO appears to be the most prominent use case. In a post from 2018 Bruce Lawson gives an example, with example markup, where a combination of microdata and keeping your publication and modification dates up to date may help prioritize content in search results.

In a post from 2020 Scott Vinkle shows some examples where microdata can help with accessibility, most notably by improving Reader View. As a heavy Reader View user I’m adding this to my “try this out” list (Hot Microdata Summer?).

Go to this section at Learn HTML.

When a URL includes a hash mark (#) followed by a string of characters, that string is a fragment identifier. If that string matches an id of an element in the web page, the fragment is an anchor, or bookmark, to that element. The browser will scroll to the point where the anchor is defined.

I always thought of this as the anchor link, so notch another “I learned the official name” on my HTML belt. The real reason I mention this section is that want to note how useful anchors are on content sites.

I use anchors here and find them handy when referencing something from a previous post. You’ll notice too that all my “Go to this section at Learn HTML” go directly the relevant section in the course thanks to the use of anchors (go link fragments identifiers!). This is allows me to create a good user experience, if you want to read the relevant passage you don’t have to scroll around the page to find it.

Go to this section at Learn HTML.

While each label can be associated with exactly one form control, a form control may have more than one associated label.

I did not know this, and I find it a little surprising to be honest. Off the top of my head I can’t think of an example where this would’ve been useful, but of course that doesn’t mean there aren’t valid or useful scenarios.

I’ll be on the lookout for examples in the wild, but I did find these handy screen reader test cases and results by Scott O’Hara from 2019. In most cases both labels were announced, but Safari and IE 11 only exposes one of the two labels. A few browser and screen reader combinations may have updated since then, but good to keep in mind if you find yourself wanting to use this approach.

Go to this section at Learn HTML.

An element with the contenteditable attribute set to true is editable, is focusable, and is added to the tab order as if tabindex="0" were set.

I knew that you could make an element editable, but never had the occasion to do it, so I never looked it up. There’s a fun style editor example that might give you some clever ideas for next all your upcoming how-to posts.

Update: Manuel Matuzović has a nice contenteditable example CodePen that includes custom data attributes discussed below. There’s also a post with more details.

Go to this section at Learn HTML.

You can create any custom attribute you want by adding the data- prefix. You can name your attribute anything that starts with data- followed by any lowercase series of characters that don’t start with xml and don’t contain a colon (:).

I’ve used these! If you’ve used Bootstrap, especially anything involving toggling, like their collapse component, you probably have too. Because, as the course suggests…

Custom properties are an excellent way of communicating application-specific information via JavaScript.

Someday I’ll get around to creating something with these. Maybe.

This post covers the Headings and sections module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

Go to this section at Learn HTML.

The implicit role for the site footer is contentinfo.

Ha, answering a question I had in the previous section! And building on that information with more context…

When a <footer> is a descendant of an <article>, <aside>, <main>, <nav>, or <section>, it’s not a landmark. If the post appears on its own, depending on the markup, that footer might get promoted.

Go to this section at Learn HTML.

A layout with a header, two sidebars, and a footer, is known as the holy grail layout.

I did not know this had a name, although that layout was prominent during my time away from web dev. But I also didn’t know these patterns had these names. A bit searching shows holy grail to be a commonly used name, but not so much for the other ones, like Fluffy Center and Deconstructed Pancake. I’ll look them over more closely (Hot Layout Patterns Summer!), but Every Layout is my go-to for layout patterns. Check it out if you haven’t already.

Go to this section at Learn HTML.

The <section> element is used to encompass generic standalone sections of a document when there is no more specific semantic element to use. Sections should have a heading, with very few exceptions.

Using the “should have a heading” guideline is a very easy and useful way to frame it. I can think of a few places where I’m using <section> incorrectly.

Go to this section at Learn HTML.

When a heading is nested in a document banner <header>, it is the heading for the application or site. When nested in <main>, whether or not it is nested within a <header> in <main>, it is the header for that page, not the whole site.

I didn’t know this. I tend to keep my <h1> in <main> and treat it as a page title, but good to keep in mind for designs where it could be tempting to put the <h1> in <header>.

This post covers the Semantic HTML module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

Go to this section at Learn HTML.

The thing I learned here is how detailed Chrome’s version of the accessibility tree is DevTools. By default you can only view one expanded node at a time, but there’s an explainer with video of the two-step process to enable the full tree view in this Chrome Blog post.

Also, after poking around with the accessibility tree in both Chrome and Firefox (my primary browser), I was wondering why the <footer> was displaying as contentinfo rather than footer when <main> displays as main.

I discovered the answer at MDN…

The contentinfo role defines a footer, containing identifying information such as copyright information, navigation links, and privacy statements, found on every document within a site. This section is commonly called a footer.

I should probably improve my aria role understanding with a Hot Aria Role Summer too.

I’ve decided to not to publish on weekends, the next post will be on Monday. Enjoy your Hot HTML Weekend!

This post covers the Metadata module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

Go to this section at Learn HTML.

The charset attribute of the <meta> element came about in a unique manner. Originally the character set meta data was written as <meta http-equiv="Content-Type" content="text/html; charset=<characterset>" />, but so many developers mis-typed the content attribute as content="text/html" charset="<characterset>" that browsers began supporting charset as an attribute. It is standardized now in the HTML living standard as <meta charset=<charset>" />, where, for HTML,<charset> is the case-insensitive string “utf-8”.

I’m enjoying the history and tea spilling aspects of this series.

Go to this section at Learn HTML.

The http-equiv attribute has as its value a pragma directive. These directives describe how the page should be parsed. Supported http-equiv values enable setting directives when you are unable to set HTTP headers directly.

What interests me about this is the flexibility.

The specification defines seven pragma directives, most of which have other methods of being set. For example, while you can include a language directive with <meta http-equiv="content-language" content="en-us" />, we have already discussed using the lang attribute on the HTML element, which is what should be used instead.

For example, if you don’t have access to <html> to set the language at the site level (using the language attribute, e.g., <html lang="en">), but you had the ability to add a meta tag, you could use <meta http-equiv="content-language" content="en" />.

Go to this section at Learn HTML.

You can have different card images, titles, and descriptions for different social media sites or for different link parameters. For example, https://perfmattersconf.com sets different values for og:image, og:title, and og:description based on the parameter of the URL.

Neat! I didn’t know about the URL parameter. Examples…

If you enter https://perfmattersconf.com?name=erica and https://perfmattersconf.com?name=melanie in Twitter’s Card Validator, you will see these two different cards; we provided different content even though they both link to the same conference home page.

The Twitter Card Validator no longer works, but you can take a peak in DevTools to see the difference. Developer browsers such as PolyPane or Sizzy include handy social card views as well.

I was pleased with myself that I didn’t find any surprises in the Open Graph section (other than the URL parameter), or in the Other useful meta information section. They’re worth checking out if you haven’t worked with social cards or mobile icons often. Or even if you have!

This post covers the Document structure module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

Go to this section at Learn HTML.

If omitted, browsers will use a different rendering mode known as quirks mode

I didn’t know this. And, I can’t say that I could explain quirks mode in detail if asked about it, so off to the quirks mode page…

There are now three modes used by the layout engines in web browsers: quirks mode, limited-quirks mode, and no-quirks mode. In quirks mode, layout emulates behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In no-quirks mode, the behavior is (hopefully) the desired behavior described by the modern HTML and CSS specifications. In limited-quirks mode, there are only a very small number of quirks implemented.

Fascinating. Off to the history section of the WHATWG quirks spec to learn more…

Browsers have several rendering modes to render HTML documents. The reason for this is basically a historical accident. The CSS specification was incompatible with the behavior of existing browsers which existing Web content relied on. In order to comply with the specification while not breaking existing content, browsers introduced a new rendering mode (no-quirks mode).

It’s great to know the backstory of how things came about. The particulars of the spec for quirks mode are worth a look if you’ve never read it, or had to deal with it directly.

Go to this section at Learn HTML.

The lang attribute is not limited to the <html>tag. If there is text within the page that is in a language different from the main document language, the lang attribute should be used to identify exceptions to the main language within the document.

I only recently learned this because some smart person somewhere included it in article I was reading, or mentioned it on Mastodon, although I can’t remember who or where. But I do remember thinking I should make note and check some of my sites to see where to add it, specifically in my TV posts at the Junk Drawer where I try to use the language of the country of origin for the title of non-US shows.

Go to this section at Learn HTML.

There are currently 25 available values for the rel attribute that can be used with <link>, <a> and <area>, or <form>, with a few that can be used with all.

I’ve used around 10 or so of the 25, and after reviewing them all more closely at MDN I will be on the lookout for examples of rel="author" and rel="bookmark" in the wild.

Go to this section at Learn HTML.

With defer, HTML rendering is not blocked during the download, and the JavaScript only executes after the document has otherwise finished rendering. With async, rendering isn’t blocked during the download either, but once the script has finished downloading, the rendering is paused while the JavaScript is executed.

There’s a good image illustrating the difference in rendering between the defer and async attributes of <script>. The written description above is good too, but the illustration locked it in for me.

This post covers the Overview module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

Go to this section at Learn HTML.

The entire thing—the opening tag, closing tag, and the content—is the element.

I thought only the “tag” was the element.

There are two types of elements: replaced and non-replaced.

I also didn’t know of this categorization!

Void elements are all self-closing elements and are represented by one tag. This means there is no such thing as a closing tag for a void element.

I didn’t know the name for this either. Should I be embarrassed yet?

The slash at the end is old school.

My new band name.

Go to this section at Learn HTML.

There is an interface to define the functionality of every HTML element. The HTML DOM API provides access to and control of every HTML element via the DOM, providing interfaces for the HTML element and all the HTML classes that inherit from it.

The areas where HTML and JavaScript intersect are my weakest. I only know rudimentary JavaScript, mostly just light DOM manipulation. My current HTML skills are focused on markup and document structure rather than the programatic aspects. Perhaps Hot HTML Summer will change that.

All of the sections or passages that cover APIs are likely to be ones where I’m learning the most. In this section I stepped away to read the MDN DOM API page, and then came back to re-read the section again. I’ll probably be doing a lot of this.

I have a joke with myself that I’ve had for last 25 or so years… “Some day I will learn JavaScript”. I half-heartedly started trying to learn JavaScript with the O’Reilly Definitive Guide first edition in the late 90s. I got rid of it during a move, but I still have the slim Pocket Reference as a reminder.

Admittedly the way I’ve tried to learn JavaScript is probably how most JavaScript developers try to learn CSS, by poking at it and treating as a collection of “tricks”. I really should give it a non-half-hearted try, but we’ll save that for another day, or summer.

Last fall when Estelle Weyl’s Learn HTML course was announced at Google’s web.dev I took a quick look and made a mental note to come back to it.

If you’ve been building websites for years, this course may fill in gaps in knowledge that you didn’t even know you had.

The content I’m here for! Despite writing HTML for over 25 years I have no doubt there are plenty of things I don’t know.

Part of the reason I started this site was to have a place to write about things I’m working on or learning. It’s been both fun and helpful. There’s always something to learn, even in areas where I’m the most comfortable and familiar.

With that in mind I’m going write a post for each section of Learn HTML, 20 in all. I’ll note things I didn’t know, highlight interesting items and generally enjoy having a Hot HTML Summer. I’ve already written the first five as a test to see if the series would be worthy blog fodder. I’ll let you be the judge of that!

I don’t have a time frame other than “summer”. I’ll publish the first five over the coming days, one per day, and then the rest as I complete them. Who knows, I might even find an idea for this year’s HTMHell Advent calendar! Happy Hot HTML Summering.

The Junk Drawer is now pulling the blog from WordPress, two different sources from Airtable (TV Blurbs and Wake Up Songs), and the latest photo from Pixelfed (on the homepage only). It also includes some markdown here and there. Eleventy not only makes this possible, it makes it very easy. If you’re interested in using WordPress with Eleventy I wrote a two part series (part one, part two).

I talked a bit about each of these sections at this site, and at the Junk Drawer. Content and concept wise they’re both straightforward, and are pretty much what they sound like. Each has a listing on the homepage and each has its own listing page.

The integration was also straightforward since I’ve used Airtable and Eleventy in the past. I’m using the same call to Airtable that I included in my 2020 article on using Airtable and Eleventy. I created a form for each base to make adding new songs or blurbs easy. Deployments at Netlify are triggered by a new row using Zapier.

Right now both are just a list in chronological order on their respective listing pages. I’m currently thinking about ways to improve organization, particularly to the TV Blurbs. My current thinking is to add a way to view all blurbs for a single series or film and a permalink for each blurb.

When I started using Mastodon with regularity I thought about bringing my toots into the Junk Drawer using RSS. That lead me to a helpful article by Raymond Camden on bringing RSS content into an Eleventy site. I ditched the idea, but kept the link, and it came in handy when when I decided to pull photos in from Pixelfed.

While going the RSS route is easy from an integration standpoint, there are some limitations and annoyances. The ones I encountered were:

• Only the first 10 entries are available via RSS.
• The image and summary are a single element, meaning there’s no way to display only the image (or rather, if there is a way, I didn’t find it).
• But, you can display only the summary text without the image.
• There are inline styles and line breaks in the summary text.
• The images are fairly big file size wise and only available in JPG format.

Since I’m only pulling in one image I can live with the downsides for now. I was able to make some adjustments to the inline styles by holding my nose and typing !important, and I optimize the images before uploading to the Pixelfed to help with performance.

I might look into using the Pixelfed API in combination with eleventy-fetch and eleventy-img, but ultimately I’d really like to go full-on POSSE and create a photo section or standalone site to syndicate elsewhere. I’m not going to get to that anytime soon, but for now having the latest image from Pixelfed in the Junk Drawer in a step in that direction.

Working out how to integrate the new elements into the homepage was the most challenging part. Originally I imaged it as three listing columns, but that was boring even by my boring standards. Once I got the hero area settled the rest of it fell into place.

I still might work on the background image of the “writing” section, but think the graph paper is OK for now. I’m not a clever visual designer, but I would be happy if I could figure out how make it feel more like a junk drawer, whatever that means.

One quasi-junk drawer visual element is the quasi-Polaroid framing for the Pixelfed image. I wanted it to look like a Polaroid photo was thrown on a table, or in a junk drawer. Fortunately Set Studio’s weekly mailing, The Index, included the homepage for Shantell Sans, a lovely new hand-written font, around the time I was trying to figure this out. Using a hand-written font for the the “Latest from Pixelfed…” heading in combination with the Polaroid frame brought the exact vibe I was trying to create.

I don’t have a timeline for adding some better organization to TV Blurbs or figuring out how to do a photo site or section. With the new additions I do have a nice low key groove of posing Blurbs, Wake Up Songs and the occasional Pixelfed image, which feels nice.

Around here I’m hoping to finally do a little tidying in the Projects section a tidying. I’ve already removed some older projects that are no longer active, and next up I’d like to spruce up the landing page a bit.

When I update the site to use version 2.0.0 I’ll actually be removing dependencies, and not adding more. I am also anticipating next to no adjustments to the site’s underlying code.

That’s rare and special.

Indeed. Just like the update to v1.0.0 I only encountered a couple of build fails at Netlify that were easy to overcome. I also tracked the node_modules directory size reduction for each of the eight sites I updated. More on both of those in a bit.

If you’re not sure what’s new in v2.0.0 the Eleventy blog lists all the features and breaking changes. Stephanie Eckles also has a useful in-depth look at the new features and considerations at 11ty Rocks.

Also like last time, I made a little step-by-step cheat sheet for myself so I could easily copy and paste commands, snippets and the like. It’s based on the instructions in the Eleventy Upgrade Helper plugin.

1. Upgrade Eleventy to v2.0.0
2. Install Eleventy Upgrade Help plugin
3. Add Eleventy Upgrade Help plugin to your site
4. Run build command and evaluate plugin output, address any issues
5. Uninstall Eleventy Upgrade Help plugin and remove from your site
6. Optional: Uninstall Browsersync and remove any configurations from your site

Unlike the the v1.0.0 upgrade, Eleventy gets upgraded first.

npm install @11ty/eleventy@2

A couple of my sites I had some security warnings that were easy to fix with npm audit fix, mostly for Luxon. I chose to address those at this step.

npm install @11ty/eleventy-upgrade-help@2

Add the plugin to your .eleventy.js or newly available naming of eleventy.config.js:

const UpgradeHelper = require("@11ty/eleventy-upgrade-help");

module.exports = function(eleventyConfig) {
 // Should be the last plugin if there are existing plugins
  eleventyConfig.addPlugin(UpgradeHelper);
};

I only had serve and production commands for my sites, so I added a build command. I don’t know if it’s problematic to run serve instead of build for this step. I’m guessing not, but if you don’t have a build command you can add one to the scripts section of your package.json file:

"scripts": {
	"start": "npx eleventy --serve",
	"build": "npx eleventy", /* <--- add this! */
	"production": "NODE_ENV=production eleventy"
},

Then run the build command:

npm run build

The output for this version is pretty verbose compared to v1.0.0 and includes a lot helpful information should you encounter issues. Instead of adding it here I created a Gist if you’d like see what to expect.

Since I didn’t have any issues this was pretty much a formality. If you use Liquid, Silvestar Bistrović has a helpful post on the issues he encountered and how he addressed them.

npm uninstall @11ty/eleventy-upgrade-help@2

And remove the configuration from your .eleventy.js or eleventy.config.js file.

At this point I also removed my configuration for Browsersync and uninstalled it.

npm uninstall browser-sync

One thing I’m hoping to see added soon is the ability to configure the new Eleventy Dev Server to open when the server starts. This is the only thing I miss from Browsersync, but it’s not worth using Browsersync just for that. There’s currently a feature request if you’d to add your comment or vote (by adding a thumbs up emoji).

When I upgraded to v1.0.0 one site had failed builds at Netlify due to a unsupported Node version. And of course the Eleventy community came through with several options on how to handle the situation.

This time around I had two sites that failed because they were trying to build with an older version of Node. I knew what to do to fix the issue, but I wanted to understand why it was happening.

Dan Urbanowicz has a handy post that covers three options for manually setting the Node version for Netlify builds.

• Using a .nvmrc file
• Setting a build environment variable for the site in Netlify’s admin section
• Adding a build.environment to the netlify.toml file

Another option is to set it in the engines section of your package.json file, but apparently that approach isn’t currently supported by Netlify (long standing open issue here).

Neither of my failed build sites specified the Node version in any of these places. And since the site passed on Node version in the Upgrade Help plugin I moved on to Netlify to find an anwser.

When there is no Node version specified, Netlify will use the default version set for the site’s build image. The current build image is Ubuntu Focal 20.04. The default Node version for this build image is 16. The version installed for my failed build sites is 12.18.0.

My deploy logs show that the build is using a cached version of 12.18.0

12:32:47 PM: Started restoring cached Node.js version
12:32:49 PM: Finished restoring cached Node.js version
12:32:49 PM: v12.18.0 is already installed.
12:32:49 PM: Now using node v12.18.0 (npm v6.14.4)

Once I figured this out I removed the explicitly set Node version from my site and tried a build again, knowing it would fail. Then I retried the build with the option to clear the cache, but no luck. After rummaging around the Netlify Support Forum I found a similar issue that turned out to be on point.

Why is my build using all these old versions by default, rather than the Focal defaults? It feels like Netlify somehow cached dependency versions from Trusty (older build image) but isn’t updating them for Focal defaults?

This is what I suspected was happening for my failed builds too. The suggested fix for this issue also worked for mine.

go to Site settings > Build & deploy > Build settings , select Link to a different repository , and then select the same repository to re-link your site to it.

According to the reply from support, the versions for major languages is set when a site is first created. My sites with build fails were created a few years ago when the default build image was Ubuntu Xenial. When I updated those sites to Ubuntu Focal the cached major language versions were not updated to match the Focal defaults. By reconnecting the repository I was able to get the updated default language versions.

If you have this issue and don’t feel like reconnecting your repos you can always set your Node version using one of the methods mentioned above (.nvrmc file, netlify.toml or build environment variable). If you use one of these methods Dan Urbanowicz’s article tipped a handy set and forget approach.

Instead of setting an explicit version, e.g., 18.12.1, the LTS or latest version can be set using lts/*. Before I discovered the repo reconnection fix I added a build.environment section my netlify.toml, which worked like a charm.

[build.environment]
  NODE_VERSION = "lts/*"

Back to Eleventy, I had a little thread at Mastodon (OK, two toots) as I updated my sites throughout week, mainly to share my awe at the massive reduction in dependencies. As promised, here are all the sites I updated with the before and after size of the node_modules directory (in disk size).

You may encounter issues I didn’t depending on your set-up. If that’s the case I wish you luck!

Before that unfortunate moment I was gearing up to do a post here. Now that I’m slowly regaining a reasonable amount of energy it seems like a good time for an update.

I’m still noodling on a site for freelancing. At the end of last year I replaced the Featured Projects section of the homepage with a From the Studio section. I’ve been focusing mostly on figuring what I’ll be offering and how to position it.

I have a current client that’s on hold due to their enormous workload and a potential change in their business. We’ve already done research and I’ve shared my findings and recommendations. We had worked through that and had a plan when the sudden onslaught and potential shift happened. So for now that’s on hold, which is fine and worked out well with my needing to take time off thanks to Covid.

I would like to have that site finished to round out my example offerings before rolling out a studio site. I currently have a personal site for a creative professional, a site for an art project and the new one is for a small business (a Lawyer). This is a good collection of the types of sites I’d like to be doing. Everyone deserves a nice site, not just people and small businesses who can afford agencies (who frequently build inaccessible, slow, bloated sites “that look nice”).

So far the Junk Drawer is just a blog. Not that that’s a bad thing! I’d like to also do some sort of archive-like thing, but I haven’t come up with anything yet. In the meantime I had a couple of fun ideas that I’m going to add.

Last year I put together an Airtable base to track the song in my head when I wake up. I had a couple of days where I noticed that whatever song was in my head when I woke up seemed so random. I hadn’t heard it or thought of it in a while, yet there it was. I did it for a little while but since I didn’t have a plan it was easy to let it slip.

In the beginning of the year I was thinking about microblogging and quickly came up with an idea. I thought it would be fun to a TV blurbs microblog. Basically just small, random thoughts I have while watching TV, something I do a lot of. My tendency is always “I’ll just start a new site!” but then I decided it seemed like good Junk Drawer fodder and decided to integrate it there.

The Junk Drawer is already using WordPress so my first thought was to create a new category in WordPress (TV Blurbs) and handle it like a separate collection in Eleventy, similar to how I have Notes and Articles here. I anticipate that my main publishing use case will be firing off blurbs from my phone as I lay in bed and watch TV. I’ve heard the WordPress iOS app is nice to use so I took a look.

Yeah. No. Automatic does not need that much of my data. Since I already know how to pull data into Eleventy from Airtable this was my next thought. I wrote an article about using Airtable with Eleventy a couple of years that’s still probably mostly relevant if you’re interested. Airtable’s iOS app is not much better…

But with Airtable I can create a form and fire off TV blurbs from the comfort of a browser without having to use a data hungry app. And I can trigger a deploy at Netlify when a new record is added to the Airtable base using Zapier.

Once I settled on Airtable for the TV blurbs I decided I could also pull the wake up songs in too since they were already in Airtable. My plan is to rework the Junk Drawer homepage. The blog list will be the primary focus with TV Blurbs and the Wake Up Song as secondary lists, each with their own listing page. I don’t have a timeline for this at the moment, but it’s nice to have a plan.

I recently created a Twitter archive locally using Zach Leatherman’s Tweetback project. I’ve fiddled around with some of the CSS and may restructure it a bit. I like how Henry Deroches added navigation to the top of his Twitter archive, so I may use a similar approach. Although I may not be brave enough to muck around with the layout as its using Javascript as the templating language. I could very easily mess that up! I may just stick to fiddling with the CSS, we’ll see.

Fiddling aside, I’m not 100% convinced that I’ll make it public. I’ve been active on Twitter since the spring of 2007, but honestly most of it’s just chit chat and blather. I’m not a Thought Leader or a Big Account. I didn’t share any meaningful insights. I had no viral shitposts, notable bangers or things generally worthy of a public archive for all eternity. However, in the spirit of IndieWeb, I may tack it on to this site with a subdomain. Again, we’ll see.

More importantly, you should check it out if you have a Twitter account. Even if you don’t make it public, having a nice searchable archive your Tweets that you can update and modify as you see fit is terrific. And it looks like there could be some nice enhancements in the pipeline (I would be very interested in this one).

One of the best parts of the archive are the stats. Here are a few from mine…

1. 👍🏼 used 115 times on 104 tweets
2. 🎉 used 107 times on 103 tweets
3. 🤓 used 34 times on 34 tweets
4. 💸 used 33 times on 19 tweets
5. 👇🏼 used 28 times on 18 tweets 207 unique emoji on 680 tweets (2.4% of all tweets, not including retweets)

1. d_mn used 149 times on 148 tweets
2. h_ll used 76 times on 75 tweets
3. a_s used 49 times
4. s_it used 47 times on 46 tweets
5. b_tching used 16 times on 15 tweets 412 swear words on 403 tweets (1.4% of all tweets, not including retweets)

And 49.2% of my tweets are replies (×16,027), potentially putting me in Reply Person territory?

I’ve (hopefully!) hooked up this site to post to my Mastodon account using IFTTT. This post will be the maiden voyage if I’ve set it up correctly. Fingers crossed that the formatting turns out as intended. Thanks to Matthias Ott’s handy how-to post for setting me in the right direction. You’ll also want to check out Kelson Vibber’s post, How to post to Mastodon from anything using IFTTT as there is updated information on how to set-up the webhook portion as well as some additional formatting tips.

If you’re feeling adventurous Jeremy Keith has a post on using Mastodon’s API and Bridgy and Nicolas Hoizey has one on using a feed and GitHub action.

Originally I was going to use Zapier as it’s my go to automation tool, but webhooks are a premium feature and I’m not ready to upgrade there at the moment. Webhooks are available on the free tier at IFTTT. If it works out I’ll also set up posts from Junk Drawer to post at Mastodon as well. Or even it doesn’t go well I’ll try to improve it at the Junk Drawer as I’m more likely post there next than posting here. Wish me luck!

Update February 17, 2024: Webhooks are no longer available on the free tier at IFTTT. The Pro plan is relatively affordable. Pipedream currently offers webhooks on the free tier.

Update Feburary 11, 2023: After fiddling around with several test posts, I finally got posting to work correctly. However, only using the post title and URL. I couldn’t get content to display without it including the wrapping HTML.

I found conflicting examples for how to add your access token in the webhook settings. Adding it in the URL field (?access_token=XXXXX) is what worked for me. And this is how I set-up the Body field:

status=📝 New post: <<<{{EntryTitle}}>>>

<<<{{EntryUrl}}>>>

On first glance the <meter> element might seem straightforward for accessibility given that it’s a semantic element, but testing has shown the support is not uniform.

Reading the meter

This post turned out to be a bit of whopper. When I first thought about proposing a contribution I decided to pick an element I didn’t know about, research it and write about it. Manuel Matuzovic, creator of HTMHell, takes this approach frequently and I’ve always enjoyed reading those types of posts.

To find a subject I scrolled through the MDN element list in search of something to learn about. When I saw the <meter> element I thought “Oh cool, it’s semantic and I don’t know anything about it, should be fun!”. Ha, little did I know.

About a month and a half later, what I thought would be a straightforward little explainer turned out to be a deep dive, complete with a lot of screen reader testing and CodePen examples. The post also includes potential color contrast issues, how the attributes work, examples of styling and use cases.

A big thanks goes to Eric Bailey for his supportive and thoughtful review. With his feedback I was able to tighten up the post as well as dig a little deeper to come up with a recommendation that would likely result in improved accessibility.

And of course a big thanks goes to Manuel Matuzovic, it’s not easy to pull off a big editorial effort like the HTMHell Advent Calendar. Additionally his dedication to creating helpful front-end content is greatly appreciated!

My original thought was that I’d remove “Featured Projects” to make room for more than two posts in “Recent Writing”. Then I realized I could change the “Featured Projects” cards to “From the Studio” and give my freelance projects a little visibility here while I work on a site for the studio.

I still have a few adjustments I want to make, like integrating the Junk Drawer and reworking the “Recent Writing” section, but this is a step in the right direction.

In other new directions I’ve slowly been moving most of my social attention to Mastodon. I created an account in April, found a few people I know who were crossposting from Twitter. I also found several people who hadn’t posted in a long time. It felt like I got to the party well after it was over, but it turned out to be opposite. It’s jumpin’ over there now, but in a much different way than Twitter, and I like it.

I still have my Twitter account, and still check in almost as much as before. Most of my web dev follows and mutuals have moved to Mastodon, and most of my non-web dev mutuals have not.

I’ll be curious to see where my friends and follows not currently on Mastodon end up, or if they leave Twitter at all. Tumblr will be adding support for ActivityPub, the protocol that powers the Fediverse, making it possible to follow Tumblr accounts from Mastodon and (presumably) vice versa. A few of my pals are already on Tumblr, and I think the ones hesitant to try Mastodon would be more likely to move to Tumblr.

As much as I’m enjoying it over there, it’s not without its problems. In addition to the high barrier to entry there’s also the often inhospitable whiteness of Mastodon, as well as the potential echo chamber effect. Hopefully all of these issues will improve with time and effort, but they serve as good reminders that technology, in this case the Fediverse, doesn’t solve problems in and of itself.

I recently wrote an article that will be published elsewhere in the coming weeks. It’s my first web dev byline! I didn’t have a goal of publishing elsewhere, but an opportunity came up at a project I like and I thought “what the hell”. I threw my hat in the ring and my proposal was accepted.

One thing that came out of that effort was that I discovered Assistiv Labs.

Assistiv Labs remotely connects you to real assistive technologies, like NVDA, JAWS, and Windows High Contrast Mode, using any modern web browser. Forget maintaining your own expensive devices & complicated virtual machines. Start testing in seconds.

I’m a Mac user, so I can’t test with screen readers other than VoiceOver, or in Windows High Contrast Mode. I have a Windows machine for work but I don’t have admin rights to install anything on it, and I don’t want to use it for personal use, like testing my projects. I’ve been considering getting Parallels to run Windows on my Mac, but honestly that just seems like a pain in the ass.

Assistiv Labs solves this problem as I can test using a browser and without having to install anything, or keep anything up to date. You can also test locally using a CLI (OK, you have to install that, but once and it’s easy!). It costs more than Parallels, but it’s worth for it for me given the lack of hassle.

Prior to discovering Assistiv Labs I had only tested my projects using VoiceOver. I’ve now tested them using NVDA and was happy to not find any issues. Of course I haven’t tested every page, and I’m not a screen reader user, so there’s always a chance there are issues.

The big area of improvement came from testing with Windows High Contrast Mode. I was able to make adjustments here and at other sites to make sure links, focus and hover states were visible. I found these articles helpful for fixing and understanding issues:

• Piccalilli: Use transparent borders and outlines to assist with high contrast mode
• Manuel Matuzovic: Outline is your friend
• Smashing Magazine: Guide to Windows High Contrast Mode

Happy outlining!

Logical, flow relative properties and values are linked to the flow of text, rather than the physical shape of the screen.

Instead of using margin-top: 1rem; it would be margin-block-start: 1rem;, using a relative “start” instead of physical “top” to indicate direction. Using relative direction better supports language translation and multi-lingual sites. The post at web.dev has a good overview that includes examples. MDN also has a good overview that includes links to all the properties.

Jeremy’s refactor seemed to go well, including some interesting observations. He had a nice follow-up post on browser support and progressive enhancement using feature queries that should be noted, especially for the how-to on using @supports.

Around these parts I went (almost!) all in on logical properties for my new blog thingie, affectionately known as the Junk Drawer. Initially I wrote all the styles using logical properties, but after reading Jeremy’s posts I realized that the styles from my Eleventy starter needed to be converted. Feel free to take a peak at Github.

The one thing I didn’t convert were units, they were mentioned in the web.dev post but upon further investigation vi (view inline) and vb (view block) are not yet as widely supported as sizing, spacing and borders.

Overall it was easier than I thought to remap my mind to write logical properties, at least for spacing. No doubt using flexbox and grid made the mental leap easier. In the flurry of new CSS things to keep up with I missed sizing, borders and text-align start end.

Borders and text-align were easy enough to absorb, but something about sizing (width and height) didn’t easily fit in my head. It’s like when you meet someone and get their name slightly wrong, and then they’re always the wrong name to you. My mind wants to type max-size-inline or size-block instead of the correct max-inline-size or block-size. I regret even typing the incorrect examples! But I’m sure I can make them mental muscle memory in good time.

Another thing I noticed is that the shorthand for “start” and “end” can be used within the spacing logical shorthand. Let’s say your original padding is this…

/* shorthand order is top right bottom left */
.my-class {
  padding: 1rem 2rem 3rem .5rem;
}

According to the examples at MDN you can use the shorthand to include both the start and end values within the overall logical shorthand. Making your original example…

/* shorthand order is start end */
.my-class {
  padding-block: 1rem 3rem;
  padding-inline: .5rem 2rem;
}

I made a quick Pen to validate this example because I tripped up on the order for inline. I was looking at the physical example while typing and initially put the “end” value first, but the logical shorthand order is “start end”.

Back to Jeremy’s second post about browser support. The Junk Drawer is a very, very low traffic personal site, which makes for a great low stakes way to get used to using logical properties. I checked my stats to see if I’ve had any visitors using browsers that don’t support the logical properties I used, and I haven’t had any yet.

The current version of the new DuckDuckGo Mac browser doesn’t support yet them, and the only visitor I’ve had using it was me while doing my test. I sent feedback about it! None of the DuckDuckGo browsers are listed at Can I Use but my test of the iOS version shows support, at least for spacing, sizing and borders. Best guess is that the Android versions support it too?

At any rate, I found logical properties easy to use and am look forward to using them more in the future. And speaking of the future, Miriam Suzanne had a good reply post to Jeremy’s original post to discuss longer terms plans from the CSS and Internationalization working groups. If you have any opinions on the matter you should let them know.

How did I stack up to last year’s “What’s next”?

• Tinkering? Check.
• Writing more about other topics? Check, but elsewhere.
• Freelancing? Check.

Here’s a non-complete list of some of the tinkering I did over the past year, in no particular order…

• Added a dark theme
• Added a contact form (and discovered that the email address I used in the contact link previously was configured wrong, in the unlikely event that you emailed me and never heard back, sorry!)
• Added web monetization (and have made a whopping $0.02!)
• Added Plausible Analytics
• Added Kofi link to posts (and got a tip from my big fan!)
• Added IndieWeb markup
• Did a lot of spring cleaning

I also added a new accidental project. More about the project on the project page.

Instead of trying to incorporate non-web dev writing here I created a new site, Dana Byerly’s Digital Junk Drawer. I wrote a bit about the decision at this site, and about using WordPress as a headless content management system for Eleventy (Part one: WordPress set up and Part two: Eleventy set-up).

Since I added Plausible Analytics to the site in the past year I now know which posts were popular. Here are the top three:

• Using Airtable with Eleventy
• Dear HTML element
• WordPress & Eleventy part one: WordPress

I also updated the About page to reflect a bit about my work experience since I don’t have a proper portfolio or resume listed here. I’m not necessarily looking to change jobs, but wanted to make it easier to get a sense of my skills, experience and approach.

This year I launched two new sites for a friend, effectively starting on a path towards freelancing.

• Rhonda Lieberman’s site
• The Cats-in-Residence Program

I don’t think I’ll be ditching the day job to freelance full time in the near future, but as mentioned before, “I would like to continue to do little, well-crafted sites for individuals or small businesses”.

I’m currently working on a new site for a small business. It’s still in the early stages but it will be built with Eleventy and might use WordPress for some content management.

After that I’m hoping to launch a site specifically for freelancing. I’m tentatively thinking of calling it Dana Byerly Studio. Unimaginative, I know. But straightforward and clear. And broad enough that it could encompass more than I’m currently imagining.

The tinkering will continue to continue! Along those lines I do have some plans to revamp the Projects section. I’m going to archive some old projects, rearchitect some of the data and give the listing page a slight redesign.

I’m also going to rework the homepage to focus more on writing and minimize projects. Writing and projects currently have equal billing but there hasn’t been much traffic from the homepage to either of the featured project pages. Most of the individual project page traffic is from search.

I also want to integrate links to the Junk Drawer and the eventual Studio site, and am working on how best to do that.

The writing around here will remain “Hey I figured this out” type of web dev stuff, and a place to write about my side projects. Bloggy types of writing will be at the Junk Drawer.

Here’s to another year!

As mentioned in part one, I recently created blog for myself using WordPress as a content management system (CMS) for Eleventy. This two part series covers the things I learned and encountered along the way. It’s not a step-by-step how-to guide, but rather a collection of considerations and tips. I’ve included links to how-to articles where available within the context of each post and in the Useful resources section.

This article assumes you already know how to use Eleventy, how to install packages and are familiar with how to use dotenv.

• Intro
• Caveat about my dev skills
• Fetching the data
• Dates
• Change fully qualified URLs
  • .env with a useful assist
• Images
  • Hosting images at your Eleventy site
• Tags
  • Tags included in a post
  • Listing page for tagged posts
• RSS
• Hosting
  • Netlify build hook
• Useful resources and wrap-up

I highly recommend that you read How to use 11ty with Headless WordPress and deploy to Netlify by Dave Davies first. It will walk you through the step-by-step to of how to fetch data from your WordPress site, display a list of posts and create a page for each post in Eleventy.

I used the example repository from the article as a proof of concept. Once I had it in good shape I integrated it into my personal Eleventy starter to use my go-to filters, base styles, etc. The post covers the things I encountered.

I’m not very good at JavaScript. One of the great things about Eleventy is that I don’t have to be to get a lot of it! It’s worth noting that there are likely to be other ways to handle the scenarios I encountered, especially if you have JavaScript skills. I’ll point out the obvious ones along the way.

Using the example repository mentioned above, I used Node Fetch. I’m not covering the step-by-step here, but highlighting a few options.

You can use your favorite method to fetch the data. Eleventy has an Eleventy Fetch plugin, which also includes caching. There’s also a GraphQL plugin for WordPress.

I covered some considerations for the accessing the WordPress endpoints in the Select your endpoints section of part one. If you have more than 100 records in an endpoint, there’s an example of using Promise.all with pagination to bring them all back in Craig Buckler’s How to use WordPress as a Headless CMS for Eleventy that could be helpful.

As a reference for upcoming code examples here are the names of my data files that call the Posts and Tags endpoints.

• Posts endpoint = posts.js
• Tags endpoint = taglist.js

Update: Mike Aparicio wrote a nice article on setting up a headless WordPress CMS with Eleventy. His implementation used WordPress-hosted instead of self-hosted, which apparently has a different API. If you're using a set-up managed by WordPress, be sure to check the Pulling in the Content section of his post.

The first thing I noticed once I put the blog post template together was that instead of displaying the date, I was getting a Invalid DateTime error.

For my usual Eleventy set-up I use Luxon for dates and have two filters set-up to handle formatting. I covered the full set-up including the installation of Luxon in this post, but the general idea is there’s formatting for datatime and for display.

In my blog template I set the date:

<time datetime="{{ posts.date | w3Date }}" class="post-meta dt-published">
  {{ posts.date | longDate }}
</time>

This should result in datetime formatted as 2022-07-21T12:45:24.000Z and the display date formatted as July 21, 2022.

The filters I use for dates from Eleventy in eleventy.js are:

  eleventyConfig.addFilter('longDate', dateObj => {
    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('LLLL dd, yyyy');
  });

  eleventyConfig.addFilter('w3Date', dateObj => {
    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toISO();
  });

When working with dates from Eleventy fromJSDate is used because the dates are JavaScript date objects. The dates coming from WordPress are formatted as ISO strings. A small adjustment in your date filters will fix the issue.

  eleventyConfig.addFilter('longDate', dateObj => {
    return DateTime.fromISO(dateObj, {zone: 'utc'}).toFormat('LLLL dd, yyyy');
  });

  eleventyConfig.addFilter('w3Date', dateObj => {
    return DateTime.fromISO(dateObj, {zone: 'utc'}).toISO();
  });

By changing fromJSDate to fromISO, the filters output the dates correctly. But why am I using the w3Date filter to change the ISO date from WordPress to ISO? The date from WordPress comes back as 2022-07-21T12:45:24, which includes the date and time, but not the timezone offset. There’s an open ticket to address the formatting in WordPress, but for now the filter works fine. And, you may not care if it has the timezone offset, and that’s fine too!

The Select your endpoints section of part one looks at the Posts endpoint and how the content comes back. One of the things to note is that any link to another post or page within your site will have a fully qualified URL for your WordPress site.

One suggestion for making this a bit easier to handle in Eleventy is match your WordPress permalink structure to your Eleventy permalink structure. See the Permalink and default category section for more information about the WordPress set-up.

Since my permalink structures match, the only thing I have to change is the domain. If you use the WordPress Media Library any images within the content of your post will also have fully qualified URL paths. I’ll cover that in more detail in the next section. For now we’ll focus on changing URLs from your WordPress domain to your Eleventy domain.

This is one of those instances that could be handled in a number of ways depending on your preference and/or skill level. You could write a filter in your .eleventy.js file, or perhaps handle it directly in your API call. Both of those are approaches are a bit beyond my reach at the moment, so I used the replace filter in Nunjucks.

Before we get to the Nunjucks filter, this is where I found using dotenv most helpful. If you’re not familiar with dotenv the first couple of minutes of this video should get you up and running (it did for me!).

In my .env file I’ve set up a key that holds the domain of my WordPress site. It looks like this, but uses my real domain:

CMS = 'https://my-wordpress-domain.com'

Typically environment variables are used in your JavaScript data file that contains the call to your API. But here I’m using them within a template. Fortunately it didn’t take long to figure out how to do this because someone else in the Eleventy community already discussed it!

This comment and example by Peter deHaan is the approach I ended up using. In my .eleventy.js file I have the following:

const inspect = require("node:util").inspect;
require("dotenv").config();

// in the module exports section
  eleventyConfig.addFilter("inspect", (value) =>
    inspect(value, {sorted: true})
  );

  eleventyConfig.addGlobalData("env", process.env);

And then in my template I can use the environment variables within the Nunjucks replace filter:

{{ posts.content.rendered | replace(env.CMS, '') | safe }}

This filter strips out all instances of my WordPress domain and leaves all of the links and images using relative URLs. If you’ve set up your WordPress permalinks to match your Eleventy permalinks your links and images should now use relative URLs and point to pages within your Eleventy domain.

The Images section of part one provides some details and options for how to set-up images within your WordPress admin. How you handle images in Eleventy will depend on what you decide to do in WordPress.

The easiest way to handle images is with Cloudinary, and its easy to use WordPress plugin, or your favorite media platform. You use the WordPress Media Library as you normally would and Cloudinary optimizes and serves the images. A few things to note if you use Cloudinary…

• Turn off Lazy Loading (on by default)
• By default it will optimize all of your WordPress themes, plugins, etc, which will eat into the limits of your free tier, you can easily opt out

The Lazy Loading feature displays a loading gif in WordPress until your image loads, but in the API the image source includes the path the loading gif and not the path to the image, so your images will be broken unless you turn lazy loading off (the image tag itself uses loading="lazy").

Another option is to just let your images be served from your WordPress domain. If you decided to go with this approach you’d have to adjust your link filtering to only change the domain on links and not in the image tags.

While Cloudinary offers ease of use and performance gains, I opted to serve images from the domain of my Eleventy site, mostly because I want all of my content in one place on my server. This does make extra work for me, and if I were setting it up for a client who didn’t want the extra work, I would definitely choose Cloudinary.

On the off chance you’d like also like to host images from your Eleventy site, here’s the additional set-up and steps I take… you can skip to the next section if you’re not going to self-host images.

You’ll recall our Nunjucks replace filter for turning the fully qualified URLs into relative address URLs discussed above. The path in our image tags now look like this: /content/uploads/my-image.jpg if you followed the recommendation in the Images section of part one and changed the default behavior of organizing images by year and month. If not your image path would look something like this: /content/uploads/2022/08/my-image.jpg, making it harder to replace the image path.

You could set up the image path in your Eleventy site to mirror WordPress (/content/uploads) and then you wouldn’t need additional filtering. I decided to use /img/blog, so I need to account for that.

In my .env file I added the following…

MEDIAPATH='wp-content/uploads'
IMAGEPATH='img/blog'

And then in my template I add an additional “replace” for the image path:

{{ posts.content.rendered | replace(env.CMS, '') | replace(env.MEDIAPATH, env.IMAGEPATH) | safe }}

You can probably find a better way to handle this, especially if you’re handy with JavaScript. But if not, this method works fine. I’m guessing the JavaScript filter approach offers better build-time performance, but for my tiny site I’m sure I’d never notice the difference.

One other thing to account for, WordPress creates several sizes of your image that are used responsively. In addition to having a copy of the original image in your Eleventy instance you’ll need to grab the additional sizes from the WordPress Media Library. I haven’t found a way to do that in the WordPress admin and grab them using FTP.

My image prep…

• Resize and maybe crop image (using Acorn).
• Optimize with Squoosh.
• Add to WordPress Media Library (including alt text!).
• Download additional image sizes.
• Add all images to Eleventy.
• Deploy before publishing WordPress post to make the images live.

Yes, that’s a lot of steps. It’s fine for me but not recommended unless you don’t mind doing that sort of thing. If it ends up being too annoying I can always switch to Cloudinary.

One of my requirements was to include tags with my blog posts. To do this I had to include the Tags endpoint because the Posts endpoint includes only the ID of the tags used in post.

I did find a way to embed the additional tag data in the Posts endpoint, but couldn’t figure out how to render it. Check the Select your endpoints section of part one for more information as you might be able to figure out how to render the additional tags data (and if you do let me know!).

As for my approach, if you’ve ever used a MySQL join, it’s a similar concept to access the tag name for your post. The tag ID field is the foreign key, or common element, that links the Posts and Tags endpoints.

I included tags for each post and a listing page per tag.

There could be different, and potentially better, ways to do this. But, in my blog post template I have the following code to display tags…

{% if posts.tags | length %}
  <div class="wrapper post-tags">
    <span class="visually-hidden">A list of tags for this post.</span>
      <ul class="tag-list" role="list">
      {% for tag in posts.tags %}
        {% for tagName in taglist %}
		  {% if tag === tagName.id %}
		  <li>
			<a href="/tag/{{ tagName.slug }}">{{ tagName.name }}</a>
		  </li>
		  {% endif %}
        {% endfor %}
      {% endfor %}
    </ul>
  </div>
  {% endif %}

Here’s what’s happening…

• The first “if statement” includes the code block if the post has any tags.
• Create a “for loop” to call all the tags on the post from the Posts endpoint.
• Create an additional “for loop” for a the Tags endpoint.
• Use an “if statement” to make sure the ID(s) from the Posts endpoint matches an ID in the Tags endpoint.
• Assuming the IDs match, use the name and slug from the Tags endpoint to display the tag name and link to the listing page for the tag.

I’ve made the tags on my posts links, which points to a listing page for the tag (for example my Eleventy tag here at this site!). I think of this as a publishing best practice and highly recommend that when you tag your content that you also give visitors the ability to browse your content by tag.

Creating a tag listing page is similar to creating blog posts in that pagination is used to create the individual pages. There are two parts, the markdown that includes the pagination and the template or layout. My preferred method is two files but you can also combine them in a single .njk file assuming you’re using Nunjucks.

The markdown…

---
summary: "A list of posts by tag"
pagination:
    data: taglist
    size: 1
    alias: taggy
permalink: "tag/{{ taggy.slug }}/"
layout: 'layouts/tag-listing.html'
---

Here’s what’s happening

• I’ve created a summary to use in the meta description (not relevant to actual tag listing but wanted to mention it).
• The pagination uses taglist.js (that fetches the data from the Tags endpoint) as the data source.
• The size is set to 1 to create a single page.
• The alias is used as a key in the template.
• The permalink creates the the tag listing url (e.g., /tag/my-tag/).
• The path to my template, if you use a single .njk file you don’t need this.

From the template that lists the tagged posts…

<ul class="flow">
  {% for posts in posts %}
      {% if taggy.id in posts.tags %}
      <li class="post-summary-list">
        <h2>
          <a href="/blog/{{ posts.slug }}">{{ posts.title.rendered | safe }}</a>
        </h2>
        <p class="post-summary-text">{{ posts.acf.summary | safe }}</p>
        <div class="post-meta">
          <p>
            Published on <time datetime="{{ posts.date | w3Date }}">{{ posts.date | longDate }}
          </time>
        </p>
        <span class="visually-hidden">A list of tags for this post.</span>
        <ul class="tag-list" role="list">
          {% for tag in posts.tags %}
            {% for tagName in taglist %}
              {% if tag === tagName.id %}
              <li>
                <a href="/tag/{{ tagName.slug }}">{{ tagName.name }}</a>
              </li>
              {% endif %}
            {% endfor %}
          {% endfor %}
        </ul>
      </li>
      {% endif %}
    {% endfor %}
  </ul>

Here’s what’s happening…

• A “for loop” calls the posts from the Posts endpoint.
• The “if statement” checks if the ID from the Tags endpoint is present in the post (using the ‘taggy’ alias from the markdown pagination in markdown).
• Display information about the post (title, summary, date).
• The rest is the same code used in the blog post example to display all the tags for each post (which lives in a partial for easy reuse).

Here’s an example at my blog, the listing page for the Home Zoo tag.

If you wanted to use categories instead of, or in addition to, tags in WordPress it would be the same concept.

The last thing on my requirements list was to include RSS. Eleventy has a nice RSS plugin that I’ve used on most of my sites. It uses collections, so I had to do two things to get it to work with my WordPress data…

• Create a collection from the posts data
• Use computed data to make the data available to the RSS template

Here’s a example of a feed template from the Eleventy site…

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:base="{{ metadata.url }}">
  <title>{{ metadata.title }}</title>
  <subtitle>{{ metadata.subtitle }}</subtitle>
  <link href="{{ permalink | url | absoluteUrl(metadata.url) }}" rel="self"/>
  <link href="{{ metadata.url }}"/>
  <updated>{{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
  <id>{{ metadata.url }}</id>
  <author>
    <name>{{ metadata.author.name }}</name>
    <email>{{ metadata.author.email }}</email>
  </author>
  {%- for post in collections.posts | reverse %}
  {%- set absolutePostUrl = post.url | url | absoluteUrl(metadata.url) %}
  <entry>
    <title>{{ post.data.title }}</title>
    <link href="{{ absolutePostUrl }}"/>
    <updated>{{ post.date | dateToRfc3339 }}</updated>
    <id>{{ absolutePostUrl }}</id>
    <content xml:lang="{{ metadata.language }}" type="html">{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}</content>
  </entry>
  {%- endfor %}
</feed>

The relevant parts are…

• Setting the collection in <updated>
• The “for loop” of collection data
• The <entry> section

Since you don’t need to create a collection to use data files I wasn’t sure how to go about it. I found a couple of options in 11ty Rocks, a useful resource created by Stephanie Eckles. In Creating and Using Eleventy Collections there are examples and explanations of the many ways to make a collection.

Creating a collection from local data, or data in your _data directory, seemed like a clear choice, but I couldn’t figure out how to do the filtering part. Luckily there’s also an example for making a collection from a Front Matter key. I added blog: true to the Front Matter of my blog post page and created the collection that way.

In my .eleventy.js file I added the following to create the collection…

eleventyConfig.addCollection("blog", function (collection) {
  return collection.getAll().filter((item) => item.data.blog);
});

It was easy enough to add the collection in the RSS template (changing collections.posts to collections.blog) but nothing was working when I plugged in my data elements. This is where computed data came in. To populate the <entry> I needed to map the data from the Posts endpoint to something useable.

The updated Front Matter for blog posts…

---
layout: 'layouts/blog-single.html'
pagination:
  data: posts
  size: 1
  alias: posts
  addAllPagesToCollections: true
permalink: "blog/{{ posts.slug }}/"
eleventyComputed:
  title: "{{ posts.title.rendered | safe }}"
  summary: "{{ posts.acf.summary | safe }}"
  blogContent: "{{ posts.content.rendered | safe }}"
  blogDate: "{{ posts.date }}"
blog: true
---

I already had the layout; the data, size and alias for pagination, and the permalink. I added the following…

• Setting alladdAllPagesToCollections to true in pagination, this ensures all of the pages end up in the RSS feed.
• The computed data in eleventyComputed
  • The title of the post.
  • The summary (not used for RSS but useful elsewhere).
  • The full content.
  • The publish date.
• The blog key to create the collection.

And then added the new keys from computed data to the RSS template. The <entry> part of my RSS template looks like this…

<entry>
  <title>{{ post.data.title | safe }}</title>
  <link href="{{{ absolutePostUrl }}"/>
  <updated>{{ post.data.blogDate | w3Date }}</updated>
  <id>{{ absolutePostUrl }}</id>
  <content type="html">
    {{ post.data.blogContent | replace(env.CMS, site.url) | replace(env.MEDIAPATH, env.IMAGEPATH) | safe }}
  </content>
</entry>

Note: I also use CDATA within <content> but including it in this code snippet created an error in my RSS feed. You can view the full code at GitHub.

Here’s what’s happening…

• The <title> picks up the RSS page title (in this case Dana Byerly’s Digital Junk Drawer)
• The <updated> uses the computed data for the publish date and the date filter that converts the date to ISO including the timezone offset (discussed here), you could also leave the filter off if you don’t care about the timezone offset
• The <content> uses the computed data for the post content and the two Nunjucks replace filters to update the fully qualified URLs (discussed here).

Now your RSS feed should pick up the posts coming from WordPress.

My WordPress site is hosted at Dreamhost and the Eleventy site is hosted at Netlify. Dreamhost is where I register domains, and typically when I set-up a site at Netlify I point the Dreamhost registration to Netlify nameservers, which is easy and does the job.

The WordPress site uses a sub-domain of the Eleventy site. I had my WordPress site up and running well before I hooked up my Eleventy site. Once I deployed the Eleventy site and added the domain with my usual method, the WordPress site went down. Since I had pointed the nameservers to Netlify the entire domain was pointed at Netlify, which included my sub-domain at Dreamhost. Whoops!

After some frantic research I found a How to set up a custom domain for Netlify site using DreamHost as a domain registrar. Instead of pointing the entire domain to Netlify nameservers, I had to create an individual A record for my Eleventy domains:

• danabyerly-junkdrawer.website
• www.danabyerly-junkdrawer.website

And then point my WordPress sub-domain back to the Dreamhost nameservers. Regardless of where you host your sites, if you use a sub-domain of your public site for your WordPress site, this is something to keep in mind.

I like to have a build hook for all my sites that use remote data. It’s helpful to be able to trigger a build without doing a deploy. In the Deployments section of part one I cover some plugins that help by triggering builds from within WordPress, and to use them you need build hook.

That’s everything I encountered as I built my site. Your requirements might be different, and you might encounter different issues, but hopefully this series helped answer some questions or flagged issues to consider.

I’m enjoying using WordPress with my new site and would definitely use WordPress as a headless CMS for Eleventy again.

A list of resources mentioned in this article…

• How to use 11ty with Headless WordPress and deploy to Netlify and corresponding repository by Dave Davies
• How to Use WordPress as a Headless CMS for Eleventy by Craig Buckler
• Repository for my WordPress & Eleventy site
• Using Wordpress as a headless CMS for Eleventy by Mike Aparicio

• Rest API documentation site
• Media Library
• Cloudinary plugin
• GraphQL plugin

• dotenv
• Discussion on using environment variables in content
• Node Fetch
• Eleventy Fetch
• Luxon
• Partials
• Nunjucks replace filter
• Create data from pages
• RSS plugin
• 11ty Rocks - Creating and using Eleventy Collections
• Collections
• Computed data

This article assumes you already know how to use Eleventy and WordPress, and that you have a high-level understanding of headless content management as well as accessing data via API.

Part one (this article) covers WordPress set-up and concepts, part two covers Eleventy.

• Intro
• Requirements
• Basic concepts
• Setting up WordPress
  • Permalink and default category
  • Images
  • Previewing and themes
  • Plugins
    • Disable the Wordpress front-end or redirect
    • Deployments
    • Advanced Custom Fields
  • Other settings
• Select your endpoints
• Useful resources and wrap-up

Finding a good content management system (CMS) to use with Eleventy has been an area of interest around here for some time. Last year I did a test with Forestry, and eventually did a test with Netlify CMS that I didn’t write about it. Both were decent options. I still want to try some of the API-based solutions like Sanity or Contentful. Testing out WordPress was also on my list.

At the end of last year I found this article by Dave Davies and corresponding repository. I grabbed the repo and followed along with the article, plugging in one of my existing WordPress endpoints. It went smoothly and was a nice, quick validation of “yeah, that seems worth a try”. I put it aside until a good use case came up.

My test run with Dave’s example is what eventually became my new blog, Dana Byerly’s Digital Junk Drawer, affectionately known as the Junk Drawer.

My site is a simple blog with fairly straightforward requirements. I’m not planning on using anything like carousels or galleries, and my content structure is flat. It’s a vanilla blog.

• Include posts from WordPress
• Include pages from WordPress
• Include tags from WordPress
• Easy to include images in posts or pages
• RSS

You’re setting up two sites…

• WordPress site for content management
• Eleventy site to display content

You can use two different domains or a domain and sub-domain. I went the sub-domain route. For hosting I have a Dreamhost account and decided to host my WordPress site there, my Eleventy site is hosted at Netlify. If you wanted to run WordPress locally this article should be helpful.

The content at the WordPress site is accessed via the WordPress REST API to use as global data in your Eleventy site. If you’re wondering how to handle having the same content at two different site (as I was before I started this process), I’ll cover that in the Plugins section and in the Hosting section of part two.

There are a few considerations when setting up Wordpress.

• Consider your permalink structure
• Consider your default category
• Decide how you want to handle images
• Pick a theme for previewing your posts
• Add some helpful plugins
• A few potentially useful settings

There’s more details about accessing the API in the Select your endpoints section, but an important thing to note is any link to other posts or pages within your site will be fully qualified, or the full address of the url of your WordPress site.

Let’s say your WordPress site is uses the domain editor.mysite.com and your public site uses mysite.com. Any link to your other posts or pages within the content of a post will point to editor.mysite.com.

There are a couple of options for handling this in the Change fully qualified URLs section of part two, but you can make things easier on yourself by setting up the permalink structure in WordPress to match the permalink structure in your Eleventy site.

In my Eleventy site I’m using the permalink structure of /blog/post-name. For example, I have a post at this address: https://danabyerly-junkdrawer.website/blog/welcome-to-the-junk-drawer/. If I linked to it from within another post, the link would point to https://wpsite.danabyerly-junkdrawer.website/blog/welcome-to-the-junk-drawer/ (not the actual domain!). Because the permalink structure is the same the only thing I have to worry about changing in Eleventy is the domain.

Every post in WordPress has a category, and the default category is “uncategorized”. By changing the default category to “blog” every post I publish will have the “blog” category. Then, by changing the WordPress permalink structure to /category/post-name it will match my Eleventy permalinks.

WordPress has a variety of options for permalink structures to help you match the permalink structure you plan to use in Eleventy.

If you use a Featured Image in WordPress it’s treated as unique element within Posts endpoint, but images within the content of the post are part of the content. Similar to links, if you use the Media Library, the image path will be fully qualified to your WordPress site. This also means they’ll be served from your WordPress site. This may be fine for you and just something to note.

I didn’t want to take this route and ultimately decided on using the WordPress Media Library, but serving the images from my Eleventy site. And since I couldn’t figure out how to download the images from the Media endpoint, I have a little extra manual work to do on my end, and I’m OK with that. (And least for now, I guess we’ll see how it works out!).

If you decide to host images from your Eleventy site I recommend unchecking the “Organize my uploads into month- and year-based folders” option in Media settings. This will put all of your images in the /wp-content/uploads directory and make it easier to either mirror that path or replace it in your Eleventy site.

If I were setting up a similar site for a client I would use Cloudinary, which has an easy to use WordPress plugin. I gave it a test run and it produced some nice performance gains. One thing to note with this plugin is to turn off Lazy Loading, which is enabled by default. It’s useful within a WordPress site but in the API your images will only show the placeholder image that’s used before loading. If you’re an ImageKit user there is also a WordPress plugin. I also gave that try but found the Cloudinary plugin much easier to use.

This may or may not matter to you, but the previewing at your WordPress site will look different than your Eleventy site, unless you want to create a similar WordPress theme. I chose a simple theme and made a few small adjustments in the new Appearances editor. It’s fine, it’s not a one-to-one but it’s close enough.

There are several useful Jamstack plugins to help with some of the details.

When it comes to figuring out how to handle having the same content at two sites, there are a couple of options. I went with a plugin called Headless WordPress that allows you disable the front-end of your WordPress site and display a 403 page. You can still access the admin area of WordPress by going directly to the sign-in screen (example: your-wordpress-site.com/wp-login.php).

Once signed in you can also preview your posts and view your full site. But anyone trying to view the site will get the 403 error. The plugin has some other features that I’m not using, like creating custom endpoints.

Another option that I saw mentioned by didn’t try is a plugin called Headless Mode that redirects urls from your WordPress site to your Eleventy site.

So far I’ve been doing manual deployments using a Netlify build hook. Once I have a new post in good shape I’ll publish it and then fire up my Eleventy site locally to proofread and fine tune. Once I’m happy with everything I’ll run the build hook in Terminal, which triggers a build and effectively published the WordPress post to the Eleventy site.

This is fine because it’s the way I like to work, but there are other options to make the deploy and publish to Eleventy much easier. I found two plugins that look useful, but I haven’t tried either. Both offer fairly fine-grained control over what triggers a deploy, and both have repositories if you want look over the code. Neither has been updated recently, and there might also be other options.

• JAMstack Deployments plugin
• Deploy NetiflyPress plugin

The Deploy NetlifyPress plugin is not an official Netlify plugin. One difference from the JAMstack Deployments plugin is that it allows for triggering a manual deploy from within the WordPress admin, a feature that could be especially handy for non-technical users.

I’m only using this one a little bit at the moment, but I have a couple of ideas for additions that would require adding custom fields. In my usual Eleventy sites I have a “summary” key for posts that I use on listing pages and in the meta description.

My first thought was to use the WordPress “Excerpt” field, but I couldn’t find a way to make it required that didn’t involve mucking around with WordPress code. If you don’t populate the Excerpt field WordPress will use the first 55 characters of your post, which might be fine for your use case, but I wanted to make sure I always included it.

To make minimize the inevitable “ugh, forgot the excerpt again” scenario I created a “summary” field using Advanced Custom Fields and made it required.

There are a few other settings I’ve changed to make things a little easier.

• Only displaying the fields I want to capture in the create/edit post interface
• Setting the editor to use the theme styles
• Turn off pre-publish checklist
• Discourage search engines from indexing the site

The first three changes on my list were changed in Preferences for the editor, which can be found under the kabob icon in the upper right in create/edit post.

There are three sections available: General, Blocks and Panels. In General you can turn off the pre-publish checklist and change the editor to your theme styles. The pre-publish checklist adds additional steps, if you don’t find them useful it’s easy to turn them off. I wanted to write in dark mode and had set up my theme to use dark mode (you can also add a plugin to modify the entire admin area to use dark mode if you like).

In the Panels section of the Preferences you can specify which fields you want to display in the Post settings panel that displays in the right column (you can also hide the column all together). I’m displaying only permalink, tags and the Advance Custom Fields summary field that I added.

In the Reading section of settings (from the main sidebar) I checked “Discourage search engines from indexing the site”. I don’t know if this is helpful since the content is restricted, and I didn’t look into it. File this under “just in case”.

WordPress makes a lot of data available via its REST API, and depending on what you’d like to use in your in Eleventy site you may need to access multiple endpoints. You can view all the available endpoints in the documentation as well each field included in the endpoint, for example in the Posts endpoint.

The best way to get a sense of what’s available to you is the hit an endpoint and see how the data is returned. The general structure of the endpoints is the url for the site plus /wp-json/wp/v2/posts where posts is the endpoint.

I use browser extensions to format and view JSON directly in the browser, Basic JSON formatter in Firefox and JSON viewer in Chrome. Using an example from this WordPress and Eleventy repository by Sami Keijonen (which also has a corresponding site), you can hit the following endpoint with your browser and see how the data comes back:

https://11ty.foxnet.fi/wp-json/wp/v2/posts

Look at all those fields! Two other things to note…

• The content and excerpt come back as HTML
• The default is to return 10 records

I decided to return only the fields I planned on using, which can be done by using the global parameter of _fields. You can also return up to 100 records at a time by using pagination.

Here’s the above endpoint with fields and pagination added:

https://11ty.foxnet.fi/wp-json/wp/v2/posts?fields=id,title,slug,date,content,tags&per_page=100

When you hit the updated endpoint you’ll notice that it’s only including the fields specified and there are 44 records returned instead of 10.

The endpoints I included in my project were Posts, Pages, and Tags. Why Tags when there’s a “tags” field in the Posts endpoint? Because in the Posts endpoint the tags field only includes the ID for each tag.

In the example endpoint above, in the record for the first post there is one tag with a value of “58”. In order to display the name of the tag I need to pull it from the Tags endpoint.

There is a global parameter for embedding, which allows you to include linked content for authors and “terms” (categories and tags). However when combining _fields and _embed the fields parameter is not respected. There’s no mention of how to use them together in the documentation, but I did find this open bug that also included a workaround. Using our example endpoint…

https://11ty.foxnet.fi/wp-json/wp/v2/posts?_embed=true&_fields=id,title,slug,date,content,tags,_links&per_page=100

Now you’ll see a field named _embedded that includes authors and wp:term. The field wp:term includes categories (0) and tags (1). I was able to update my Posts endpoint to include the embedded content, but couldn’t figure out how to render it. Perhaps you’ll have more luck than I did! If not, it’s straightforward to include the Tags endpoint and reference the additional information.

Depending on your set-up you could encounter additional issues and things to consider, but hopefully part one answered some of your basic questions around WordPress set-up. Part two on Eleventy set-up covers the things I encountered as I integrated my working proof of concept into my Eleventy starter.

A list of resources mentioned in this article…

• How to use 11ty with Headless WordPress and deploy to Netlify and corresponding repository by Dave Davies
• How to Use WordPress as a Headless CMS for Eleventy by Craig Buckler
• Site - Testing WordPress as a backend and Eleventy as a frontend and corresponding repository by Sami Keijonen
• Using Wordpress as a headless CMS for Eleventy by Mike Aparicio

• Rest API documentation site
• Using permalinks
• Featured image
• Media Library
• Media settings
• Editory preferences
• Reading settings
• Excerpts

• Advanced Custom Fields
• Cloudinary
• ImageKit
• Headless WordPress
• Headless Mode
• JAMstack Deployments
• Deploy NetlifyPress (not an official Netlify plugin)
• Customize Appearances Screen

• Firefox extension - Basic JSON formatter
• Chrome extension - JSON viewer
• Netlify build hooks
• Eleventy global data

The idea to create a separate blog from this site crept up on me. In last year’s annual recap I noted that I wanted to start writing more, and not only about web dev stuff. Yet every time I thought of writing something not specific to the web, or my projects, it felt odd to do it here. So I just didn’t.

The opportunity presented itself to create the new site and test out using WordPress as a headless content management system (CMS) for Eleventy. I had previously played around it with enough to validate it was worth a closer look, thanks to this article by Dave Davies.

Overall it went pretty smoothly! I’m currently writing up the process to publish here as an article, although it’s going slowly. And, it’s a bit longer than I expected. Once I have it all done I may break it into parts: one for setting up WordPress and one for setting up Eleventy. Hoping to at least be close to being done by the end of the week.

In the meantime, check out my new blog, the somewhat ridiculously named Dana Byerly’s Digital Junk Drawer. So far it’s been fun having a new context-free space to emit whatever pops into my head.

It’s almost coming up on the two year mark here at this site! I’ve been kicking around some ideas for redoing, or at least tweaking the homepage. Nothing drastic, but a freshener nonetheless. I also have a plan to clean up the Projects section.

I recently saw a relatable post in the Eleventy discord, “I have arrived at that point in my Eleventy career that I tackle computed data”. Thanks to the Junk Drawer project I recently arrived at the point too! And, it’s given me some insight on how to address something in the Projects section I’ve been wanting to figure out. I’ll talk more about that when I get to it, and about using computed data in the Junk Drawer in the upcoming WordPress/Eleventy article(s). (Articles are now posted!).

In the meantime I’m busy trying to maintain some level of composure and consciousness in the heat, hope you’re having better luck than I am!

In February I launched a personal site for my dear friend, writer extraordinaire Rhonda Lieberman. She is extremely not online, and it took several years to talk her into it. Persistence paid off and now she has a nice little “calling card” site, as she refers to it. I’m going to do a separate post about the site in the near(ish) future, But it should be no surprise that it’s built with Eleventy!

Also in February, and also related, I redid the site for one of Rhonda’s projects, The Cats-in-Residence Program. The project ran from 2013 to 2016, but started in the late 90’s in an empty lot in Long Island City, Queens.

I’m going to write a separate post about this one too, but the gist is that the previous version was a quickly thrown together WordPress site. It had been on my list to clean up and move to Eleventy, and having it prominently featured on Rhonda’s site was the push I needed.

Another reason I’m happy to have given it a nice clean up is that it’s a really cool project! And I’m proud to have been involved as a Cat-Tweeter, Instagrammer, zine contributor and Web Meowster (…sorry).

I previously mentioned that I was working on a couple of projects for a friend and wanting to slowly work my way into freelancing. I’m still not currently thinking about ditching the day job, but I would like to continue to do little, well-crafted sites for individuals or small businesses. In fact I have another one in the hopper that hasn’t started yet.

With that in mind I’m not adding either of these sites to the Projects section of this site. I define “projects” as sites I do for myself. This brings me to a somewhat existential question… do I add a “Work” section here or start a separate site for freelance/client work?

I’m leaning heavily towards a new separate site, as “Work” would imply my “Portfolio”, which would include work from my vast collection of jobs over the last twenty some years. And honestly I just don’t want to do that. Trying to figure out how to represent that feels too much like work itself.

I don’t have a timeline for any of this, which perhaps is the best part (see previously mentioned burnout). In the meantime, I’ve been doing a lot of digital housekeeping, and have found many an odd and hilarious item. I may start a Twitter thread of some of the better ones as I slowly emerge from burnout.

I spent an easy, breezy few hours updating 10 projects to the latest version of Eleventy. As a hobbyist dev with limited debugging skills I live in fear of these sorts of things. I’m happy to report the process was easy and I only encountered one issue for 10 sites.

It’s not surprising that I couldn’t find any step-by-step posts on upgrading given how easy it was. I put the steps together for myself (to do 10 times!) so I thought I’d share them.

There’s a handy Eleventy Upgrade Helper plugin that will check your site against all the breaking changes. The README serves as a good summary of breaking changes that could impact your site.

1. Install upgrade helper plugin
2. Install upgrade
3. Remove upgrade helper plugin (or not!)

This part has two steps, installing the plugin and adding the plugin to your site. You can do these in either order.

npm install @11ty/eleventy-upgrade-help

And then in .eleventy.js

const UpgradeHelper = require("@11ty/eleventy-upgrade-help");

module.exports = function(eleventyConfig) {
 eleventyConfig.addPlugin(UpgradeHelper);
};

I started up the first few sites after installing the plugin to make sure the plugin didn’t cause any issues, and it didn’t.

Initially when I tried npm update @11ty/eleventy the update didn’t happen. I solved this by manually updating the version number in package.json but there’s also probably a way to do it via the command line (adding @latest? maybe?).

You may not need this step but if you do, update the Eleventy version in package.json

"@11ty/eleventy": "^1.0.0",

And then hold your breath and update…

npm update @11ty/eleventy

All of my projects but one had some additional dependency updates, and all of those were straightforward and fine.

At this point when you hold your breath and test your site, the upgrade helper will give you guidance on any issues in your site in your terminal.

[@11ty/eleventy-upgrade-help] PASSED `slug` to `slugify` filter
[@11ty/eleventy-upgrade-help] WARNING eleventyConfig.setDataDeepMerge(true) is the new 1.0 default. Revert with eleventyConfig.setDataDeepMerge(false);
[@11ty/eleventy-upgrade-help] WARNING The liquidjs `strictFilters` option default (in Eleventy) changed from false to true. Revert with `eleventyConfig.setLiquidOptions({ strictFilters: false })`.
[@11ty/eleventy-upgrade-help] WARNING The liquidjs `dynamicPartials` option default changed from false to true. Functionally this means `include` statements require quotes now. Revert with `eleventyConfig.setLiquidOptions({ dynamicPartials: false })`.
[@11ty/eleventy-upgrade-help] PASSED input directory .gitignore check

• Remove the plugin from .eleventy.js
• Remove the plugin as a dependency in package.json

I was already using slugify on most of my sites and I don’t use liquid or deep data merge, so I figured I wouldn’t encounter too many issues. As it turns out, this post was a good test for slugify, which I was not previously using here.

Once I added this post the upgrade helper fired this message:

'Upgrading to Eleventy 1.0.0'
Expected values to be strictly equal:
+ actual - expected

+ 'upgrading-to-eleventy-1.0.0'
- 'upgrading-to-eleventy-1-0-0'

Decision time! I could update the site to use {{ title | slugify }} instead of {{ title | slug }} for permalinks, which would change the output to drop the special characters (in this case the periods) and replace them with dashes. Or I could just leave it as is.

Miraculously I don’t have any other posts with special characters in the title. This made it an easy choice to update all my permalink instances from slug to slugify without having the additional step of setting up redirects for the changing urls.

The permalink change looks like this…

"permalink": "/notes/{{ title | slugify }}/index.html"

The showstopper issue was that one of my site’s builds was failing at Netlify. This is the kind of debugging scenario mentioned earlier that I live in fear of.

12:57:43 PM: > NODE_ENV=production eleventy
12:57:43 PM: Eleventy requires Node 12. You will need to upgrade Node to use Eleventy!

OK, but I’m using 15.3.0 locally, so I’m not sure what to make of that. Fortunately it was the Eleventy community to rescue by way of a post by Sean McPherson on the same issue.

Should you encounter this issue, the fix is to add an environment variable to your Netlify deploy settings that specifies a Node version.

1. In the settings for your site, go to Build & Deploy > Environment
2. In the Environment variables section click “Edit variables”, which will make the section editable
3. Click “New variable” and add the following…

Key: NODE_VERSION
Value: 16.13.2

After adding the environment variable the site deployed!

Update: Maël Brunet offered a helpful tip via Twitter, pointing out that using a .nvmrc file to store the Node version should have the same effect. I’m not using Node Version Manager (nvm), but you can create the file manually and Netlify, or presumably any host, will read the file.

To test it out I deleted the environment variable at Netlify and created file named .nvmrc at the root of my project. In the file I added the version number like so…

16.13.2

It worked as expected! Christopher Kirk-Nielsen also suggests checking to see if you already have a .nvmrc file that needs to be updated. Even if you didn’t create a file you might be using a starter project that included one.

Regardless of which approach you use, be sure to check the recommended latest version, which might be different than my example.

You may encounter issues I didn’t depending on your set-up. If that’s the case I wish you luck and hope your debugging skills are better than mine! Either way, happy upgrading.

I was relieved to find out that the ominously named vitreous detachment that occurred is a relatively common and usually uneventful part of aging. The flashing has slowly been improving, but the floaters are here to stay. The good news is that I’ve already started noticing them less.

I was also diagnosed with early stage cataracts, which explains things like why I frequently ask “does it look smokey to you?”. I suppose it’s been easy to overlook that as a symptom with wildfire smoke regularly making its way to these parts, but still an alarming indicator of what’s to come (both the cataracts and wildfires).

Dark mode and dark themes are not my personal preference, except for coding. In addition to having a bunch of dark spots and lines floating around between me and whatever I’m looking at, I’ve also become more sensitive to the glare of light themes.

I quickly started using dark mode and switching sites and apps to dark theme where available. And wow, I had no idea how many major sites don’t offer it. I was in no position to cast aspersions given that this site didn’t have one until yesterday.

I incorrectly thought of dark mode and dark themes as more of a personal preference rather than removing a barrier. I’m a bit ashamed of myself for that, and am going to write a post about what I’ve learned about dark mode and themes in the near-ish future.

Adding a dark theme has been on my to-do list since I launched this site. I wanted to implement it with a manual toggle, but even with excellent tutorials like this I was still having trouble pulling it off. I want to come back and add one, but now I realize that it’s better to offer one based on user preference than to not have one at all.

Since I’m already using CSS custom properties it was pretty easy to add another level for themes and use prefers-color-scheme:dark. I also already had notes on what to make theme specific.

My original set-up defined a handful of colors like this…

:root {
  --color-primary: #00365d;
  --color-secondary: #c07;
  --color-primary-highlight: #7cc7de;
  --color-secondary-highlight: #f2d1f5;
  --color-primary-tint: #f6f9fc;
  --color-secondary-tint: #f9e9fa;
}

The original approach applied those colors directly to selectors. For example, the color for a was set to this…

color: var(--color-primary);

The update added custom properties for each item that would change based on theme. So a changed to this…

color: var(--link-color);

The default theme is light, in :root {} the link color is set like this…

--link-color: var(---color-primary);

Using prefers-color-scheme for dark it’s set like this (along with all the other theme specific properties)…

@media (prefers-color-scheme: dark) {
  :root {
	--link-color: var(--color-primary-highlight);
  }
}

It took less than five hours to get the whole thing done, and for the most part I like it. More importantly, the site is easier to use for with anyone with sight issues that make light theme hard to use, or for those of you who simply prefer it!

I already did a year-in-review of sorts a few months ago on the one year anniversary of this site. One thing that’s changed is that I’ve added Plausible for analytics, so far so good, and Plausible has a very nice dark theme!

One of the things I mentioned that I hope to do more of around here is broaden my writing topics. One post I planned to do was a “Crime drama series I watched this year”. Most evenings after I step away from my computer I watch crime drama, non-American crime drama series to be specific. There’s no shortage of excellent, or at least serviceable, crime drama shows.

I was going to list everything I watched, including the country. Do a bar chart of countries (more for my curiosity and to use a neat Eleventy trick using permalinks for custom file formats ). Plus make a few recommendations as well as mention shows I stopped watching or didn’t like.

I might come back and do that post, but here are two recommendations that are admittedly due to recency bias since I watched them in last couple of months. But, the biggest recommendations of everything I watched in 2021 are Pustina (Wasteland) and Bez Vedomi (The Sleepers).

Both are from the Czech Republic and directed by Ivan Zachariáš (Wasteland was co-directed with Alice Nellis). They’re both substantive with a strong sense of place and even with very different settings each is uniquely stylish and well seen.

Wasteland is set in present day in a bereft town divided on being taken over by a foreign mining company. The Sleepers is set in 1989 against the backdrop of the Velvet Revolution and is really more of a spy games story than a crime drama. Twists and turns abound in both.

Without drawing this post out even further, both of these shows were the most satisfying shows I watched all year. Plot, timing, characters, acting and directing were all very well done.

Zachariáš has a new one in pre-production called The end of the World that I’m looking forward to. I’m also looking forward to the new season of the Finnish show Kaarpi (Dead Wind) on Netflix and the final season of the Welsh show Craith (Hidden), presumably on Acorn.

Here’s to a happy, healthy 2022 full of usable, accessible sites and satisfying crime drama series (or whatever you like)!

I only spent a couple of hours looking, so I’m sure this is nowhere close to complete, but here are a few that I found.

• Accessibility of the section element - Scott O’Hara
• HTML inputs and labels: A love story - Amber Wilson via CSS Tricks
• Not your typical horizontal rules - Sara Soueidan
• On the dl - Ben Meyers
• ol vs. ul vs. dl - HTML Hell
• The section element - HTML Hell
• The track element - HTML Hell
• Use the “i” appropriately - Jens Oliver Meiert
• What are H tags? - Bureau of Internet Accessibility

There’s also a 150 days of HTML Substack with plenty of love letters to individual elements. Too many to list here!

I found many of these in the Webdev newsletter. If you’re not familiar I wrote a bit of a love letter to it in a previous post.

Am I missing a good post on a HTML element? Let me know!

what’s ur favorite rare HTML tag (repeats get executed, let the games begin) — @xdesro

I answered <time> (although I also like <hr> and <mark> quite a bit).

What is <time> and why should you use it? Henry sums it up nicely…

perfect for communicating in both human-readable language and machine-readable language. bilingual cyborg stuff — @xdesro

MDN summarizes…

The <time> HTML element represents a specific period in time. It may include the ‘datetime’ attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders. — MDN

Cool. But how do you use it?

I use <time> on this site for publish dates. If you inspect any of the “Published on” dates, you’ll see something like this:

<time datetime="2021-09-07T00:00:00.000Z">September 07, 2021</time>

There are a variety of formats that can be used for datetime. I’m using ISO date (2021-09-07) and global time (T00:00:00.000Z), which in this example is midnight UTC. More on that in a bit.

There are several of ways to add a date to your posts. Per the Eleventy Content Dates page you can add a date key to your post’s Front Matter.

title: "My cool post on using the time element with Eleventy"
date: 2021-11-16

About the previously mentioned midnight datetime output, if you don’t include time with your date Eleventy will assume midnight UTC. More about UTC in the Time Zones section.

If you don’t explicitly add the date, Eleventy will look for a date in the file path and use the first one it finds. If there’s no date present in the path it will use the file creation date (which will include a time!).

I use Luxon to handle date formatting. It’s fairly straightforward and offers a variety of formats. To use Luxon you’ll install it and then add some filters to your .eleventy.js file.

npm install luxon

I picked up the filter approach from the excellent Learn Eleventy from Scratch course, but have since switched to Luxon given that Moment is now maintenance mode. The general approach is still the same. Create two filters, one to display the date and one to use in the datetime attribute.

In your .eleventy.js file add the following

const { DateTime } = require('luxon');

And then in the module.exports section of eleventy.js…

  eleventyConfig.addFilter('longDate', dateObj => {
    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('LLLL dd, yyyy');
  });

  eleventyConfig.addFilter('w3Date', dateObj => {
    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toISO();
  });

The longDate filter displays the date as “November 16, 2021” and the w3date filter displays the date in a machine readable format.

Post listing pages use…

Published on <time datetime="{{ item.data.page.date | w3Date }}">{{ item.data.page.date | longDate }}</time>

Individual posts use…

<time datetime="{{ page.date | w3Date }}" class="dt-published">{{ page.date | longDate }}</time>

If you look at the top of this page you’ll see the output.

Al Power has a slightly different approach to formatting using Luxon’s presets if you’re interested.

As mentioned above, Eleventy assumes UTC for date and time unless you specify otherwise. If you look at the filters above you’ll notice the zone is set to UTC. Luxon gives you some options on how to specify zone.

For example, you could specify your local time zone by changing zone to zone: 'local' or more explicitly zone: 'America/New York' in my case. However, this approach is not recommended as it can cause your dates to be a day off.

The Eleventy documentation explains…

Many date formats in Eleventy (when set in your content‘s filename as YYYY-MM-DD-myfile.md or in your front matter as date: YYYY-MM-DD) assume midnight in UTC. When displaying your dates, make sure you’re using the UTC time and not your own local time zone, which may be the default. — Eleventy

There are plenty of ways to format your dates with Luxon. For displaying dates on the site I’ve gone with LLLL dd, yyyy as a token which outputs November 16, 2021. You can peruse the lengthy table of tokens as well as presets to find your preferred format.

For datetime I’ve used .toISO(), which will output ISO standard date and time. If you wanted to use date without time you could use .toISODate. Week or time only are other options that aren’t a good a choice for a post’s publish date, but could be handy for other scenarios.

Can you use <time> without including datetime? Absolutely. You can wrap any date or time and get the benefit as long as you’re using valid values.

<p>I started working on the web in <time>1996</time>.</p>
<p>I can barely wait until <time>11:00</time> to eat lunch.</p>

The <time> tag makes a crucial bit of information about your post understandable to both humans and machines. You know, bilingual cyborg stuff.

Search engines are the most ubiquitous use case. You want people to be able to find your posts, and <time> can help ensure that.

From the Bing Webmaster tools help & how-to…

Use HTML5 semantic elements as they have am intrinsic meaning to browser, developer and search engine, especially use the following HTML5 Semantic Elements: <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <ection>, <summary>, <time>. — Bing Webmaster Tools

IndieWeb participation is another benefit of using <time>. The basic premise of IndieWeb is that you should own and control your content rather than relying only on third party services.

For example, instead of posting only on a platform like Medium or Dev.to, you would post on your own site and syndicate out to third parties (or not!).

When you post something on the web, it should belong to you, not a corporation. Too many companies have gone out of business and lost all of their users’ data. By joining the IndieWeb, your content stays yours and in your control. — IndieWeb.org

Owning your own site is one element of IndieWeb. There are plenty of other aspects and ways to participate. Webmentions are the most well known, but you can also sign-in to sites using your own domain with IndyAuth and take part in the Homebrew Website Club, an active worldwide community with many chapters.

An easy way to get started is to use microformats to markup your posts, which makes them easier to syndicate to other sites.

h-entry is a simple, open format for episodic or datestamped content on the web. h-entry is often used with content intended to be syndicated, e.g. blog posts. h-entry is one of several open microformat standards suitable for embedding data in HTML. — Microformats.org

In fact I added both h-entry and h-card to my site as a result of researching for this post! Previously I had only been aware of Webmentions, so I’m happy to take some steps towards IndieWeb participation.

Back to <time>, there are four properties that h-entry needs at a minimum to be valid.

• The overall content needs to be indicated
• The name of the post
• The canonical url
• The datetime the post was published

Properties are marked using class names.

The ‘dt-published’ property should be a <time> element so that you can take advantage of HTML5’s “datetime” property. — Microformats.org

If you recall the code example earlier used in the post layout to display date, the dt-published property is included.

<time datetime="2021-11-16T23:00:00.000Z" class="dt-published">November 16, 2021</time>

Here’s an example of my previous post at h-entry validator at IndieWebify.me. In-depth information and examples can be found at the h-entry page at the Microformats wiki.

Time-based events are another way that <time> can be useful. Having machine-readable time elements makes things like adding an event to your calendar or viewing an event’s schedule in your local time zone possible. You can see examples of both such features at THE Eleventy Meetup site!

The <time> tag is a great addition to your site even if you don’t participate in IndieWeb. It handily won round one in Laurie Voss’ impromptu HTML madness bracket game, although it didn’t fare as well in round two and did not move on to round three.

Update: The results are in! <a>, the humble workhorse in use since Web 1.0, cruised to an easy victory over the deprecated <marquee>.

• HTML Goodies - It’s Time for an HTML5 Time Tag
• IndieWebify.me - A guide to getting you on the IndieWeb
• Why IndieWeb
• Timestamp converter - Useful for troubleshooting the “day behind” problem
• Max Böck - Using Webmentions in Eleventy
• Sia Karamelegos - An in-depth tutorial on Webmentions and Eleventy
• Amber Wilson - Grow the IndieWeb with Webmentions
• Evan Sheehan - Webmentions: Joining the IndieWeb
• Ben Myers - On the dl - A look at another useful semantic HTML element

I knew this day was coming, I was just hoping it would arrive a little later. When I built them in 2017 I was just starting to skill up on webdev after a long hiatus, and I made several not-so-great choices in order to get the project done. The main not-so-great choice was mixing markup and content in WordPress. Don’t do that.

Despite not wanting to deal with it, the timing worked out well. The project I’m doing for a friend needed to go on hold for a few weeks so I decided to do what I thought would be a little test. A few weeks later Stakes Profiles now have a standalone home.

Stakes Profiles are data visualizations of trends for Thoroughbred horse racing stakes races since 1991. They were created to answer simple questions like “how have favorites performed in this race historically?” and “what kind of running styles have performed well, or not”. The project was active between 2018 and 2019 and is not currently being updated.

Each profile looks at several data points, or angles as they’re called to in racing circles, to show trends using charts. For example for odds and payouts of winners I use a straightforward bar chart to show odds and then include a set of average and median odds and payouts for the full time period and the last years.

I built the charts using Google Charts, mostly because they were relatively easy to work with and I could get them to work within WordPress. I also wanted interactive charts rendered from data rather than having to export images. In addition to liking interactive charts, having to update the data and then export and images was one step too many. Ultimately even keeping the data up to date proved to be too much work for the amount of interest they generated (i.e., not much!).

The posts were essentially flat files with all of the writing and charts contained with the post. My goal for the new site was three-fold…

1. Separate the content and layout
2. Not rework the charts and writing
3. Create a well-built, more accessible and performant site

I did need to do a little tweaking here and there but overall I kept to those goals. It turned out to be easier than I imagined, but it was a journey of both good and bad. The good was Eleventy, let’s start there.

The original posts lent themselves to setting up a templated layout, which kicked off the effort with a smooth start. They were written in such a way that there was very little variation in the overall structure of each section’s summary. What started as a way to make year-over-year updates manageable ended as a way to make creating an archive easy.

It took about a week of futzing with the template to see where I could plug in data and where it needed to be more freeform. If I were starting this project from scratch I might have gone the Airtable route as I’ve used Airtable with Eleventy with success on more than one occasion. But I decided to go with Collections and front matter, and it worked out really well.

Front Matter is very versatile. In addition to allowing you to add tags, publish dates and excerpts for your posts, you can add all sorts of structured data. You can also conditionally display elements based on whether or not a post contains either a key or value in its Front Matter.

For example, in the Odds section, some races had longshot winners that skewed the chart, making it hard to get a good overall understanding of the data. In those cases I left them out as outliers and noted it before the chart. Using the key of “oddsOutlier” I was able to conditionally display that info if the race has that data.

From the Breeders’ Cup Mile Odds section…

oddsOutliers: "2011 winner <b>Court Vision</b> has been excluded from the chart below as an outlier at $1 odds of 64.8-1"

Compare that to the Odds section for the Arlington Million, which had no outliers in the time period.

There’s a standard set of key/value pairs that all profiles share, and then there are three groupings of additional key/value pairs based on the type of race depending on the type of race.

For example, races for older horses have additional sections that look at how the different age groups have fared and how “run backs”, or horses who have run in the race multiple years have performed.

Each section has an intro, so if the ageIntro key is present the age section is included.

{% if ageIntro %}
 {% include 'partials/age.html'%}
 <hr role="presentation">
{% endif %}

Another nice trick is that you can create arrays with key/value pairs. I used this to populate tables by looping over properties within a Front Matter key.

Using the Breeders’ Cup Mile again, the odds by age group table uses this kind of set-up.

The data in Front Matter…

ageOdds: [
{age: "3", starter: "$16.40", winner: "$7.70"},
{age: "4", starter: "$19.30", winner: "$8.30"},
{age: "5", starter: "$22.30", winner: "$8.30"},
{age: "6", starter: "$21.00", winner: "$25.70"},
{age: "7", starter: "$25.70", winner: "$24.30"},
{age: "8", starter: "$10.70", winner: "0"}
]

And then in the partial for the Age section the table loops over the data…

<table>
	<thead>
	  <tr>
		<th>Age</th>
		<th>Average Starter Odds</th>
		<th>Average Winner Odds</th>
	  </tr>
	</thead>
	<tbody>
	  {% for item in ageOdds %}
	  <tr>
		<td>{{ item.age }} year-olds</td>
		<td>{{ item.starter }}</td>
		<td>{{ item.winner }}</td>
	  </tr>
	  {% endfor %}
	</tbody>
</table>

Which displays the data. You can also see it at the site!

The Breeders’ Cup Mile is a good Front Matter example for this project in that it has several conditional sections. Feel free to view it in all of its 61 lines of glory!

Upgrading the basic HTML and CSS did a lot to improve the overall accessibility. And while the color contrast in the charts was pretty good the first time around, I took a closer look and made several small adjustments to try to ensure that contrast works for everyone.

The biggest change was in the Bettors’ Choice and Field Size charts which have two bars per year. The original version had enough contrast between the two bars but one was too light against the white background. Now the two bars have 3.02:1 ratio contrast between them and both are over 3:1 with the white background.

I also tweaked the colors in the stacked bars for Running Style and Age to ensure that all colors have at least 3:1 contrast against the white background.

There are a couple of areas for improvement. The green and gray bar stacks have 3.69:1 contrast between them but the gray does not have enough contrast against the white background. The running style line charts are a mixed bag (read probably mostly not sufficient contrast) as they colors are Google default.

The “ugh” part of this project are the accessibility issues with Google Charts. The good news is that most of the chart types I used include a tabular representation of the chart data, and those are announced by screen readers.

The bad news is that the data is only announced after the graphical representation of the chart is announced. Every tick, every line, every image of a bar is announced as “an image”, and in some cases that can be upwards of 50 images announced as “an image” before anything useful is announced. And I couldn’t find a way to have only the data announced.

If I were doing this project from the start and decided to use Google Charts, I would hide the charts from screen readers and create my own tabular representation of the data for screen reader users. Unfortunately I don’t have the time or wherewithal to do that now.

In the Intro section of each profile I added the following text for screen readers using visually hidden text…

A note to screen reader users. The interactive charts on this site are built using Google Charts. There are two major elements to each chart, the images used to display the chart and a tabular representation of the data within the chart. Unfortunately the charts are structured to announce all of the images before announcing the tabular data. In some cases this will mean upwards of 50 images get announced before the data. If you’d like to provide feedback please visit the Accessibility Statement for information.

I’ve also included information in the Accessibility Statement (which will look familiar if you read this section since I repurposed a lot of the explanation!). I thought about hiding the charts from screen readers all together and noting it, but thought it was probably best to leave them as is and provide explanation and a method for feedback. And if you have opinions I would love to hear them!

Another “ugh” aspect is the pages with charts take a big performance hit, which is not a surprise considering how many charts I have the on each page. There are probably things I could do to improve performance if I were a little better at JavaScript. I did choose to use the system font stack to help with performance!

One thing I did try was adding {async: true} as suggested here but I didn’t see much of a difference. Going the route of providing charts as images rather than interactive would no doubt improve performance.

It’s nice to have the Stakes Profiles in a new home. Despite not working out the way I thought they would, they represent a lot of work and provide a different way to interact with racing data than you’ll find in the racing industry. I wrote a little bit about that at my semi-defunct racing blog if you’re interested.

I’ve also created a Ko-fi account and added it here and to most of my other projects if you’re inclined to leave me a tip! Next up I’ll be getting back to the friend’s project and hope to have that wrapped up by the end of November.

Initially I set out to create a place where I could share and talk about my side projects as well as whatever I was learning at the time. Over the past year that’s mostly been centered around Eleventy, the static site generator used to create this site. I don’t use any analytics on this site so I have no idea which posts were visited the most, but I do have a RSS feed, and at least one follower in Feedly (which is me, I am my own follower).

Without knowing what anyone else found helpful, here are a few posts that I found helpful and enjoyed writing.

• Using Airtable with Eleventy
• Dynamic heading levels in Eleventy
• Testing Forestry CMS with Eleventy

In addition to Eleventy I’ve also been learning more accessibility, and I’ve written about that as well. Some highlights include creating accessible and responsive tables for an Eleventy project and taking a look at the level of accessibility of NYC mayoral candidates campaign sites. I’ve also created an Accessibility Statement for the site.

The other major topic has been my projects, and in the past year I’ve given four of them major updates and have one that gets updated each year.

• Random Replay Generator spiff up
• Horse Racing Datasets redesigned
• Responsive and Accessible Data Tables
• Migrating the Pile
• Annual Kentucky Derby 8 ball

I’ve also written about little updates around here like the footer and adding a Style Guide, the homepage and Projects landing page and optimizing images.

When I launched the site I had an initial What’s next list, here’s how it fared…

Completed or at least worked on:

• Tightening up the CSS
• Improving accessibility
• Maybe expanding the color palette a bit
• Add more details to some of the Projects
• Add release notes (decided to call it Changelog)
• Keep on fiddling (evergreen!)

Still might do:

• Adding a dark mode for the prefers-color-scheme: dark among you
• Adding ability to toggle between dark and light mode
• Depending on the volume and type of writing I end up doing I might make individual feeds for Articles and Notes (assuming someone other than me eventually subscribes to my RSS feed)
• Maybe eventually add a Photos section

It’s been fun having the site, I’ve enjoyed tinkering and making improvements as I go. First and foremost the tinkering will continue.

Most of my longer form writing has been the “Hey I just figured this out” style of how-to. I love this approach and it’s helped me to better understand what I learned as well as remember what I’ve learned. I’ll likely keep doing these.

I’m also going to try to write more observations and thoughts, and maybe even some posts that aren’t about the Web. One idea I’ve been kicking around is doing some Personal Wayback Machine posts of old work. As an Internet Old (and a plain old Old) I have projects going back to the 90s, which can be both embarrassing and awesome.

Now that this site is in pretty good shape and I’ve completed updates on my major side projects, I’m hoping to eventually pick up some small freelance gigs here and there. I’m currently having fun working on a couple of projects for a friend and would like to help independent creative people or small businesses have nice performant, accessible sites. I guess we’ll see how that works out in next year’s “year in review”.

This is more fine tuning than overhaul. The original spacing and rhythm were too tight, and the Project cards felt like a first draft, mostly because they were.

A few small updates made a big difference…

• Removed blurbs under section headings
• Changed section header color
• Simplified the Featured Projects cards

The updated project card is specific to the homepage. The previous version used the same layout as the Projects landing page, allowing a visitor to view the project page or visit the project directly. I left that option on the Projects landing but stripped it out here for simplicity, thinking that if someone is really interested in my projects it might make more sense to scan them all and decide whether to read more or just visit it.

Since I don’t current use a stats package, mostly for mental hygiene, I have no idea if anyone ever went directly to a project from the homepage. A trade off I’m willing to make!

If you’ve ever looked around this site you may have noticed I’m a boring designer. My work is frequently devoid of all the little nice touches that put some polish on a UI. The hover and focus state on the Project card is one such detail that could be considered a nice touch, even trending towards delight. The overall approach for the card came from Adrian Roselli’s Block Links, Cards, Clickable Regions, Rows, etc.

Once I got the Featured Project card done this was a quick update, basically just changing colors and leaving the original structure in place.

In isolation I liked the original project cards, but a big long page of them was a bit much. The new toned-down design is a bit more boring (hello!) but overall easier to scan. And if ever get around to making a dark mode for this site that design will be coming back!

There are a few unsavory image sizing things that happen as the screen is resized. I’m going to come back and redo most of the images and standardize the sizing or aspect ratio a bit more to help with that.

I also found a bug that’s been out there this whole time. The grid container I used for the cards had the minimum width set at 18rem, which meant that on the smallest screens it was too wide. I fixed that by setting the minimum to 16rem.

It’s been a year since I launched this version of the site, and I’ve been doing some thinking about what I’ve learned and what to do next with the site. More on that in a bit.

While on hold I worked on a long standing to do item for this site (redesigning the footer) as well as a bonus “what the hell!” item (a minimal Style Guide).

When I launched the current version of the site last year I rushed a couple of things at the end, one of them was the footer. The original version was OK, but a bit jumbled, especially on smaller screens.

After using Personal Sites to quickly look at a bunch of different sites I was inspired to knock out a more simplified version.

The changes include…

• Moving to three columns for links
• Removing “Back to top”
• Removing underline from list of links, but leaving underlines in sentences

Initially I was going to get rid of the icons, but I kind of like them, and the new layout addressed what was annoying me about the original layout. I’m going to add the “Back to top” within the content area for posts and project pages, probably as a text link below the “Next” and “Previous” paging, but it’s on the to do list for now.

This was relatively low on my list, but Personal Sites made it so easy to look around that I got inspired to do this one too. It’s minimal for now but I might come back and create a specific template to make it easier to illustrate state-specific things, like the style used for selected text.

It’s coming up on a year since I launched this version of site and I’m going to try to get at least one more thing on the list done before then. Wish me luck!

Pinboard seemed like the most likely candidate as it’s easy to add and tag links, but the lack of responsiveness meant I wasn’t using it beyond adding items. There are several Pinboard apps that offer a better viewing experience, but I didn’t love any of them either. So I used the nervous “what the hell is going on??” energy of Spring 2020 to build the Pile in a week.

The initial version was built before I learned how to use Eleventy and used a Rube Goldberg-esque mash-up of static site generator Sergey with Vue as a templating language and to grab the links from Airtable. I did an extensive write up for the curious among you.

Part of the original write up details how to save links into Airtable. At first the workflow was fine but eventually I found that I wasn’t keeping up with adding links because there was too much manual entry. I needed to figure out if there was an easier way. I thought about just using Pinboard and its API directly but the reason I chose Airtable was that I like having an explicit field for source and two date fields (published and added).

I remembered that I had a Pocket account and started using it to save links. This turned out to be ideal for saving but not for browsing links. One problem is that’s it doesn’t link directly to the original article, but provides a reading view within Pocket. It’s fine as a reading experience, but I’d rather give my traffic to the authors directly and skip Pocket all together, especially considering that Pocket is letting Google track its users around the web.

If you’re trying to figure out how to do something with Eleventy there’s a good chance someone in the Eleventy community has written about it! In fact I remembered that I had a Pocket account after seeing Michael Scharnagl’s Integrate Pocket in Eleventy post earlier in the year.

I started by using Scharnagl’s approach in hopes that I could just do one step of saving and tagging in Pocket, create a daily build and forget the rest. Unfortunately there are a few things not available in the Pocket API that I find useful, so the next step was moving things from Pocket to Airtable, and then to Eleventy. I’ve already used Airtable and Eleventy together so I needed to figure out the Pocket to Airtable part.

Zapier is my workflow tool of choice for Rube Goldberg Machine implementations, and it was pretty straightforward to get links from Pocket to Airtable.

I set it up to trigger on tagging an item with “pile”. This will bring most of the information I was already collecting into Airtable, but I’ll still need to add a few things. I’ll have to kick the tires to see if it’s an enough of an improvement to sustain regular usage but the first impression is mildly optimistic.

I’m currently using a Netlify build hook to trigger builds via command line. This will pick up any updates in Airtable, but I plan on setting up a scheduled build using Zapier once I work out a good flow.

I’ve been using the new set up for almost two weeks and so far it’s much easier to add links. And one benefit is that I can save links in Pocket when I see them and then come back to tag them and add info in Airtable later. In the last version I frequently didn’t save thing because it wasn’t the right time to do multiple steps, so the flexibility in the current set up feels like a nice improvement.

If you’re curious about using Airtable with Eleventy I wrote up a detailed post. It’s pretty straightforward to set up the API call and I used the method to set up the tag pages.

Another benefit is that moving Eleventy makes the site super zippy. I also added pagination, which makes navigating the full set more manageable. And, I really like working with Eleventy (in case that wasn’t already apparent!).

You can also learn more about The Pile at its project page.

  eleventyConfig.setBrowserSyncConfig({
    ghostMode: false
  });

Eleventy uses Browsersync to serve your site locally. ghostMode is the option that mirrors clicking, scrolling and other actions across devices.

For example, if you have the same page open in Firefox and Chrome and click a link in Firefox, both browsers will load the linked page. Scroll the page on your laptop and it will also scroll your phone or tablet, etc.

I’ve found this feature to be very handy but encountered a scenario where I needed to disable it. I was working on a project and fired up Sizzy to view it across browsers and devices. It had been awhile since I used Sizzy and I was greeted with this message…

I didn’t even know ghostMode was an option and thought Browsersync just worked that way! After a bit of searching I found this thread about disabling it in the Eleventy Base Blog starter and took the example from there.

There are plenty of other configurable options in Browsersync. 11ty Rocks also has an example for opening a browser on launch.

Happy reloading!

Rather than learning more about their platforms, I was struck by the amount of notable accessibility issues. Suddenly I was opening DevTools to check color contrast ratios and tabbing around looking for focus indication. Before too long I created a spreadsheet to track what I was finding, and the findings were not good.

According to the Web Accessibility Initiative (WAI) web accessibility is defined as “websites, tools, and technologies that are designed and developed so that people with disabilities can use them”. The Web Content Accessibility Guidelines (WCAG) provide detailed information to help ensure that what we build on the web can be used by everyone.

Since it’s unlikely that either of the Republican candidates will win, one of these nine will become the next Mayor of New York City. What does the lack of accessibility in their campaign sites say about their commitment to accessibility for the citizens of New York City? Or their commitment to an equitable and inclusive New York City?

Also of note, nine candidates hired nine teams to create their sites and not one of them created a fully accessible site. As much as this an unfortunate statement about the candidates, it also highlights that creating digital experiences that work for everyone is not even close to being the norm.

First and foremost, I am not an accessibility expert and this is not a proper accessibility audit! I’m a designer, developer, accessibility advocate and a citizen of New York City.

• This is a high-level look at the basics only, For example I looked at heading levels but not the overall structure and semantics of the page.
• The candidates could address every issue I found and their site could still not be accessible! Although any fixes would improve accessibility, which is always a good thing.
• This is not a design review or critique.
• The What’s being reviewed section goes into detail about what is reviewed, but here’s what is not reviewed:
  • Aria usage.
  • Page structure and semantics beyond heading levels.
  • Contrast on hover states.
  • Text links visually indicated by something other than color (e.g., underline, with an icon).
  • Meaningful alt text, although it is mentioned in a few places.
  • Whether sites using motion respect user settings.
  • Whether a site had dark mode and respected user settings.

• I only reviewed the homepage of each site.
• I used a combination of manual checking, ARC Toolkit plugin, WAVE, W3C HTML Validator and Page Speed Insights.
• I only tested on desktop primarily using Chrome, Safari and Firefox (my browser of choice).
  • Did not review on mobile.
  • Did not review with a screen reader or any other assistive technology.

I chose 10 items to review for each of the candidate’s sites. In the course of writing this post a few of the sites have made updates and one site was completely redesigned. The last in-depth reviews were done over the last weekend in May with spot checks done in the days leading up to publishing this post.

I’ve included a candidate scorecard in each review section as well as a section for each candidate that includes their full results with more detail about each review.

Explanations in the review criteria are not inclusive of all the ways in which visitors may use the sites, and are meant to give some examples to illustrate the importance of the standards.

As a general rule, keep in mind that you can’t predict all the ways your visitors choose to browse the web. — Hidde DeVries

A “Skip Link” allows people using keyboards, screen readers or other assistive input devices a way to bypass a site’s navigation and skip to the main content. A sighted person using a mouse can easily scroll to a site’s main content, but keyboards, screen readers and other assistive devices traverse the page sequentially using focusable elements such as links, form fields and buttons. Providing a “Skip Link” ensures that everyone can easily navigate through your site.

To test for a “Skip Link” press the tab key after the page has loaded, if a “Skip Link” is present it will typically appear in the upper left corner or centered at the top of the screen.

Candidates passed: 4 out of 9

• WebAIM: Skip Navigation Links
• Digital A11y: Understanding SC 2.4.1 Bypass Blocks
• TetraLogical YouTube: Quick Accessibility Test - Skip Link
• CSS Tricks: How to Create a “Skip to Content” Link

Dexterity issues or motor impairment are a few of the reasons someone may use a keyboard, switch or other type of assistive input device to interact with your site.

Unlike using a mouse, a person using a keyboard or other device has to navigate sequentially through the site, tabbing through links and other focusable elements.

To test the candidate’s sites I used the tab key to see if I could make it all the way through their homepage in a logical order with the ability to interact with all of their content.

Candidates passed: 4 out of 9

• TetraLogical YouTube: Quick Accessibility Test - Keyboard Support
• Nielson Norman Group: Keyboard-only Navigation for Improved Accessibility
• WebAIM: Keyboard Accessibility
• W3C: Understanding Success Criterion 2.1.1: Keyboard