After Hours Blog

Twenty-six days, 115 commits, and 70 closed issues later, this site is faster, more accessible, and depends on almost nothing.

A little over a year ago I wrote about vibe coding some improvements to this place after years of neglect. That was a handful of features over a few evenings. This was something else: I pointed Claude Code at the whole site and worked through it from top to bottom in some free time throughout July.

Also, I can’t really call this vibe coding. Vibe coding is accepting output you haven’t read. This was closer to directing a very fast engineer who needed a spec.

Time spent on this website has been limited lately. I have children to play with and raise, a wife to enjoy the world with, time to spend with friends and family, and (very importantly) time to just do something other than look at a screen. So sitting down and figuring out how to restore a URL sanitizer in the markdown render hooks (just as an example) wasn’t really high on my list.

But I’ve also been doing some other work on my computer lately, and sitting at a car dealership a few times, and relocating to a library on some days… all times when I can run Claude in parallel to my current situation (either waiting for something or doing my day job) to do some of these more tedious tasks. So off we went, hand in (AI-simulated) hand.

The short version: 115 commits, 70 issues closed, July 1 to July 26. Here’s roughly what came out of it. (Sorry, this gets a bit nerdy from here.)

Accessibility

This is the part I care most about, and the part I was most sure I’d been getting wrong.

• Unlabeled icons, missing alt text, and a few broken ARIA relationships, all fixed
• The mobile menu is now fully keyboard operable
• Added a skip link, and an actual h1 to detail pages that were missing one
• Form labels and tab semantics on the contact page and ratings lists
• Link colors now meet WCAG AA contrast

Accessibility is at a 100 Lighthouse score now, which I’m happy about.

Performance

• The movies ratings page went from 1.13 MB to about 594 KB
• The games page went from about 560 KB to 373 KB, because it had been rendering every poster twice
• Images are now cropped at the CDN to the size they actually display, instead of shipping a full frame to be cropped away by CSS
• Fonts, scripts, and stylesheets got the usual treatment: subsetting, font-display, deferring, bundling, fingerprinting
• The search filter on an 800 item list no longer re-renders on every keystroke

Lighthouse performance went from the low 80s to 94. First paint dropped from 2.6s to 1.0s.

Security

I barely know what “security headers” are, and didn’t know I needed them on a personal website. Turns out they don’t fix anything that’s already broken. They just limit what a bad script could do if one ever got in, which mattered more than I thought, since I was loading three scripts I didn’t control. I had none of them.

• Added a content security policy, HSTS, nosniff, referrer and permissions policies
• Fixed a real XSS hole in the Twitter archive, where tweet text went into innerHTML unescaped
• Restored Hugo’s URL sanitizer in the markdown render hooks, which had been switched off, so a javascript: link in a post can no longer produce a live href
• The build now verifies the checksum of the Sass binary it downloads before putting it on the path
• Deleted a service worker that had not been registered since 2018 and a dead publishing endpoint that was still advertised in every page’s head

Getting rid of dependencies

The site was loading three third-party scripts. All three are gone.

• A dialog library, replaced by the browser’s native <dialog> element
• A search library, replaced by about twenty lines of plain JavaScript, because 813 tweets do not need a search engine
• A live CodePen embed, replaced by static syntax-highlighted code

The site now loads zero third-party JavaScript apart from analytics, and has no npm dependency at all. No node_modules, anywhere, ever. That is now written down as a rule. (And if you have ever created a website with Node, then you know how freeing this can be.)

Design and everything else

This is my favorite part.

• New nav pills and a rebuilt mobile menu
• The theme toggle cycles light, dark, and system, and each one finally has its own icon
• Typography moved to Source Serif 4 for the blog posts and Source Sans 3 for the interface
• The ratings pages got a shared search, sort, and filter, plus a real build-time scoring engine and an Airtable database sync
• The library index, blog sidebar, ratings cards, and my resume all got reworked

So, Claude Code

Here’s the honest accounting. I am a designer. I am comfortable in CSS. I am not comfortable writing Go templates, reasoning about content security policies, or thinking about how Hugo’s URL sanitizer interacts with a Cloudinary transform string.

