TIL: Today I learned... on Brandon Pugh's Blog

NPM 11.10.0 adds `min-release-age`

Thu, 21 May 2026 00:00:00 +0000

You can now specify a minimum age for installing package versions in NPM.

This is a concept known as dependency cooldowns that has gained popularity with the rise in supply chain attacks.

You need to be running at least v11.10.0 of npm but then you can add the following to your .npmrc file:

min-release-age=7

or set it globally with:

npm config set min-release-age=7

Now NPM won’t install any package version that was released less than 7 days ago.

If you don’t specify a version, i.e. npm install vite, then it will install the most recent version that satisfies the age requirement.

If you specify a version that doesn’t meet the age requirement then it will error out.

Note: if you’re running a version of NPM older than 11.10 then it will silently ignore the new config value.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Insert the last argument of the previous terminal command

Wed, 20 May 2026 00:00:00 +0000

Today I learned that you can use !$ in bash to use the last argument of the previous command.

The simplest example is:

mkdir /some/long/path
cd !$

You can do something similar in powershell by using a PSReadline binding:

Set-PSReadLineKeyHandler -Chord "Alt+." -Function YankLastArg

Thank you for keeping RSS alive. You're awesome.

Reply by email

Display git commit dates in local timezone

Tue, 19 May 2026 00:00:00 +0000

Most Git commands accept a --date= option with accepted values of relative, local, default, iso, or rfc to control how dates are displayed.

For example:

git show --date=local

And as usual, if you Git to always display dates this way then you can set it globally with:

git config --global log.date local

Thank you for keeping RSS alive. You're awesome.

Reply by email

List installed node versions with Volta

Tue, 12 May 2026 00:00:00 +0000

Volta is my preferred node version manager these days but the commands are a bit different to what I’m used to.

volta list - show the current tool versions in use
volta list node - show all the versions of node downloaded to the machine
volta install node@version - use the specified version of node. It will download and install it if hasn’t before otherwise it will just select it (there is no separate use command).

Thank you for keeping RSS alive. You're awesome.

Reply by email

Enable markdown in Google Docs

Fri, 01 May 2026 00:00:00 +0000

Today I learned that you can enable markdown in Google Docs.

This isn’t really full markdown support but it does make interoperating with markdown easier.

The best feature is it enables the “Paste from markdown” right-click option.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Rebuilding a 6v Power Wheels battery

Sun, 15 Mar 2026 00:00:00 +0000

We bought the “Fisher-Price Thomas & Friends Ride-On Train” for our toddler, and after some time, the battery stopped charging. It uses a Power Wheels 6V 2400 mAh NiMH battery (Model No. 1102822518 / Part No. 3900-8218). Apparently, this battery was fairly unique (and problematic) to this toy and has since been discontinued.

I, of course, did not want to scrap an entire Power Wheels toy that worked just fine except for the battery.

One thing I will say about it, though, is that it’s surprisingly repairable. I was able to open it up just by removing four Phillips screws.

From what I gathered, the circuit board is what makes this battery unique. It allows charging the NiMH battery via micro-USB instead of the typical Power Wheels charger.

All of the wires seemed fairly self-explanatory, except for two small additional wires coming from the battery pack.

Well, it turns out these 6V battery packs are just five rechargeable AA batteries strapped together. The wires were just going to a small thermistor to measure the temperature of the batteries as a way to gauge how much it’s charged.

After that, all I had to do was desolder the battery pack from the board, buy a replacement, solder it to the board, and tape the thermistor to the new pack. Then I sealed it all back up and I was good to go!

I did come across a service that seems to do this for you, but it turned out to be fairly straightforward to do it myself.

Thank you for keeping RSS alive. You're awesome.

Reply by email

datetime-local doesn't have full cross-browser support

Sun, 04 Jan 2026 00:00:00 +0000

I recently discovered the datetime-local input type doesn’t actually have full browser support.

If you have a form value that needs both a date and time component, then you might be tempted to rely on the platform to simplify your implementation and use datetime-local to avoid needing two separate inputs, the values of which you’ll need to combine at some point. Unfortunately I don’t think it’s supported enough to be usable in most applications.

The MDN page for datetime-local is a bit misleading because at the top it says it’s “Baseline widely available” but if you check the browser compatibility chart down at the bottom then you’ll see asterisks next to Firefox and Safari on Desktop and clicking that reveals that they only display a datepicker and not a timepicker.

This means that users have to manually type in the time which might be an acceptable tradeoff but if the user doesn’t add the time then Firefox will just return null as its value.

Firefox did recently address these issues in Firefox 144, but as of this writing it’s still behind an experimental flag.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Splice wires with solder seal connectors

Fri, 12 Dec 2025 00:00:00 +0000

After setting the Christmas tree this, a section of the builtin lights weren’t turning on and found two of the wires had been chewed through.

I didn’t want to have to throw out the whole tree so I set about fixing it. I wasn’t looking forward to it though as I thought I would have to solder the wires together and cover them with heat shrink tubing… a process that was going to be very annoying under a Christmas tree. I debated just taping them together with some electrical tape but I didn’t want to deal with it maybe coming loose while taking it in and out of storage.

Fortunately while googling for some tips, I came across these solder seal wire connectors which made the process a whole lot easier.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Fix 'value' does not exist on type 'HTMLElement'

Sat, 29 Nov 2025 00:00:00 +0000

It’s common to see the error Property 'value' does not exist on type 'HTMLElement' when working with react testing library.

Common advice online is to cast result using the as operator.

const title = getByPlaceholderText("test") as HTMLInputElement;

This is fine but feels incorrect and when using eslint-typescript will complain that the cast is unnecessary: This assertion is unnecessary since it does not change the type of the expression.

Then, thanks to this SO answer, I learned that the react testing library query methods can now take an optional type parameter:

    screen.getByLabelText<HTMLInputElement>("test").value,

This feels much cleaner and makes both the linter and compiler happy.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Sessions don't end when the browser closes

Wed, 12 Nov 2025 00:00:00 +0000

There seems to be a common misunderstanding about how session cookies usually work.

Closing the browser doesn’t necessarily clear out session cookies because the user can have the option of “Continue where you left off” enabled for Chrome startup. Folks usually enable this if they don’t want to lose their open tabs when Chrome closes, but Chrome also continues the session so session cookies could potentially persist indefinitely.

So if a user is having issues related to a site’s cookies, the most reliable solution is having them delete the cookies for this site. You can get to that fairly easily by clicking the settings icon on the left side of the address bar.

That takes them to the settings page with a button at the top to delete all the data for that specific site.

You can also copy/paste this in the address bar to go directly there for a specific site (replace stackoverflow.com with your actual site): chrome://settings/content/siteDetails?site=https%3A%2F%2Fstackoverflow.com

This Stack Overflow question shows that this isn’t how a lot of people expect it to behave.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Import external stylesheet into a layer

Wed, 22 Oct 2025 00:00:00 +0000

I’m working on a legacy project that’s stuck on v3 of bootstrap and just loads the full minified css file. We wanted to make it a bit easier to override some of the builtin styles and figured that the new @layer feature of CSS would be perfect.

I didn’t want to change too much about the stylesheets were aren’t and thankfully it turns out you can import a stylesheet into a layer:

<link href="https://ourcdn.com/content/css/bootstrap.min.css">

<!-- becomes ↓↓↓ -->

<style>
  @import url("https://ourcdn.com/content/css/bootstrap.min.css") layer(bootstrap);
</style>

The main downside is the @import rule doesn’t support Subresource Integrity so you’ll want to make sure it’s a trusted source.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Lowercase head behaves differently in git worktrees

Sat, 11 Oct 2025 00:00:00 +0000

Today I discovered that referencing HEAD in git commands should technically always be uppercase.

On case-insensitive file systems you can use lowercase head most of the time and it just works… as long as you don’t use worktrees.

If you use head while in a worktree then it resolves to the head of the main worktree and not the head of the worktree you’re currently in like you would expect.

I learned this the hard way after getting some very confusing results from the git command I was running.

This Stackoverflow answer explains exactly why it happens and gives the very sensible advice to “Avoid this bad habit: if you don’t like typing HEAD in all uppercase, use @”.

Thank you for keeping RSS alive. You're awesome.

Reply by email

You can use C# records in .NET Framework 4.x

Sat, 20 Sep 2025 00:00:00 +0000

Today I learned that you can use C# records that were introduced in C# 9 even if you’re not on .NET Core yet.

NDepend has a post on how to do this which is slightly more involved.

But per this Stack Overflow answer, all I did was add a file with the following:

namespace System.Runtime.CompilerServices { internal class IsExternalInit { } }

and that worked.

I’ve been using them in unit tests like this post describes.

Thank you for keeping RSS alive. You're awesome.

Reply by email

You can backup your git stashes

Fri, 29 Aug 2025 00:00:00 +0000

As of Git 2.51 there is now a process for backing up your git stashes.

The gist of it is there is now stash export command to export your stashes as a single reference and push them to a remote:

git stash export --to-ref refs/stashes/my-stash
git push origin refs/stashes/my-stash

and then on another machine or a different clone of the repo:

git fetch origin '+refs/stashes/*:refs/stashes/*'
git stash import refs/stashes/my-stash

Unfortunately this process isn’t that great for regular backups but can be useful if you need easily move lots stashes to another machine. For one off stashes though, it might be easier to create a patch file.

Thank you for keeping RSS alive. You're awesome.

Reply by email

ICS end dates are exclusive

Tue, 05 Aug 2025 00:00:00 +0000

Today I learned that per the spec, the DTEND value in an ICS file is exclusive for all-day events.

It makes sense but it’s not how most people think of date ranges.

I ran into this while making a small node script that takes a json array of events and generates an ICS file. This has been the most convenient way I’ve found to quickly bulk create events in Google Calendar. The only issue is the multi-day events were coming up a day short.

So for example if Spring Break is from March 16th - March 20th, then the end date would need to be March 21st:

DTSTART;VALUE=DATE:20260316
DTEND;VALUE=DATE:20260321

Pro tip: if you’re importing a lot of events into Google Calendar, create a brand new “test” calendar and import the .ics file into that calendar first to test it out that way if something is messed up you can just delete the calendar and try again. Otherwise you have to go through and manually find all the events that got added.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Apply a patch file

Tue, 22 Jul 2025 00:00:00 +0000

Today I learned how to create and apply a patch file with Git.

If you want to quickly create patch a file from your current changes just run:

git diff > mypatch.patch

or if like me you just want specific changes then stage them and then run:

git diff --cached > mypatch.patch

then to apply the changes all you need is git apply mychanges.patch

Unfortunately if there are conflicts then git will just give you an error: patch does not apply

I found if you add the following parameters it’ll be more likely to apply cleanly and if not then it’ll add conflict markers to the files and you can try to fix the conflicts and generate a new patch:

git apply --3way --ignore-space-change --ignore-whitespace mychanges.patch

I’ve been using this as a more convenient way to frequently re-apply changes I need locally compared to something like --skip-worktree.

I’ve also found it convenient for sending some quick changes to a teammate.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Share git configuration in repo

Sat, 12 Jul 2025 00:00:00 +0000

Today I learned that you can share a git config file in a repository for easily sharing certain local config settings with your team.

git config --local include.path ../.gitconfig

This adds the following to your local config

[include]
    path = ../.gitconfig

and will load any config values set in that file.

This has a couple advantages in that we only have to run a single git command and if we need to make future changes we only have to update the config file instead of requiring devs to run additional commands to get the update.

These are a couple of common settings I use on a team:

[core]
    hooksPath = ./src/git-hooks/
[blame]
    ignoreRevsFile = .git-blame-ignore-revs

Thank you for keeping RSS alive. You're awesome.

Reply by email

Quickly Fix A Misspelled Word

Sun, 06 Jul 2025 00:00:00 +0000

I just learned that you can have automatically fix a misspelled word with the top suggestion by typing:

1z=

This is opposed to the regular z= command for opening the regular list of spelling correction options.

Like Josh who I learned this from, I usually pick the first option so this is a bit more convenient.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Sudo for Windows

Wed, 25 Jun 2025 00:00:00 +0000

I just learned that Windows now has a builtin sudo command. You need to enable it from the Windows developer settings and then you use it similar to sudo on other operating systems.

I’ve been using gsudo for some time and I still prefer as it overall has a nicer experience and is more fully featured, but if you’re looking for one less thing to install then the builtin sudo is decent.

One thing I ran into though is in the default “new window” mode, if you want to run a powershell script elevated then you need to run it as:

sudo pwsh .\build.ps1

Thank you for keeping RSS alive. You're awesome.

Reply by email

Use skip-worktree to ignore modified files

Fri, 20 Jun 2025 00:00:00 +0000

Today I learned about the --skip-worktree command in git which will treat a file like it hasn’t been modified. This is useful if you have to modify a file locally but don’t ever want to commit it (config files are a common scenario).

