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 most developers fall for is stopping after finding a solution. After spending all of that time and energy finding the perfect code snippet, they don’t save and organize their snippets in a way that they can be effortlessly re-used when re-encountering the same problem.
Saving and organizing your code snippets can increase your 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 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 Pieces can help you to utilize your code snippets, 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 component that renders a div with the given name prop. Does this mean code snippets are only a block 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 that can help us to improve our snippet workflow. The main goal is to spend little-to-no time saving, organizing, searching and retrieving code snippets, so that we can focus on the task at hand.
Code formatting & language detection
One basic, must-have feature in your snippet tool 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. When you save any code 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 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.
It’s super easy to view your pieces and copy a piece onto your clipboard, ready to paste wherever. This tackles a big problem — task switching 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. Saving these snippets properly can be challenging— there are third-party plugins for Notion and Obsidian that to save a piece of text to a specific page, but they don’t always handle code well.
Pieces offers browser plugins that take your productivity workflow a step further. Once you have Pieces OS 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 the code snippet into your Pieces repo.
But it's not just saving snippets — 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 for a code snippet adds so much usability down the line, but it takes some time. 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 saving your code 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 VSCode 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 save a code snippet 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 save and organize your code snippets can be hard, especially when your head is deep inside a problem. Pieces is the ultimate free and powerful 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 tools mentioned above.
Top comments (0)