Leslie Gyamfi

Posted on Jun 20

Unboxing Pieces App for Developers: Your Workflow Copilot 🚀🔥

#productivity #githubcopilot #developers #workflow

As a backend software engineer, developer advocate, and technical writer who has worked with brands that span the fields of insurance, data management, software testing, and healthcare (cancer research) like DbVisualizer, the highly rated database client and SQL editor in the world, LambdaTest Inc., Insurerity Digital, and Yemaachi Biotech Company, there’s no better person to describe how a day in the life of an engineer feels like.

In my typical day as an engineer and dev advocate, I’m mostly found writing JavaScript and SQL, and developing on macOS while using a handful of tools that are indispensable in my day-to-day work such as VSCode IDE, Google Chrome browser, GitHub Desktop, Slack Desktop, Notion, Notion Calendar, Postman, Anaconda, Android Studio, etc.

Before being introduced to the Pieces app for developers I was a heavy user of Google Drive. I would often use Google Drive to save my code snippets, events, and other workstream materials. Other times when I'm working on a project and I have to save some code snippets, infrastructure platform login credentials, keys, links, and other stuff (db urls, errors) somewhere, I’d use the notes app on macOS or notion. One other important part of my work that I had to always save somewhere so I don’t lose track of is tickets that have been assigned to me or reports from a QA engineer.

This method of saving tiny pieces of important information lacked cohesion and remembering the exact location of data was sometimes a pain in the arse until I chanced on Pieces for Developers.

When I first heard about the Pieces for Developers, I was intrigued by its promise to streamline and enhance productivity for coding and project management. As a developer, I am always on the lookout for tools that can help optimize my workflow, and Pieces seemed to offer a unique blend of features designed specifically for our needs.

My initial interest in Pieces stemmed from its focus on helping developers organize and manage code snippets, notes, and other resources intuitively. The idea of having a central repository where I could quickly store and retrieve useful code snippets, docs, and other related information to my projects was appealing. This feature promised to save me from the chaos of scattered notes and endless searching through old projects to find reusable code.
Upon setting up Pieces, I was eager to achieve several productivity benefits including but not limited to collaboration and improved organization.

Collaboration Purposes
As I often work in a team environment, I was looking for ways to improve collaboration. Pieces’ ability to share resources and insights with team members promised to foster better communication and collective knowledge sharing.

Code Reusability
I wanted to efficiently store and categorize my frequently used code snippets, making reusing them across different use cases or projects easier. This would reduce redundant coding efforts and improve the consistency and quality of my work.

Improved Organization
Through the consolidation of my notes, documentation, and code snippets in one place, I aimed to create a more organized and accessible knowledge base. This organization would allow me to quickly find the information I needed without sifting through disorganized files or online searches.

Seamless Platform Integrations
Pieces’ potential to integrate with other development tools and platforms I use, such as VSCode, Slack, GitHub, MS Teams, Google Chrome browser, etc, was a significant draw. I hoped this integration would facilitate a smoother workflow and reduce the time spent switching between different applications or tools.

Why Review a Product like Pieces for Developers?

With my experience working across spanning industries that include insurance, data management, software testing, and healthcare, I understand the challenges developers face daily. This has given me knowledge of the tools and practices that can significantly enhance a developer's productivity and workflow.

Given this background, I saw a formal review of Pieces as an excellent opportunity to provide invaluable insights to my followers and readers. The name is Pieces for ‘Developers’ - This tells us that the ulterior goal of Pieces is to make the lives of developers easier.

Below are the reasons I believe it would be beneficial to review Pieces and share my findings with my audience:

Collaboration Purposes
Many of my readers work in team environments where collaboration and knowledge sharing are indispensable, therefore Pieces’ ability to facilitate resource sharing and improve team communication can be a game-changer. Through this review, I can highlight its collaborative features and demonstrate how it can boost team productivity.

Addressing Common Dev Challenges
Developers often face challenges like managing code snippets, organizing documentation, and maintaining efficient workflows. Pieces promises to address these issues by providing a centralized repo for code snippets, notes, and other resources.

My audience, comprising developers who likely encounter similar challenges, could greatly benefit from understanding how Pieces can help ease their way out.

Setting Up the Pieces App

Navigate to the pieces app documentation. Select your installer based on the operating system of your computer. Run the installer and you’re good to go. In the navigation menu of the documentation, you will find a list of Pieces App plugins and extensions for VSCode, JetBrains, web, MS Teams, Azure Data Studio, Obsidian, and Jupyter.

