TIL

Passing props conditionally a component makes sense in many situations. Imagine a select box that receives an isDisabled prop that disables the input. Maybe we only want to set it if it’s true. For one, it’s a bit cleaner than setting it to its default false much of the time. And maybe we want to select a certain default value in that same scenario. Enough theorizing! Here’s the code: <Select options={itemOptions} {...(someCondition && { isDisabled: true, defaultValue: [itemOptions[0]] })} /> Let me explain the magic. ...

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

⌘ + 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