Like me, you may have seen --assume-unchanged used in this way but that’s not what it’s meant for since it’s “designed for cases where it is expensive to check whether a group of files have been modified”. As a result you’re likely to lose the changes you have made to those files. This post shows a good summary of the outcomes of common operations with each command.

The advantage of --skip-worktree is that git really tries to preserve the changes you’ve made to those files. This works pretty well if the files aren’t changed very often but it can be pretty tedious if they change frequently even when those changes wouldn’t have caused merge conflicts as git will refuse to modify the files.

Say for example you need to make a change to a config file for your environment. You would run:

git update-index --skip-worktree config/local.conf

If changes are rarely committed to this than you may not have to think about it again.

However, if you need to switch to a branch with changes to this file then you’ll get an error like:

error: Your local changes to the following files would be overwritten by checkout: path/to/file

If you run git stash now, that file won’t be affected.

So now you need to run:

git update-index --no-skip-worktree config/local.conf

# now you can run stash
git stash

git switch other-branch

git stash pop

# you'll need to resolve conflicts if any otherwise skip the file again

git update-index --skip-worktree config/local.conf

# you can run this to see which files have skip-worktree set
git ls-files -v | grep '^S'

Depending on how frequently you have to deal with this, you’ll quickly end up making an alias or script for it.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Quickly react to recent message in Slack

Wed, 18 Jun 2025 00:00:00 +0000

Today I learned that you can react to the most recent message just by adding +. So you can type +:thumbsup: as the message it add it as a reaction to the most recent message instead of an individual message.

You can also type ⌘⇧\ or ctrl⇧\ to open the emoji picker on the message.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Move a line with :m

Tue, 17 Jun 2025 00:00:00 +0000

Today I learned that you can move the current line up or down with :m.

:m +1 - moves down 1 line

:m -2 - move up 2 lines

I’m used to using dd followed by a movement and then p but I may try this alternate method.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Install SQL Server from the command line

Fri, 06 Jun 2025 00:00:00 +0000

I recently had to setup a new windows dev machine with a local instance of SQL Server and it turns out you can run it completely from the command line although it’s not very obvious how.

Once you download the installer it will extract everything to a folder which contains the SETUP.exe executable which you can run from the terminal and pass all the options you want instead of clicking through the UI.

If you’re like me and just needed a fairly standard installation for local development, then this should do it:

.\SETUP.EXE /IACCEPTSQLSERVERLICENSETERMS /ACTION="install" /FEATURES=SQLEngine,FullText /INSTANCENAME="MSSQLSERVER" /SQLSYSADMINACCOUNTS="$env:USERDOMAIN\$env:USERNAME" /SQLSVCACCOUNT="NT Service\MSSQLSERVER" /AGTSVCACCOUNT="NT Service\SQLSERVERAGENT" /SQLSVCINSTANTFILEINIT=True /INDICATEPROGRESS /Q

Management studio is no longer included with the main installer but you can use winget: winget install -e --id Microsoft.SQLServerManagementStudio

If you need additional features then you need to look up the options to set on the /FEATURES param, like RS for reporting services.

Details

This is what the above command does:

/IACCEPTSQLSERVERLICENSETERMS - Required to accept the SQL Server license terms.
/Q - Runs setup in quiet mode. This is needed otherwise it will just open the regular install UI.
/ACTION="install" - Specify that we want to install vs uninstall or upgrade.
/FEATURES=SQLEngine,FullText - Specify which SQL Server components to install:
- SQLEngine: The core database engine
- FullText: Full-text search
/INSTANCENAME="MSSQLSERVER" - "MSSQLSERVER" is the default instance name.
/SQLSYSADMINACCOUNTS="$env:USERDOMAIN\$env:USERNAME" - Use powershell environment variables to set the current user as the sql server admin
/SQLSVCACCOUNT="NT Service\MSSQLSERVER" - Set the service account for the SQL Server Database Engine service. "NT Service\MSSQLSERVER" is the common default when using the UI.
/AGTSVCACCOUNT="NT Service\SQLSERVERAGENT" - Sets the account for the SQL Server Agent service (handles scheduled jobs and alerts)
/SQLSVCINSTANTFILEINIT=True - Enables Instant File Initialization, which seems like a worthwhile performance optimization according to the docs.
/INDICATEPROGRESS - Shows installation progress in the console window, useful for monitoring the installation status

Also, you can apparently install from a configuration file that the installer can generate for you.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Use winget to install Git for Windows with Unix tools

Thu, 05 Jun 2025 00:00:00 +0000

For years I’ve been using Chocolately for quickly installing git on new Windows and it’s pretty handy. Recently though I looked into doing the same with winget since it comes built into Windows now which makes it easier to just give to the command to a co-worker.

One thing I always do though is enable the option to add the common linux tools to the path.

With Chocolately you could just add the /GitAndUnixToolsOnPath param like this:

choco install git.install -y --params="'/GitAndUnixToolsOnPath'"

It turns out that is a convenience option added to the chocolately package so it took a bit of digging to figure out how do it with winget but I eventually arrived at the following:

winget install --id Git.Git -e --source winget --custom '/o:PathOption=CmdTools'

You need the --custom param for the install command that let’s you pass arguments to the git installer.

Then I just had to reference the handy docs for the installer for git for windows and find which arguments corresponded to the options I wanted. PathOption=CmdTools in this case.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Auto add pull request reviewers

Tue, 03 Jun 2025 00:00:00 +0000

Today I learned that Azure DevOps lets you automatically include reviewers for a pull request if modifies certain files.

This is very similar to Github’s code owners file with the key difference being that you configure it through the repo setting in Azure DevOps instead of committing a file.

I find this very useful for example if you’re a Front End Architect who wants to be aware of any changes to the UI or if you’re a DBA who wants to review any database migrations.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Link directly to a VS code setting

Sat, 03 May 2025 00:00:00 +0000

Today I learned that you can link directly to specific VS Code settings using the vscode: URL scheme. They follow this format: vscode://settings/editor.formatOnSave, where you put the setting ID at the end of the URL.

So if you click this link, VS Code should open straight to that setting.

This is probably most useful for folks who like to write about VS Code features (like me), but it’s also handy if you’re helping like a teammate you can just send them a link to a setting to make it easier for them.

Also, in VS Code, you can click the gear icon next to a setting and select “Copy Setting URL” to get the link.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Fixing a bunny led night light

Fri, 25 Apr 2025 00:00:00 +0000

This effectively amounted to replacing a battery but I still learned some things along the way.

It was thankfully easy to take the rubber case off which I expected to be glued or something but I just had to pull it off.

This revealed the main board with the LEDs and the battery tucked underneath.

It turned out to be a 18650 lithium battery.

Adam Savage has since released a video about 18650 batteries which probably explains why it stopped working.

You’ll get a lot of options when searching for 18650 batteries but the tricky part was finding one with the right connector.

This replacement worked

Thank you for keeping RSS alive. You're awesome.

Reply by email

JST connectors

Sun, 13 Apr 2025 00:00:00 +0000

Today I learned that the following white connector you commonly see in electronic devices, is called a “JST connector”.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Semantic line breaks (one sentence per line)

Tue, 08 Apr 2025 00:00:00 +0000

I just discovered Semantic Line Breaks. I could never decide on exactly how to do line breaks in markdown so I love that someone came up with a convention that’s been thought through.

This led me to discover this post by Derek Sivers: Writing one sentence per line

What’s interesting is that while he’s recommending the same approach, he suggests that it will improve your writing itself.

Nicer git diffs is just a side benefit. 🙂

Definitely going to adopt this now and see how I like it.

Thank you for keeping RSS alive. You're awesome.

Reply by email

The "Inverted Pyramid" in journalism

Tue, 01 Apr 2025 00:00:00 +0000

Continue with the writing, Today I learned about the inverted pyramid in journalism:

It’s a way to structure content so that it “begins with the details that readers care about most. As the article progresses, the focus shifts toward details that are relevant only to the most interested readers.”

I came across it in this great post about How to Write Useful Commit Messages but is just as applicable to blog posts/reports/docs/emails.

As a reader this is nice because you can get the info you care about faster and bail at any point.
As an author you reduce the risk that you’ll lose people before you’ve made your main point.

Michael Lynch has a lot of great content on writing for developers and is working on turning it into a book: Refactoring English

Thank you for keeping RSS alive. You're awesome.

Reply by email

On dashes

Mon, 31 Mar 2025 00:00:00 +0000

I’ve been working on improving my writing and since it’s an important skill in our industry I figured it’s also a category of learnings worth sharing.

I’ve been experimenting with using em dashes (—) lately but I just learned that it’s common to not put spaces around it.

Spacing around an em dash varies. Most newspapers insert a space before and after the dash, and many popular magazines do the same, but most books and journals omit spacing, closing whatever comes before and after the em dash right up next to it.

I personally think I’ll prefer adding spaces — at least in my own writing — since it looks more distinct from a hyphenated word. I also saw it mentioned somewhere that some software incorrectly teats it as a hyphenated word when double clicking or press and holding for selection. This also makes me realized I may have written some word-counting logic incorrectly in the past 😅

How to Use Em Dashes (—), En Dashes (–) , and Hyphens (-) | Merriam-Webster

Thank you for keeping RSS alive. You're awesome.

Reply by email

Run old versions of Angular

Thu, 20 Mar 2025 00:00:00 +0000

Today I learned how to get a very old Angular project running locally. Even though it was Angular in this case, the steps are likely to be similar for most aging node based projects.

First I had to go to the Version compatibility page for Angular and find the required version of node. In my case it was Angular v7 so I needed Node v10.

Next, you’ll want to use a version manager for node.
nvm is the most well known but you have to run it in bash on Windows and I find Volta much nicer to use.

I ran volta pin node@10 in the project directory. This will add a volta config section to the package.json so that whenever you’re in that directory, you’ll automatically use the correct version of node and npm.

Best of all though, it won’t affect the default version of node that get’s run everywhere else.

Also make sure you run npm install after the above command so that it’s the correct version of npm.

If you already tried to run npm i with a different version of node then you’ll probably need to blow away your node_modules folder and try again (ask me how I know).

Thank you for keeping RSS alive. You're awesome.

Reply by email

You can style markdown links as code

Tue, 18 Mar 2025 00:00:00 +0000

I just figured out that you can style a link as inline code in markdown i.e. toSorted() It’s a bit non-intuitive since, unlike bold or italics, the backticks go inside the square brackets instead of around the entire link.

