Table of Contents
- Time to be honest
- Is Pieces candy?
- Pieces: the code catcher
- Pieces: the codeās pokĆ©dex
- Pieces: the time traveler
- Things to improve and add in the future
- Now itās your turn
- Credits
- Footnotes
Time to be honest
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! š
Pieces: the codeās pokĆ©dex3
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.
404-page
Description
This is my submission for Codedexās February monthly challenge.
The Challenge
The goal is to redesign their website's 404 page.
Inspiration
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.
The Result
Credits
- Sad face by OpenClipart-Vectors from Pixabay
- Cursor pointer by Clker-Free-Vector-Images from Pixabay
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:
Click on the New Chat button.
Turn on the Live Context toggle.5
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:
This, I got advice on how to structure the canonical link and where to place them. All in all, the new Live Context feature is awesome. Need more tips? check out the @get_pieces teamās blog post, 20 Novel AI Prompts Made Possible Only by Pieces Copilot+.
Things to improve and add in the future
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! š
Install Pieces š¤
š¤ Join Pieces' Community
Check out my Linktree š
Credits
Pokedex GIF by 1jps
Pokemon GIF by ruined childhood
Footnotes
-
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. Ā ā©
-
The Linux version of this feature will be released soon. With that in mind, this brief tutorial is macOs-focused. If you need more help, check out the Live Context section of Piecesā documentation.Ā ā©
-
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Ā ā©
Top comments (16)
Awesome article Chrissy! I haven't explored much the live context feature. Your article gave me a good idea on how to use it.
I didn't understand some of the Pokemon references, though š
Virtual hugs
Thanks @valeriahhdez. Pokemon was a huge anime show back in the late 90ās. It's about kids who befriend and train wild animals.
Great Article š
Thanks @karim_abdallah! š I hope you find Pieces as enjoyable as I do.
awesome article Chrissy! Iām planning to use Pieces soon and will use your article as my go to tutorial. š«”š«”
Amazing!
Amazing content!
great article
Yayy! The article is out! This is an amazing read, buddy š„
to be honest, i didnt find much use of Pieces for myself, it does allow us to select project folders but wont allow us to ask questions on top of those projects (or maybe i didnt find that option).
Hey @hrushikesh_joshi_f694250b. What I find helpful to mention the file in the questions you type in the Co-pilot chat after clicking on the Folders option . Try that
Love the article!
Nice <3
Some comments may only be visible to logged-in visitors. Sign in to view all comments.