TIL: Today I learned...

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.

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’s I’ve supported more and more in various markdown tools like Obsidian and vscode (they’re also referred to as callouts or admonitions).

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?