TIL

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: One culprit, on Mac, is the user’s scrollbar setting. As a UX and accessibility aid, Mac allows users to always show scrollbars when they are available. Considering this feature as a programmer, you can make sure you only offer scrolling when it makes sense, and educate users who don’t know they have this setting enabled. ...

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.

Be careful when making a network request like this to a Rails controller with strong parameters: // const employee = { name: "Jake" }; const updateEmployee = (id: number, employee: Employee) => axios.put<Employee>(`/employees/${id}`, employee) def employee_params params.require(:employee).permit(:name) end Note that our payload is expected under key employee– but we aren’t sending it that way. When this happens, Rails infers what goes where: PUT https://server.dev/employees/1 { "employee" => { "name" => "Jake" } } Notice that name is in the employee object, even though I didn’t send such a payload. This works fine until you send a parameter that’s not on the Employee model, such as a nested attribute. Then you get this: ...

When testing a serialized Rails API with RSpec, a common mistake is to assert about the response body, only to find that it’s an empty string. The controller is controlling, the view is presenting. What’s missing? What’s missing is the view: RSpec views are stubbed by default. This is ideal for most controller tests. Just not those asserting about serialized data. Render those views with render_views: require "rails_helper" RSpec.describe WidgetsController, type: :controller do render_views describe "GET index" do it "has a widgets related heading" do get :index expect(response.body).to match /<h1>.*widgets/im end end end

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.