TIL

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.

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