TIL: Today I learned...

Today I learned about the valueAsNumber property of html number inputs. So instead of having to parse the value like: const num = parseFloat(e.target.value) You can do: const num = e.target.valueAsNumber For example in react: return ( <input type="number" value={number} onChange={(e) => { // ✅ const num = e.target.valueAsNumber setNumber(num) }} /> ) Work With Number and Date Inputs in JavaScript

Today I learned that vscode has an option to preserve case with find and replace (I somehow never noticed the “AB” button before). I’ve always wanted this when having to rename an entity in a file with instances both capitalized and lowercase. I actually discovered this because I saw that this feature was just added to the latest Visual Studio 2022 preview And for vim users, there’s Vim Abolish 😁

Today I learned about the <use> element and how you can use it to create SVG sprites. It turns out that my preferred way of working with svgs in react by embedding them in the components, is not great for performance or bundle size. But as Ben Adam’s post shows, it looks like inline svgs using sprites gives you the best performance to development experience tradoff.

I just discovered that there is a autocomplete="one-time-code" value you can use on mobile devices where the operating system will autopopulate the field with a code that the user receives via SMS. I haven’t had a chance to test it out but it seems pretty cool and I wish every banking site would just add this one html attribute (since they seem unable to add any MFA option other than SMS)....

Today I learned that if you’re using the fairly new --update-refs feature of git to update multiple refs during a rebase, git won’t update a ref if it’s currently checked out in another working directory for that repo. This makes sense but git currently doesn’t give you any feedback that it wasn’t updated or why. It wasn’t until I tried to manually update it with a git branch --force that it told me the issue:...

I just learned that you can highlight text in PR descriptions and comments on Azure devops by using the <mark> element in your markdown: <mark>Notice this!</mark> I don’t think I was even aware of the mark html element even though it’s been around for a while now.

Today I learned that Google Drive uses the same video player as YouTube so if you want to link to a specific timestamp in a video you can append a URL parameter like t=<number of seconds>. So to share a link to a video and have it start playing at 10:44, the URL will look like /view?t=644. A colleague also pointed out that you don’t have to calculate the timestamp in seconds — the t parameter accepts a shorthand like so t=10m44s

Today I learned that autocomplete="off" tends to be completely ignored by browsers these days because they seem to have the attitude that websites don’t use it correctly. Apparently the best way to prevent a browser from trying to autofill a field is to tell the browser it’s not the field it thinks it is with something like autocomplete="something-else". If it’s anything the browser doesn’t recognize it won’t try to fill it....

Today I learned that as of last month all modern browsers support css nesting! So instead of having to define styles like this: .header { background-color: blue; } .header p { font-size: 16px; } .header p span:hover{ color: green } you can instead do: .header { background-color: blue; p { font-size: 16px; span { &:hover { color: green } } } } This was the last feature of Sass that I used regularly that was missing from native CSS (CSS variables being the first big one that caused me to drop pulling sass into projects)....

I recently discovered Mock Service Worker, a clever javascript utility that let’s you mock your API by intercepting network requests. I’ve started using it in my frontend tests after reading Kent’s article Stop Mocking Fetch and it’s a nice way to test a component is handling network requests appropriately without actually hitting an API. The novel aspect is that it can install itself as a service worker (which can intercept network requests for caching) in your app during development and reuse the same mock requests that you’ve setup during testing....