<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
  <title>Snook.ca</title>
  <subtitle>Everything and Nothing</subtitle>
  <link href="https://snook.ca/posts/index.xml" rel="self" />
  <link href="https://snook.ca/" />
  <updated>2026-08-11T14:25:17Z</updated>
  <id>https://snook.ca/</id>
  <author>
    <name>Jonathan Snook</name>
    <email>jonathan@snook.ca</email>
  </author>
  <entry>
    <title>Slash What Now?</title>
    <link href="https://snook.ca/everything/slash-what-now/" />
    <updated>2026-08-07T00:00:00Z</updated>
    <id>https://snook.ca/everything/slash-what-now/</id>
    <content type="html">
    &lt;p&gt;&lt;em&gt;Hey, it’s the inaugural post for the RSS Club on Snook.ca!&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;I was working away on my site, adding content that I thought might be relevant to some, like an AI statement and a privacy policy. Most people probably don’t care but for those that do, it’s there and it shows that I care about those things, too.&lt;/p&gt;
&lt;p&gt;I never really had a name for these types of one-off pages but I came across &lt;a href=&quot;https://slashpages.net&quot;&gt;slash pages&lt;/a&gt; and with this redesign, I’ve been considering what felt relevant to include or not include on my own site.&lt;/p&gt;
&lt;h2&gt;Why Now?&lt;/h2&gt;
&lt;p&gt;Some of the items like /now seem like they should be actual blog posts. Like this one. This is what I’m thinking about now. My next blog post will be about what I’m thinking about then, which will be now.&lt;/p&gt;
&lt;p&gt;Want to know what I’m up to right now? I’m writing now. But when you read this, I’ll no longer be writing this. I’ll be doing something else. Maybe I’m sleeping, or making coffee, or out walking somewhere, or sitting on the toilet.&lt;/p&gt;
&lt;h2&gt;Why Not?&lt;/h2&gt;
&lt;p&gt;I realize I’m being silly. Sometimes it’s nice to catch up with what somebody is up to. It’s answering the question, “hey what’re you up to these days?” It’s surfacing information without requiring people to understand the entire lore about what led you to this moment in time.&lt;/p&gt;
&lt;p&gt;For example, I subscribe to a couple newsletters that are like a /where page. They update people on their travels while also giving a life update around why they might be on a particular trip, or why they might be at home. Maybe my friends would like to hit up my /where page to see where I might be given all my travels. (I don’t have a /where page.)&lt;/p&gt;
&lt;h2&gt;Slash away&lt;/h2&gt;
&lt;p&gt;For now, I have my &lt;a href=&quot;https://snook.ca/slashes&quot;&gt;slash pages&lt;/a&gt; plus a couple undocumented ones like my old /speaking page that remains more like a historic artifact found just under the surface. Today, I added my &lt;a href=&quot;https://snook.ca/privacy&quot;&gt;privacy&lt;/a&gt; policy.&lt;/p&gt;
&lt;p&gt;I think that’ll be it for now.&lt;/p&gt;

    &lt;hr&gt;&lt;small&gt;Have something to say? &lt;a href="mailto:snookca@snk.ms"&gt;Tell me about it.&lt;/a&gt;&lt;/small&gt;
</content>
  </entry>
  <entry>
    <title>Secret RSS Posts</title>
    <link href="https://snook.ca/everything/secret-rss-posts/" />
    <updated>2026-08-04T00:00:00Z</updated>
    <id>https://snook.ca/everything/secret-rss-posts/</id>
    <content type="html">
    &lt;p&gt;I&#39;ve seen Dave Rupert do posts that only appear in the RSS feed. He called it the &lt;a href=&quot;https://daverupert.com/rss-club/&quot;&gt;RSS Club&lt;/a&gt;. In his words,&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;It’s like a newsletter delivered to your feed reader to celebrate the medium of RSS and breakaway from social media.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;I like that ethos and am choosing to do the same. What posts will qualify as part of the RSS Club remains to be seen. Maybe they&#39;ll be more personal. Maybe they&#39;ll cover topics that don&#39;t need to be directly linked from home pages and index pages. Maybe I&#39;ll get bored of the idea and we never hear of this again.&lt;/p&gt;
