Articles and notes about front-end dev, design and side-projects.
It’s finally happened. A year went by without an update to this site, unless you count the very recent update to the latest version of Eleventy , which was so easy I don’t even think it counts. 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…
Last year’s inventory of application defaults was fun. At the time I had noted several apps I wanted to replace. Let’s see how things shook out. No changes (permalink) 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…
Hello strangers. It’s been four years since I started this site . Each year I’ve done a Year in Review post on the anniversary of the site launch in September. I missed that milestone this year and will attempt to make up for it now. 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.…
App Defaults by Robb Knight is a fun collection of posts detailing what applications or tools people use for various tasks. 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…
Earlier in the year I started fiddling around with creating an archive of my tweets using Tweetback , an open source project by Eleventy creator Zach Leatherman. 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…
It’s been three years since I created this site. One of the main purposes of the site is “ project fiddling and accountability ”. Like last year’s post , the moment of truth is upon us… 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. Tinkering…
It’s still summer, so I’m doing a bit of Hot HTML Summer housekeeping based on what I learned from taking the web.dev Learn HTML course . Earlier in the summer I wrote a series of posts , one for each lesson in the course. In the I included a list of things to check on and update as necessary. I’ve made some good progress! As noted in the changelog , around here I cleaned up my <section> usage,…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a 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. Intro…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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. The…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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. HTML…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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.…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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. Intro…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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.…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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. Table…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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.…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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. Ordered…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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. The href…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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.…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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.…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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.…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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. The…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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…
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. 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.…
Nothing says summer like sitting in a cool, shaded room while writing some HTML. 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…
After several weeks of futzing with the homepage layout, I finally integrated some new features over at the Junk Drawer . Earlier in the year I mentioned wanting to add a couple new things , both using Airtable as a content source. Since then I also decided to pull in my most recent image from Pixelfed . The Junk Drawer is now pulling the blog from WordPress, two different sources from Airtable (…
Ah, Eleventy. Just like the upgrade to v1.0.0 , you could not ask for an easier and less problematic major upgrade. Eric Bailey put it best in a three toot thread 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…
After a little break during the holidays I had some nice blogging momentum over at the Junk Drawer in the beginning of January. And then Covid finally caught up with me . 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. The Studio (permalink) I’m still noodling on a site for…
I have a new post at HTMHell for the 2022 Advent Calendar… 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…
I recently mentioned two things I wanted to do at this site. Remove the “Featured Projects” section from the homepage and figure out how to integrate my freelance work. 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 couple of weeks ago Jeremy Keith had a post on refactoring an existing site to use logical properties. Not entirely sure about logical properties? web.dev has a nice summation … 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…
It’s been two years since I created this site! Things have slowed down a bit around here, mostly because some of the goals I created last year turned out to warrant a new site (with another on the way!). How did I stack up to last year’s “ What’s next ”? Tinkering? Check. Writing more about other topics? Check, but elsewhere . Freelancing? Check. Tinkering (permalink) Here’s a non-complete list of…
Part one: Wordpress 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…
After a quick proof of concept using WordPress as content management system (CMS) for Eleventy I built a little blog for myself. 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…
Apparently I’ve been on a “make new websites” kick this year. After making two new ones for a friend/client, I recently launched a little blog for myself . 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,…
Hello, it’s a been awhile. Burnout got the best of me earlier in the year, but not before I could launch two new sites. 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…
Update : I've written a similar step-by-step for upgrading to Eleventy v2.0.0 . 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…
Unfortunately my holiday break kicked off with a minor health scare. I was walking the dog when I started to notice some flashing in one of my eyes. There was a lot going on, and it was windy, so I didn’t think too much of it. Once I got home and sat in front of the computer I was greeted by an onslaught of eye floaters . There were so many that it was difficult to see. It was a bit terrifying. I…
After writing about <time> a few days ago I remembered that Sara Soueidan has a nice post on <hr> . This made me wonder how many other “Dear HTML Element” love letters there were out there. 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 -…
A couple of weeks ago creative technologist extraordinaire Henry Desroches posed the following question on Twitter… 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…
There I was, minding my own business working on another project when I noticed that the layout at Stakes Profiles had taken a turn for the worse. Yeah, it's not supposed to look like that. 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…
I’m happy to report that it’s been a year with this version of the site 🎉. A look back (permalink) 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…
Keeping the momentum of the updated footer going, I’ve also updated the homepage and the Projects page. Party popper emoji! Much like the footer, I’ve wanted to update these for awhile. The homepage (permalink) 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. Not a lot of breathing room…
This summer I’ve been working on a couple of fun projects for a non-technical friend. It’s been enjoyable and I’m looking forward to sharing them. One is pretty far along and the other is in the brainstorming/design phase. Both of them are on hold awaiting input, assets, feedback, etc. You know, the usual! While on hold I worked on a long standing to do item for this site (redesigning the footer)…
Early in the pandemic I threw together Pile of hrefs , a personal bookmarking site. I had a number of different ways to save links but they were disjointed and none them worked well enough that I used them consistently. 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…
In your eleventy.js file within the module.exports section add the following… 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…