TIL

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. ...

In Zsh, if you type man cd, instead of a manual page, you’ll get this: See the built-in command description in the appropriate shell manual page. To see Zsh’s implementation of cd, we need to view Zsh’s built-in man page: man zshbuiltins ...

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.

When doing web programming in a context where scroll might be expected, you may see some surprising behavior in the scrollable HTML– an inexplicable gray bar on the bottom or right of the element. ...

Today I had a situation where I wanted a child component to re-render on command. The solution I found was to to put a key on it, and then change the key when the re-render is desired. const Parent = () => { const [childKey, setChildKey] = useState(0); const rerenderForm = () => { setChildKey(childKey + 1); } return ( <> <button onClick={rerenderForm} type="button">Rerender the form!</button> <Form key={childKey} /> </> ) } In this example, which the button is clicked, our childKey is incremented. To paraphrase the React docs, when the key changes, React “loses track” of the form. And because of the new key, at the same time React sees a new form; a re-render has occurred.