&lt;p&gt;And it&#39;s not like they&#39;ll be sooper-dooper secret because there will still be a web page that will be generated. You could still share and link the page, if you wanted. At least, for now. It&#39;s just that they won&#39;t be linked to from any of the index pages. Perhaps one day I&#39;ll look into creating content purely for the RSS feed that doesn&#39;t have a permalink generated for it. That&#39;ll require some tweaks to the RSS feed since it relies on the URL for things like the ID.&lt;/p&gt;
&lt;p&gt;Consider this an invitation to subscribe to the &lt;a href=&quot;https://snook.ca/posts/index.xml&quot;&gt;RSS feed&lt;/a&gt;—if you haven&#39;t already—and perhaps some interesting content will find it&#39;s way to you.&lt;/p&gt;
&lt;h2&gt;Technical Bits&lt;/h2&gt;
&lt;p&gt;This site is built with 11ty. Every file—okay, not &lt;em&gt;every&lt;/em&gt; file; I&#39;m simplifying here—gets added to a collection. Files can be added to a specific collection using tags. When I first built this site, every blog post was tagged as a &lt;code&gt;post&lt;/code&gt;.  Then, I told the home page to grab the most recent posts. And the index view to grab all of the posts. And then the RSS feed should grab the ten most recent posts.&lt;/p&gt;
&lt;p&gt;What I&#39;ve done is added a new collection called &lt;code&gt;rss&lt;/code&gt; and I changed the RSS feed to only grab items from the rss collection.&lt;/p&gt;
&lt;pre class=&quot;language-yaml&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;tags&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; post
  &lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt; rss&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This allows me to create content that only appears in the RSS feed or only appears on the site or appears in both. This system will be used for any new thing that I add. For example, if I add photography, I can create a photo tag and add the photos to the RSS feed or choose not to. I can add the photos to the Everything and Nothing index or I can create a separate photo feed altogether that just pulls anything tagged &lt;code&gt;photo&lt;/code&gt;.&lt;/p&gt;

    &lt;hr&gt;&lt;small&gt;Have something to say? &lt;a href="mailto:snookca@snk.ms"&gt;Tell me about it.&lt;/a&gt;&lt;/small&gt;
</content>
  </entry>
  <entry>
    <title>A Mid-summer Night’s Update</title>
    <link href="https://snook.ca/everything/midsummer-update/" />
    <updated>2026-08-02T00:00:00Z</updated>
    <id>https://snook.ca/everything/midsummer-update/</id>
    <content type="html">
    &lt;p&gt;We’re into the thick of summer and the days have been long and hot—just the way I like it.&lt;/p&gt;
