126 TILs and counting...

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

June 27, 2024 · 1 min · Brandon Pugh

bash vs sh in git hooks on windows

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

June 19, 2024 · 1 min · Brandon Pugh

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.

June 12, 2024 · 1 min · Brandon Pugh

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

June 4, 2024 · 2 min · Brandon Pugh

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.

June 3, 2024 · 1 min · Brandon Pugh

ISO-8601 Duration Format

I learned about the ISO-8601 duration format today. It’s a way to represent a duration of time in a standard format. For example, P3Y6M4DT12H30M5S represents a duration of 3 years, 6 months, 4 days, 12 hours, 30 minutes, and 5 seconds. https://www.digi.com/resources/documentation/digidocs/90001488-13/reference/r_iso_8601_duration_format.htm

May 31, 2024 · 1 min · Brandon Pugh

View the conflicts resolved in a merge commit

Today I learned that in Git 2.36, the --remerge-diff option was added to git show. This effectively lets you view any merge conflicts that occurred during a merge commit and how they were resolved. So for instance, git show --remerge-diff <commit-message-id> would show something like: Under the hood, it recreates the merge with the conflicts and diffs it with the merge commit so the conflict markers are shown in red since the merge commit removes the conflict markers during resolution....

May 29, 2024 · 1 min · Brandon Pugh

The viewport scroll bar problem

Today I learned that the viewport units in CSS don’t account for the width of visible classic scrollbars like on Windows. This means that if you use width: 100vw to make an element the full width of the page and then a scrollbar appears, it will cause the element to overflow (by 17px which is apparently the width of Windows scrollbars) and create a horizontal scrollbar. CSS media queries don’t take them into account either, so if the viewport width is close (say within 17px) of a breakpoint then the appearance of a scrollbar will cause it to cross that threshold....

May 28, 2024 · 1 min · Brandon Pugh

Penpot

I just heard about a promising new design tool called Penpot that positions itself as an open-source alternative to Figma. They recently added support for CSS grid layout which I’m looking forward to testing out. https://www.smashingmagazine.com/2024/04/penpot-css-grid-layout-designing-superpowers/

May 22, 2024 · 1 min · Brandon Pugh

BFCache

Today I learned that the Backwards/forwards cache (BFCache) is a thing. This is the cache where the browser keeps a snapshot of a webpage so that it’s able to display almost instantly when a user clicks the back or forward buttons. This post gives a nice overview of the BFCache and how it works — apparently “Chrome usage data shows that 1 in 10 navigations on desktop and 1 in 5 on mobile are either back or forward”....

May 21, 2024 · 1 min · Brandon Pugh