After installing Pieces, the first step in the onboarding process is to set up a personalized pieces experience by specifying your

Developer Persona and Languages
Typical Toolchain
Experience Level
Project Types (individual, team, both)

Next, Pieces will help you choose how to effortlessly search, refer, and be able to reuse all your saved materials.

After setting up preferences, you can also do your cloud integrations so everything syncs. You can choose to use GitHub, Google, etc.

Pieces for Developers: the Good & the Bad

In this first-impression blog, we’ll get into the good, and the bad and what it means for a Developer Advocate like myself and the productivity of my work-in-progress journeys. Time to get started!

The Bad - The Ugly 🙂

Below are a few scenarios and features where Pieces fell short:

Performance on Intel Architecture MacBooks
Intel MacBooks experience a noticeable lag when trying to exit the screen where Pieces is open. This high resource consumption results in performance barriers on older Intel architecture.

Limited Collaboration Features 🫥
The collaboration features are somewhat limited. When attempting to share snippets with a team, I found it difficult to manage permissions and there was no support for real-time collaboration on snippets although the features/ fuctions were visible.

Additionally, providing detailed access controls (super admin, admin, etc) to manage who can

view,
comment,
edit, and
delete a snippet would enhance team collaboration on Pieces.

The Good - The Awesome! 💪

This section will highlight the outstanding features of Pieces:

Live Context 💡
The Live Context feature in Pieces provides context-aware and real-time insights into your code. Because of its ability to comprehend and adjust to your work process, Pieces Copilot can offer apt support based on your work style, where you work, and when, giving you the freedom to recall anything and communicate with everything.

To enabling Live Context in Pieces, do this:

Navigate to the Machine Learning section of the Pieces Desktop App settings and activate the Workstream Pattern Engine.
Follow the prompts to adjust the necessary permissions if required.
Navigate to the Copilot Chats, begin your work, then initiate a conversation with the Pieces Copilot, utilizing Live Context for enhanced assistance.

How Live Context Works
Resolution of Errors
You can expedite project hand-offs and resolution of errors with Live Context. The copilot can provide accurate recommendations without requiring you to explicitly input the context of your error by gathering relevant workflow data.

Let’s look at this warning I’m encountering in my backend project in VsCode at the moment.

Since Pieces has relevant data of my workflow, I can ask Pieces Copilot+ to help me resolve it - “How would you take care of the warning in my VSCode Terminal?”. It will then utilize its relevant context or workflow ability to resolve the error as shown below:

Here, Pieces tells us how to get rid of the MongoDB Driver warning.

Present Time Workflow Assistance
You can manage your tasks across several tools and sessions with the aid of Live Context. Whether you're hopping from browser-based research, google chats or coding in your text editor, Pieces Copilot+ keeps track of your actions and offers helpful, context-aware support quickly.

For example, before I wrote about this ‘Live Context’ feature, I was doing some research around it. When I asked Pieces what I had been doing for the past hour, it provided me with the exact flow.

Improving Interaction with Developers
To assist you in more efficiently managing discussions and teamwork, Pieces Copilot+'s Workstream Pattern Engine collects and analyzes interaction data. Making summaries and action items based on your conversations and actions falls under this category.

For example, I can ask it to generate points for our sync meeting tonight at Pieces.

The Workstream Pattern Engine collects and analyzes data from various interactions throughout the day, including code reviews, comments, and direct communications within the team (slack, MS Teams, etc). It then uses the collected data to generate a concise response for the sync meeting.

The domain facilitates easy sharing and collaboration with team members or other developers. You can share specific snippets or resources by providing a link to your cloud domain.
Your personalized cloud domain in Pieces acts as a backup hub for your snippets, notes, and other resources. While it allows you to store and restore your materials, all snippets are saved on-device by default and only uploaded to the cloud when you manually perform a backup. Live sync functionality is not available, meaning that updates made on one device won't automatically sync to others.
Your cloud domain acts as a backup for your data. In case of hardware failure or data loss on your local device, you can easily recover your snippets and resources from your cloud domain.

Etc

Sharing Saved Snippets or Materials
With Pieces, you can share your saved materials publicly by generating a shareable link and putting it out there by following the illustration shown below:

After generating the shareable link, feel free to share this link with your team. They can save it to their pieces and edit it if need be!

Another interesting thing is that you can also add project-related people to your saved material.

