As developers, we spend a great deal of time searching for solutions, whether we’re diving deep into the sub-sections of a library’s documentation or combing through Stack Overflow answers for help. We almost always (hopefully before falling asleep over our keyboards) find the code snippet that solves the problem.
The biggest mistake affecting developer productivity is stopping after finding a solution. After spending all of that time and energy finding the perfect snippet, they don’t organize and store code snippets in a way that they can be effortlessly re-used when re-encountering the same problem.
Storing code snippets and organizing them properly can improve developer productivity more than any other tool. You don’t want to spend time searching for solutions that you already have answers to— you should be focusing on learning new topics and solving new problems. This article will break down the entire life cycle of using code snippets, from searching to saving and organizing, and finally to using them in your projects.
Before taking a closer look at how to store code snippets online to increase developer productivity with Pieces, let's set some ground rules on what exactly a code snippet is.
What is a code snippet?
This is a code snippet:
It’s a simple React styled component that renders a div with the given name prop. Does this mean code snippets are only lines of code? Not necessarily. Any amount of code that is intended to solve a particular problem can be referred to as a code snippet.
Code snippets can come from anywhere. Sometimes they’re StackOverflow answers, a block of code from a project's source code, bash scripts to speed up your workflow, or even screenshots from a YouTube video, Twitter or Reddit.
Now, let's look at some Pieces features and developer productivity hacks that can help us to improve our snippet workflow. The main goal is to spend little-to-no time saving code snippets, organizing, searching and retrieving them, so that we can focus on the task at hand.
Code formatting & language detection
One basic, must-have feature in your developer productivity tools is the ability to format your code. While useful for plain text, Notepad and other basic text editors don't have this feature (at least without installing any third-party plugins).
Some online note-taking software, like Notion or Evernote, does have this feature, but you can’t just paste your code onto a page. You have to create a code block and then paste your code to maintain the correct format.
This is where Pieces starts to shine for your development process. When you save code snippets into Pieces, the language of the code is automatically detected. In the example below, I’m saving a CSS snippet from FreeCodeCamp (I, for one, always forget how to center a `div`).
Extracting code from an image or screenshot
For a long time, I searched for the ability to extract code from images automatically instead of retyping all of the code, especially when following long tutorials on YouTube.
There are good optical character recognition (OCR) tools out there, but only one focuses on code specifically. Pieces identifies the code in an image, detects which language it is, and formats the code just like in the screenshot.
See it in action! I dragged my screenshot into Pieces and I can use 'T' to toggle between the code and the image.
CLI
There are times when I want to search through my stored code snippets for a shell command, but it seems like every tool to save shell commands is designed only for GUI. Thankfully, Pieces also has a CLI. Because all of your data is stored locally and securely on your machine, you can use `pieces list snippets` to list all of your saved snippets. To copy any of your snippets onto your clipboard, use `pieces use IDX` where IDX is the index of your snippet.
Our snippet manager makes it super easy to view your pieces and copy a piece onto your clipboard, ready to paste wherever. This tackles a big problem — context switching between development environments to receive a code snippet that you saved some time ago.
Saving code snippets from your browser
I’m sure you’ve seen code snippets when trying to debug an issue, reading documentation, implementing a new feature or casually browsing through your favorite subreddit. Trying to save code snippets properly can be challenging— there are third-party plugins for Notion and Obsidian that save a piece of text to a specific page, but they don’t always handle code well. The best way to save code snippets is with Pieces.
Pieces offers browser plugins that take your developer productivity workflow a step further. Once you have Pieces OS app for saving code snippets running on your machine, you can use a browser plugin to detect code blocks on the internet. With a single click of the "Save to Pieces" button, you can save snippets online right into your Pieces repo to accelerate individual productivity.
But it's not just a code snippet saver and manager — Pieces is super powerful in terms of holding onto the context of a snippet. Pieces captures the source of a snippet as a related link so that you can easily revisit that webpage in the future.
Writing descriptions manually for a code snippet adds so much usability down the line, but it takes some time and may not be the best way to store code snippets. Pieces automatically generates descriptions so that you have something to work from.
When I saved the above code snippet from MDN docs, Pieces automatically grabbed a bunch of metadata, like the source of the snippet, tags, the date it was created, and any sensitive information.
Finding and re-using your snippets
The whole point of storing code snippets online is so that when in need, you can use it again. The two main hurdles for re-using a snippets are finding it and pasting it into your current project. Note taking tools and Gist do offer search, but it’s difficult to quickly bring a snippet into the project you’re working on. When you use Pieces’ IDE plugins, you can search through your snippets inside your IDE and insert them into your project with a single click or keystroke.
In the video below, I’m bringing the JavaScript snippet that I saved from my browser into my JS file. I can do this by manually searching the Pieces extension or using 'cmd + Shift + p' / 'ctrl + shift + p' to open the command palette in my VSCode extension and searching my pieces using the `search pieces` command. Once I find the snippet I want to use, I simply hit 'Enter' and it's in my file 😀.
Sharing
Now we all know how to store code snippets along with all of its context and add it to a project whenever we need it. How about sharing it with the world?
Maybe you want to share a snippet on Twitter or in a blog post. The goal is that people can not only look at the code snippet, but can also save it. The worst thing for a content creator is to share a beautiful piece of code and have your viewers lose all of its context or manually re-type it.
Pieces can generate a Pieces link in one click. Anyone with this unique link can save your snippet into their Pieces repo, and you control what to share in your snippet. You have the power to remove any sensitive information in your snippet and to update or revoke what you shared in the past.
Final comparison
Having the discipline to organize and store code snippets can be hard, especially when your head is deep inside a problem. Pieces is the ultimate free and powerful code snippet tool that solves all of these problems at their core, enabling developers to do what they’re best at: solving new problems.
Here's a list of features compared against all of the best developer productivity tools mentioned above.
