147 TILs and counting...

Semantic line breaks (one sentence per line)

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

 · 1 min · 

The “inverted pyramid” in journalism

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

On dashes

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

Run old versions of Angular

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

You can style markdown links as code

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

Profiles in Visual Studio Code

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

 · 1 min · 

Create exclusive accordions with HTML
element

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

Toggle a CSS class with vanilla javascript

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

 · 1 min · 

toSorted() array method

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

 · 1 min · 

Split lines in Vim

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