TIL: Today I learned...

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

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

Today I learned that in a web page, when you’re working with Blob or File objects you can call URL.createObjectURL() to create a Blob URL that can be used as the source for anything that normally takes a URL like images or download links. It’s also apparently a good alternative to base64 encoded Data-URIs especially when dealing with larger amounts of data since a base64 encoded file will be 33% larger than the raw binary....

Today I learned that the javascript array method .every() will always return true for an empty array. [].every((x) => x > 1); // true [].every(() => true); // true [].every(() => false); // true For me at least, this was a bit surprising and I realized I’d been thinking about this function works incorrectly. Your first thought might be that this is another one of javascript’s quirks, but this is actually how most languages implement similar functions including Rust, Python, and C#:...