Notes

In the article How I Built My Blog, Josh Comeau walks through the tech stack behind his lovely personal site. It’s neat to see the choices that he made and the reasoning behind them.

Netlify is moving their React UI component library to Tailwind CSS:

what started with organised PostCSS gradually grew to become a complex and entangled global CSS architecture with a lot of specificity and overrides. … the added tech debt it introduces makes it difficult to keep shipping fast without adding any regressions. Besides, as the number of frontend developers contributing to the codebase also grows, this kind of CSS architecture becomes even more difficult to work with.

To accomplish this, they set a deadline, divided the work across their front-end guild, and tracked their progress on GitHub. They added some internal tooling for visual-regression tests and to make building class lists easier, especially for conditional cases.

If you wait until you are feeling productive, you will never be.

One of the things I miss most about Windows when working on macOS is the window management.

I’ve tried a few window management apps in the past, and today I’m giving Rectangle a spin. So far, the keyboard shortcuts feel logical and the app isn’t trying to do too much.

We’ll see how it goes!

This morning I added a new page with an embedded emoji picker: https://www.seanmcp.com/sm/emoji-picker/

It embeds Nolan Lawson’s emoji-picker web component in a webpage and prompts you to copy when selecting an emoji. You can see the source code here.

I’ll use this when doing computer activities with my three-year-old son, but others may find it useful as well.

I enjoyed reading Hacker Christianity by Ben Hoyt. It’s nice to ready perspectives from the intersection of Christianity and programming. I’ll be on the lookout for more like this.

Today I learned that in Vim :w stands for “write” and is not a weird alias for “save.” That’s much easier to remember.

I added a /uses page to keep track of the extensions and programs that I use everyday. Nothing is revolutionary, but there are a few extensions and user scripts that I find helpful.

github1s is the coolest thing that I have seen in a while. By changing the url of any GitHub repository, you can open the repo in a VS Code browser. This is begging for a userscript to add a link to every GitHub repo

When I was teaching, teachers had a popular aphorism: “You really know something until you have to teach it.” Today I learned that this idea was given the term “the illusion of explanatory depth” (IOED) by psychologists in 2002.

Further reading: [0], [1], [2], [3], [4]

I tried for a long time to find this resource, so I’m going to save it here: Add DuckDuckGo-powered search to your website

You can add site-wide search to any static site using an HTML form and a few fields. Pretty cool!

To find the date a file was created in Node, you can use the fs.stat or fs.statSync methods and look for birthdate. See this answer on StackOverflow.

This might work differently based on your operating system, so your mileage may vary.

Max Böck has a guide for persisting files inbetween Netlify builds using a custom plugin.

It looks pretty straightforward, so I’m going to file that away for later 🗄

The W3C has a feed validator that is pretty handy when you are working on generating RSS/XML feeds.

10 bad TypeScript habits to break this year was shared on the latest edition of JavaScript Weekly.

There are a few useful tidbits in there, but I’m particularly interested in using class Foo implements Bar to mock data for tests (6) and using descriptive names for generics (7).

I added a new section to the site called “Bookshelf”. This was modelled after David Rupert’s bookshelf, with the additional ability to include notes for each book.

I’m really enjoying the ability to add features to my site as needed.

🚀 I released a new version of eleventy-plugin-emoji this morning. Two minor changes: 1) the filter now supports a label, and 2) the default class name is now eleventy-emoji.

Nunjucks and Liquid have different methods for passing arguments to a filter.

In Nunjucks, it’s:

{{ 'value' | filter('arg') }}

In Liquid, it’s:

{{ 'value' | filter: 'arg' }}

Each note is a simple markdown file. All the data necessary to render on the screen is set at a higher level, so it’s super simple.

Edit: Okay, I needed to add a date field.

My favorite part of this setup is that I can commit a new note through GitHub, which automatically triggers a Netlify build.

Why messages? I really like the idea of preserving content that would otherwise be shared on social media on my own site.

It’s definitely not the most popular option (in fact, I doubt anyone else will read these), but I think it’s the right decision in the long run.

Hello world!