Today I learned that the latest version of VS code added a smart option to detect when you’re pasting a URL and automatically paste it as a markdown link in markdown files. You can enable it by setting the markdown.editor.pasteUrlAsFormattedLink setting to smart or always. See the release notes.
Today I learned about the C4 model for visualizing software architecture. It looks like a nice framework for thinking hierarchically about the architecture of a system and how best to go about conveying it visually.
Today I learned about a pattern in Typescript called “Branded Types” which lets you create “nominal” types. Typescript’s type system is structural which is incredibly flexible and powerful when working with javascript patterns, but occasionally you want to add some extra strictness where even if the shape of the data is the same, you’ll get a type error if the name of the types don’t match (like in C# which is a nominal type system). ...
If you go to Window > Save Window Layout, it’ll save your current window layout in Visual Studio. For example, when I have to go from my monitor setup to just my laptop, I tend to set the solution explorer to auto-hide and make the Test Explorer smaller. Now I can do it with just a keyboard shortcut!
Using the builtin Emmet functionality, you select any arbitrary text or HTML and wrap it with new markup by executing the command Emmet: Wrap with Abbreviation and typing an Emmet abbreviation. I’m going to be using this all the time now! It even understands JSX so it’ll output className if you specify a css class.
Update: Microsoft is retiring Azure Data Studio but this feature is also available in the MSSQL extension for VS Code If you click on a cell with json data in the results grid in Azure Data Studio, then it will automatically open a new tab with the json nicely formatted and syntax highlighted. Very handy for quickly checking the data stored in some rows with just a quick select *.
Even if a button is hidden with display: none, if it has a type of submit then it will still be activated if it’s the first button in a form and a user hits enter in a form field. So it’s a good reason to always explicitly specify the type of a button since submit is the default but most of the time you want type="button". FYI there’s an eslint rule for this for react.
Today I learned about a cool terminal UI tool for managing containers called lazydocker. I’m not really working with Docker on my current project but I’m bookmarking it for later. If you’re a fan of lazygit, lazydocker is from the same author.
If you hover over a CSS selector or property, VS Code will provide an HTML snippet that’s matched by the CSS rule, and it will also show the specificity. For example, this very specific rule that’s similar to one I came across recently: I also had to look up the ~ which is the General sibling combinator.
I learned how to correctly read sequence diagrams. I came across a recent post that suggests “Sequence diagrams are the only good thing UML brought to software development”. I’d never thought they were that useful but it turns out that was because I’d been misreading them. There’s probably been a few instances over the years where I’ve made a flowchart where a sequence diagram would have been better. For example, I tend to add a high-level overview of how a request moves through our application especially since Mermaid.js makes it really easy to add to markdown documentation (Github and Azure DevOps will both render them). ...