Making GitHub Gists powerful with GistPad for VSCode

#javascript #webdev #productivity #discuss

As a developer, I am thankful to other devs who create utilities to make coding more productive. Every now and then there are tools that arrive and deserve community excitement.

Many developers have debated GitHub Gists and its usefulness. Nonetheless many still use it. It is a cumbersome process to go back and forth between browser and editor to search for your Gists as it is disconnected from GitHub in an odd way. It's not tied into your main repository profile. Its just there. Gist just exists.

For those who are unaware of what Gists are. Gists are simplified code. Not full application logic. It's for those pesky code patterns that you have to keep checking for syntax. Better even, re-usable code patterns that you utilize often and don't want to keep re-writing.

Docker Compose files
Save VSCode settings
Babel config files
Prettier config files
Postcss config files
NPM package.json objects
Bash commands
Git Commands
Pesky CLI commands
There are many prime Gist candidates across all languages.

Here are a couple of small snippets I have stored. First, a CSS font smoothing property. Autoprefixer does not prefix at compile. I am forever hunting these four lines of code.

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Second: Thought Bubble - Lost in thought! Does the 'and' sit inside of the braces or between the braces on CSS media query? My Gist has the answer.

@media (min-width: 481px) and (max-width: 767px) {

  //CSS

}

My next big project. Produce a file of 'for loops' in all of the tools I use. I use them often, they contain slightly different syntax. Easy to forget. Perfect candidate for a Gist text file.

Enter GistPad

Johnathan Carter @lostintangent on Twitter & @lostintangent GitHub has produced such a tool deserving of mass excitement. GistPad.

The GistPad Extension Microsoft MarketPlace

GistPad GitHub Repository

I don't want to re-invent the docs as Johnathan has meticulously provided great documentation to get you up and running.

Some of the awesome features:

Comes with an icon for the sidebar. This provides a drawer of your Gist files.
You're able to view your own Gists and the Gists you have starred from other developers. You can also leave comments or code suggestions without leaving VSCode.
You're able to capture snippets from your code base and easily push it from your editor to your Gist repository.
An awesome playground utility with connected files like Codepen in your editor. Sometimes you want to test code before you insert into your codebase. As a frontend developer. This is such an amazing tool to have running locally.

Johnathan is eager for feedback and input. He is actively working hard on this. Fun fact: He just pushed some updates to GitHub 38 minutes ago while I was writing this.

If you haven't already abandoned my article in excitement yet. Here is your chance to leave in excitement now. Go get GistPad

Happy New Year
I wish you all a successful and productive 2020!

All images and animation are property of Johnathan Carter and GistPad.