DEV Community 👩‍💻👨‍💻

Cover image for Making GitHub Gists powerful with GistPad for VSCode
Derek Shanks
Derek Shanks

Posted on

Making GitHub Gists powerful with GistPad for VSCode

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.

Top comments (4)

Collapse
 
grimlink profile image
Sean van Zuidam

Thx for the share Derek and also Happy New Year

Collapse
 
dbshanks profile image
Derek Shanks

Thanks for taking the time to read Sean. All the best for 2020.

Collapse
 
codeprototype profile image
Kevin Le

Ironically, you had to retype your code here. Point is dev.to should allow gists to be linked in posts.

Collapse
 
dbshanks profile image
Derek Shanks

Haha! Good point. But, it was worth the extra effort to share this awesome gem of an extension.

Thanks for taking the time to read!

12 Gorgeous UI Components for Your Design Inspiration

>> Check out this classic DEV post <<