TIL

Anytime you add a header to a markdown file, GitHub attaches an href with its downcased name. ‘JavaScript’ receives a link to #javascript, for instance. Leverage this by adding a table of contents to your README with links to the headers further down the document: ### Table of Contents - [Cucumber](#cucumber) This will link to a header containing ‘Cucumber’. h/t Josh Branchaud

The Chrome DevTools Network Tab is incredibly useful for frontend web development, but it can be noisy. Perhaps you’d like to filter it down by HTTP status code? See only redirects, so you can fix routes? Or only successful requests, so you can know what’s working? The Network Tab supports this. Here’s a filter to just temporary redirects: status-code:307

⌘ + R.

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