TIL

Prettier formats code in fenced code blocks! When I type three backticks and then a code, Prettier evaluates the code in the block and tries to format it per my global .prettierrc. I produce a lot of technical writing in markdown. I’ve often wondered if my fenced code blocks are valid, since I sometimes type them by hand. With Prettier, as long as I add a language identifier (e.g. typescript), that language is supported and configured for Prettier autoformatting, it will run on the block. ...

If you’ve been writing TypeScript for a while, you might have written code like this: // utils.ts export type Color = 'red' | 'blue' | 'green'; // app.tsx import {Color} from './utils'; As of TypeScript 3.8, there’s a better way to import! // app.tsx import type {Color} from './utils'; The difference here is one keyword, type. This tells the compiler: “Color is a type. You can erase it after transpilation.” The export is also erased when we use type. This solves a problem many developers might never have had. Consider this import: ...

New Vite TypeScript/React apps create themselves like this: createRoot(document.getElementById('root')!).render(<App />); What’s going on with that !? The ! is TypeScript is the non-null assertion operator. It’s a way of saying to our TypeScript compiler: “I know that this is not null; don’t check it.” Without it, you’ll see this on apps that have been converted to TypeScript, checking for root before loading the app. const root = document.getElementById('root'); if (!root) { throw new Error('Root element not found'); } createRoot(root).render(<App />); Type safety is great, here we control both index.html and this bootstrap code, so we know the element exists. If someone removed it, the application couldn’t start. The non-null assertion operator states this explicitly. ...

Vite’s default port, 5173, is leet code for the project’s name: 5 = “V” (Roman numerals 😉) 1 = “I” 7 = “T” 3 = “E” It also happens to be a different number from any project I’ve worked on, so that’s a DX win, too. Vite pull request

To load Cursor with context of the current directory, use: cursor . This opens the program with the current directory loaded up, ready for agent planning or execution. This requires the Cursor command-line module, which you’ll likely install when installing Cursor.

Today I learned about the Outbox Pattern. The Outbox Pattern solves a common problem. Consider a system that charges a payment, processes an order, and then sends an email. The payment, order-processing, and email-sending all happen in a database transaction— if any of them fails, we roll back. A question: when the payment and order succeed, do we wait for the email to send before deciding that the transaction succeeded? What it the email-sending fails; do we roll back the payment and order? ...

After version v12.17.0, Node’s REPL provides a preview effect. In this example, if we type 1 + 1, Node shows us the result in gray before before hitting enter: > 1 + 1 2 But what if I don’t want that? Here’s a script called repl that disables it as an option: #!/usr/bin/env node const repl = require('node:repl'); repl.start({preview: false}); When we start Node via this script, we disable the preview: $ ./repl > 1 + 1 Customizing REPL Output – Official Node documentation

With my Node versions managed via NVM, I want to be on the latest LTS. You can ensure that happens with these commands: $ nvm install --lts $ nvm alias default lts/* default -> node (-> v24.16.0) These two commands combine to say: “Install the latest LTS, and make my default that version.” See nvm --help for more information.

The Law of Demeter is important in object-oriented programming. But where does “Demeter” come from? AKA the “Principle of Least Knowledge,” here’s a simple example of the law: code that lets us ask an owner, “What is your dog’s breed?” class Dog belongs_to :owner belongs_to :breed def breed_name breed.name end end class Owner has_one :dog # ✅ Owner only knows about 'breed_name', # not what 'breed' and 'name' are. def dog_breed_name dog.breed_name end # ❌ Owner knows that dog has a 'breed', and # that 'breed' has a 'name.' def dog_breed_name dog.breed.name end end This name comes from the Demeter project, so named because the goddess Demeter is related to Zeus. So, in a way, the name and the idea aren’t related. But, I found this online: ...

Today I learned how to fill in an emoji with CSS. Here’s an example: .filledEmoji { color: transparent; text-shadow: '0 0 0 #86efac'; } This gave the microbe emoji (🦠) a filled style in my Conway’s Game of Life project.