This gives a bold link: **[EFF](https://eff.org)**.
This is for italics: *[Markdown Guide](https://www.markdownguide.org)*.
And this is for code: [`toSorted()`](https://www.brandonpugh.com/til/javascript/tosorted/).

In my testing this seems supported in most places like github and azure devops. Unfortunately I couldn’t find a way get it styled like that in Teams.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Pressing `%` will also jump to the matching HTML tag

Sat, 15 Mar 2025 00:00:00 +0000

I’ve used % for some time now in vim, but I only just today learned that it not only jumps to a matching bracket or parenthesis, but also a matching HTML tag!

Unfortunately this doesn’t seem to work with vscode-vim but it does work with vscode-neovim.

You could also accomplish this by assigning a hotkey to the “Go to matching pair” Emmet command.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Profiles in Visual Studio Code

Fri, 14 Mar 2025 00:00:00 +0000

I recently learned that VScode let’s you create different profiles that let you switch between different sets of settings, keyboard shortcuts, snippets, and most importantly, extensions.

This is really if, like me, you have various extensions for different types of projects and don’t need them all running all the time. For example, I have extensions for C#, react, angular, or markdown projects (apparently I had 86 extensions installed 😱).

The profile editor is actually pretty nice, letting you copy from an existing profiles for from some builtin templates.

Unfortunately it doesn’t let you easily copy only certain extensions so the easiest way I found to get a list of all my extensions by running code --list-extensions from the command line and then creating an extensions.json file in a workspace. When you open that folder, VScode will see those as recommended extensions for that workspace and let you install them all with one click.

Before I learned of that command however I used jq to get a list of extension IDs from the extensions.json located in your user directory. This json file has much more data it in it so jq makes it much easier to extract the list:

jq '.[].identifier.id' file.json

This approach still might be handy if I want to get a list of extensions only from a specific profile as those are stored in similar json files in /profiles.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Create exclusive accordions with HTML `
` element

Thu, 13 Mar 2025 00:00:00 +0000

Today I learned that you can now create an “exclusive accordion”, meaning only one section of the accordion is open at a time, using just html with the details element.

All you need to do is add a matching name attribute to each <details> element you want to be considered part of the same “group”:

<details name="faq">
  <summary>Section 1</summary>
  <p>
    Section 1 details
  </p>
</details>

<details name="faq">
  <summary>Section 2</summary>
  <p>
    Section 2 details
  </p>
</details>

Note, the <details> element has been widely supported since 2020 but support for the name attribute was only added last year.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Toggle a CSS class with vanilla javascript

Tue, 11 Mar 2025 00:00:00 +0000

Today I learned about the classList.toggle() method in JavaScript, which makes it trivial to add or remove a class from an element dynamically:

const button = document.querySelector("button");

button.addEventListener("click", () => {
  button.classList.toggle("active");
});

This is has been widely supported in browsers since 2015 with the addition of classList and makes it a lot easier to manipulate the classes on an element instead of having to manipulate the className string which is why people used to reach for jQuery for that.

You can also pass a second argument (true or false) to explicitly control whether the class should be added or removed:

element.classList.toggle("hidden", true);  // Always adds "hidden"
element.classList.toggle("hidden", false); // Always removes "hidden"

Thank you for keeping RSS alive. You're awesome.

Reply by email

toSorted() array method

Thu, 06 Mar 2025 00:00:00 +0000

Today I learned that there is a newish javascript array method toSorted() which is the “copying” or non-mutating version of sort().

This means you can easily sort an array by getting back a new copy instead of mutating the original:

const months = ["Mar", "Jan", "Feb", "Dec"];
const sortedMonths = months.toSorted();
console.log(sortedMonths); // ['Dec', 'Feb', 'Jan', 'Mar']
console.log(months); // ['Mar', 'Jan', 'Feb', 'Dec']

It’s pretty cool to see javascript moving more towards immutability. I mentioned the with() method before and now there is also toReversed() and toSpliced().

These were added in ES2023 and have been available in browsers since July 2023.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Split lines in Vim

Tue, 04 Mar 2025 00:00:00 +0000

I’ve long wanted a command that was the opposite of J (join lines), and I finally took the time to see if it’s possible. Turns out there a few solutions.

The simplest way if you want to split on a whitespace character is to just type r enter. I can’t believe I never thought of that before.

You can also install the vim-split-line plugin, which adds the :SplitLine command. This command will split the current line at the cursor position.

But, as they note in their README, you can also use the following command to split the line at the cursor position:

nnoremap S :keeppatterns substitute/\s*\%#\s*/\r/e <bar> normal! ==<CR>

Thank you for keeping RSS alive. You're awesome.

Reply by email

b is an Alias for Parenthesis in Vim

Mon, 03 Mar 2025 00:00:00 +0000

I just discovered that b and B are aliases for the () and {} text objects respectively.

This is a nice little builtin improvement since I frequently find myself selecting or changing withing parenthesis and cib is nicer to type than ci(.

I only wished I’d discovered this years ago!

Thank you for keeping RSS alive. You're awesome.

Reply by email

Dotnet StringSyntaxAttribute

Fri, 21 Feb 2025 00:00:00 +0000

Today I learned about the StringSyntaxAttribute added in .NET 7.

It’s a handy attribute you can add to string properties to specify exactly what format the string should be in.

This gives you extra IDE assistance like syntax highlighting and intellisense 🔥.

And you can also use a comment like /*lang=xxx*/ for regular variables.

Read Steve’s post for more detail.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Use the element for light/dark images in markdown

Wed, 19 Feb 2025 00:00:00 +0000

Thanks to James’ post, today I learned that you can use the <picture> to display different images based on whether or not the set a preference for light or dark mode.

The key is using the prefers-color-scheme CSS media query

<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="
      https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png
    "
  />
  <img
    alt="Shows an illustrated sun in light color mode and a moon with stars in dark color mode."
    src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png"
  />
</picture>

Since HTML is valid in markdown, you can easily use this technique in a number of places including Github—which apparently has allowed the use of the picture element since 2022. This is much better than the custom syntax they had before.

This also aligns with the sentiment Dave expressed that Markdown images are an anti-pattern.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Use jq to get a list of deeply nested values from JSON

Wed, 05 Feb 2025 00:00:00 +0000

I needed the list of extensions from the extensions.json that looks like this:

[
  {
    "identifier": { "id": "asvetliakov.vscode-neovim" },
    "version": "1.18.22",
    ...
  },
  ...
]

I hadn’t used jq before but knew this was exactly what it was made for.

In this case all I needed was this:

jq '.[].identifier.id' extensions.json

Also they have a pretty cool Playground for experimenting or running one-off queries.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Github supports alerts in markdown

Fri, 31 Jan 2025 00:00:00 +0000

Today I learned that Github supports alerts in markdown using the blockquote syntax:

> [!NOTE]
> Useful information that users should know, even when skimming content.

This is an extension to the standard markdown syntax that I’ve seen supported more and more in various markdown tools like Obsidian and vscode (they’re also referred to as callouts or admonitions).

Thank you for keeping RSS alive. You're awesome.

Reply by email

npmpackage.info

Thu, 30 Jan 2025 00:00:00 +0000

I recently discovered this handy site that aggregates all usual info I tend to look at when deciding whether or not I want to pull in an NPM package as a dependency.

npmpackage.info

Some things I tend to look at:

When was the last version published?
How many sub-dependencies does it have?
- With the rise in supply chain attacks, newer packages try to minimize these with some advertising zero dependencies
How much will it add to bundle size?
- I usually check Bundlephobia and this displays the stats from there along with everything else
How widely used is it?

Thank you for keeping RSS alive. You're awesome.

Reply by email

uv package manager

Mon, 27 Jan 2025 00:00:00 +0000

I recently came across this post, Uv has a killer feature you should know about, which led me to discover the uv package and project manager for Python. This seems to be the new preferred tool for managing python versions/dependencies as it’s faster and can replace pyenv, pip, virtualenv, and others.

It just saved me some headache as I tend to mostly use python for various tools and I tried to install a package the other day with pip install but it failed with some inscrutable error. Then I realized the package wouldn’t work with python 3.13 which I’d been using — and python 3.12 was causing a sub dependency to throw warnings — but 3.11 turned out to be the lucky version which uv made it easy to setup with:

uv python install 3.11
uv add tool <package>

Their docs were really helpful and installing it was pretty easy even on windows.

Thank you for keeping RSS alive. You're awesome.

Reply by email

A single input in a form can submit

Tue, 07 Jan 2025 00:00:00 +0000

Today I learned that if you have a single text field in a form then browsers will automatically submit it when you press enter.

<form>
  <label>
    Search
    <input type="text">
  </label>
</form>

This is kinda handy since normally you need to add a submit button to be able to submit a form — but, you should be aware that if you add another field then you do need to add a submit button for the form to work.

This post goes into more detail.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Type check and cast

Fri, 13 Dec 2024 00:00:00 +0000

Today I learned that you can use pattern matching in C# to check for a type and cast to it in the same expression. See the docs for more details.

Microsoft even has a lint rule for it.

if (x is Fruit)  // Noncompliant
{
  var f = (Fruit)x; // or x as Fruit
  // ...
}

if (x is Fruit fruit)
{
  // ...
}

Thank you for keeping RSS alive. You're awesome.

Reply by email

setSelectionRange in Safari will focus the input

Sun, 08 Dec 2024 00:00:00 +0000

Apparently in Safari, setSelectionRange() will focus the element even when not focused despite MDN stating that “The element must be focused for the call to have any effect”.

According to this bug, this is considered intended behavior even though it’s inconsistent with MDN and the other browsers.

It’s worth noting though, during my testing, I noticed that Chrome/Firefox will update the selection and cursor position you just won’t see it unless you programmatically call .focus() on the element.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Stash changes in the index

Wed, 27 Nov 2024 00:00:00 +0000

I just recently discovered that Git 2.35 added the --staged option to the git stash command. This makes it easy to quickly stash only the changes that you’ve staged.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Vim sets auto marks

Sun, 24 Nov 2024 00:00:00 +0000

Today I learned that Vim has some special marks which it sets automatically:

Command	Description
`.	jump to position where last change occurred in current buffer
`"	jump to position where last exited current buffer
`0	jump to position in last file edited (when exited Vim)
`1	like `0 but the previous file (also `2 etc)
`''`	jump back (to line in current buffer where jumped from)
``	jump back (to position in current buffer where jumped from)
`'[` or `']`	jump to beginning/end of previously changed or yanked text
`'<` or `'>`	jump to beginning/end of last visual selection

The funny thing is VsVim displays these in the gutter by default and I never knew what the symbols meant. Vscode-vim has an option to display marks in the gutter but only the regular marks and not these.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Selectively restoring changes from another branch or commit

Thu, 21 Nov 2024 00:00:00 +0000

Today I learned that you can use the --patch parameter with several git commands.

The --patch parameter is probably most known for interactively staging changes from the cli, but I’ve never really used it because I find GUI clients are much more convenient for this.

But apparently you can also use it with restore/checkout to grab specific changes from another branch.

git restore --source=branch-name --patch

This is something I haven’t seen easily done in any git client.

See Tekin’s post it for more details and other uses.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Personal git ignore per repository

Tue, 19 Nov 2024 00:00:00 +0000

Today I learned that git has a $GIT_DIR/info/exclude file can contain additional patterns of files to ignore but isn’t committed to the repository.

For me this is handy for some tooling configuration files that I use personally but don’t want to clutter the main .gitignore of the repo.

If there are some files that you want to always ignore, then you can specify a global ignore file in your git config with core.excludesFile.

The official docs have a nice breakdown of when to use which method.

Don’t you want to be using the same tools as the rest of your team?

Great point! For me it’s usually specific editor config files that I have set in my global git ignore file since I’d never want them committed. For example I use vim for certain things so I have these files ignored in ~/.gitignore_global:

# Swap files
[._]*.s[a-v][a-z]
[._]*.sw[a-p]

# Session
Session.vim

# Temporary
*~
# Auto-generated tag files
tags
# Persistent undo
[._]*.un~

.vscode
.zed

I have .vscode in there as well since I occasionally find myself on teams where no one else uses it… and Zed is really new but I’ve just been playing around with it.

For repo specific ignores in $GIT_DIR/info/exclude, it tends to be tools for managing environments like Volta for node or asdf and mise for other runtimes.

Also sometimes I find it useful to run some linting tools for myself when the rest of team hasn’t bought into it yet.

For example, it took over a year with recent team to convince them add eslint to the project but in the mean time it was at least catching things for me in the editor with my own code or while reviewing PRs.

Likewise, I always have cSpell running with Vscode to spell check my code so I have the project-words.txt file ignored. I don’t have these ignored globally since in some repos they do end up getting committed.

But I totally agree, you want to be cognizant of potential conflicts with the rest of the team depending on the tool. Configuration for tools like code formatters should definitely be shared with the team. And trying to use something like yarn when the team is using npm, is asking for trouble.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Raw string literals in C# 11

Mon, 18 Nov 2024 00:00:00 +0000

Today I learned about raw string literals introduced in C# 11.

The big improvement to me is that you don’t need to escape double quotes.

So no more of this noise if you need a json string:

    string json = @"
{
  ""number"": 42,
  ""text"": ""Hello, world"",
  ""nested"": { ""flag"": true }
}";

You can now write:

        string json = """
        {
          "number": 42,
          "text": "Hello, world",
          "nested": { "flag": true }
        }
        """;

The other nice feature is that an extraneous indentation will stripped out based on the location of the closing """. 🔥

This post goes into it deeper.

Thank you for keeping RSS alive. You're awesome.

Reply by email

SRI integrity hash algorithms

Tue, 12 Nov 2024 00:00:00 +0000

Today I learned that you can actually specify different hash algorithms for Subresource Integrity (SRI) hashes.

If you aren’t familiar with SRI, this post does a good job explaining why it’s useful and how it would have mitigated the recent pollyfill.io incident.

I needed to add the hashes to some scripts from a third party CDN that didn’t provide them and I came across this handy generator which let’s you choose which algorithm to use and defaults to SHA-384 and report-uri has a generator that just includes all 3 different hashes in the integrity value.

So which one to use?

Apparently you can specify different hashes but there isn’t much value in doing so at the moment since all modern browsers support all of the available algorithms so you should just pick SHA512. In the future however, newer algorithms might be implemented which you could add while maintaining backwards compatibility.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Use `URLSearchParams()` to build a query string

Thu, 07 Nov 2024 00:00:00 +0000

Today I learned that javascript has a handy built-in function called URLSearchParams() that you can use to build a url query string from an object.

const petfinderData = {
  key: "12345",
  shelterID: "abc00",
  count: 20,
  animals: ["dogs", "cats"],
};
const query = new URLSearchParams(petfinderData);

// returns "key=12345&shelterID=abc00&count=20&animals=dogs%2Ccats"
const queryString = query.toString();

You’ll want to be careful with complex object list arrays since it serializes to a form like animals=dogs,cats, which not be the format the server expects.

Asp.net model-binding for instance, by default expects a format like animals=dogs&animals=cats (and some other variations).

Thank you for keeping RSS alive. You're awesome.

Reply by email

Edit commit message with git reword

Sat, 02 Nov 2024 00:00:00 +0000

I discovered that a reword option was added to --fixup back in git 2.32

The basic command looks like git commit --fixup=reword:<commit> and you can use it like you would the other autosquash commands.

I recommend creating an alias for it though. Thanks to this post, I’ve had a fixup alias that uses fzf to select form recent commits so I created a similar one for reword:

[alias]
  reword = "!git log -n 50 --pretty=format:'%h %s' --no-merges | fzf | cut -c -7 | xargs -o -I{} git commit --fixup=reword:{}"

Note, if you’re on Windows, you can install fzf via Chocolatey. And you might also be interested in PSFzf which a Powershell module that wraps fzf.

Thank you for keeping RSS alive. You're awesome.

Reply by email

View ModelState errors while debugging

Mon, 28 Oct 2024 00:00:00 +0000

Today I learned how you can view the Modelstate errors while debugging a controller in Asp.Net:

ModelState.Where(x => x.Value.Errors.Count > 0).Select(x => x.Key).ToList()

Just paste that in the watch window.

If you’ve tried debugging to find what field is causing the Modelstate to be invalid, you’ll know how tedious it is to dig through but thanks to this post for this handy tip!

Thank you for keeping RSS alive. You're awesome.

Reply by email

View transitions API

Tue, 22 Oct 2024 00:00:00 +0000

Today I learned about the new view transitions API and I was pretty impressed with how much of the heavy lifting the browser will now do for you to animate between states.

Adam Argyle has a fun talk where he shows what you can do with this new API.

I only had to add a couple of lines of javascript to animate reordering a list of items that would have required a more complicated technique like FLIP (first last invert play) in the past.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Don't put an error boundary in the root of a react component

Tue, 15 Oct 2024 00:00:00 +0000

You probably don’t want to put a React error boundary at the root of a component (meaning, wrapping the component’s own render output).

This is because error boundaries only catch errors in their child component tree. They won’t catch errors that occur within the error boundary component itself, including errors in its own render method or lifecycle methods.

To use an error boundary effectively, you need to wrap the component you want to protect with the error boundary from the parent.

For example, you might think to put the error boundary inside a list item that gets rendered in a list:

function ChatMessage({ message }) {
  // If parsing JSON fails, the error boundary inside won't catch it
  const parsedData = JSON.parse(message.content);

  return (
    <ErrorBoundary fallback={<p>Failed to display message</p>}>
      <div className="message">
        <span className="author">{parsedData.author}</span>
        <p className="content">{parsedData.text}</p>
      </div>
    </ErrorBoundary>
  );
}

function ChatList({ messages }) {
  return (
    <div className="chat-container">
      {messages.map(message => (
        <ChatMessage key={message.id} message={message} />
      ))}
    </div>
  );
}

The correct approach would be putting the error boundary in the parent component:

function ChatMessage({ message }) {
  const parsedData = JSON.parse(message.content);

  return (
    <div className="message">
      <span className="author">{parsedData.author}</span>
      <p className="content">{parsedData.text}</p>
    </div>
  );
}

function ChatList({ messages }) {
// Correct approach with error boundary wrapping from parent
  return (
    <div className="chat-container">
      {messages.map(message => (
        <ErrorBoundary key={message.id} fallback={<p>Failed to display message</p>}>
          <ChatMessage message={message} />
        </ErrorBoundary>
      ))}
    </div>
  );
}

Thank you for keeping RSS alive. You're awesome.

Reply by email

Console.trace()

Thu, 10 Oct 2024 00:00:00 +0000

Today I learned about console.trace() when I needed to find out where a global function was being overridden:

Object.defineProperty(window, 'setErrorMessage', {
    set(value) {
        console.trace('Global variable set:', value);
    }
});

This little snippet outputs a stack trace anywhere code was trying to define this global function and let me right to the culprit.

See more about .trace()

Thank you for keeping RSS alive. You're awesome.

Reply by email

History API state

Mon, 07 Oct 2024 00:00:00 +0000

Today I learned that you can actually store state in the browser history via the history API (note this is not the query string).

I came across in this post that uses it as a clever method for temporarily storing form data.

Thank you for keeping RSS alive. You're awesome.

Reply by email

New hotkey for commenting code

Thu, 03 Oct 2024 00:00:00 +0000

Today I learned that in a recent version of visual studio they added the keyboard shortcut ctrl+/ to toggle code comments so it works just like in vscode instead of the default of two different cumbersome hotkeys to comment/uncomment.

This also led me to discover that Visual Studio comes with a builtin keyboard mapping scheme for VSCode hotkeys which has more modern defaults. For instance, it changes ctrl+p to open the fuzzy file finder instead of the print dialog… I don’t know that I’ve ever wanted to print a source code file…
except one time long ago when I wanted to convince a higher-up the need to refactor a sql query so I taped together the 10+ page printout 😅.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Chain-of-Thought Prompting

Fri, 20 Sep 2024 00:00:00 +0000

Today I learned about Chain-of-Thought Prompting which is a technique to get potentially better results from an LLM where you craft your prompt with an example of the chain of thought or steps in reasoning to solve a complex problem.

This gives a good explanation: https://www.promptingguide.ai/techniques/cot

Thank you for keeping RSS alive. You're awesome.

Reply by email

HTTP files

Fri, 13 Sep 2024 00:00:00 +0000

Today I learned about .http files that you can use to make/test requests to any api endpoint from within most IDEs/editors.

This started with the Rest client vscode extension and then Visual Studio 2022 added support somewhat recently.

It kinda acts like an alternative to something like Postman but without leaving your editor, but for me the nice thing is it can act like a runnable form of documentation for your api that you can commit alongside your code.

Thank you for keeping RSS alive. You're awesome.

Reply by email

ASP.NET max upload file size

Fri, 30 Aug 2024 00:00:00 +0000

Today I learned there are two configuration values that determine how large of a file can be uploaded. maxRequestLength is specified in Kilobytes and it’s used by the ASP.NET framework. If the file is larger than this value then the application will throw “content length exceed” exception so it just comes back as a 500 which isn’t that helpful. The default is about 4mb.

maxAllowedContentLength is used by IIS and is specified in bytes not kilobytes and if the file is larger then it will return 413 error status which we can handle appropriately. The default is about 28mb.

Both of these values need to set to larger than the file size we want to allow but in our case we needed the maxAllowedContentLength to be the smaller value so that an upload that’s too large will always get rejected by IIS first so we can display a useful error message to the user.

The issue we ran into was if the file was more than 4mb but less than 28mb, it was reject by aspnet and throwing a 500 which in production comes back as a 302 redirect to the error page which we weren’t handling so it would look like the upload was just hanging.

If the file was larger than 28mb then it would get rejected by IIS and return a 413 which we were handling so we would display the correct “File is too large” error message.

There are even more ways to limit upload size you read about in Kahlid’s post: increase file upload limit

Thank you for keeping RSS alive. You're awesome.

Reply by email

UUID v7

Wed, 21 Aug 2024 00:00:00 +0000

Today I learned that there are 8 versions of UUID!

I was vaguely aware that there were some older versions that aren’t recommended but just this past May the RFC was approved that added versions 6, 7, and 8.

Basically, v4 is a good default if you just need a good unguessable random ID. For javascript, this is now built into browsers via crypto.randomUUID() — or in dotnet with Guid.NewGuid().

But v7 is an exciting new option because it’s time-based so the UUIDs are sortable based on when it was created and you can even extract the timestamp if you want. This also apparently makes it better as a database key.

The uuid npm package just added support for v7 if you need it in javascript. For C#, v7 support is coming in dotnet 9.

This is a nice overview of the different versions if you want to read more.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Quickly change the end of a line

Tue, 20 Aug 2024 00:00:00 +0000

This is a simple thing but I just discovered that with a simple regex and find/replace in most editors, you can quickly add text to the end of every line.

For instance, if you want to add a , to every line, all you need is $:

Or if you want to replace whatever the last character then you can use .$ instead.

Of course, I use vscode-neovim so I just type :%s/$/,/ 😁

Thank you for keeping RSS alive. You're awesome.

Reply by email

Abort controller

Wed, 24 Jul 2024 00:00:00 +0000

Today I learned that you can cancel fetch requests using the AbortController.

This used to be a major shortcomming of fetch but apparently it’s been part of the web platform since 2019.

This post also explains some additional use cases for the AbortController.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Drag and drop upload

Wed, 24 Jul 2024 00:00:00 +0000

Today I learned that creating a nice drag-and-drop file component using vanilla javascript and the built web APIs is actually fairly easy.

Smashing Magazine has an easy-to-follow example.

The gist of it is that the browser gives you 'dragenter', 'dragover', 'dragleave' events that you can use to style your “dropzone” however you want and the drop event allows you to handle the files themselves:

dropArea.addEventListener('drop', handleDrop, false)

function handleDrop(e) {
  let dt = e.dataTransfer
  let files = dt.files

  // implement with your preferred upload method
  uploadFiles(files)
}

The dragevent and dataTransfer interface have been supported in modern browsers for some time so they are pretty safe to use.

Alternatively, if you don’t care about styling a fancy drop area, the standard HTML <input type="file"> element supports dragging a file onto it.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Input modes

Wed, 17 Jul 2024 00:00:00 +0000

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:

This is overall an improvement in usability I think except if you need to allow the user to enter negative numbers. So something to be aware of since I couldn’t find any way to type the - with that attribute set.

Unfortunately, all the sites I found that discuss inputmodes, show the old version like this post but it’s still a good resource and I recommend setting an inputmode where it makes to make it easier to type certain values on mobile devices.

Also, I like how Android handles it better:

Thank you for keeping RSS alive. You're awesome.

Reply by email

:has selector

Fri, 12 Jul 2024 00:00:00 +0000

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:

#app-root:has(.signin-root) {
  height: 100%;
}

Thank you for keeping RSS alive. You're awesome.

Reply by email

Use media queries in javascript with the `matchMedia()` method

Wed, 10 Jul 2024 00:00:00 +0000

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.

Ideally, I try to keep media queries in CSS but this can come in handy for example if you want to change the way a tooltip behaves on smaller screens.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Numeric separators

Tue, 02 Jul 2024 00:00:00 +0000

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.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Clear site data

Thu, 27 Jun 2024 00:00:00 +0000

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

Thank you for keeping RSS alive. You're awesome.

Reply by email

bash vs sh in git hooks on windows

Wed, 19 Jun 2024 00:00:00 +0000

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

Thank you for keeping RSS alive. You're awesome.

Reply by email

Chrome devtools ignores form resubmission

Wed, 12 Jun 2024 00:00:00 +0000

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.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Cherry pick a range of commits

Tue, 04 Jun 2024 00:00:00 +0000

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.

Cherry-pick is more convenient if you want to take a series of commits from some other branch and apply them onto the current branch.

Rebase is more convenient if you want to take the current branch and apply it on top of some other branch. And with the --onto parameter you can change the base or “parent branch”. This is a bit harder to wrap your head around but extremely powerful.

For example given the following:

                        H---I---J topicB
                        /
              E---F---G  topicA
              /
A---B---C---D  main
```txt
If you run `git rebase --onto master topicA topicB` then you end up with:

```txt
              H'--I'--J'  topicB
            /
            | E---F---G  topicA
            |/
A---B---C---D  main

which is handy if you started working on topicB and thought you were branched off of main instead of topicA or if topicA got merged or squashed from under you. This SO answer does a great job explaining --onto.

Just remember: git rebase --onto <newparent> <oldparent> <until>

To accomplish the same with cherry-pick would require something like:

git checkout main
git branch -b temp # create a new temp branch and switch to it
git cherry-pick topicA..topicB
git checkout topicB
git reset --hard temp # topicB is now updated to match temp
git branch --delete temp

Thank you for keeping RSS alive. You're awesome.

Reply by email

Nullish Coalescing Operator

Mon, 03 Jun 2024 00:00:00 +0000

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.

Thank you for keeping RSS alive. You're awesome.

Reply by email

PC Manager is Microsoft's cleanup tool

Sun, 02 Jun 2024 00:00:00 +0000

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.

Thank you for keeping RSS alive. You're awesome.

Reply by email

ISO-8601 Duration Format

Fri, 31 May 2024 00:00:00 +0000

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

Thank you for keeping RSS alive. You're awesome.

Reply by email

View the conflicts resolved in a merge commit

Wed, 29 May 2024 00:00:00 +0000

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.

Thank you for keeping RSS alive. You're awesome.

Reply by email

The viewport scroll bar problem

Tue, 28 May 2024 00:00:00 +0000

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.

This article gives some potential solutions:

Use the new CSS container queries
Use javascript to calculate the actual width

Another solution is to use javascript to replace the classic scollbars with overlay scrollbars like you see on mobile operating systems. OverlayScrollbars is a popular js library that does this.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Penpot

Wed, 22 May 2024 00:00:00 +0000

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/

Thank you for keeping RSS alive. You're awesome.

Reply by email

BFCache

Tue, 21 May 2024 00:00:00 +0000

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

The Chrome Devtools also has a feature to let you test if your page is cacheable in the BFCache.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Locally test on old version of Chrome

Mon, 20 May 2024 00:00:00 +0000

Today I learned that if you need to test in older versions of Chrome then you can download prior snapshots of Chromium builds as standalone executables.

The tricky part is figuring out which build snapshot corresponds to which version of Chrome, which involves several steps detailed in the Chromium wiki.

Fortunately, someone put together a site to lookup by Chrome version and link to the correct build on the archive site. Then you download and extract the zip file and run the single executable, i.e. chrome.exe.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Podman is a nice alternative to Docker

Thu, 18 Apr 2024 00:00:00 +0000

Today I learned that Podman is a pretty nice alternative to Docker, and in my case was a drop-in-replacement for Docker Desktop.

The installation process was smooth and it really tries to guide you through the setup.

They even provide cli aliases for docker commands so you don’t have to update any existing scripts.

Proponents also argue that it has more secure default feature like rootless containers.

Exploring Podman: A More Secure Docker Alternative

Thank you for keeping RSS alive. You're awesome.

Reply by email

Preload critical assets

Wed, 13 Mar 2024 00:00:00 +0000

Today I learned that you can preload critical assets in a page by using the preload attribute on a link tag i.e. <link rel="preload">.

Especially useful for things like fonts that are discovered later by the browser.

Preload critical assets to improve loading speed

Thank you for keeping RSS alive. You're awesome.

Reply by email

Shell Check

Tue, 12 Mar 2024 00:00:00 +0000

Today I learned about ShellCheck which is essentially a linter for bash scripts.

You can try it on the website but I recommend installing the vscode extension. I like that you can look up the rationale for each of the rules so it’s a great way to learn some best practices for bash scripts.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Windows Dev Drive

Mon, 26 Feb 2024 00:00:00 +0000

Today I learned about a new feature in Windows 11 called Dev Drive.

It sounds like it essentially lets you create an optimized drive or volume for heavy file I/O that could speed up large solutions or test suites.

Doesn’t look like I’m able to enable this on my work laptop yet but I’m curious to try it on one of my personal machines and see if it’s a noticeable improvement.

Official docs

Thank you for keeping RSS alive. You're awesome.

Reply by email

Truncate table

Tue, 20 Feb 2024 00:00:00 +0000

Today I learned that there is a truncate table SQL command that deletes all data from a database table like Delete from but is faster and uses fewer system and transaction log resources.

It’s supported in most database engines but there are likely caveats to keep in mind.

For instance, with SQL Server:

It will reseed identity columns
You can’t truncate tables that referenced in constraints
and it requires ALTER table privileges

For clearing out data in lower environments though, I’ve found it useful.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Logical Properties

Thu, 15 Feb 2024 00:00:00 +0000

I’ve recently been learning about the new logical properties in CSS.

Essentially if we’re developing applications for a global audience, instead of thinking in terms of right/left or top/bottom, we should start thinking in terms of “inline” and “block”.

These let us specify our styling and layouts in relative logical values instead of physical ones so they can adapt appropriately for right-to-left or vertical languages.

For example, margin-left: 20px would now be margin-inline-start: 20px.

These new properties are pretty well supported in browsers so I think it’s probably a good practice to try to default to using them when you can even if you don’t have any localization concerns. For one, it doesn’t hurt to use them and you’re likely to start seeing them more and more in examples and documentation so you’ll want to get used to them.

Plus you can use them as a convenient shorthand in some cases — for example, you can replace margin-left: auto; margin-right: auto; with just margin-inline: auto;.

The CSS-Tricks article has a lot of good examples.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Git Maintenance

Mon, 12 Feb 2024 00:00:00 +0000

Today I learned about the git maintenance command that runs tasks for regular maintenance of a git repo.

If you run git maintenance start in a repo, git will create scheduled tasks to run at regular intervals to perform these tasks in the background like garbage collection. This will optimize and speed up the repo without having to tack them on occasionally as you run other commands.

A particularly handy task it will run every hour is prefetch, where it does a git fetch but only pulls down the data and doesn’t update any refs. Then when you actually run git fetch or git pull, it completes almost instantly because it already has all the data.

On Windows, you can view and tweak these tasks in the Task Scheduler and have names in the form of Git Maintenance (<frequency>).

This also ties in well with my desire to be able to work offline if need be, since if I’m suddenly without internet but haven’t been running fetch all day, I can still run git fetch and pull in all the changes from the day.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Number.isInteger()

Thu, 08 Feb 2024 00:00:00 +0000

Today I learned that the isNaN global function in javascript isn’t very useful for validating numbers. The main reason is that it returns false for an empty string since it coerces it to 0.

To add to the confusion, Number.isNaN() behaves slightly differently since it just checks for the value NaN.

For validation, I found Number.isInteger() to be the most useful.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Git ORIG_HEAD

Wed, 07 Feb 2024 00:00:00 +0000

Today I learned that ORIG_HEAD is a reference that git maintains to the previous commit HEAD pointed to before it “was modified in a drastic way”.

The docs mention these operations as examples of when ORIG_HEAD is updated: (git am, git merge, git rebase, git reset)

This is useful when you want to undo one of those operations.

You can use git reset --hard ORIG_HEAD (or --keep) to put your branch back to where it was before the operation.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Git rebase.abbreviateCommands

Fri, 02 Feb 2024 00:00:00 +0000

This is probably a very niche use case, but I learned today that you can abbreviate commands that git populates in the todo list during an interactive rebase.

So instead of this:

    pick deadbee The oneline of the commit
    pick fa1afe1 The oneline of the next commit

It’ll look like this:

    p deadbee The oneline of the commit
    p fa1afe1 The oneline of the next commit

You can enable this with git config --global rebase.abbreviateCommands true.

To be clear, you can always use the abbreviated commands, but since I use Vim to edit the list, it makes it slightly more convenient to edit the commands.

For instance, before when the command was pick, and I wanted to squash a commit, I would jump to the line, type ciw to delete the word pick and enter insert mode, then type s and then esc.

But when the command is p, I can just type r and s.

So if you’re counting, that’s three fewer keystrokes for each command. Mission. Accomplished.

Thank you for keeping RSS alive. You're awesome.

Reply by email

font-variant-numeric

Thu, 01 Feb 2024 00:00:00 +0000

Today I learned about the font-variant-numeric CSS property that lets you control alternate glyphs for numbers.

Not every font will support all of these but the tabular-nums option is common and seems especially useful for data in grids.

Using Font Variant Numeric

Thank you for keeping RSS alive. You're awesome.

Reply by email

Javascript Array `with()` method

Wed, 31 Jan 2024 00:00:00 +0000

Today I learned that there’s a new javascript array method that returns a new array with the element at the given index replaced with the given value.

Convenient for manipulating array values without mutating the original array.

const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5]

Thank you for keeping RSS alive. You're awesome.

Reply by email

sourceURL pragma

Mon, 29 Jan 2024 00:00:00 +0000

Today I learned that you can add //# sourceURL=<anything>.js special comment to an inline script tag to have it show up as a separate javascript file in the dev tools sources tab.

This makes it a bit easier to work with especially when you have a huge inline script tag you’re dealing with.

It even works with eval() too if you’re unfortunate enough to be dealing with that.

https://devtoolstips.org/tips/en/name-evaluated-files/

Thank you for keeping RSS alive. You're awesome.

Reply by email

CSP `connect-src` directive

Fri, 26 Jan 2024 00:00:00 +0000

Today I learned that there is a Content-Security-Policy (CSP) directive connect-src that you can use to restrict all outgoing requests from your website to only the domains that you specify.

This is a powerful mitigation against any kind of script injection attacks since no data can then be exfiltrated from your page.

It applies to XMLHttpRequest (AJAX), WebSocket, fetch(), <a ping> or EventSource.

CSP is an HTTP response header for enhancing the security of a site and there are of course several other directives you might want to enable.

This is a handy reference

If you want to see a real-world comprehensive example, take a look at the CSP header for haveibeenpwned.com (this links to the csp analyser from report-uri).

Thank you for keeping RSS alive. You're awesome.

Reply by email

Disable entire form

Wed, 24 Jan 2024 00:00:00 +0000

Today I learned that you can disable an entire form by wrapping all the inputs in a <fieldset disabled>.

You might think that you can disable a form with <form disabled> but unfortunately, the form element doesn’t have a disabled attribute.

Fieldsets are typically used to group related form elements (and in some cases can improve accessibility) — so you can have multiple in a form and disable portions of the form separately.

This is much more convenient than having to toggle the disabled attributes on every form element.

I also learned that there is a difference between styling a button with button:disabled and button[disabled], the former being the one you want to use in this case since the latter only matches a button with a disabled attribute.

Disabling an entire form in HTML

Thank you for keeping RSS alive. You're awesome.

Reply by email

Git clean interactive

Tue, 23 Jan 2024 00:00:00 +0000

I just discovered the interactive mode of git clean.

Git Clean is handy when you want to clear out anything from your local repository folder that isn’t tracked by git. This often includes build outputs and other generated files. This is useful if for instance Visual Studio is acting weird and you’re tempted to do a fresh clone to fix it.

I have a git alias I use for this: cl = git clean -idx -e 'node_modules'

This tells git to delete any untracked files including anything ignored by .gitignore so it’s practically the same as doing a fresh clone (except you’ll keep work in progress). The -i is interactive so git shows you everything it’ll delete and you can confirm it. I used to use -f for force but the interactive mode is pretty nice and it’s just a couple of extra keystrokes to blow everything way if I want.

The -e 'node_modules' is optional but if it’s a dotnet build issue I’m having then I don’t want to waste time deleting and reinstalling npm modules so this tells git not to touch any node_modules in the repo.

Thank you for keeping RSS alive. You're awesome.

Reply by email

DeepGit blame

Fri, 19 Jan 2024 00:00:00 +0000

Today I learned that DeepGit is actually completely free even for commercial use. This is the best git blame utility I’ve come across because it lets you continue drilling down into the history of a line, kinda like a recursive blame. You do have to provide an email address to register but I think it’s worth it.

It’s from the same developer of my preferred git client SmartGit but SmartGit does require a paid license for commercial use.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Fix package-lock.json merge conflicts

Tue, 16 Jan 2024 00:00:00 +0000

Today I learned that npm can handle merge conflicts in your package-lock.json file for you.

After you resolve any merge conflicts in your package.json, you can just run npm install [--package-lock-only] and npm will resolve the conflicts in the lock file. If --package-lock-only is provided, it will do this without also modifying your local node_modules/.

Solving conflicts in package-lock.json

Thank you for keeping RSS alive. You're awesome.

Reply by email

Dynamically darken or lighten a color in CSS

Mon, 15 Jan 2024 00:00:00 +0000

Today I learned that you can now easily darken or lighten a color natively in CSS with the new color-mix function.

Here’s a use case I run into a lot where you have a primary brand color and you need to darken it on hover:

:root {
  --brand-color-dark: color-mix(in oklab, var(--brand-color), black 30%);
  --brand-color-light: color-mix(in oklab, var(--brand-color), white 30%);
}

.button:hover {
  background-color: var(--brand-color-dark)
}

This works by mixing the color with some amount of black or white. I also chose the oklab color space since it’s the most likely to produce what I’m expecting for this use case.

I’ve accomplished this before by using HSL color values with CSS variables and manipulating the lightness channel but this is much nicer and works even if the base color is defined as a hex value (that may or may not come from a database somewhere).

I was missing something like this from preprocessors like LESS and SASS and as of 2023 this is supported in all modern browsers.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Thin Space

Fri, 12 Jan 2024 00:00:00 +0000

Today I learned that there is an HTML entity called “thin space” that you can use when you need less space between two characters than the normal space.

The HTML code is  

Thin Space might be the most underrated HTML entity. It can be used for a name like J. K. Simmons. Without spacing, the J and K would seem too close together; with a regular space, they seem too far apart. Insert a thin space and it is just perfect. - Typography Manual

You can see a demo here

Thank you for keeping RSS alive. You're awesome.

Reply by email

Copy Nice Extension

Wed, 10 Jan 2024 00:00:00 +0000

Today I learned about a handy little Visual Studio extension called Copy Nice whose sole purpose is to address an annoyance I encounter frequently where the indentation is off when I copy and paste code snippets.

With this extension, when code is copied it will automatically be formatted to take care of the leading indentation issue.

Now if only there was some system-level utility to this do when copying from anywhere…

Thank you for keeping RSS alive. You're awesome.

Reply by email

Smooth scrolling

Mon, 08 Jan 2024 00:00:00 +0000

Today I learned that you can now implement smooth scrolling purely with CSS in modern browsers.

By adding the following CSS:

/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */
@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

the browser will scroll smoothly whenever scrolling is triggered either by Javascript (with something like document.documentElement.scrollTop = 0) or by linking to elements with an internal anchor link. It’s considered best practice to use the prefers-reduced-motion media query to only enable things like animations to be mindful of users with motion sensitivities. In my testing, however, the browser won’t ever smooth scroll if the user has prefers-reduced-motion enabled.

Another way of accomplishing this is with the scrollTo function in javascript:

window.scrollTo({top:0, behavior: 'smooth'})

or with the scrollIntoView function.

I also discovered that prefers-reduced-motion is controlled at the system level — in Windows it’s determined by the “Show animations in Windows” setting which is automatically disabled when connecting to Windows via Remote Desktop.

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

Thank you for keeping RSS alive. You're awesome.

Reply by email

Quit vim with :x

Sun, 07 Jan 2024 00:00:00 +0000

People like to joke that vim is impossible to exit, but I just discovered that there are actually several different ways to quit and :x is my new favorite.

The :x command will save and quit but it differs from :wq in that it will only write the file to disc if there were any changes so the modified date of the file won’t get updated unnecessarily.

This seems like the preferred behavior most of the time. That coupled with the fact that it’s slightly faster to type has made it my new default way to exit vim.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Easily reference upstream branch

Thu, 04 Jan 2024 00:00:00 +0000

Today I learned that you can reference the upstream branch in git with @{u}.

I used this to make a convenient git alias reso for “reset to origin”:

git config --global alias.reso "reset --keep @{u}"

note: I’m using --keep instead of --hard because it’s a bit safer

I use this when a branch I’ve pulled down has completely changed on the remote and I have no changes (for instance when reviewing a PR) and a pull would be messy (a reset is also much faster depending on the number of commits).

Or if I’ve completely borked my local branch and want to start over from where I last pushed 😅.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Tue, 19 Dec 2023 00:00:00 +0000

Thank you for keeping RSS alive. You're awesome.

Reply by email

Collection expressions

Thu, 14 Dec 2023 00:00:00 +0000

Today I learned that C# 12 is getting some nice javascript-like syntax with collection expressions and the .. (spread operator):

string[] moreFruits = ["orange", "pear"];
IEnumerable<string> fruits = ["apple", "banana", "cherry", ..moreFruits];

Note though that the spread operator is only 2 dots instead of 3 dots like in javascript.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Local overrides in Chrome DevTools

Mon, 11 Dec 2023 00:00:00 +0000

Today I learned about the local overrides feature of Chrome Devtools that lets you “you can override HTTP response headers and web content, including XHR and fetch requests, to mock remote resources even if you don’t have access to them”.

This came in handy for me when trying to debug an issue that I wasn’t able to reproduce locally. The official docs do a nice job showing how to enable the feature but just make sure you delete the override once you’re done otherwise you might wonder why the page has stopped updating.

https://developer.chrome.com/docs/devtools/overrides

Thank you for keeping RSS alive. You're awesome.

Reply by email

Add alt text to presentation slides

Wed, 06 Dec 2023 00:00:00 +0000

Today I learned that you can add alt text to images in PowerPoint and Google Slides by right-clicking on an image. It hadn’t occurred to me before but it makes sense that it would be as important as alt text for images on the web if you’re going to share your slides. Likewise, you should mark an image as “decorative” if you want a screen reader to ignore it.

This post has some nice examples of how to write good alt text.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Display the week number in Google Calendar

Tue, 05 Dec 2023 00:00:00 +0000

Today I learned that you can configure both Google Calendar and Outlook to show the week number in the “month” view.

You might find this handy for project/sprint planning — I’ve also been keeping weekly notes with the week number at the beginning of the filename.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Open a URL in vim with `gx`

Mon, 04 Dec 2023 00:00:00 +0000

Pressing gx while over a URL in vim will open that url.

Confirmed it also works in vscode-vim.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Flow spacing and the lobotomized owl

Wed, 29 Nov 2023 00:00:00 +0000

This is another #til by proxy. A teammate asked about a CSS selector I used which has come to be referred to as the “lobotomized owl” (* + *):

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

What this does is select every child element of the .flow class except the first one.

You can also use newer CSS selectors to do the same thing in a way that might be more obvious:

.flow > *:where(:not(:first-child)) {
  margin-top: var(--flow-space, 1em);
}

The above snippet is probably my favorite CSS utility called flow spacing.

It’s a nice way to easily add consistent spacing between elements in your project and because css variables cascade, it’s easy to override for specific contexts within different classes:

.flow--space-compact {
  --flow-space: .75em;
}

or with inline styles: <footer class="flow" style="--flow-space: 2em"></footer>.

I’m in the camp that parent components should be responsible for spacing out their child components and this utility makes that easier to do with consistency.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Trim videos without re-encoding

Mon, 27 Nov 2023 00:00:00 +0000

Today I learned that FFmpeg is the easiest (only?) way to trim/cut a video without re-encoding it.

You can specify a start and stop time like so:

ffmpeg -i input.mp4 -ss 00:01:30.000 -to 00:04:05.000 -c copy output.mp4

The key is the -c copy parameter which will just copy the data frames for operations where they don’t need to be modified. This is nice because it’s way faster than decoding and re-encoding and you don’t have any loss in quality if you’re not working with a raw format.

It also works for removing/replacing the audio of a video. This ultimate guide is really handy.

Thank you for keeping RSS alive. You're awesome.

Reply by email

The `datalist` HTML element

Mon, 20 Nov 2023 00:00:00 +0000

Today I learned that there’s now an HTML element called datalist that’s basically an autocomplete-like input element.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Dependency Review

Wed, 15 Nov 2023 00:00:00 +0000

Today I learned that Github has a cool dependency review feature for pull requests.

If a dependency file like a package.json or .csproj has been modified, you can click on the “rich diff” button and it will list out any dependencies that changed or any vulnerabilities for those versions. It’ll even list out sub-dependencies in a package-lock.json which is otherwise pretty inscrutable.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Disabled buttons are bad for accessibility

Fri, 10 Nov 2023 00:00:00 +0000

Today I learned that disabled buttons are potentially bad for accessibility.

I realized long ago that disabled buttons can be bad for UX but I just saw Chris Ferdinandi’s post Don’t Disable Buttons, and learned that disabled buttons aren’t focusable which means they don’t work well with screen readers or navigating with the keyboard.

I usually recommend against disabling form submit buttons when there are validation errors because the user has no feedback as to why it’s disabled, but Chris gives the example of disabling while the form is being submitted (which I’ve probably done in the past) and he goes into detail about the issues with this approach and a good alternative.

Thank you for keeping RSS alive. You're awesome.

Reply by email

`lh` and `rlh` units

Thu, 09 Nov 2023 00:00:00 +0000

Today I learned that there are new line height units in CSS. The lh unit is “equal to the computed value of line-height”.

If nothing else this will be nice for a small annoyance I’ve run into before of vertically centering icons:

Thank you for keeping RSS alive. You're awesome.

Reply by email

Native node import path aliases

Wed, 08 Nov 2023 00:00:00 +0000

Today I learned that node natively supports import path aliases with the imports field in package.json.

The nice thing about this is that they’re supported by most node tools now so you don’t need to configure your aliases separately in different tools like eslint, webpack, vite, etc…

If you’re not familiar with import aliases, they’re a handy way to avoid unwieldy relative import paths.

instead of:

import utils from '../../../../shared/utils';

you can have:

import utils from '#shared/utils';

A nice config to start with is something similar to:

"imports": {
    "#*": "./*"
  },

which lets you import anything from the root of your project.

I actually discovered this from looking through the decision log of the epic-stack react project.

Unfortunately typescript doesn’t support it yet (though it’s planned), so you’d still need to update tsconfig.json with:

"paths": {
      "#*": ["./*"],
},

Thank you for keeping RSS alive. You're awesome.

Reply by email

Override nested dependencies with npm

Mon, 06 Nov 2023 00:00:00 +0000

Today I learned that as of npm cli v8.3.0 (2021-12-09), you can use the overrides field in package.json to “override” nested dependency versions.

This is handy for several scenarios, but for me I used for a third-party react component that has a peerDependency on v16 of react even though it works just fine with v18 but it isn’t under active development at the moment so I had to override the version it accepts:

  "overrides": {
    "react-input-range": {
      "react-dom": "^18.2.0",
      "react": "^18.2.0"
    }
  },

Yarn has similar functionality that it calls resolutions.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Use ChatGPT to help you write architectural decision records

Fri, 03 Nov 2023 00:00:00 +0000

I’ve been discovering recently that ChatGPT is actually pretty good at helping write Architectural Decision Records (ADRs).

Like most writing tasks, I’m finding ChatGPT is good at giving me a nice starting point instead of staring a blank template.

Even with as simple a prompt as “write an architectural decision record on why we chose to go with react instead of angular”, it’ll give a decent list of pros and cons on the topic in a common ADR template. I can also refine it further by saying “write it using the following template instead…”

I really like ADRs for capturing why we made a particular decision and the important points we considered and which things might have been deal breakers - which ChatGPT obviously can’t do for you but it’s a quick way to list out some points and occasionally it’ll even mention something I hadn’t considered.

I also like asking it to argue the reverse like: “write an architectural decision record on why we chose to go with angular instead of react”

Interestingly, it will show the result in the UI as the rendered markdown but when you click the “copy” button it will copy the source markdown which is nice.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Blob URLs

Thu, 02 Nov 2023 00:00:00 +0000

Today I learned that in a web page, when you’re working with Blob or File objects you can call URL.createObjectURL() to create a Blob URL that can be used as the source for anything that normally takes a URL like images or download links.

It’s also apparently a good alternative to base64 encoded Data-URIs especially when dealing with larger amounts of data since a base64 encoded file will be 33% larger than the raw binary.

I was running into issues trying to embed a large PDF with the <object> element and instead of setting a massive base64 string as the data source, I was able to convert it to a blob and use a blob url so it ends up looking something like:

<object data="blob:https://localhost/d827ea99-9e80-496a-a8e0-e107b83080e9" type="application/pdf"></object>

Thank you for keeping RSS alive. You're awesome.

Reply by email

`every()` returns true for an empty array

Wed, 01 Nov 2023 00:00:00 +0000

Today I learned that the javascript array method .every() will always return true for an empty array.

[].every((x) => x > 1);         // true
[].every(() => true);           // true
[].every(() => false);          // true

For me at least, this was a bit surprising and I realized I’d been thinking about this function works incorrectly. Your first thought might be that this is another one of javascript’s quirks, but this is actually how most languages implement similar functions including Rust, Python, and C#:

result = new List<int>().All(x => x > 0);   // true
result = new List<int>().All(x => false);   // true

Apparently this is because of Math. Specifically, it’s meant to behave the same as the “for all” quantifier in mathematics.

Nicholas Zakas has a good article that goes into more detail and this nice tip if you also found this behavior surprising:

Instead of reading every() as “does every item in this array match this condition?” read it as, “is there any item in this array that doesn’t match this condition?”

Thank you for keeping RSS alive. You're awesome.

Reply by email

Update git credentials in Windows

Fri, 20 Oct 2023 00:00:00 +0000

Today I learned that if you need to update (or delete) credentials that were previously saved with the git-credential-manager, then you have to go the Windows Credential Manager.

Find it under Control Panel -> Credential Manager -> Generic Credentials.

Calling an extension method on a null instance

Thu, 19 Oct 2023 00:00:00 +0000

Today I learned that you can call an extension method on a null instance of the type. I had always assumed without thinking about it too hard, that the reason string.IsNullOrEmpty isn’t defined as an extension method in the framework is because you would get NullReferenceException.

But if we were to define an extension method like public static bool IsNullOrEmpty(this string s), and call it like if(s.IsNullOrEmpty()) this is just syntactic sugar for if(StringExtensions.IsNullOrEmpty(s)) and therefore it’s safe to call on a null instance.

Apparently the argument against this is that it could be confusing or counterintuitive when looking at the code if you think it’s an instance method. I personally fall on the side of adding convenient extension methods like this - if nothing else to add a NotNullOrEmpty method.

To me I’ve always found it very easy to miss the ! operator in a conditional and so avoiding those makes the condition much easier to read.

I much perfer:
if(userName.NotNullOrEmpty)
over
if(!string.IsNullOrEmpty(userName))

Thank you for keeping RSS alive. You're awesome.

Reply by email

Zeal offline documentation browser

Wed, 18 Oct 2023 00:00:00 +0000

Today I learned about a cool project called Zeal that let’s download and browse the documentation for a bunch of projects. I’ve always liked the idea being able to continue working even without internet.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Conditional logic in pipelines YAML

Mon, 16 Oct 2023 00:00:00 +0000

Today I learned that you can have conditional expressions in Azure Pipelines YAML files:

steps:
- script: tool
  env:
    ${{ if parameters.debug }}:
      TOOL_DEBUG: true
      TOOL_DEBUG_DIR: _dbg
    ${{ else }}:
      TOOL_DEBUG: false
      TOOL_DEBUG_DIR: _dbg

Thank you for keeping RSS alive. You're awesome.

Reply by email

Toggle CSS classes in Devtools

Fri, 13 Oct 2023 00:00:00 +0000

Today I learned that the little .cls button in the Chrome devtools is a handy way to toggle classes on an element:

I imagine the trend of using utility classes was the main motivation for this feature (although apparently it’s been there for a few years and I only just figured out what it was for).

Thank you for keeping RSS alive. You're awesome.

Reply by email

Copy git link extension

Wed, 11 Oct 2023 00:00:00 +0000

2025-06-16 Update: This is now built-in to Visual Studio.

Today I learned about the Copy Git Link extension for Visual Studio which will give you the url of currently selected lines on your git hosting provider i.e azure devops or GitHub.

Especially handy for quickly pointing a teammate to a particular part of the codebase.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Git rerere

Thu, 05 Oct 2023 00:00:00 +0000

If you’ve ever had to abort a rebase or merge but didn’t want to waste the work you already did resolving merge conflicts, then you should enable the git rerere option:

git global config rerere.enabled true

It stands for Reuse Recorded Resolution, and it essentially remembers how you resolved a merge conflict and will automatically reapply if it sees it again.

Resolving conflicts with git-rerere

Thank you for keeping RSS alive. You're awesome.

Reply by email

git-absorb

Wed, 04 Oct 2023 00:00:00 +0000

One of my favorite git plugins is git-absorb (which is a port of Mercurial’s absorb).
It basically helps you create --fixup commits automatically, which you can then use an interactive rebase with autoSquash to “absorb” them into your previous commits.

I tend to use it when I’ve made a bunch of small tweaks to my feature branch, especially from automated feedback from a PR bot, I’ll then stage the changes and git-absorb will find the previous commit on my branch that also modified those same lines.

I have a git alias set to run: git absorb --base main --force
So it’ll search through all the commits on my branch whether I’ve pushed them or not.

As usual Andrew Lock has the best post explaining it: (https://andrewlock.net/super-charging-git-rebase-with-git-absorb/)

Thank you for keeping RSS alive. You're awesome.

Reply by email

push.autoSetupRemote

Tue, 03 Oct 2023 00:00:00 +0000

Today I learned about the git config setting push.autoSetupRemote that was added in version 2.37.0.

Like Tekin mentions in his post, I’ve had a git alias to do create my upstream branch but I still forget sometimes. To me this seems safe to enable by default with:

git config --global --add --bool push.autoSetupRemote true

and git will now set the upstream tracking branch for you!

Thank you for keeping RSS alive. You're awesome.

Reply by email

Use the `valueAsNumber` property of html number inputs

Mon, 02 Oct 2023 00:00:00 +0000

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

Thank you for keeping RSS alive. You're awesome.

Reply by email

Format a paragraph

Sun, 01 Oct 2023 00:00:00 +0000

In vim you can format a paragraph of prose text with gq. This basically will hard-wrap the lines to the configured textwidth for the filetype.

I use this all the time when writing git commit messages so the body of the message has the recommended max line length of 72.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Preserve case with find and replace

Fri, 29 Sep 2023 00:00:00 +0000

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 😁

Thank you for keeping RSS alive. You're awesome.

Reply by email

SVG sprites

Thu, 28 Sep 2023 00:00:00 +0000

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.

Thank you for keeping RSS alive. You're awesome.

Reply by email

One-time code autocomplete

Wed, 27 Sep 2023 00:00:00 +0000

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

SMS OTP code

Thank you for keeping RSS alive. You're awesome.

Reply by email

--update-refs won't update a ref if it's currently checked out in a working directory

Mon, 25 Sep 2023 00:00:00 +0000

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:

fatal: cannot force update the branch 'feature-1' checked out at '/projects/my-other-branch'

If you’re not familiar with either of these features I highly recommend looking into them. Andrew Lock has excellet write-ups on them:

Thank you for keeping RSS alive. You're awesome.

Reply by email

Highlight text in markdown

Fri, 22 Sep 2023 00:00:00 +0000

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.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Specify timestamp in Google Drive video URL

Tue, 19 Sep 2023 00:00:00 +0000

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

Thank you for keeping RSS alive. You're awesome.

Reply by email

Disabling browser autofill in a form

Fri, 15 Sep 2023 00:00:00 +0000

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.

Likewise if you want to give the browser hints about what it should try to suggest you can use one of the recognized values like address-line1.

Thank you for keeping RSS alive. You're awesome.

Reply by email

CSS Nesting

Thu, 14 Sep 2023 00:00:00 +0000

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

Thank you for keeping RSS alive. You're awesome.

Reply by email

Mock service worker

Wed, 13 Sep 2023 00:00:00 +0000

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.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Dev containers

Mon, 11 Sep 2023 00:00:00 +0000

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.

For example, if you want to experiment with a new programming language, you can quickly launch one of the sample containers (type “try” from the command palette) and have an environment ready to go (after docker downloads the image).

Thank you for keeping RSS alive. You're awesome.

Reply by email

CSS accent-color property

Thu, 07 Sep 2023 00:00:00 +0000

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>

Thank you for keeping RSS alive. You're awesome.

Reply by email

Delta pager for Git

Tue, 05 Sep 2023 00:00:00 +0000

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.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Null values in javascript interpolated strings

Fri, 01 Sep 2023 00:00:00 +0000

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

Thank you for keeping RSS alive. You're awesome.

Reply by email

Object.fromEntries

Wed, 30 Aug 2023 00:00:00 +0000

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 }

Thank you for keeping RSS alive. You're awesome.

Reply by email

Emulate page focus

Mon, 28 Aug 2023 00:00:00 +0000

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.

This post shows several other techniques you could potentially use but I found this option to work best for my scenario.

My favorite technique is this clever javascript snippet you can run from the console:

setTimeout(function () {
  debugger;
}, 3000);

Thank you for keeping RSS alive. You're awesome.

Reply by email

Ternary in C# string interpolation

Wed, 23 Aug 2023 00:00:00 +0000

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"

Thank you for keeping RSS alive. You're awesome.

Reply by email

Pretty Typescript errors Vscode extension

Mon, 21 Aug 2023 00:00:00 +0000

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

Thank you for keeping RSS alive. You're awesome.

Reply by email

Ignore commits in Git Blame with --ignore-revs-file

Thu, 17 Aug 2023 00:00:00 +0000

Today I learned that you can ignore commits in Git blame on Github with a .git-blame-ignore-revs file in the root of your repo!

I’d known about the git config blame.ignoreRevsFile config option where you can point it to a file with a list of commit IDs to ignore which is especially useful for those annoying commits in a repo where whitespace was cleaned up or every tab in the codebase was replaced with spaces. You have to run the config command locally but now apparently Github does it automatically.

I also learned you can include comments in the file like:

# Run this command to always ignore formatting commits in `git blame`
# git config blame.ignoreRevsFile .git-blame-ignore-revs

# Changed everything to tabs
a926bba49c89a5b882cd298be3af2570b1e6252c

# Fixed all the formatting errors
5e78fdc6eac01e4e730046dc2811fbb78157a154

Thank you for keeping RSS alive. You're awesome.

Reply by email

Git branch --force

Wed, 16 Aug 2023 00:00:00 +0000

Today I learned about the --force parameter of git branch which will take an existing branch and point it to a different commit. This is another handy alternative to git reset --hard for some common scenarios.

For example, if I forgot to create a new feature branch and accidentally made some commits onto main, I can run the following:

git checkout -b new-branch # create the new branch and switch to it
git branch --force main origin/main # fix main back to what it should be

vs what I would do before:

git branch new-branch
git reset --hard origin/main
git checkout new-branch

which is one less command, but even better the contents of my working directory don’t have to change at all!

Thank you for keeping RSS alive. You're awesome.

Reply by email

Find all CSS changes in Chrome DevTools

Tue, 15 Aug 2023 00:00:00 +0000

Today I learned about the Changes tab in Chrome devtools.

When you’re tweaking CSS styles in Chrome DevTools, you can see all the changes you’ve made by clicking the “Changes” tab in the bottom “drawer” in DevTools. It’s especially nice because you can then copy the changes to your clipboard and paste them into your actual source file. You can open it from the command palette (ctrl+shift+p) and typing “show changes”.

One caveat I’ve noticed is that it doesn’t show styles you’ve added directly to an element as an inline style.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Javascript Array.prototype.with()

Fri, 11 Aug 2023 00:00:00 +0000

I just discovered the with() method which takes an index value and a value to insert at that index and returns a new array with the value inserted at the index.

const arr = [1, 2, 3, 4, 5];
const newArr = arr.with(2, 'a');
console.log(newArr); // [1, 2, 'a', 4, 5]

You could do this before with something like arr[2] = 'a' but that would modify the original array.

The with() method became widely supported in 2021.

Read more about the with() method and alternatives in Stefan Judis’ post.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Awesome AZD templates

Thu, 10 Aug 2023 00:00:00 +0000

Today I discovered the Awesome AZD templates site which is essentially a curated gallery of a bunch of templates for deploying to Azure with the new Azure developer cli.

There are even several for integrating with ChatGPT like ChatGPT + Enterprise Data with Azure OpenAI and Cognitive Search.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Git reset --keep

Wed, 09 Aug 2023 00:00:00 +0000

I just learned that git reset has a --keep parameter.

This works the same as --hard except that it won’t discard any uncommitted changes. It’s meant to be used when we want to remove some of the last commits in the current branch but if there could be conflicts between the changes in the commits we want to remove and our uncommitted changes, then the reset is blocked.

I’d been using git reset --hard and just double checking I didn’t have anything uncommitted but I’ll be defaulting to --keep except if I’m intentionally trying to clear out my changes.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Comment styles in React

Tue, 08 Aug 2023 00:00:00 +0000

I recently learned that there are actually several ways to add comments in JSX in React.

I had known about the {/* comment */} syntax but didn’t realize you could use // within a jsx element:

function MyComponent() {
  return (
    <div>
      <Hello
        message="Hello, World!" // message prop requires a string
      /> 
    </div>
  )
}

Thank you for keeping RSS alive. You're awesome.

Reply by email

Git pickaxe

Mon, 07 Aug 2023 00:00:00 +0000

You can search through git history not only by the text of a commit message but by the contents of the diff of commits. This is commonly referred to as the git pickaxe and you invoke it with the -S parameter to git log i.e. git log -S 'public void SomeMethod and you’ll get every commit that touched that method signature or even one that deleted it.

Some git clients will expose this as an option in a search field but if that fails the git cli lets you include additional filters like author or file path or even use regex with the --pickaxe-regex switch.

See an example

Thank you for keeping RSS alive. You're awesome.

Reply by email

Bram Moolenaar has passed

Sat, 05 Aug 2023 00:00:00 +0000

I just found out about the passing of Bram Moolenaar, the core maintainer of Vim for the last 30 years 😞

I like what a commenter posted:

Vim has soul. It is that chisel you inherited from your grandpa that you keep using. It fits well in your grip and is comfortable, even though it lacks the soft rubber that the new ones in the store have. It’s a tool with its own history.

Vim was the first real editor I used. I learned it on the CS department shared Unix server by following the instructions on a paper handout our TA gave us… and ever since I haven’t been able to type in anything without hjkl.

Vim Boss

Thank you for keeping RSS alive. You're awesome.

Reply by email

Multi-line string in YAML

Fri, 04 Aug 2023 00:00:00 +0000

It turns out there are actually several different ways to handle multiline strings in YAML. I had noticed varying forms of the syntax but didn’t realize they process the strings differently.

YAML multiline strings is a handy site with interactive examples of the different forms.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Paste a URL as a markdown link

Thu, 03 Aug 2023 00:00:00 +0000

Today I learned that the latest version of VS code added a smart option to detect when you’re pasting a URL and automatically paste it as a markdown link in markdown files.

You can enable it by setting the markdown.editor.pasteUrlAsFormattedLink setting to smart or always.

See the release notes.

Thank you for keeping RSS alive. You're awesome.

Reply by email

The C4 model for visualizing software architecture

Wed, 02 Aug 2023 00:00:00 +0000

Today I learned about the C4 model for visualizing software architecture. It looks like a nice framework for thinking hierarchically about the architecture of a system and how best to go about conveying it visually.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Nominal types in Typescript

Tue, 01 Aug 2023 00:00:00 +0000

Today I learned about a pattern in Typescript called “Branded Types” which lets you create “nominal” types.

Typescript’s type system is structural which is incredibly flexible and powerful when working with javascript patterns, but occasionally you want to add some extra strictness where even if the shape of the data is the same, you’ll get a type error if the name of the types don’t match (like in C# which is a nominal type system).

A simple example looks like this:

Thank you for keeping RSS alive. You're awesome.

Reply by email

You can save window layouts in Visual Studio

Mon, 31 Jul 2023 00:00:00 +0000

If you go to Window > Save Window Layout, it’ll save your current window layout in Visual Studio. For example, when I have to go from my monitor setup to just my laptop, I tend to set the solution explorer to auto-hide and make the Test Explorer smaller.

Now I can do it with just a keyboard shortcut!

Thank you for keeping RSS alive. You're awesome.

Reply by email

You can easily wrap text with HTML tags

Thu, 27 Jul 2023 00:00:00 +0000

Using the builtin Emmet functionality, you select any arbitrary text or HTML and wrap it with new markup by executing the command Emmet: Wrap with Abbreviation and typing an Emmet abbreviation.

I’m going to be using this all the time now!

It even understands JSX so it’ll output className if you specify a css class.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Azure Data Studio can display nicely formatted JSON data

Wed, 26 Jul 2023 00:00:00 +0000

Update: Microsoft is retiring Azure Data Studio but this feature is also available in the MSSQL extension for VS Code

If you click on a cell with json data in the results grid in Azure Data Studio, then it will automatically open a new tab with the json nicely formatted and syntax highlighted. Very handy for quickly checking the data stored in some rows with just a quick select *.

Thank you for keeping RSS alive. You're awesome.

Reply by email

A hidden button in an HTML form can be submitted

Tue, 25 Jul 2023 00:00:00 +0000

Even if a button is hidden with display: none, if it has a type of submit then it will still be activated if it’s the first button in a form and a user hits enter in a form field.

So it’s a good reason to always explicitly specify the type of a button since submit is the default but most of the time you want type="button".

FYI there’s an eslint rule for this for react.

Thank you for keeping RSS alive. You're awesome.

Reply by email

lazydocker

Mon, 24 Jul 2023 00:00:00 +0000

Today I learned about a cool terminal UI tool for managing containers called lazydocker. I’m not really working with Docker on my current project but I’m bookmarking it for later.

If you’re a fan of lazygit, lazydocker is from the same author.

Thank you for keeping RSS alive. You're awesome.

Reply by email

VS code can show the required HTML structure for a CSS selector

Fri, 21 Jul 2023 00:00:00 +0000

If you hover over a CSS selector or property, VS Code will provide an HTML snippet that’s matched by the CSS rule, and it will also show the specificity.

For example, this very specific rule that’s similar to one I came across recently:

I also had to look up the ~ which is the General sibling combinator.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Sequence Diagrams

Thu, 20 Jul 2023 00:00:00 +0000

I learned how to correctly read sequence diagrams. I came across a recent post that suggests “Sequence diagrams are the only good thing UML brought to software development”. I’d never thought they were that useful but it turns out that was because I’d been misreading them.

There’s probably been a few instances over the years where I’ve made a flowchart where a sequence diagram would have been better. For example, I tend to add a high-level overview of how a request moves through our application especially since Mermaid.js makes it really easy to add to markdown documentation (Github and Azure DevOps will both render them).

Here’s a quick example of a typical vertical slice architecture we would use at Headspring. Adding this code block to a markdown file will render a sequence diagram using Mermaid:

  sequenceDiagram
    UI->>api: http request
    participant api as API controller
    Note over UI,api: This gets bound to a viewModel <br/>(*[Query|Command].cs)
    participant mediatr as Mediatr handler
    api->>mediatr: Mediatr request
    mediatr->>DB: Entity framework query
    DB-->>mediatr: DB records
    Note over mediatr: Business logic/validation
    mediatr-->>api: Response data
    Note over api,mediatr: viewModel (*[Response|Command].cs)
    api-->>UI: http response

Rendered on Github:

Thank you for keeping RSS alive. You're awesome.

Reply by email

Press `ctrl+enter` to submit a comment on Azure DevOps

Wed, 19 Jul 2023 00:00:00 +0000

Pressing ctrl+enter in a comment field on Azure DevOps will submit the comment! For some reason, this isn’t listed on their keyboard shortcuts page but it’s so much nicer than using the mouse or pressing tab four times.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Git Extensions git client

Tue, 18 Jul 2023 00:00:00 +0000

The Git Extensions git client is actually pretty powerful and has a lot more features than I thought. I’d seen others using it before but never looked into it until I saw a StackOverflow answer suggesting to use Git Extensions to view the git reflog… a feature I’ve only ever seen in Smartgit.

Some nice features I noticed while playing with it for a bit:

View commits from the reflog in the log view (makes it really easy to recover commits)
Option to view First Parent only in the log view
Stage individual lines
Option to launch external editor for commit message
The commit message window can autocomplete file names
Show/Filter any number of branches in the log view
Windows file explorer integration
Completely free and open-source and cross-platform

I think I still prefer Smartgit over Git Extensions but it’s tough to recommend Smartgit since it requires a license for Commercial use so I’m always keeping an eye out for good free options to recommend to others and now Git Extensions is my new recommendation (much better than SourceTree).

Thank you for keeping RSS alive. You're awesome.

Reply by email

Strong typing with JSDoc and Zod

Thu, 13 Jul 2023 00:00:00 +0000

You can get pretty good type checking in Javascript with just JSDoc comments and an editor like VS code or Visual Studio. You’ll get most of the same intellisense and warnings in your editor as you would with Typescript.

Combine this with a library like Zod which can infer validation schemas from your types and you’ll have runtime checking also!

See: https://blog.jim-nielsen.com/2023/types-in-jsdoc-with-zod/ https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html

Thank you for keeping RSS alive. You're awesome.

Reply by email

Visual Studio 2022 can stage individual lines in git

Wed, 12 Jul 2023 00:00:00 +0000

Visual Studio added support for staging to commit individual chunks of changes (also known as interactive staging). This essentially lets you commit only parts of the changes you’ve made to a file or easily undo those changes. This is probably my most-used feature in a git gui client.

One caveat, it took me a minute to figure out how to use it in VS because if you have an external diff tool configured in git then clicking to view the diff in VS will open that tool instead of the VS diff viewer. But you can also stage lines by clicking on the margin annotations:

Bonus TIL: I now know exactly what these indicators mean.

See https://learn.microsoft.com/en-us/visualstudio/version-control/git-line-staging?view=vs-2022

Thank you for keeping RSS alive. You're awesome.

Reply by email

Use the Chrome devtools recorder to automate UI testing

Tue, 11 Jul 2023 00:00:00 +0000

Chrome devtools has a pretty decent recorder feature that can record and playback your UI interactions. It’s currently in preview but it’s been working well for me so far.

It’s especially handy if you have to keep repeating the same 5 steps every time you reload the page to test your code.

It automatically waits for UI elements to load and it’s pretty easy to tweak the recorded steps and export as a puppeteer script: https://developer.chrome.com/docs/devtools/recorder/

Thank you for keeping RSS alive. You're awesome.

Reply by email

Run a bash script from Powershell

Sun, 09 Jul 2023 00:00:00 +0000

You can execute a bash script from Powershell on Windows by typing bash if you’ve enabled WSL. For example bash ./new-til.sh. Some caveats though:

Make sure you use / instead of \ in the file path
Make sure the bash script was saved with unix line-endings

You can also make a wrapper script for scripts you regularly execute like new-til.ps1:

bash ./new-til.sh $args

If you don’t or can’t enable WSL, you can use sh.exe that’s optionally installed with Git for Windows. For example sh ./new-til.sh

See this StackOverflow post for more caveats/solutions.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Create new files faster

Fri, 07 Jul 2023 00:00:00 +0000

You can use ctrl+shift+a to open the new quick add dialog in VS 2022: https://devblogs.microsoft.com/visualstudio/adding-new-files-just-got-a-lot-faster/

Thank you for keeping RSS alive. You're awesome.

Reply by email

Hide a table in sql server management studio

Thu, 06 Jul 2023 00:00:00 +0000

Apparently in sql server you can mark any table as a system table using EXEC sys.sp_MS_marksystemobject and then Management studio will hide it automatically.

I ran into this because the docs say that Entity Framework 6 stores its code-first migration snapshots in a table called __MigrationHistory but I couldn’t find it because it’s hidden since it’s marked as a system table.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Use ChatGPT to explain bash scripts

Wed, 05 Jul 2023 00:00:00 +0000

Today I learned that chatGPT is pretty good at explaining cryptic bash scripts and commands. I was trying to understand exactly how a git prepare-commit-msg hook was working so I asked chatGPT to “explain the following git hook to me” and it did a pretty good job.

For example, it returned tidbits like:

[[ $BRANCH_NAME =~ $BRANCH_REGEX ]]: This conditional statement checks if the branch name matches the BRANCH_REGEX pattern. If the branch name starts with one or more digits, this condition will be true. and: sed -i.bak -e "1s/^#${BASH_REMATCH[1]}: //I" $1: This line uses the sed command to replace the branch number (captured by the BRANCH_REGEX pattern) and a colon at the beginning of the commit message with an empty string. The I flag makes the replacement case-insensitive. The -i.bak option creates a backup of the original commit message file with a .bak extension.

Bonus TIL: the BASH_REMATCH variable is automatically populated with the matched string in bash when using the =~ regex operator

Thank you for keeping RSS alive. You're awesome.

Reply by email

Use a table variable to hold a list of values

Tue, 04 Jul 2023 00:00:00 +0000

You can store a “list” of values in sql with a table variable.

DECLARE @listOfIDs TABLE(id INT);
INSERT INTO @listOfIDs
SELECT id
FROM Transactions
WHERE USER='bob';

Thank you for keeping RSS alive. You're awesome.

Reply by email

Stacking context affects z-index

Fri, 30 Jun 2023 00:00:00 +0000

In CSS, the stacking context can impact which elements display on top of each in addition to the z-index. So if you end up in a situation where cranking up the z-index doesn’t seem to work, the stacking context is likely the issue. I technically learned this a while ago but completely forgot about it until I was just reminded about it by a coworker dealing with this issue. Josh Comeau explains it well in his post on stacking contexts.

Thank you for keeping RSS alive. You're awesome.

Reply by email

GetUnderlyingType

Thu, 29 Jun 2023 00:00:00 +0000

In c# Nullable.GetUnderlyingType(type)will return null if the type is not Nullable<T>. For some reason this is not what I expected.

Thank you for keeping RSS alive. You're awesome.

Reply by email

Use `core.hooksPath` for shared hooks

Wed, 28 Jun 2023 00:00:00 +0000

Sometime around 2019, git added the core.hooksPath config setting to change the directory where git will look for hooks.

This is handy for commiting shared hooks into a repo so you no longer need workarounds like a script to copy them into the default $GIT_DIR/hooks folder or creating symlinks or relying on tools like Husky.

This post is a good example of how you can use it.

Thank you for keeping RSS alive. You're awesome.

Reply by email

TIL: Today I learned... on Brandon Pugh's Blog

NPM 11.10.0 adds `min-release-age`

Insert the last argument of the previous terminal command

Display git commit dates in local timezone

List installed node versions with Volta

Enable markdown in Google Docs

Rebuilding a 6v Power Wheels battery

datetime-local doesn't have full cross-browser support

Splice wires with solder seal connectors

Fix 'value' does not exist on type 'HTMLElement'

Sessions don't end when the browser closes

Import external stylesheet into a layer

Lowercase head behaves differently in git worktrees

You can use C# records in .NET Framework 4.x

You can backup your git stashes

ICS end dates are exclusive

Apply a patch file

Share git configuration in repo

Quickly Fix A Misspelled Word

Sudo for Windows

Use skip-worktree to ignore modified files

Quickly react to recent message in Slack

Move a line with :m

Install SQL Server from the command line

Details

Use winget to install Git for Windows with Unix tools

Auto add pull request reviewers

Link directly to a VS code setting

Fixing a bunny led night light

JST connectors

Semantic line breaks (one sentence per line)

The "Inverted Pyramid" in journalism

On dashes

Run old versions of Angular

You can style markdown links as code

Pressing `%` will also jump to the matching HTML tag

Profiles in Visual Studio Code

Create exclusive accordions with HTML `` element

Toggle a CSS class with vanilla javascript

toSorted() array method

Split lines in Vim

b is an Alias for Parenthesis in Vim

Dotnet StringSyntaxAttribute

Use the element for light/dark images in markdown

Use jq to get a list of deeply nested values from JSON

Github supports alerts in markdown

npmpackage.info

uv package manager

A single input in a form can submit

Type check and cast

setSelectionRange in Safari will focus the input

Stash changes in the index

Vim sets auto marks

Selectively restoring changes from another branch or commit

Personal git ignore per repository

Don’t you want to be using the same tools as the rest of your team?

Raw string literals in C# 11

SRI integrity hash algorithms

Use `URLSearchParams()` to build a query string

Edit commit message with git reword

View ModelState errors while debugging

View transitions API

Don't put an error boundary in the root of a react component

Console.trace()

History API state

New hotkey for commenting code

Chain-of-Thought Prompting

HTTP files

ASP.NET max upload file size

UUID v7

Quickly change the end of a line

Abort controller

Drag and drop upload

Input modes

:has selector

Use media queries in javascript with the `matchMedia()` method

Numeric separators

Clear site data

bash vs sh in git hooks on windows

Chrome devtools ignores form resubmission

Create exclusive accordions with HTML `
` element