TIL

Want to connect a list of React components with a delimiter, like a comma? Imagine a sentence of: Link A, Link B, Link C. How could we programmatically achieve this in React? Here’s one answer, inserting a comma before all but the first list item: {items.map((item, index) => ( <React.Fragment key={item.id}> {index > 0 && ', '} <a href={`/items/${item.id}`}>{item.name}</a> </React.Fragment> ))} Lots of other good suggestions in this Gist.

Suppose you want to append to a file that’s write-protected and can only be edited via sudo. Is that possible? It is! A technique I discovered today is to use tee with sudo: $ cat file.txt | sudo tee -a /etc/hosts This lets me append the contents of file.txt to the write-protected /etc/hosts file by entering my password.

Reviewing a GitHub PR on that contains a lot of whitespace changes? Extra whitespace can make it challenging to evaluate the substance of a PR. It’s high on my list of things that should generally not be refactored. Ignore whitespace by adding the query parameter ?w=1 to your diff URL.

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

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, }, }, }, ], };