Today I learned that you can disable an entire form by wrapping all the inputs in a <fieldset disabled>. You might think that you can disable a form with <form disabled> but unfortunately, the form element doesn’t have a disabled attribute. Fieldsets are typically used to group related form elements (and in some cases can improve accessibility) — so you can have multiple in a form and disable portions of the form separately. ...
I just discovered the interactive mode of git clean. Git Clean is handy when you want to clear out anything from your local repository folder that isn’t tracked by git. This often includes build outputs and other generated files. This is useful if for instance Visual Studio is acting weird and you’re tempted to do a fresh clone to fix it. I have a git alias I use for this: cl = git clean -idx -e 'node_modules' ...
Today I learned that DeepGit is actually completely free even for commercial use. This is the best git blame utility I’ve come across because it lets you continue drilling down into the history of a line, kinda like a recursive blame. You do have to provide an email address to register but I think it’s worth it. It’s from the same developer of my preferred git client SmartGit but SmartGit does require a paid license for commercial use.
Today I learned that npm can handle merge conflicts in your package-lock.json file for you. After you resolve any merge conflicts in your package.json, you can just run npm install [--package-lock-only] and npm will resolve the conflicts in the lock file. If --package-lock-only is provided, it will do this without also modifying your local node_modules/. Solving conflicts in package-lock.json
Today I learned that you can now easily darken or lighten a color natively in CSS with the new color-mix function. Here’s a use case I run into a lot where you have a primary brand color and you need to darken it on hover: :root { --brand-color-dark: color-mix(in oklab, var(--brand-color), black 30%); --brand-color-light: color-mix(in oklab, var(--brand-color), white 30%); } .button:hover { background-color: var(--brand-color-dark) } This works by mixing the color with some amount of black or white. I also chose the oklab color space since it’s the most likely to produce what I’m expecting for this use case. ...
Today I learned that there is an HTML entity called “thin space” that you can use when you need less space between two characters than the normal space. The HTML code is   Thin Space might be the most underrated HTML entity. It can be used for a name like J. K. Simmons. Without spacing, the J and K would seem too close together; with a regular space, they seem too far apart. Insert a thin space and it is just perfect. - Typography Manual ...
Today I learned about a handy little Visual Studio extension called Copy Nice whose sole purpose is to address an annoyance I encounter frequently where the indentation is off when I copy and paste code snippets. With this extension, when code is copied it will automatically be formatted to take care of the leading indentation issue. Now if only there was some system-level utility to this do when copying from anywhere…
Today I learned that you can now implement smooth scrolling purely with CSS in modern browsers. By adding the following CSS: /* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */ @media screen and (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } the browser will scroll smoothly whenever scrolling is triggered either by Javascript (with something like document.documentElement.scrollTop = 0) or by linking to elements with an internal anchor link. It’s considered best practice to use the prefers-reduced-motion media query to only enable things like animations to be mindful of users with motion sensitivities. In my testing, however, the browser won’t ever smooth scroll if the user has prefers-reduced-motion enabled. ...
People like to joke that vim is impossible to exit, but I just discovered that there are actually several different ways to quit and :x is my new favorite. The :x command will save and quit but it differs from :wq in that it will only write the file to disc if there were any changes so the modified date of the file won’t get updated unnecessarily. This seems like the preferred behavior most of the time. That coupled with the fact that it’s slightly faster to type has made it my new default way to exit vim.
Today I learned that you can reference the upstream branch in git with @{u}. I used this to make a convenient git alias reso for “reset to origin”: git config --global alias.reso "reset --keep @{u}" note: I’m using --keep instead of --hard because it’s a bit safer I use this when a branch I’ve pulled down has completely changed on the remote and I have no changes (for instance when reviewing a PR) and a pull would be messy (a reset is also much faster depending on the number of commits). ...