TIL: Today I learned...

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.

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

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

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

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

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

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!

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.

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

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.