
💡 _This post is part of [my Today I Learned (TIL) series](https://ashleemboyer.com/blog/series/today-i-learned). Each section below describes a thing I learned today and the resources I used to learn it._

## Custom Visual Studio Code Key Bindings (again)

- **Why I learned this:** I originally learned how to add custom key bindings in early 2022 ([see the Gist](https://gist.github.com/ashleemboyer/6509df0445695578e11998b7d064fbd5)). Today, I went to add a new one and discovered a new feature while reading the docs. [Around March 2023](https://github.com/microsoft/vscode-docs/pull/6177) they added a built-in way to run multiple commands! I had been using the [`multi-command` extension](https://marketplace.visualstudio.com/items?itemName=ryuta46.multi-command).
- **How I used this:** I didn't end up adding a new keybinding (found a different workaround for the problem I was having) but I did update my configuration file to use the built-in `runCommands` and removed the previous extension. I'm _super_ minimalist about VS Code extensions so I'm glad I was able to remove one! I was also able to remove a custom keybinding that wrapped selected text in hyperlink syntax. Turns out if you have a URL on your clipboard, select text, and hit cmd+v, a hyperlink is automatically created. I've [published a new Gist](https://gist.github.com/ashleemboyer/5004f1d7a95f3df1b816321f6cf4249d) with my new file!
- **Resource I referenced:** [Running multiple commands - VS Code docs](https://code.visualstudio.com/docs/getstarted/keybindings#_running-multiple-commands).

## CSS property `tab-size`

- **Why I learned this:** On my business website, [Semantic Fish](https://www.semanticfish.com/), I'm working on a series of component demos and writeups. I want to be able to write React code for the interactive part and also have a code snippet shown in HTML. I don't want to have to write both, or write the content in Markdown or MDX. I'm pretty happy at the moment with just writing in JSX. But back to the HTML code snippet&mdash;I also want it to have syntax highlighting. Final thing: I don't want to install a third-party library. So I made it a fun mini project to build a `CodeBlock` component using brand colors for the syntax highlighting.
- **How I used this:** My component parses React `children` passed in the `CodeBlock` to build an array of code lines. It does this recursively, since each element in `children` can have multiple child elements of its own. Each time my recursion function is called, I increment its second argument (called `indentBy`) by 1. Then just before the function returns its lines of code, I add `indentBy` tab characters (`&#9;`) to the beginning of the line. I _could_ use space characters instead, but the width of those isn't customizeable like tab characters. Eventually it'll be cool to add a feature to my `CodeBlock` that enables anyone to customize the tab width to whatever helps them read the code easiest. For now I've set a default `tab-size: 2` on the `CodeBlock`'s `code` HTML element.
- **Resource I referenced:** [tab-size - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/tab-size).

## Void Elements

- **Why I learned this:** Part of working on the aforementioned `CodeBlock` component involved needing to know which HTML elements have end tags or just a `>` character (aka `&gt;` in HTML). Turns out there's a name for these kinds of elements! You guessed it: they're called void elements. Also, self-closing tags (`<tag />`) do not exist in HTML. Today I learned! (bad-dum-tssss)
- **How I used this:** Using the list from MDN, I created an array constant of tag names near my recursive function (mentioned in [the previous section](#css-property-tab-size)). For each line of code I build up in the function, I check if the element's tag name is in the array (using [`Array.includes`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)).
- **Resource I referenced:** [Void element - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Void_element).


Posts Related to the "vscode" Tag