TIL: Today I learned...

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.

Today I learned about a key difference between how javascript handles null values in interpolated strings compared to a language like C# In C#: var param1 = null; var queryString = $"param1={param1}"; // => param1= In Javascript var param1 = null; var queryString = `param1=${param1}`; // => param1=null the latter is probably not what you want since your api will likely set param1 to a string value of “null”.

Today I learned about Object.fromEntries() in javascript which essentially lets you convert a list of key/value pairs into an object (this is the same as the lodash function fromPairs). This came in handy when I needed to convert a list of entities into a lookup object like: Object.fromEntries( users.map((user) => { return [user.id, user.isSelected]; }) ); // => { '1': true, '2': false, '3': false }

Today I learned about a devtools feature that helped me debug the styling of an element that would disappear when the input element lost focus which happens when you click over to the devtools. If you press ctrl+shift+p to open the command palette in DevTools, and type “focus”, you’ll see a command to “Emulate a focused page” which will leave the focus on the element in the page even when you click into the DevTools. ...

Today I learned you can have ternary expressions inside of interpolated strings, you just need to wrap it in parenthesis: $"{timeSpan.Hours} hour{(timeSpan.Hours > 1 ? "s" : "")} ago"

I recently discovered the Pretty Typescript errors Vscode extension that makes complicated Typescript errors much more readable in Vscode