TIL

Today I learned what tsc --watch is really for. You put it into your package.json as a script. // package.json { "scripts": { "watch": "tsc --watch" } } This lets us to build a TypeScript project on write: npm run watch With every change, we get a new dist/index.js. This an essential tool for quickly developing a TypeScript Node module. See tsc --help for more info.

I’ve written about lpr before; to me the ability to send a file to my printer from the command line is a magic trick. What if I want to know where the file is going to go before sending it? lpr’s docs say: The LPDEST and PRINTER environment variables are consulted first. If neither are set, the current default set using the lpoptions(1) command is used, followed by the default set using the lpadmin(8) command. ...

Today I built a system to read a markdown file from one location in my Hugo project into another. It has two parts, a shortcode that reads an argument and parses it as markdown: <!-- layouts/shortcodes/include-markdown.html --> {{ readFile (.Get 0) | markdownify }} And using that shortcode: <!-- about.md --> {{< include-markdown "doc/about-content.md" >}} This lets me put a file into docs/ and read it into my template, a handy way to reduce duplication in my app. ...

npm init is a nice tool for initializing a package.json. Today I learned that you should not use it on an existing JavaScript project! This blog is a Go project, but I use JavaScript dependencies for development. My manifest looks like this: // package.json { "scripts": { "test:e2e": "cypress run", "push": "npm run test:e2e && git push" }, "devDependencies": { "cypress": "^15.20.1", "prettier": "^3.8.3" }, "allowScripts": { "cypress@15.20.1": true } } I thought I could get away with running npm init on it to standardize the file. When I did, the program looked in my node_modules directory and saw ~170 dependencies, most belonging to Cypress. ...

Something I put off until a bit into a personal project is adding an icon library. But, it’s essential to a good user experience. With Lucite there’s a fantastic open source option that’s easy to use. Add it to a React project like this: npm install lucide-react And then you’re ready to go: import {Camera} from 'lucide-react'; const App = () => { return <Camera />; }; export default App; No more hacky iconography in my MVPs. ...

We can open Vim in read-only mode in two ways: vim -R <file> Or: view <file> A use case could be a file on a server with credentials that we want to read but be sure not to change. See man vim for more information.

Today I got to try the experimental if/else syntax in CSS: /* Component.module.css */ img { transform: if(style(--isZoomed: true): scale(2) ; else: scale(1)); } I used it to pass a variable from React state to the stylesheet: // Component.tsx <img style={{'--isZoomed': isZoomed ? 'true' : 'false'}} /> I think conditional classes would be my preference for managing this for real, but this is an alternative. if() CSS Function — MDN

A goal of modular CSS is to scope styles to components. Globally styling elements like h1 is to be done sparingly. Instead, we use class syntax: /* Component.module.css */ .header { color: purple; } // Component.tsx import {styles} from './Component.module.css'; const Component = () => { return ( <section> <h1 className={styles.header}>A purple header here 💜</h1> </section> ); }; This keeps the header styles just on this element, in this component. But, we can still style elements: ...

There are a few ways to know that a file is a symlink. Here’s one I learned today. All my dotfiles are symlinks because I store them outside of the root directory. Here’s a conventional way to inspect a symlink: ls -l ~/.zshrc lrwxr-xr-x@ 1 jake staff 37 Jul 21 17:28 /Users/jake/.zshrc -> /Users/jake/code/dotfiles/./.zshrc How do we know it’s a symlink? The l at the beginning of the permissions list and the arrow -> are two clues. ...

It’s been a bit since I was typing SQL into a REPL. One interface that didn’t come back to me right away is the percent character in a like or ilike query: select full_name from users where full_name ilike 'jake%'; Returns: full_name ----------- Jake Gyllenhaal Jake Tapper Jake Worth (3 rows) This percent sign ensures we get all the Jakes. Here’s how I’m going to remember this next time. Like everything SQL, this an ISO/ANSI standard and there’s a long lost history. If you think like me, and you might wonder why this character is not an asterisk. Here’s my new mental model to reinforce the percent sign. ...