TIL

Git hooks are scripts that run at key moments in the version-control lifecycle. And, they’re just scripts! So we can call them when we want. <shell> <hook> For me in this project (Zsh + Husky), this could look like: zsh .husky/pre-commit This runs my pre-commit script anytime.

When developing a local Node module, we might want to point another project’s package.json at the local module. Here’s how you do that. ...

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" } } ...

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. ...

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! ...

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: ...