Related people are more for Pieces to recommend people who have worked on similar things as you save snippets from various places. If a user shares a saved material to another user, they can save it to their personal saved materials on Pieces and edit it (if need be), but the original user will only have the version that they created and had shared originally.

To add related people, do this:

Click on the menu icon shown in the image below

Add the name and email of the related person and click on ‘Create’ to create.

Auto-enrichment 🧑‍💻
Immediately you save a snippet, Pieces App automatically enriches it with related links, tags, descriptions, and other metadata. This is driven by AI and machine learning algorithms that analyze your snippets and the context in which they are used. You can edit these descriptions, tags, related links, etc if you wish to. For example, embedding a different link (video, article) in your related links.

Note that this feature is on-device - meaning that all the processing and enrichment of the code snippets happen locally on the user's device, rather than on external servers.

Since all processing happens locally, sensitive code and data never leave the user's device. This ensures that proprietary or confidential information remains secure. Also, users do not need to worry about their code being stored or processed on third-party servers, reducing the risk of data breaches.

What does the Auto-Enrichment Feature Come with?

Improved Searchability: With tags, descriptions, and related links automatically added, finding the right snippet becomes much easier. You can search using full-text search, blended, natural language, or snippets.
Enhanced Context: Having related links and contextual information at your fingertips helps you understand and utilize snippets more effectively. It reduces the need to search for additional resources manually.
Time-Saving: Automatic enrichment saves time by eliminating the need to annotate and organize snippets manually. This allows you to focus more on coding.
Better Collaboration: When sharing snippets with team members, the added metadata provides them with all the necessary context to understand and use the snippets effectively.

Generating GitHub Gist 🚀
This function allows developers to quickly and seamlessly share code snippets on GitHub. To create a GitHub Gist, follow the steps below:

Open a snippet on the Pieces App. Click on the menu icon on the right-hand side of the window.

In the pop-up window, click on the shareable link’s ‘manage’ button shown in the image below:

Next, click on the ‘Generate Github Gist’ button.

Edit the contextual metadata and the description (if you wish to) and click on ‘Create’ to create the gist. Note that you will have to connect your GitHub account before this action can be done.

GitHub Gist Use Case
Grace, a software developer, is working on a new feature for a web application. She encounters a complex bug in her JavaScript code that she is unable to resolve on her own. Grace decides to seek help from her colleague, Dillon, who has more experience with JavaScript.

Process Flow
-> Grace identifies the specific code snippet that is causing the issue. She saves the problematic code snippet in the Pieces App. The app automatically enriches the snippet with relevant metadata, such as a description of the issue, tags, and any related links.

-> Using the Pieces App, she uses the 'Generate GitHub Gist' function to create a GitHub Gist from the saved snippet. This function automates the process of creating a Gist by integrating with Grace's GitHub account. The app generates a link to the GitHub Gist, which Alice can easily share. Alice sends this link to Dillon.

-> He receives the Gist link and opens it in his browser. He reviews the code and uses GitHub's commenting feature to provide feedback and suggest changes. Grace reviews the comments and updates. She then incorporates the suggested changes into her local codebase, resolving the bug.

Saving Snippets 🔥🔥
Use Cases
The code below is a backend code I wrote for an open-source app. What I have here is a code that connects my application to MongoDB. I want this snippet to be saved so that next time I’m writing some backend, this code snippet will be available to me any moment.

To do this, follow the steps below:

Open VSCode, and install the Pieces for VSCode extension.
Highlight the code, right-click, and select ‘Pieces’ from the menu.

From the pop-up menu, select ‘Save to Pieces’ to save the snippet.

Now, go ahead and open Pieces and you should see the snippet saved.

Dragging and Dropping an Image
With Pieces, you can drag and drop an image, which will be automatically saved! One crazy thing is that you could also view the image as code rather than an image. Dragging and dropping an image into Pieces to turn it into actual text (code snippets) leverages optical character recognition (OCR) technology.

This is a simple demo video to illustrate the drag-and-drop method in Pieces. In this video, you’re also going to learn how to view the image (screenshot of a code snippet) as code.

Are you watching a tutorial and want to use a code in the tutorial? Take a screenshot, drag and drop the image into Pieces, and view it as code! Pieces is simply developer-first!

There’s also Context Preview - a feature in the Pieces App that provides users with relevant information about their saved code snippets and other developer materials at a glance. This feature is designed to enhance productivity by walking developers through the context of their snippets.

Saving using the Chrome extension
In this section of the blog, we’re going to experiment with this blog on Unit testing with mocha and chai.

