TIL: Today I learned...

Pressing gx while over a URL in vim will open that url. Confirmed it also works in vscode-vim.

This is another #til by proxy. A teammate asked about a CSS selector I used which has come to be referred to as the “lobotomized owl” (* + *): .flow > * + * { margin-top: var(--flow-space, 1em); } What this does is select every child element of the .flow class except the first one. You can also use newer CSS selectors to do the same thing in a way that might be more obvious: .flow > *:where(:not(:first-child)) { margin-top: var(--flow-space, 1em); } The above snippet is probably my favorite CSS utility called flow spacing. ...

Today I learned that FFmpeg is the easiest (only?) way to trim/cut a video without re-encoding it. You can specify a start and stop time like so: ffmpeg -i input.mp4 -ss 00:01:30.000 -to 00:04:05.000 -c copy output.mp4 The key is the -c copy parameter which will just copy the data frames for operations where they don’t need to be modified. This is nice because it’s way faster than decoding and re-encoding and you don’t have any loss in quality if you’re not working with a raw format. ...

Today I learned that there’s now an HTML element called datalist that’s basically an autocomplete-like input element.

Today I learned that Github has a cool dependency review feature for pull requests. If a dependency file like a package.json or .csproj has been modified, you can click on the “rich diff” button and it will list out any dependencies that changed or any vulnerabilities for those versions. It’ll even list out sub-dependencies in a package-lock.json which is otherwise pretty inscrutable.

Today I learned that disabled buttons are potentially bad for accessibility. I realized long ago that disabled buttons can be bad for UX but I just saw Chris Ferdinandi’s post Don’t Disable Buttons, and learned that disabled buttons aren’t focusable which means they don’t work well with screen readers or navigating with the keyboard. I usually recommend against disabling form submit buttons when there are validation errors because the user has no feedback as to why it’s disabled, but Chris gives the example of disabling while the form is being submitted (which I’ve probably done in the past) and he goes into detail about the issues with this approach and a good alternative.

Today I learned that there are new line height units in CSS. The lh unit is “equal to the computed value of line-height”. If nothing else this will be nice for a small annoyance I’ve run into before of vertically centering icons:

Today I learned that node natively supports import path aliases with the imports field in package.json. The nice thing about this is that they’re supported by most node tools now so you don’t need to configure your aliases separately in different tools like eslint, webpack, vite, etc… If you’re not familiar with import aliases, they’re a handy way to avoid unwieldy relative import paths. instead of: import utils from '../../../../shared/utils'; you can have: import utils from '#shared/utils'; A nice config to start with is something similar to: ...

Today I learned that as of npm cli v8.3.0 (2021-12-09), you can use the overrides field in package.json to “override” nested dependency versions. This is handy for several scenarios, but for me I used for a third-party react component that has a peerDependency on v16 of react even though it works just fine with v18 but it isn’t under active development at the moment so I had to override the version it accepts: ...

I’ve been discovering recently that ChatGPT is actually pretty good at helping write Architectural Decision Records (ADRs). Like most writing tasks, I’m finding ChatGPT is good at giving me a nice starting point instead of staring a blank template. Even with as simple a prompt as “write an architectural decision record on why we chose to go with react instead of angular”, it’ll give a decent list of pros and cons on the topic in a common ADR template. I can also refine it further by saying “write it using the following template instead…” ...