I have a confession to make. I struggle with describing the code snippets I use in my technical articles. I know, I know, it’s shocking, but all hope isn’t lost. For the past few months, I have been using this awesome tool to help me overcome this struggle. This, my friend, is called Pieces. I first learned about it from my friend, @sophyia, a former DevRel at the company. She asked me to join their guest writing program after reading my articles on freeCodeCamp's website. I’m a believer in trying a product before writing about it. So, I decided to download the desktop app and install the Chrome extension to see what it’s about. After a few days of using it, I was hooked. Now before I start sharing more tech confessions, let me tell you what exactly Pieces is.
Is Pieces candy?
As delicious Reese’s Pieces is, this type of Pieces is not something you can eat. It is actually an free AI tool that assists when you are coding.Think of it as a technical Tinkerbell from Peter Pan1. If you want to learn more about what Pieces can do, check out their short intro video here ⬇️
Now that you two have met, let me show you how I use Pieces in my workflow.
Pieces: the code catcher
In the past, I’d save code snippets that I wanted to use in my blog posts with the Chrome browser's bookmark feature. Unfortunately, I’d either scramble through so many tabs or the Bookmarks tab to find them. This left me with a headache. Once I started using Pieces’ web extension, I had a much easier time finding my saved code snippets. Here’s how.
Step one:Highlight a line of code
Step two:Right-click and pick the option, Save to Pieces.
Step three: Go to Saved Snippets area of the Desktop app
And viola, a saved code snippet! It's like a technical version of a Pokeball for catching Pokemon2!😊 Pretty cool right? 😉
Now before I start rambling about this feature, there's another one I want to show you! 😀
In the Desktop app, there’s a feature called Copilot chat. It’s like the Pokedex but for coding! 😀
I tend to use it if I’m struggling with fixing a line of code I’m creating for my open source contributions or projects. For example, I was working on the JavaScript file for my 404 page project.
Since Codedex's website design is video game themed, I thought back to my childhood and how I'd get annoyed whenever I saw a Please Standby warning while playing games like Pokemon Silver on my Game Boy Color, so I decided to bring this experience to my submission for the challenge.
I wanted to reference a line of code from that file in the project's README but I was struggling to describe it. After doing some mental ping pong, I typed my code in the copilot chat and asked for some for help:
In the above screenshot, the copilot explains that my code snippet selects the search input field and search button elements from the webpage. It also mentions that after the user clicks on the search button, the event listener sends the user to their desired section of Codedex's website. Even though I didn’t win the challenge, I did win in knowledge! 😀
Pieces: the time traveler
In the Pieces Copilot, there is a new feature called Live Context. It looks back at the content you recently viewed. It's kind of like a time machine minus the risks of changing people’s futures or causing them to not exist. Now before I start rambling on about the cons of time traveling, let’s see how it works4:
Then, type your question or idea in the chat or use the Suggested Prompts.
As shown in the screenshot above, I’ve made it to the writing stage of my technical article. In the past, I would rely on my brain to remember what I’ve written, which gets annoying. Once I started using the Live Context feature, it was easier for me to track my progress. This feature is also helpful if you are looking through files in a large codebase. For example, I was reviewing an issue for an open source project, but I was not sure which files needed the changes. So I went to the Copilot chat, typed “Where can I make add the canonical links?”, and got this response:
As much as I found Pieces enjoyable to use, there are some aspects of the tool that can use some improvement. Having to turn on the Live Context switch each time I start a chat on the Desktop app can get a bit tedious. So it would be beneficial to have the option to toggle the button on or off once. Also, the Co-pilot chat feature does not have a text-to-speech option. This can make it difficult for users with low motor skills to read the AI's long responses. Furthermore, adding this option would make reading these responses more bearable.
In the future, it would be awesome if there is a mobile version of the Desktop app. I sometimes work on my blog posts on my tablet, so having this would make it easier for me to finish them, especially if I’m away from my laptop.
Now it’s your turn
There you have it folks, my product review of Pieces! Whether you are a technical writer or a developer, it is a great tool that improves your workflow. Also, the people at the company receptive to feedback and works fast to address your concerns. Overall, I recommend adding Pieces to your tech stack. Now enough of me talking, click on the links below to download the tool, join the community, connect with me, and start working! 🙂
This is a fairytale about a forever young boy would takes a group of British children to his home island, Neverland ↩
Pokémon is a popular anime from the 90’s. It's where children catch animals with powers and train them for fights. ↩
Pokédex is a tool that the characters in Pokémon use to track information about the creatures they catch, such as their names, powers, weaknesses, etc. ↩
Make sure that you enable the Workstream Pattern Engine enabled to gather the context first. To learn more about this, check out this section of the Live Context tutorial↩