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

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

There are a few ways to know that a file is a symlink. Here’s one I learned today. ...

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