Most of this list is work I’d have done slowly, if at all. It’s work I would simply never have gotten to, because between a job and a family, time is at a premium.

What actually changed the game for me was that Claude Code held context from session to session and I could run that work while I worked elsewhere. Kind of like having my own software developer on staff.

The part I’m still careful about

I said something similar last year and it still holds. There’s a real risk of ending up with a site I don’t understand. Though, again, a lot of this work was scripting and security fixes and tedious behind-the-scenes stuff that I know very little about. Before last year I had written every line of this site by hand. I’m ok with giving some of that up now to make these huge leaps in efficiency and organization.

A few things helped. I asked for the reasoning behind changes, not just the changes. I pushed back when something seemed off, and it was sometimes right to hold its ground and sometimes wrong. Every change went through a branch, a build, and a look in the browser before it went anywhere near production. The security and accessibility work in particular got checked by measurement rather than by eye.

Anyway. The site is in better shape than it has ever been, and most of the work was the boring, unglamorous kind I have been avoiding for a decade. There’s a logo redesign and a music ratings section still on the list. We’ll see how those go.

Using AI to “vibe code” some improvements to this place after a good number of years of neglect.

Here are some of the projects that GitHub Copilot and Anthropic Claude have helped me accomplish, with no more than an hour devoted to each:

• Added a light/dark theme switcher to the entire site, that respects a user’s system setting and allows them to override it
• Added micro blog posts into the main blog posting feed
• Added top 5 directors list to the Movies rating page
• Added top 5 years and top 5 systems to the Video Games page

(I also restyled the ratings items, but I didn’t need - or want - AI help for that.)

So… AI.

It’s been fun using these crazy tools. Seeing what they can do with so little given to them in terms of prompts, watching them learn from the files I upload to them - it’s all really fascinating.

A case study

Also, a file that I usually work on annually for my playoffsbracket site is one that usually takes me hours to complete by manually referencing and copying and pasting NBA scores into a custom format I established several years ago. I also needed to copy and paste the URLs for each game I reference in the playoffs from nba.com to that file. This is a slog for me that I was actually planning on putting off this year.

Instead, I decided to show Anthropic Claude my file from last year, and my empty file from this year, and gave it this prompt:

Using 2024.json as an example, add all of the games from the 2025 NBA Playoffs to 2025.json, with links to nba.com and scores.

…and it created the entire file in 5 seconds. It actually scoured the internet for the NBA Playoffs results and the appropriate nba.com links to the games, looked at and learned from my custom format (which likely doesn’t make any sense since I don’t know what I’m doing writing JSON), and wrote the complete file. I saved it and ran it, and it ran perfectly. I didn’t need to make one change. It saved me hours.

Well, ok then

So if it can do that, what else can it do? Apparently a lot, as the above list demonstrates. I’m not a programmer. I’m not a frontend web developer. I’m a practiced web designer and design systems specialist, which has nothing to do with writing code in Go or figuring out how to traverse complex JSON data files and return data from them. I just want to make that data look cool on the way out.

Happiness, for now

So, I’m very happy for now to allow AI to take over the heavy lifting of the “complex” programming aspects of my private projects while I move on to the parts I like to do, like styling with CSS, figuring out what else I want to add, and what features I can make better or more accessible. Though I do want to be careful about having AI do a bit too much, and getting lazy with it, to the point where I’m not really internalizing how something works in CSS or how to apply new features. That’s why I’m writing my CSS manually still.

Anyway, this has been pretty fun for the past few days that I’ve been able to implement it. I have some ideas to run through these tools soon that should push them a bit further, so we’ll see how far we can go.

I’ve collected concert and tour posters from all of the concerts I’ve ever attended - a remarkably pitiful list!

As a part of my recent efforts to expand my Library, I’ve added all of the concerts I’ve ever attended, and also collected tour posters from many of them to display as well. Some didn’t exist or couldn’t be found, so the next best things were included instead.

I’m using my Library to help collect information that I can refer to as a personal wiki of sorts. It’s been a fun personal project.

A question I get often, and often struggle with answering, is: “So what do you do for work?”

I am currently Principal Product Designer, Design System at Pluralsight.

