TIL

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.

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