188 TILs and counting...

Input modes

Today I learned that iOS changed the way it handles the inputmode="numeric" attribute on HTML input elements. It used to display the full number keyboard as shown here: I couldn’t find it documented anywhere but, after testing various versions on BrowserStack, I found that starting with iOS 14 the numeric keyboard is the same as decimal but without the decimal key: ...

:has selector

Today I learned about the new :has() selector in CSS. It’s also referred to as the “parent” selector and that’s probably the most straightforward use case but this post shows several cool use cases. I used it today when I needed to apply a style to a shared root element but only on a specific page, but all of the styles are bundled into a single CSS file that’s loaded on every page: ...

Use media queries in javascript with the matchMedia() method

Today I learned that the matchMedia() javascript method lets you match against media queries and respond accordingly with javascript. That could look something like this: const mediaQuery = window.matchMedia('(min-width: 768px)') // Check if the media query is true if (mediaQuery.matches) { // Then trigger an alert alert('Media Query Matched!') } You can also add an event listener to the mediaQuery which you’ll want to do to respond to the user changing the size of the window — see this post for details on how to do that. ...

 · 1 min · 

Numeric separators

Today I learned about numeric separators in javascript. They are a small bit of syntactic sugar to make large numeric literals easier to read by letting you insert underscores anywhere in the number. For example, if you need to specify 10mb in byes, instead of 10485760, you can write it as: const maxUploadSize = 10_485_760; They were added in ECMAScript 2021 and in C# 7.

Clear site data

protip: if you need to clear out some saved data (like cookies) for a particular site, Chrome dev tools has a handy “Clear site data” function. You can get to it from the “Application” tab: or from the command palette which you can invoke with ctrl+shift+p: To me this is much more convenient than trying to go through the normal user settings for clearing There is also chrome://settings/content/siteDetails?site=https%3A%2F%2Flocalhost

bash vs sh in git hooks on windows

Today I learned that sh is not the same thing as bash.

Chrome devtools ignores form resubmission

Today I learned that if you have the chrome devtools open, then Chrome will suppress the confirm form resubmission dialog: This threw me off for a minute because I couldn’t figure out how the page was maintaining the state when I would refresh after a post. I couldn’t find it documented anywhere but it’s a nice convenience during development though it could be confusing if you’re unaware of it.

Cherry pick a range of commits

I just recently learned that you can actually cherry pick a range of commits instead of just a single commit: git cherry-pick c1..c3 The above is using the two-dot range notation (..). I was a bit surprised by this because I thought that this was the purpose of rebase --onto — to take a series of commits and apply them one at a time on top of some other commit. Turns out that they both essentially do the same thing (for each commit they call merge-base under the hood and apply a 3-way merge though you can also think of rebase as a series of cherry picks) but one can be more convenient than the other depending on what you’re doing or how you prefer to think of the operation. ...

Nullish Coalescing Operator

Today I learned that javascript gained a nullish coalescing operator (??) in ECMAScript 2020. const result = potentialEmpty ?? fallbackValue; It return the right operand if the left operand is null or undefined so for me this is a convenient alternative to using the OR (||) operator if I don’t want the fallbackValue on falsy values like 0 or an empty string.

PC Manager is Microsoft’s cleanup tool

I used to have tools like CCleaner and Revo uninstaller installed on my windows machines but I recently learned that Microsoft now has their utility called PC Manager that does things like free up some disk space and disable startup apps. Though as this article points out, you can accomplish a lot of similar tasks without a dedicated tool, so it’s more for if you find it convenient.

 · 1 min ·