I work on design systems, which are basically groups of tools, resources, principles, and libraries that designers and developers use to create digital products. Tools include color palettes, design program setups, and other items used to create digital art or products. Resources include research histories, best practices, documentation, and communication connections. Principles define what the design system and its parts are trying to accomplish, and why and how people should apply the systems to their work. Libraries include groups and types of elements that make up a digital product, including pieces like buttons and form inputs, and shared resources like icons and digital art.

That can be a lot, and design systems can be vital to a product, brand, or team in helping to align toward a single source of truth. This often requires a person or an entire team to be dedicated solely to curating and maintaining them as a product.

I work closely with our design and engineering teams to help bridge communications, establish best practices, and ensure that all of our people have the tools and resources they need to work and produce fast and efficiently.

I’m happy to announce I have started as Principal Product Designer, Design System at Pluralsight!

After 7 years and 3 months at Cars.com, I began a new position with Pluralsight in May of this year as Principal Product Designer on the Design Operations team. I’ll be working on the Design System team with two very experienced and talented engineers (and hopefully more members soon) as we take the Pluralsight design system to its next level of evolution.

Working at Cars.com was a truly beneficial experience that brought me many opportunities, challenges, and experiences throughout my time there. I loved working in downtown Chicago, in two separate and beautiful office buildings right in the heart of a city that would captivate me on a daily basis. During my tenure there, I grew from a “Visual Designer” that could develop some frontend web pages to a Senior Manager of Product Design, leading the design system efforts as well as the direction of our Product Design practice.

At Pluralsight I have been fortunate enough to be welcomed onto a great team of people, which was the main draw for me. Working with and around (virtually, at least) experienced, knowledgeable, empathetic, and helpful people helps motivate me, and also helps me grow as a designer, employee, and person. Pluralsight as a company also exhibits many of the culture and professional aspects I’ve been looking for, including working toward a good cause, being inclusive, and emphasizing a good work/life balance.

There’s a lot to do to get where we want to be with the design system at Pluralsight, and I’m very excited at where we’ll be going over the next year. I’m gracious and humbled to have this opportunity.

Time for some more groups of ratings, folks!

In these series of posts, similar to the last one, I post groups of related movies I’ve watched and compare their ratings. This time I’m going to add some other stats as well.

Batman movies

• Average score: 58.43%
• 80s/90s movies average: 45.25%
• Nolan trilogy average: 76%

84%

48%

41%

17%

82%

97%

61%

Star Trek movies

• Average score: 54.5%
• Originals average: 50.33%
• Next Generation average: 53.25%
• Kelvin timeline average: 69.5%

39%

72%

58%

37%

31%

86%

41%

67%

42%

76%

87%

60%

Marvel Cinematic Universe Phase 1 movies

• Average score: 71.2%

86%

66%

66%

72%

81%

Marvel Cinematic Universe Phase 2 movies

Average score: 54.5%

39%

46%

60%

56%

74%

67%

Marvel Cinematic Universe Phase 3 movies

• Average score: 66.25%

50%

58%

70%

74%

78%

79%

72%

76%

Marvel Cinematic Universe Phase 4 movies

• Average score: 68.5%
• MCU total average: 65.11%

64%

78%

Newly added ratings in TV and Movies for June 2022

As always, all ratings are in the Library.

Movies

78%

88%

“Doctor Strange in the Multiverse of Madness” was a great popcorn movie. There was enough craziness and special effects to forgive a less-than-stellar plot (and Benedict Cumberbatch’s stiff acting, he does much better in other roles) and it kept me interested throughout, something the previous installment did not do.

“Dune” suprised me as I went in thinking this would be more of a Stargate clone, but it relied more heavily on dark cinematography and drama, which worked. The size of the visuals is worth the price of admission here, and I’m excited to see a sequel if it’s made.

TV

68%

75%

76%

82%

“Moon Knight” started out hot but then got its feet caught up in the sand and too many levels of Egyption-type lore. Also having little-to-no connection to the Marvel Cinematic Universe hurt it a bit, as I was waiting for that to happen all series. Ultimately decent and entertaining, though not as good as I was hoping for.