&lt;h2&gt;Pushing the One and Only Edge&lt;/h2&gt;
&lt;p&gt;Back in &lt;a href=&quot;https://snook.ca/archives/other/smarch&quot;&gt;March&lt;/a&gt;, I mentioned having some ideas but wanting at least one edge to push. Turns out, the only edge I pushed was using scroll-based animations. Dullest edge pushing ever. I did the bare minimum and what do you know, I’m happy with it. I’m happy to have the new design, the new tech, and being able to write more regularly and feeling less constrained—especially tech-wise.&lt;/p&gt;
&lt;p&gt;I’ve continued to tweak things since the launch. Still on the to-do list is to update the favicon and take a look at view transitions. I’m also considering different post styles or themes that are specific to content types. Some of the ideas I have might mean that I toss out the scroll-based animation on the logo but we’ll cross that bridge when we get there.&lt;/p&gt;
&lt;h2&gt;New MacBook&lt;/h2&gt;
&lt;p&gt;Speaking of tech, in my long running series of “how can I simplify my life”, I had given away or sold my old Mac gear, leaving me with just a Mac mini for my day-to-day computing and development needs.&lt;/p&gt;
&lt;p&gt;For writing, I can use my iPhone or iPad, since I can write markdown pretty much anywhere. But the new post publishing process uses a desktop (or laptop) computer configuration to handle updates via Git and sync them to the server. I’m sure I could jury rig a setup that would allow me to publish from a mobile device but I imagine those solutions are going to feel like sandpaper and I want buttery smooth.&lt;/p&gt;
&lt;p&gt;That means that if I want a portable post publishing process then I need a portable post publishing personal computer. Like, say, a MacBook. I’ve had this Mac mini for about five years now, so I don’t feel like I’m being frivolous with a new purchase. I stopped in at the local Apple store and after reviewing sizing and features, I settled on the 13” Air. They didn’t have the configuration I wanted in stock so I ordered online and will need to wait a couple weeks for its arrival.&lt;/p&gt;
&lt;h2&gt;Travel&lt;/h2&gt;
&lt;p&gt;Speaking of portability, what a better way to use said MacBook Air than on a trip. And yet, not a lot of travel planned for the near future. Perhaps a trip out to the west coast for some food adventures and catch up with friends I haven’t seen in awhile.&lt;/p&gt;
&lt;p&gt;The last few months have included a number of trips including an Alaskan cruise to celebrate my mom’s birthday and get her one step closer to finishing her bucket list. (Huh. It would seem my mom is also a bit of a &lt;a href=&quot;https://snook.ca/everything/collections/&quot;&gt;completionist&lt;/a&gt;.)&lt;/p&gt;
&lt;p&gt;There were also a few trips mostly centered around food: Plenitude in Paris, Sushi Sho in New York, and Pearl Morissette in the Niagara region. All of them were spectacular meals and definitely worth going out of your way for, if you get the chance.&lt;/p&gt;
&lt;p&gt;It wasn’t just food, though. My girlfriend booked us a tour of the Palais Garnier in Paris, the home of the Phantom of the Opera. (Fun fact, PotO was the first music CD I ever bought.) In New York, she got us tickets to see Cats: The Jellicle Ball. I watched the original Cats before going and thought, “how was this ever a hit?” The Jellicle Ball, on the other hand, felt like everything worked. The concept actually made sense and I enjoyed it quite a bit.&lt;/p&gt;
&lt;h2&gt;Position Sticky&lt;/h2&gt;
&lt;p&gt;For now, things are quieter as I am enjoying sticking around and basking in the warm weather and slower routines.&lt;/p&gt;
&lt;p&gt;Since I am around more, I’ve finally settled on a new challenge, unsurprisingly centered around food: try all (well, most) of the taco places in Ottawa. Ottawa isn’t really known as a hub of Mexican cuisine. For the longest time, it felt like the best we had to offer was mediocre Tex-Mex. The Mexican community has grown and along with it have been a number of new taquerias. I have a list of almost 30 places to try. I might document this adventure here on the blog, hence the desire to play with theming. I’ve already been to two restaurants on the list over the past week so I better get cracking!&lt;/p&gt;
&lt;h2&gt;Minus One&lt;/h2&gt;
&lt;p&gt;Being within walking distance of most things, I don’t drive much anymore. As such, having multiple cars was a little ridiculous. And as such, I decided to sell off my 1979 Porsche 911 Turbo. I enjoyed the car but I always felt a slight sense of anxiety while driving it. I would never think to take it on a long road trip and it wasn’t the most versatile for short trips. It was loud and smelly. Which, when I just wanted to cruise for an hour, I &lt;em&gt;enjoyed&lt;/em&gt;. Driving it maybe five times over the summer before having to put it away for storage for the winter just showed me it was time to find a better home for it.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://img.snook.ca/porsche.webp&quot; alt=&quot;Black Porsche with Fuchs wheels&quot;&gt;&lt;/p&gt;
&lt;p&gt;One thing I’ve learned about myself is that I’m content with having had the experience, even if it was a lifetime dream. Owning a classic vehicle like this was wonderful to have experienced but I feel no sense of loss now that I’ve sold it. I have the memories and that is enough.&lt;/p&gt;
&lt;h2&gt;Enjoy the Summer&lt;/h2&gt;
&lt;p&gt;Other than that, life continues on uneventfully—delightfully so.&lt;/p&gt;

    &lt;hr&gt;&lt;small&gt;Have something to say? &lt;a href="mailto:snookca@snk.ms"&gt;Tell me about it.&lt;/a&gt;&lt;/small&gt;
</content>
  </entry>
  <entry>
    <title>The Walk Back</title>
    <link href="https://snook.ca/everything/the-walk-back/" />
    <updated>2026-07-30T00:00:00Z</updated>
    <id>https://snook.ca/everything/the-walk-back/</id>
    <content type="html">
    &lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;“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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;

    &lt;hr&gt;&lt;small&gt;Have something to say? &lt;a href="mailto:snookca@snk.ms"&gt;Tell me about it.&lt;/a&gt;&lt;/small&gt;
</content>
  </entry>
  <entry>
    <title>Chimed, I’m sure</title>
    <link href="https://snook.ca/everything/chimed/" />
    <updated>2026-07-28T00:00:00Z</updated>
    <id>https://snook.ca/everything/chimed/</id>
    <content type="html">
    &lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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 &lt;a href=&quot;https://en.wikipedia.org/wiki/NBC_chimes&quot;&gt;NBC chimes&lt;/a&gt; so that’s what I did:&lt;/p&gt;
&lt;audio controls=&quot;&quot;&gt;
  &lt;source src=&quot;https://snook.ca/assets/snookca-tone.mp3&quot; type=&quot;audio/mpeg&quot;&gt;
&lt;/audio&gt;
&lt;p&gt;It’s five dings in the pattern of how I spell out my last name: Ess Enn oh-OH Kay.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;For now, I’ll simply document this little artifact of time.&lt;/p&gt;

    &lt;hr&gt;&lt;small&gt;Have something to say? &lt;a href="mailto:snookca@snk.ms"&gt;Tell me about it.&lt;/a&gt;&lt;/small&gt;
</content>
  </entry>
  <entry>
    <title>Collections</title>
    <link href="https://snook.ca/everything/collections/" />
    <updated>2026-07-25T00:00:00Z</updated>
    <id>https://snook.ca/everything/collections/</id>
    <content type="html">
    &lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;(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.)&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;div class=&quot;postscript&quot;&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;

    &lt;hr&gt;&lt;small&gt;Have something to say? &lt;a href="mailto:snookca@snk.ms"&gt;Tell me about it.&lt;/a&gt;&lt;/small&gt;
</content>
  </entry>
  <entry>
    <title>They Don’t Need to Go On Forever</title>
    <link href="https://snook.ca/everything/they-dont-need-to-go-on-forever/" />
    <updated>2026-07-21T00:00:00Z</updated>
    <id>https://snook.ca/everything/they-dont-need-to-go-on-forever/</id>
    <content type="html">
    &lt;p&gt;I came across this fun little comic titled &lt;em&gt;&lt;a href=&quot;https://uarrr.org/we-didnt-lose-the-plot/&quot;&gt;We Didn’t Lose the Plot&lt;/a&gt;&lt;/em&gt;. 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.&lt;/p&gt;
&lt;p&gt;Like web projects.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;I like projects that have a definitive end. One of the things I liked about doing the &lt;a href=&quot;https://fifty.snook.ca&quot;&gt;Fifty&lt;/a&gt; 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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;

    &lt;hr&gt;&lt;small&gt;Have something to say? &lt;a href="mailto:snookca@snk.ms"&gt;Tell me about it.&lt;/a&gt;&lt;/small&gt;
</content>
  </entry>
  <entry>
    <title>I Added Syntax Highlighting Using the 11ty PrismJS Plugin</title>
    <link href="https://snook.ca/everything/syntax-highlighting/" />
    <updated>2026-07-18T00:00:00Z</updated>
    <id>https://snook.ca/everything/syntax-highlighting/</id>
    <content type="html">
    &lt;p&gt;One thing I like about 11ty is that common tasks for development oriented blogs are easily handled and syntax highlighting is no exception.&lt;/p&gt;
&lt;p&gt;I installed the &lt;a href=&quot;https://www.11ty.dev/docs/plugins/syntaxhighlight/&quot;&gt;Syntax Highlighting Plugin&lt;/a&gt; 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.&lt;/p&gt;
&lt;p&gt;When I started considering the compile process, however, I had a few considerations.&lt;/p&gt;
&lt;h2&gt;Only using the CSS when there was code on the page&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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 &lt;code&gt;hascode: true&lt;/code&gt;. And then I check for that parameter in my template.&lt;/p&gt;
&lt;pre class=&quot;language-njk&quot;&gt;&lt;code class=&quot;language-njk&quot;&gt;&lt;span class=&quot;token delimiter punctuation&quot;&gt;{%&lt;/span&gt; &lt;span class=&quot;token tag keyword&quot;&gt;if&lt;/span&gt; &lt;span class=&quot;token variable&quot;&gt;hascode&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;%&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
    &lt;span class=&quot;token operator&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;token variable&quot;&gt;link&lt;/span&gt; &lt;span class=&quot;token variable&quot;&gt;rel&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&quot;stylesheet&quot;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;&gt;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token operator&quot;&gt;%&lt;/span&gt; &lt;span class=&quot;token variable&quot;&gt;endif&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;%&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h2&gt;Light and Dark Mode&lt;/h2&gt;
&lt;p&gt;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 &lt;code&gt;prefers-color-scheme&lt;/code&gt;. But that still seemed excessive. I found the &lt;a href=&quot;https://github.com/PrismJS/prism-themes/blob/master/themes/prism-duotone-light.css&quot;&gt;Duotone Light&lt;/a&gt; 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.&lt;/p&gt;
&lt;p&gt;The first tweak was to use the &lt;code&gt;light-dark&lt;/code&gt; declaration I had already had on my &lt;code&gt;pre&lt;/code&gt; tags when I launched:&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token property&quot;&gt;background&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;light-dark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;#FFFFFF50&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; #00000050&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;light-dark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;#2d2006&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;hsl&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;from #2d2006 h s &lt;span class=&quot;token function&quot;&gt;calc&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;l + 80&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This uses the &lt;code&gt;hsl&lt;/code&gt; function to shift the luminosity of the colour from the light mode version.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h2&gt;Pretty&lt;/h2&gt;
&lt;p&gt;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 &lt;code&gt;scroll-state&lt;/code&gt; container queries supported across all major browsers, maybe I’ll deal with it then.&lt;/p&gt;

    &lt;hr&gt;&lt;small&gt;Have something to say? &lt;a href="mailto:snookca@snk.ms"&gt;Tell me about it.&lt;/a&gt;&lt;/small&gt;
</content>
  </entry>
  <entry>
    <title>A Few of The CSS Tidbits I Put in The Site</title>
    <link href="https://snook.ca/everything/a-few-css-tidbits/" />
    <updated>2026-07-16T00:00:00Z</updated>
    <id>https://snook.ca/everything/a-few-css-tidbits/</id>
    <content type="html">
    &lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;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!)&lt;/p&gt;
&lt;p&gt;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...&lt;/p&gt;
&lt;h2&gt;Clamp&lt;/h2&gt;
&lt;p&gt;I originally used &lt;code&gt;clamp&lt;/code&gt; on &lt;a href=&quot;https://nook.snook.ca&quot;&gt;The Snook Nook&lt;/a&gt; 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.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token property&quot;&gt;font-size&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;clamp&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;2em&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; 4vw&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; 4em&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;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 &lt;code&gt;vw&lt;/code&gt; 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.&lt;/p&gt;
&lt;h2&gt;Balanced Headings&lt;/h2&gt;
&lt;p&gt;I remember reading about this awhile back and it was a nice little thing to add to the site: &lt;code&gt;text-wrap: balance&lt;/code&gt;. I just have it on the page title to avoid orphaned words and make them look a little more, well, balanced.&lt;/p&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h2&gt;Grid&lt;/h2&gt;
&lt;p&gt;When Grid first came out, I was using it for larger, dynamic layouts like the restaurant grid on my &lt;a href=&quot;https://fifty.snook.ca&quot;&gt;Fifty&lt;/a&gt; site. Now, I find myself also using it for smaller elements. The article meta is a great example of this.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://img.snook.ca/article-meta.webp&quot; alt=&quot;The article meta showing section title and article date&quot;&gt;&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.meta&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; grid&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;justify-items&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; center&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Boom. All the items are center aligned and stacked. I probably would&#39;ve defaulted to trying to use &lt;code&gt;display: flex&lt;/code&gt; here but that would&#39;ve required an extra declaration to adjust the &lt;code&gt;flex-direction&lt;/code&gt; to column. (And using &lt;code&gt;align-items&lt;/code&gt; instead of &lt;code&gt;justify-items&lt;/code&gt;.)&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;.meta-before:before&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;content&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;block&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;width&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;50px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;padding-bottom&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 5px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;border-top&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 2px solid &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--green&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h2&gt;CSS Custom Properties&lt;/h2&gt;
&lt;p&gt;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 &lt;code&gt;html&lt;/code&gt; element itself just as easily.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;:root&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;--yellow&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #FFCA00&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;--green&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #668800&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;--white&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #EFEFE6&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;--black&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #3C3C3C&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
  &lt;span class=&quot;token property&quot;&gt;color-scheme&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; light dark&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h2&gt;Dark Mode&lt;/h2&gt;
&lt;p&gt;That last line in the previous example declares that my design supports light and dark mode and lets me use the &lt;code&gt;light-dark&lt;/code&gt; function to easily declare colour options like this declaration for the body text.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;light-dark&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--black&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--white&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;Link Underlines&lt;/h2&gt;
&lt;p&gt;I’ve always just either toggled underlines on hover or toggled text colour. I don’t know when all the &lt;code&gt;text-decoration&lt;/code&gt; options were added but I liked being able to do so.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;a&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; 
  &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; currentcolor&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; 
  &lt;span class=&quot;token property&quot;&gt;text-decoration-thickness&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;2px&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; 
  &lt;span class=&quot;token property&quot;&gt;text-decoration-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--green&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; 
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;a:hover&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;text-decoration-color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token function&quot;&gt;var&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;--yellow&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;The link colour just picks up whatever the &lt;code&gt;light-dark&lt;/code&gt; colour is currently set.&lt;/p&gt;
&lt;h2&gt;CSS has come a long way&lt;/h2&gt;
&lt;p&gt;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 &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web&quot;&gt;MDN&lt;/a&gt; was fun to discover what features I had missed over the years and could now implement reliably. &lt;a href=&quot;https://caniuse.com&quot;&gt;Can I Use&lt;/a&gt; also continues to be a fantastic resource for verifying browser support.&lt;/p&gt;

    &lt;hr&gt;&lt;small&gt;Have something to say? &lt;a href="mailto:snookca@snk.ms"&gt;Tell me about it.&lt;/a&gt;&lt;/small&gt;
</content>
  </entry>
  <entry>
    <title>Font Choices</title>
    <link href="https://snook.ca/everything/font-choices/" />
    <updated>2026-07-15T00:00:00Z</updated>
    <id>https://snook.ca/everything/font-choices/</id>
    <content type="html">
    &lt;p&gt;A week ago, I had launched this site using QuatroSlab for page titles and Google’s Slabo for body copy. For those that have been around awhile and are familiar with SMACSS, you might recognize QuatroSlab from that site. I like the font and started off with it to see how I’d feel about it on the this new design. Then I chose Slabo as a font that I felt paired well with it.&lt;/p&gt;
&lt;p&gt;For the most part, I was fine with it but after finally getting a blog post written and posted under the new design, I was feeling less than thrilled with my choices.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://img.snook.ca/font-choices-2.webp&quot; alt=&quot;The font choices before.&quot;&gt;&lt;/p&gt;
&lt;p&gt;Over yesterday and today, I decided to do some research on fonts and came across &lt;a href=&quot;https://pangrampangram.com&quot;&gt;Pangram Pangram Foundry&lt;/a&gt;. They have some delectable fonts that make me want to do some interesting designs with them. This led me to Fragment. I looked through all the variants and Fragment Text felt just right for the body copy. It felt softer and rounder and more open and friendly than Slabo.&lt;/p&gt;
&lt;p&gt;My only complaint is that I want some of the discretionary ligatures in the list of standard ligatures like the Th and ft. The rest of them are too much flourish for body copy. I enabled the ligatures for headings, at least, where some flourish is warranted.&lt;/p&gt;
&lt;p&gt;For page headings, though, I wanted something bolder. This is where Pangram Pangram’s Pangaia comes in. I like the slightly retro-modern funky feel that this font brings to the table.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://img.snook.ca/font-choices-1.webp&quot; alt=&quot;The font choices after.&quot;&gt;&lt;/p&gt;
&lt;h2&gt;The CSS&lt;/h2&gt;
&lt;p&gt;From a technical perspective, this is the first time I’ve taken advantage of OpenType feature capabilities and I found it confusing as I couldn’t find a good explanation of what &lt;code&gt;liga&lt;/code&gt; or &lt;code&gt;dlig&lt;/code&gt; or &lt;code&gt;ss03&lt;/code&gt; mean or how to know whether a font even supports these.&lt;/p&gt;
&lt;p&gt;I’ve learned that you can turn these on or off via CSS’s &lt;code&gt;font-feature-settings&lt;/code&gt; property.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token property&quot;&gt;font-feature-settings&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ss02&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ss03&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ss04&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;dlig&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;zero&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;onum&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Declaring the value turns them on. You can alternatively, specifically declare them on or off using the words on or off or the numbers 1 or 0. The following would enable features ss02, ss03, zero, and onum; it would disable ss04 and dlig.&lt;/p&gt;
&lt;pre class=&quot;language-css&quot;&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token property&quot;&gt;font-feature-settings&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ss02&quot;&lt;/span&gt; on&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ss03&quot;&lt;/span&gt; 1&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;ss04&quot;&lt;/span&gt; off&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;dlig&quot;&lt;/span&gt; 0&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;zero&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&quot;onum&quot;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;The question then became about how to figure out which of these features exist in a particular font. For this, I used &lt;a href=&quot;https://fontdrop.info&quot;&gt;FontDrop!&lt;/a&gt;. It will show you what features are available and what those features look like for that font. FontDrop! is all client-side, too, which is nice. I didn’t want to be uploading files that aren’t mine to someone’s server.&lt;/p&gt;
&lt;h2&gt;Up Next&lt;/h2&gt;
&lt;p&gt;I suspect I will end up tweaking which of these features are on or off as I add more content to the site and decide what works well for a given scenario.&lt;/p&gt;

    &lt;hr&gt;&lt;small&gt;Have something to say? &lt;a href="mailto:snookca@snk.ms"&gt;Tell me about it.&lt;/a&gt;&lt;/small&gt;
</content>
  </entry>
</feed>
