TIL

Sometimes in TypeScript we’d like to say a function can either have one typed prop, or the other, never both and never neither. This can be achieved with a union type and type never: type Props = { markdown: string, copy?: never } | { markdown?: never, copy: string} }; const component = ({ markdown, copy }: Props) => markdown ? parseMarkdown(markdown) : <>copy</>; console.log(component({ markdown: "### Important" })) // <h3>Important</h3> console.log(component({ copy: "Just information" })) // <>Just information</> console.log(component({ copy: "Just information", markdown: "### That conflicts })) // ❌ Type error console.log(component({})) // ❌ Type error Our component can receive a string of markdown, which it will parse, or raw copy, which it will not parse. Always just one, never both, and never neither.

If you’re creating a hyperlink with query params, and those param values can have plus signs, it’s important to encode them values. We do this with encodeURIComponent: const email = `jake+testing@example.com` const loginLink = `https://example.com/login?email=${encodeURIComponent(email)}` window.open(loginLink) If you skip this step and try to read the query parameters received by ’example.com’ your email param value may be interpreted as with spaces instead of pluses, i.e. jake testing@example.com. Per the docs: Within the query string, the plus sign is reserved as shorthand notation for a space. Therefore, real plus signs must be encoded. This method was used to make query URIs easier to pass in systems which did not allow spaces. ...

Exploring your JS dependencies locally is a great way to learn and experiment. Here’s how to load a dependency from your /node_modules directory into the Node REPL. $ node > cn = require('classnames') > cn("always", { never: false, sometimes: true }) 'always sometimes'

I’m reading Functional-Light JavaScript by Kyle Simpson, and learning a lot! Today I learned about the functional programming utility known as ‘identity’. Identity is a unary function that simply returns its argument. A simple idea that can be powerfully applied, as JavaScript coerces the returned argument to boolean: > const identity = (arg) => arg > ["", false, "keep", null, undefined, "these"].filter(identity) [ 'keep', 'these' ] I’ve done something similar for years by filtering to boolean, or writing my own (I didn’t know it had this name) anonymous identity function. ...

Today I solved a mystery: a file was being Git-ignored in a new project that didn’t have a .gitignore. Here’s me learning this by trying and failing to add it: $ git add destroy.sh The following paths are ignored by one of your .gitignore files: destroy.sh This output tells me some .gitignore is telling Git to ignore my script. Another way to confirm this is the check-ignore command: $ git check-ignore destroy.sh destroy.sh The output here is the match; a file named destroy.sh is indeed being ignored. But how? We can answer that question with the -v flag: ...

I’m using a JavaScript text editor library and when it fails to load, there is no form field on the page at all. While pondering that potential issue, I learned how to block a URL in Chrome’s DevTools. There are a few way to do this; the most direct for me is: Open DevTools and the Network Tab Click “JS” and find the JavaScript file I want to block Right-click and choose “Block request URL” or “Block request domain” Reload the page to see the result.

Complex HTML forms often end up with multiple submit buttons. Consider a form for taxes: there’s a button to save a draft and another button to submit for processing. They both trigger the submit action on the same form. How could we accomplish this while keeping the buttons fairly simple? One solution is to set the buttons’ value: <form onsubmit={onSubmit}> <!-- Form fields here --> <input type="submit" value="save" /> <input type="submit" value="submit" /> </form> Then in the submit handler, we read the value. ...

Note: This applies to Zsh, but the process would be similar for any terminal. In Zsh, if you type man cd, instead of a manual page you get an output containing this: See the built-in command description in the appropriate shell manual page. What’s going on here? Here’s a summary: Builtin commands are contained within the shell itself. When the name of a builtin command is used as the first word of a simple command (see Simple Commands), the shell executes the command directly, without invoking another program. Builtin commands are necessary to implement functionality impossible or inconvenient to obtain with separate utilities. –“Shell Builtin Commands”, https://www.gnu.org/ ...

autofocus is a global attribute that sets a field as focused on page load. <input name="first_name" autofocus /> No JavaScript required! A use case could be a new customer form that an employee fills out multiple times a day. By autofocusing the first name field, you could save that employee thousands of clicks. Carefully consider user experience and accessibility before using this attribute. Docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus

When using radio, you might experience a strange phenomenon: the radio clock refuses to stay correctly set. I saw this recently on a car stereo that continued to reset its clock to an hour early for my timezone. The culprit is a system called RDS, Radio Data System. RDS allows radio transmitters to encode their program information, station identification, and… the local time. Though I didn’t have a tool to debug the signal on hand, my theory is that a local radio station was sending the incorrect time of 10:15 AM instead 11:15 AM. My car was read it and preferred this data. We live near the border of the Atlantic timezone, so that’s one reason an incorrect message could have been sent. Disabling the RDS Clock Sync feature and setting the time correctly fixed the issue.