128 TILs and counting...

Find all CSS changes in Chrome DevTools

Today I learned about the Changes tab in Chrome devtools. When you’re tweaking CSS styles in Chrome DevTools, you can see all the changes you’ve made by clicking the “Changes” tab in the bottom “drawer” in DevTools. It’s especially nice because you can then copy the changes to your clipboard and paste them into your actual source file. You can open it from the command palette (ctrl+shift+p) and typing “show changes”....

August 15, 2023 · 1 min · Brandon Pugh

Javascript Array.prototype.with()

I just discovered the with() method which takes an index value and a value to insert at that index and returns a new array with the value inserted at the index. const arr = [1, 2, 3, 4, 5]; const newArr = arr.with(2, 'a'); console.log(newArr); // [1, 2, 'a', 4, 5] You could do this before with something like arr[2] = 'a' but that would modify the original array. The with() method became widely supported in 2021....

August 11, 2023 · 1 min · Brandon Pugh

Awesome AZD templates

Today I discovered the Awesome AZD templates site which is essentially a curated gallery of a bunch of templates for deploying to Azure with the new Azure developer cli. There are even several for integrating with ChatGPT like ChatGPT + Enterprise Data with Azure OpenAI and Cognitive Search.

August 10, 2023 · 1 min · Brandon Pugh

Git reset –keep

I just learned that git reset has a --keep parameter. This works the same as --hard except that it won’t discard any uncommitted changes. It’s meant to be used when we want to remove some of the last commits in the current branch but if there could be conflicts between the changes in the commits we want to remove and our uncommitted changes, then the reset is blocked. I’d been using git reset --hard and just double checking I didn’t have anything uncommitted but I’ll be defaulting to --keep except if I’m intentionally trying to clear out my changes....

August 9, 2023 · 1 min · Brandon Pugh

Comment styles in React

I recently learned that there are actually several ways to add comments in JSX in React. I had known about the {/* comment */} syntax but realize you could use // within a jsx element: function MyComponent() { return ( <div> <Hello message="Hello, World!" // message prop requires a string /> </div> ) }

August 8, 2023 · 1 min · Brandon Pugh

Git pickaxe

You can search through git history not only by the text of a commit message but by the contents of the diff of commits. This is commonly referred to as the git pickaxe and you invoke it with the -S parameter to git log i.e. git log -S 'public void SomeMethod and you’ll get every commit that touched that method signature or even one that deleted it. Some git clients will expose this as an option in a search field but if that fails the git cli lets you include additional filters like author or file path or even use regex with the --pickaxe-regex switch....

August 7, 2023 · 1 min · Brandon Pugh

Multi-line string in YAML

It turns out there are actually several different ways to handle multiline strings in YAML. I had noticed varying forms of the syntax but didn’t realize they process the strings differently. YAML multiline strings is a handy site with interactive examples of the different forms.

August 4, 2023 · 1 min · Brandon Pugh

Paste a URL as a markdown link

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.

August 3, 2023 · 1 min · Brandon Pugh

The C4 model for visualizing software architecture

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.

August 2, 2023 · 1 min · Brandon Pugh

Nominal types in Typescript

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

August 1, 2023 · 1 min · Brandon Pugh