“Obi-Wan Kenobi” was saved by incredible Darth Vader scenes, and the return of James Earl Jones and Hayden Christiansen as Vader in and out of suit, respectively. Ewan McGregor is fantastic, as usual, but the series didn’t have enough vital “meat” to it to feel truly significant.

“The Boys” is shock-TV superheroes for a Trump-era America, basically poking fun at everyone who thinks conservatism will save America. Some funny moments, some cool drama and tension-filled scenes, some over-the-top blood, sex, and gore… It’s not something I’d recommend to almost anyone, but it’s been a fun ride for what it is so far (2 seasons in).

“Yellowstone” started out hot: my wife and I were absolutely hooked about 3-4 episodes in. Season 1 was all over the place plot-wise, but it was fun to watch. Season 2 was bad, and season 3 was slow. Season 4 picked back up a little, but it ultimately never hit its high spots ever again. Worth watching, for sure, and we’re looking forward to season 5, however we’re hoping it can gain back a little of its lost luster.

Newly added ratings for TV and Movies

As always, all ratings are in the Library.

Movies

85%

64%

“The Lighthouse” was a “beautiful in a creepy way” telling of a classic going-mad tale. Willem Dafoe is brilliant as always, underscoring my new appreciation for his acting prowess. The film style lends to the drama and suspense as well, providing a thrilling atmosphere of suspense and fear.

“Spider-Man: No Way Home” didn’t live up to the hype for me, though I was spoiled by the reveals having waited until it was available to rent to see it. Ultimately it seemed a bit of an overstep for the formula, repeating a lot of the same types of jokes and stretching the cast and story a bit too far without fundamentally changing it enough to be fresh. Hopefully this is the last for this rendition of Spider-Man, and maybe we’ll see a new take (but keeping within the MCU continuity).

TV

90%

“Severance” is brilliant. Its combination of comedy, drama, sci-fi, and suspense, all built on top of a very intriguing and intertwining mystery, made it a must-see for me each week. Those benefitting from being able to binge this entire season will love it. There were hints of Stanley Kubrick as well as Black Mirror-type storytelling and settings throughout, which added to the thrills.

It was time for some cleanup around these parts, so here’s a list of what was fixed.

I spent some time this winter diving deep into this website and cleaning up what was initially a lot of add-on, messy, and less-than-optimally organized code. I also made some design updates and basically rounded off a lot of sharp edges. Here’s a roundup, for posterity:

Design changes

• Standardized link hover states
• Removed sunruise lines from homnepage
• Fixed heading sizes in article-stubs
• Changed up and fixed some dark mode colors and styles
• Standardized button and form specs across the site
• Fixed some movie rating layout issues
• New menu button location and fixed header
• Tweaked the Blog header to use a less-repeating image of the Chicago skyline

Code cleanup

• Moved seasonal styles to date-conditional class
• Restructured articles layout, and basically re-wrote the entire structure of every page
• Changed colors to use hsl()
• Converted all font-size px values to rem
• Fixed some broken links across the site
• Converted all modals to the new <dialog> element
• Changed the primary branch from master to main

Content

• Added new work post about Figma
• Added a goodbye blog post for Tom
• Added more movie, video game, and TV ratings
• Switched from a Google Form to a custom form on the Contact page
• Updated some Work posts with larger images and up-to-date content

What’s next

This was a clean-up and bug-fix phase, and now I have a list of some enhancement, performance, accessibility, and usability fixes to come next. Not to mention that it’s about time for a design refresh soon. This is a 2018 special that’s been going strong, and I’m happy with it still, but the itch is forming.

• Core Web Vitals work
• Lazy loading ratings images
• Performance! Currently scoring a 60 (94 on desktop) on the homepage. Embarrassing. Edit: That was actually some adblocking scripts getting picked up. All good with 100 now!

Rating groups of movies, just for fun.

Let’s bring up some groups of movies and compare their ratings, ok?

Christopher Nolan movies

96%

93%

82%

100%

97%

82%

61%

94%

Quentin Tarrantino movies

95%

94%

95%

89%

87%

68%

93%

73%

92%

75%

Star Wars (release order)

90%

88%

62%

54%

63%

66%

73%

67%

63%