2026-07-30 08:00:00
I am a cocktail and four wines in as we step out into the cool autumn night after a hefty dinner. My sweater and the alcohol and her hand will keep me warm on the walk back.
“The directions say to turn right here,” she says, as we stand in front of a church that caps the street. I recognize the church from earlier in the day. “Yes, but we can go left,” I redirect.
She follows along, her hand still in mine. She gives occasional glances to her phone, perhaps hesitant in my ability to direct us back in my inebriated state. She suggests crossing the street. “I think we need to go under the bridge,” I recommend.
Sure enough, the path under the bridge leads us back to our hotel, completing the evening and giving us rest for more adventures to come.
2026-07-28 08:00:00
A decade ago, when I was still speaking at conferences and heavily marketing myself, I’d often think of personal branding ideas. We’ve seen the trends. The business cards. The t-shirts. The stickers. The buttons. The socks! Can’t forget the socks. My logo is branded across not only my sites but my computers and my slide decks, too.
I also liked using colour to reinforce my brand. I’ve continued that tradition with green threading throughout the latest redesign. I even considering wearing green for all my conference talks. Thankfully, that ended up being a short-lived idea.
At one point in my career, I was getting interviewed for a number of podcasts and considered starting up my own podcast. One of the ideas that came out of preparing to start my own podcast was how to brand via audio. I liked the idea of doing chimes like the NBC chimes so that’s what I did:
It’s five dings in the pattern of how I spell out my last name: Ess Enn oh-OH Kay.
Had I implemented this, I had considered using it to intro my conference talks. I likely would’ve integrated it into the site somehow as well. Maybe clicking on the logo rings the chime as the letters of my name pop in sequence.
For now, I’ll simply document this little artifact of time.
2026-07-25 08:00:00
In 1985, at the age of eleven, I bought my first comic book: The Transformers #9. From there, I went on to collect nearly a thousand comics over my teenage years, mostly in the Marvel universe like Spider-Man and X-men. Lots of Groo the Wanderer (which my mom always enjoyed) and then into stuff like Watchmen and The Sandman. Bill Sienkiewicz was one of my favourite artists with his work on The New Mutants, Stray Toasters, The Shadow, and Dazzler.
About a decade ago, I got into whisky. What started with a few bottles of Balvenie slowly grew into a 200+ bottle collection. Then over the pandemic, I got into cocktails and my cupboards burgeoned with amari and liqueurs.
I’ve noticed this pattern where I feel the need to “collect them all”. It’s by no means limited to physical things, either. Pokemon Go was addictive for a hot minute, I tell yah. At one point, I had collected everything in The Simpsons: Tapped Out. And then they’d release more things. I spent every day going into the app to complete all the daily tasks. Until one day I tapped out. I deleted the app and never went back in.
Same thing happened in Pokemon Go. A raid was happening nearby and I considered getting in my car to participate. That’s when it hit me that it was time to stop. Boom. App gone. Never went back in.
I always hit a point where I stop. I got rid of all my comics. I stopped playing Pokemon Go. I stopped buying whisky. I reach a stage where I realize that the collecting is unsustainable.
Last year, I considered getting into vinyl. The idea of popping a record onto the player and chilling in my lounge chair had plenty of appeal until I considered the logistics. Knowing myself, I didn’t want to suddenly have boxes and boxes of records on my shelves. No record player was purchased that day. Or since. I can sit in my lounge chair and listen to a streaming service just as easily.
(I recognize that there is a perfectly reasonable middle ground where I only purchase a handful of records and play those on repeat, instead of building a huge collection. There were other reasons I talked myself out of a record player.)
That’s not to say that I don’t have that completionist streak still in me. Nor that I’m not willing to spend lots of money on the various quests to complete things. My restaurant adventures are a testament to that. It is handy, for me at least, to be able to know when a goal is no longer serving its purpose and to be okay with moving on to new things.
Postscript: When I originally started writing this post—much of which was written last year—it was with the intention of recognizing my own habit of “collecting”. It is amusing me to have just written that last line and realize that I seem to be having a recent theme of endings and beginnings.
2026-07-21 08:00:00
I came across this fun little comic titled We Didn’t Lose the Plot. It has a straightforward conclusion: more things should come to an end. The “things” referred to here is media like books and movies and television but I’d extend it to many other things as well.
Like web projects.
So often, things are built in the attempt to have infinite growth. And like cancer, they seemingly grow to the point where the entire thing eventually dies or becomes useless at the problem it originally set out to solve.
I like projects that have a definitive end. One of the things I liked about doing the Fifty project was that it had to finish. I don’t need to do a Fifty: The Refiftying, or Fifty 2: Fifty Boogaloo, or 2 Fifty 2 Furious. The project is done.
It’s likely why I enjoy building concepts or mini-apps. They’re quick and solve a specific problem or answer a particular question without needing to be grown, sold, serviced, or maintained.
I’ve been considering potential projects that would have a specific end in mind with which I could build a mini-site around. I don’t have anything planned yet but I’m looking forward to the possibilities.
2026-07-18 08:00:00
One thing I like about 11ty is that common tasks for development oriented blogs are easily handled and syntax highlighting is no exception.
I installed the Syntax Highlighting Plugin just like the documentation asked me to. Then, I had to modify my code blocks in my blog post Markdown files to indicate what language they were. Thankfully, I had only written two articles so far that contained code blocks. Nothing so far deviates from what the documentation says.
When I started considering the compile process, however, I had a few considerations.
The first thing to note is that I inline my CSS. My thinking is that most users visiting my site aren’t likely to have my CSS file cached—either because they’re on my site for the first time or because it has been long enough since they visited my site and the file has expired.
Currently, I only have two templates: my universal template and my blog post template. I inline additional CSS in my blog post template that isn’t needed anywhere else on the site. As such, the first thing I did was add the PrismJS theme to my template and see how it looked. No surprise, it looked great.
But what if I have no code on the page? Why am I loading the CSS for every blog post? Easy enough. I added a yaml parameter of hascode: true. And then I check for that parameter in my template.
{% if hascode %}
<link rel="stylesheet" ... >
{% endif %}That was nice. But as I mentioned, why am I creating an HTTP request when I usually inline my CSS? No problem. A simple copy/paste and that was done.
Initially, because the themes are relatively small, I thought about finding a theme that worked for light mode and one for dark mode, wrapping them in prefers-color-scheme. But that still seemed excessive. I found the Duotone Light theme that I thought looked best for my light mode and then realized that much of it still worked in dark mode if I gave it a couple tweaks.
The first tweak was to use the light-dark declaration I had already had on my pre tags when I launched:
background: light-dark(#FFFFFF50, #00000050);I double-checked and noticed that the selector colour didn’t work in dark mode. So, instead of just trying to find a colour that would work, I decided to use a CSS colour function to solve the problem.
color: light-dark(#2d2006, hsl(from #2d2006 h s calc(l + 80)));This uses the hsl function to shift the luminosity of the colour from the light mode version.
This is a bit of overkill as I could just take the rendered colour and put that in place of the function but sometimes it’s just fun to try new things.
I really like how the code blocks look now, although I don’t love that there’s no indication that the code has overflowed the container if you have scrollbars turned off by default—which most people do these days. Once we get scroll-state container queries supported across all major browsers, maybe I’ll deal with it then.
2026-07-16 08:00:00
When I was building this site, I was keeping it lean but perhaps a bit messy. It’s not a big complex site and I didn’t need to write CSS to maintain a big complex site. As such, I even wondered if I’d stick to any kind of naming convention.
Old habits are hard to break and I found anytime I tried to get away with just element selectors for something, it was clunky as I continued to iterate. Sure enough, the more I worked on the site, the more I moved back to my modular ways. But ultimately, that’s neither here nor there. For a site like mine—written and maintained by one person—what kind of naming convention I use is nearly irrelevant. (I say nearly because I don’t want to be obtuse just for the sake of it!)
With my projects over the last few years, I’ve used a few different newer CSS features and have enjoyed what they can do. Here’s a few of the things I put into this site...
I originally used clamp on The Snook Nook for the site title at the top of the page. I wanted it to feel balanced regardless of screen width. I adjust both the font size and letter spacing in this case, so that the title always looked proportional.
For Snook.ca, I wanted something that was big and bold on a large screen but wouldn’t fill up an entire phone screen. Again, clamp came in clutch.
font-size: clamp(2em, 4vw, 4em)Clamp takes three values: the minimum, the preferred value, and the maximum. In this case, I wanted the font-size to be related to the screen width, which is where the vw units come in. The largest I wanted to go was 4em. This was eye-balled. There’s no special math here. Likewise, 2em still seemed reasonable on the bottom end and looked good for me.
I remember reading about this awhile back and it was a nice little thing to add to the site: text-wrap: balance. I just have it on the page title to avoid orphaned words and make them look a little more, well, balanced.
On the old site, I never loved how my headings looked over multiple lines because of the pencil lines I had on headings. As a result, I kept the titles shorter, on purpose. With this version, I wanted to get more creative with page titles, going longer if I needed to without it looking weird.
When Grid first came out, I was using it for larger, dynamic layouts like the restaurant grid on my Fifty site. Now, I find myself also using it for smaller elements. The article meta is a great example of this.
.meta {
display: grid;
justify-items: center;
}Boom. All the items are center aligned and stacked. I probably would've defaulted to trying to use display: flex here but that would've required an extra declaration to adjust the flex-direction to column. (And using align-items instead of justify-items.)
.meta-before:before {
content: "";
display:block;
width:50px;
padding-bottom: 5px;
border-top: 2px solid var(--green);
}The horizontal line is a pseudo-element that gets added into the grid stack before everything else. That border declaration leads me to the next thing.
The CSS isn’t large or anything but it was nice to use custom properties for easy colour management. I declared them on the root element. I could’ve probably just declared this on the html element itself just as easily.
:root {
--yellow: #FFCA00;
--green: #668800;
--white: #EFEFE6;
--black: #3C3C3C;
color-scheme: light dark;
}Again, I didn’t need multiple levels of abstraction. I just wanted something that made it easier to remember these hex codes and spit them out where I need them.
That last line in the previous example declares that my design supports light and dark mode and lets me use the light-dark function to easily declare colour options like this declaration for the body text.
color: light-dark(var(--black), var(--white));I’ve always just either toggled underlines on hover or toggled text colour. I don’t know when all the text-decoration options were added but I liked being able to do so.
a {
color: currentcolor;
text-decoration-thickness:2px;
text-decoration-color: var(--green);
}
a:hover { text-decoration-color: var(--yellow); }I was able to adjust the thickness and then change the colour on hover. I haven’t used the ol’ LVHA format in years but I might come back to it to give more useful visual clues for visited and active links.
The link colour just picks up whatever the light-dark colour is currently set.
I was really delighted by how easy it was to use all of these features and not have to be too concerned about cross browser issues. Looking through MDN was fun to discover what features I had missed over the years and could now implement reliably. Can I Use also continues to be a fantastic resource for verifying browser support.
