TIL

React Router’s Link component isn’t just for internal links; it can work like an anchor tag, too, sending users outside the application. Use reloadDocument prop to get this behavior. <Link reloadDocument to={'https://reactrouter.com/en/main/components/link'}>Link docs</Link> docs

When you combine cat (concatenate) with > (output redirection), you can create and write to a file from the command line. $ cat > test.txt Hit enter after the file name, and your terminal will wait for input. End the file with CTRL + D. $ cat > test.txt one two three $ cat test.txt one two three >> works, too; appending to the file as expected.

With the new as const construct, we can derive a TypeScript union type from a JavaScript array! const builderSteps = [ 'communications', 'estimates', 'health status', 'procedures' ] as const; type BuilderStep = (typeof builderSteps)[number]; This lets us both type a slice of state, type its updater, and build JSX elements all from the same array, a virtuous cycle. const [step, setStep] = useState<BuilderStep>('communications') const handleStepClick = (step: BuilderStep) => setStep(step) {builderSteps.map(step => <button key={step} onClick={() => handleStepClick(step)}>{step}</button>)} const assertions

Open Chrome DevTools, and click the three dots in the top right corner. Select ‘More Tools > Sensors’. Under ‘Location’, set your timezone override.

We’re back with another SVGO configuration you’ll probably want: disabling ID minification. SVGO has a default plugin called cleanupIds that takes every ID in the SVG (e.g. clip0_506_1332) and minifies it to a. This works okay until there are two different SVG’s on the page. When that happens, the ID’s become invalid and conflicting HTML and your images don’t compose correctly. Disable this in the SVGO config file: // svgo.config.js module.exports = { plugins: [ { name: 'preset-default', params: { overrides: { cleanupIds: false, }, }, }, ], };

When you allow a user’s behavior to add or remove a border from an element, that can cause the page to ‘jump around’ as the border is added or removed. A common example is a border around an element that is ‘selected’. Fix this issue by adding a transparent border around the element and giving it color when it’s selected. No more jumps. .element { border: 1px solid transparent; } .selectedElement { border-color: $selected-color; }

Need to undo a code change? You could revert. Or, you could apply the patch without creating a commit. That’s what I want to do much of the time. Use git apply with the -R (reverse) flag: git show 8cc13b1 | git apply -R All the changes from 8cc13b1 get applied to your working directory. In a large commit, do this tactically by limiting to just one file or directory. git show 8cc13b1 src/fileToRevert.ts | git apply -R

A project I’m working on uses SVGO to clean and minify SVG files. There’s one problem: SVGO by default removes the viewBox attribute, which comes embedded in the SVG’s I receive and have stylistic meaning in my codebase. You can override this default by using an SVGO config file: // svgo.config.js module.exports = { plugins: [ { name: 'preset-default', params: { overrides: { removeViewBox: false, }, }, }, ], }; Applied like so: ...

Autojump is my tool of choice for navigating directories. If I enter the following into the terminal: $ j til Autojump will try to guess where I want to go among directories I’ve previously visited. It uses a database of directories and their relative rankings to do so. But there’s a problem! These day I only want to visit ~/oss/til. In the past I’ve visited ~/oss/hr-til and ~/oss/tilex hundreds of times. Autojump always sends me there first. I don’t want that! ...

Today in “Let JavaScript Surprise You”: let array = [1, 20, 11, 10, 7, 17, 2]; console.log(array.sort()); > [1, 10, 11, 17, 2, 20, 7] 😳 The numbers are not sorted as we might expect. What’s going on here? From Mozilla’s docs: The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values. Now this sorting makes sense! Luckily, sort accepts a function, so here’s the sorting we intended: const sortNumbers = (first, second) => first - second console.log(array.sort(sortNumbers)) > [1, 2, 7, 10, 11, 17, 20]