TIL: Today I learned...

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

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

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

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