168 TILs and counting...

Disabled buttons are bad for accessibility

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

lh and rlh units

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:

Native node import path aliases

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

Override nested dependencies with npm

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

Use ChatGPT to help you write architectural decision records

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

Blob URLs

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

every() returns true for an empty array

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

 · 1 min · 

Update git credentials in Windows

Today I learned that if you need to update (or delete) credentials that were previously saved with the git-credential-manager, then you have to go the Windows Credential Manager. Find it under Control Panel -> Credential Manager -> Generic Credentials. Read more.

Calling an extension method on a null instance

Today I learned that you can call an extension method on a null instance of the type. I had always assumed without thinking about it too hard, that the reason string.IsNullOrEmpty isn’t defined as an extension method in the framework is because you would get NullReferenceException. But if we were to define an extension method like public static bool IsNullOrEmpty(this string s), and call it like if(s.IsNullOrEmpty()) this is just syntactic sugar for if(StringExtensions.IsNullOrEmpty(s)) and therefore it’s safe to call on a null instance. ...

Zeal offline documentation browser

Today I learned about a cool project called Zeal that let’s download and browse the documentation for a bunch of projects. I’ve always liked the idea being able to continue working even without internet.

 · 1 min ·