How to Store Code Snippets (and 10x your Developer Productivity)

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, combing through Stack Overflow answers for help, or querying Chat GPT. 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 using them in your projects.

Before taking a closer look at how to store code snippets online and increase developer productivity with Pieces for Developers, let's set some ground rules on what exactly a code snippet is.

What is a Code Snippet?

This is a code snippet:

Type image caption here (optional)

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 in your development process. When you save code snippets into Pieces, the language of the code is automatically detected.

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.

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 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 for Developers.

Pieces offers browser plugins that take your productivity workflow a step further. Once you have Pieces OS and the Pieces desktop 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 code snippets online right into your Pieces repo to accelerate individual productivity.

But it's not just a code snippet saver — Pieces for Developers is super powerful in terms of holding onto the context of a snippet with our auto-enrichment features. 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 and may not be the best way to store code snippets. Read on to see how Pieces automatically generates descriptions and other metadata so that you have something to work from.

Auto-Enrichment for Snippet Context + Metadata

We mentioned “auto-enrichment,” but what does that really mean? When you save a code snippet, you want to be able to find it, comprehend it, know where it came from, and understand why it is useful to you and your team. That is what auto-enrichment is all about.

We gather all of the information related to your saved materials, like the source of the snippet, tags, related people, associated commit messages, external resources, the date it was created, and any sensitive information. Our built-in ChatGPT integration and in-house machine learning enrich your developer materials to make the process of searching, reusing, referencing, transforming, and sharing as simple and automatic as possible. Wondering where to store code snippets? Look no further.

Identifying Related People

Oftentimes you’re using a code snippet that was shared with you by a friend or someone you’re working with. As the days go by, it becomes more difficult to remember who shared that snippet with you and when. You may even need to talk to them to learn more about their thought process and why they even shared that code snippet with you in the first place.

When a code snippet is saved in Pieces from messages in Teams, or you receive a snippet via a shareable link from Pieces, the person or people related to that snippet are tagged in the context view. In the case of the Microsoft Teams app, Pieces will also capture a link to that specific message where the code snippet was originally shared, so you can resurface additional context. You can even use our AI copilot to surface this information when chatting with Pieces Copilot.

Capturing Related Links

Just as Pieces captures the links to Teams messages, it also gathers related links on snippets as you save them from your browser, IDE, GitHub project, and even as you generate or write a new snippet in the desktop app. These links are to related pages, tutorials, and all kinds of other websites and doc sites that would help with the understanding and implementation of the given snippet, as well as a link to the source of the material.

Descriptions, Tags, Titles

In addition to the related people and related links, Pieces auto-enrichment also labels your snippet with a title for the snippet, a description of what the snippet is doing, and tags that are related to the snippet. All of this is nice to have when learning more about a particular snippet, but where it really helps is when searching for a given snippet. The tags, titles, and descriptions all feed into the intelligent natural language search engine that lives inside Pieces, allowing you to quickly navigate through your snippets and find what you need.

Finding and re-using your snippets

The whole point of storing code snippets online is so that when in need, you can use the saved snippets again. The two main hurdles for re-using a snippet are finding it and pasting it into your current project. Note-taking tools and GitHub Gists 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 VS Code and searching my snippets using the search pieces command. Once I find the snippet I want to use, I simply hit Enter and it's in my file 😀.

Global Search

You can think of Global Search as the “Google” for your developer materials. Global Search is an offline AI feature that allows you to quickly identify snippets from your Pieces library using natural language. Global Search also ranks your snippets by usefulness and organizes your snippets as you search, while also elevating your related links and all of the contextual metadata behind your snippets. This powerful search engine makes Pieces the best place to store code snippets for developers.

Snippet Discovery

Snippets are everywhere, whether you save them or not. A great way to identify new snippets from your current and past projects is with In-Project Snippet Discovery. You can access this feature in the Desktop Application, giving you the power to simply drag and drop a project into the window and watch as it quickly identifies all of the snippets that would be useful for you based on your saved snippets and our pattern recognition engine. This is an amazing way to help boost your code standardization and allow you to quickly reuse your snippets directly from your repository in your IDE.

Workflow Activity View

In an effort to solve productivity bottlenecks, we introduced a new view in the Pieces Desktop App called Workflow Activity View. As you adjust snippets, add tags, or generate new snippets via the performance enhancements or transformations in the app, Workflow Activity works in the background, allowing you to quickly look back to verify and review any changes that have been made.

Sharing

Now we all know how to store code snippets along with all of their context, transform them, and add one to a project whenever we need it. How about sharing a snippet with the world?

Maybe you want to share a snippet on Twitter, Microsoft Teams, or in a blog post. The goal is that people can not only look at the code snippet and its related context 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.

You can easily 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 code snippet tool that solves all of these problems at their core, enabling developers to do what they do best: Solve new problems.

Here's a list of features compared against all of the best developer productivity tools mentioned above. See our comparison between GitHub Copilot vs ChatGPT vs Tabnine, and the best GitHub Copilot alternatives for developers.