TIL: Today I learned...

This is probably a very niche use case, but I learned today that you can abbreviate commands that git populates in the todo list during an interactive rebase. So instead of this: pick deadbee The oneline of the commit pick fa1afe1 The oneline of the next commit It’ll look like this: p deadbee The oneline of the commit p fa1afe1 The oneline of the next commit You can enable this with git config --global rebase.abbreviateCommands true. ...

Today I learned about the font-variant-numeric CSS property that lets you control alternate glyphs for numbers. Not every font will support all of these but the tabular-nums option is common and seems especially useful for data in grids. Using Font Variant Numeric

Today I learned that there’s a new javascript array method that returns a new array with the element at the given index replaced with the given value. Convenient for manipulating array values without mutating the original array. const arr = [1, 2, 3, 4, 5]; console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5] console.log(arr); // [1, 2, 3, 4, 5]

Today I learned that you can add //# sourceURL=<anything>.js special comment to an inline script tag to have it show up as a separate javascript file in the dev tools sources tab. This makes it a bit easier to work with especially when you have a huge inline script tag you’re dealing with. It even works with eval() too if you’re unfortunate enough to be dealing with that. ...

Today I learned that there is a Content-Security-Policy (CSP) directive connect-src that you can use to restrict all outgoing requests from your website to only the domains that you specify. This is a powerful mitigation against any kind of script injection attacks since no data can then be exfiltrated from your page. It applies to XMLHttpRequest (AJAX), WebSocket, fetch(), <a ping> or EventSource. CSP is an HTTP response header for enhancing the security of a site and there are of course several other directives you might want to enable. ...

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