Let’s assume we are interested in this code. To copy it for our use, we just have to hover over the code and Pieces’ functions will pop up as shown in the image above. (provided the Chrome extension has been installed). Click on ‘Copy And Save’.

Great! Now we can see that our code snippet in our browser has been saved on Pieces! 💪

If you want to share this code sample with your teammates, just click ‘Share’. This will save the code, and generate a link to the code sample which will then be automatically saved to your clipboard.

There’s also the ‘Ask Copilot’ function. This function provides real-time assistance and insights about code samples directly within the browser. Particularly, it is useful for developers looking for quick explanations, suggestions, or solutions related to specific code snippets.

A dialog box or sidebar will appear after clicking it, prompting you to enter your question about the selected code snippet. For example, you might ask for an explanation of the code, potential optimizations, or how to fix a bug.

Crazy right?! 😀. Remember this feature works the same for Pieces’ VS Code Extension. Highlight a code -> right click -> ask Copilot!

Exploring Curated Collections from the Pieces Team
The team members at Pieces have come together to curate a collection full of some of the most useful code samples ranging from JS to TS to Node, Dart and Python (snippets for other languages and frameworks are coming soon). Add these snippets to your Pieces for some extreme time-savers.

To explore these collections, click on ‘Add Materials’ and in the pop-up window, click on ‘Explore Curated Collections’. Bingo! 🚀

Code Analysis 🧑‍💻
Copilot Chats in Pieces offers numerous advantages for developers preparing for technical assessment interviews such as Data Structures and Algorithms (DSA) interviews, etc. Let’s look at how to leverage Pieces in code analysis and in the preparation for such assessments.

Launch the Pieces app and click on the ‘Go To’ icon at the top right.

In the drop-down menu, select ‘Copilot Chats’
In the input field, you can choose to drag and drop a screenshot, paste a code or ask a technical question as shown below.

Use Case
Billy, a software developer, is preparing for a technical interview and practicing a Leetcode DSA problem on binary search trees (BST). Billy has chanced on a solution written in JavaScript on Leetcode.

He takes a screenshot of the code snippet (solution), opens up Copilot Chats on Pieces and drops the image.
Pieces then extracts the code from his image.
Billy then continues to ask technical questions: explanation, potential improvements, etc about the code in question as shown below. You could also ask Copilot to convert a code snippet to a different language. Say from JavaScript to Python, etc

Asking further questions:

This is crazy, isn’t it?! 😀

Wrapping Up! 🫡

OverAll Impression of Pieces
My overall impression of the Pieces App is up the roof! Well-designed with a clear focus on improving productivity and organization for developers, it has a wide range of features, such as snippet management, integration with popular platforms, and context-aware functionalities, making it a powerful addition to any developer's toolkit. What excites me most is the automatic generation of tags, descriptions, and related links adds significant value by simplifying the process of managing and retrieving code snippets.

Potential for the Pieces as it Evolves
The potential for the Pieces App is substantial. As Pieces continues to progress , it will surely become an indispensable tool for developers by refining its existing features and extending its flair. Enhancing performance, especially on older hardware, and improving collaboration features can make it more appealing to larger development teams and enterprises. Additionally, incorporating more advanced AI-driven functionalities for code suggestion and error detection can further elevate its utility in the development space.

Continued Use in Engineering & Developer Advocacy Career
I see myself continuing to use the Pieces App throughout my engineering and developer advocacy career. Its ability to smoothen the management of code snippets and integrate with tools I already use makes it a valuable asset to me and my team.

As developers, there’s always so much context to deal with. From handling large code bases to useful snippets (that we sometimes forget to save), to screenshots, etc, Pieces has made it its goal to bring all these together!
The ongoing improvements and the team’s responsiveness to feedback also provide confidence that the product will only get better with time.

Number One Feature/Benefit Wished For
The number one feature I wish Pieces App had is real-time collaboration capabilities. Being able to work on code snippets simultaneously with other team members, along with detailed access controls, would significantly enhance the app’s utility in a team setting. This feature would bridge the gap between individual productivity and collaborative coding which will make it a more comprehensive tool for development teams.

Recommendation to Other Engineers
As an intuitive, powerful tool that seamlessly integrates with various development environments, Pieces is perfect for organizing and managing code snippets, and its user-friendly interface makes it easy to adopt. I would characterize Pieces as a game-changer for code management and productivity. Whether you're working alone or in a team, Pieces is an invaluable tool that can greatly enhance your development experience. I would highly recommend Pieces to any other engineer.