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. It looks like autocomplete="new-password" is one people tend to use especially for any type="password" fields that aren’t actually meant to be a user’s login password. See this StackOverflow question for more discussion. ...
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. Handy for when the backend isn’t ready or you don’t want to take the time to get the app in the correct state to test a UI change.
Today I learned that dev containers are an actual spec. I’d been hearing the term more lately but I thought it was a general term for containers used for local development but it’s actually an open spec for configuring an entire development environment within a container and it’s what you use to configure a github codespace for a repo. But the cool thing is you can use the vscode Dev containers extension and vscode will reopen in a docker container with all the dependencies, extensions, and configuration specified in a devcontainers.json. ...
Today I learned that browsers now support an accent-color property on some form inputs for customizing their color. This is especially nice for checkboxes and radio buttons because now I no longer need any workarounds I’ve used in the past to make a decent-looking checkbox. It will also ensure that it’s accessible by automatically adjusting the color of the check to an appropriate contrast: <input type="checkbox" class="yellow" checked /> <input type="checkbox" class="purple" checked /> <style> input { display: block; width: 30px; height: 30px; } input.purple { accent-color: rebeccapurple; } input.yellow { accent-color: yellow; } </style>
Today I learned that you can configure git to use a different diff viewer when displaying diffs from the command line. You do this by setting the pager config git config --global core.pager delta and delta is a cool one written in Rust that can even display line numbers and syntax highlighting. git show produces: Relatedly, it uses the same themes as bat which is a cat command line replacement with syntax highlighting that is pretty nice.