Forem: anushka-23g

5 Tools to Boost Your Productivity While Development

anushka-23g — Tue, 31 May 2022 07:40:02 +0000

But probably haven’t heard of it before.

As a developer, I take pride in creating the most efficient and effective workflow. I love searching for new tools, applications, and websites that will save me time later. I especially love dev websites, because they don’t take up space on my machine and I don’t have to worry about installing or updating them.

The five online tools I’m sharing in this article are lesser-known, free, and extremely useful for front-end developers. I love them because they’re simple to use and make me more effective!

CodeFromScreenshot

For better or for worse, screenshots of code are quite common in the developer space. They might come from Twitter threads, YouTube tutorials, or even university lectures.

Codefromscreenshot.com is an easy-to-use tool that extracts raw text from a code screenshot. I usually come across a lot of Javascript screenshots in various tutorials and have this site opened in parallel to convert all of them to text instantly.

Because it instantly extracts code from screenshots, it helps save valuable time and energy that would otherwise be wasted on retyping code from these screenshots. Uploading a screenshot here delivers copyable code that can be used in my IDE right away. It saves me a lot of time and allows me to focus on more important things like development and bug fixing.

WakaTime

In the age of remote work, keeping track of your time as a developer is essential. Being able to analyze how and where I use my time allows me to make adjustments and increase my productivity. This tool shows me how much time I spend on various things in my workday.

WakaTime is a website and extension that provides useful metrics about your time spent developing an easy-to-understand dashboard. They support the most popular code editors and languages and even have leaderboards if you’re the competitive type.

Ray.so

Ray.so is an online tool that you can use to create beautiful code screenshots with a gradient background from your source code. I can use it to beautify screenshots with my team, but it would also be useful for screenshots that you share on social media.

Simply copy and paste your code into the tool to get the final screenshot. You may have come across code screenshots from Ray.so on Reddit or Twitter.

Code Sandbox

CodeSandbox is an online editor for web development. It helps you prototype, experiment, and share your creations with other people quite easily. It makes web development much faster and removes hassles when setting up a development environment, tooling, and sharing your projects, making developers like me more productive.

It provides templates with starter code for Vanilla Javascript, React, Typescript, Angular, Node a lot more frameworks. Using this tool, developers can work from anywhere and collaborate in a more effective way.

Devdocs.io

DevDocs is an open-source web app that combines documentation for lots of developer tools into a single searchable interface. The clean and easy-to-use UI is what makes me a big fan of this. I always refer to this to look up any React and Javascript functions I need instantly.

I can find nearly any doc I’m looking for in this one place. It’s made reading and searching reference documentation fast and easy for a lot of developers, myself included!

What other sites have you found helpful? Comment them below and give this article a share or like if you learned about any new or useful sites!

A Better Way to Bookmark as a Developer

anushka-23g — Thu, 24 Mar 2022 11:14:35 +0000

TLDR

💡 Saving code solutions by using bookmarks in your browser is pretty painful when you want to find and revisit that solution later. An easy hack is to save snippets through the Pieces tool, which automatically attaches the source URL from where you grabbed the snippet. You can not only find the snippet easily later, but you can hop out to the page it came from to remind yourself about the broader context.

I’m sure most of you search Google to find solutions for errors, from how to sort a list to a breadth-first binary tree traversal to how to establish a database connection.

And chances are you’re bookmarking a solution from some StackOverflow page, thinking it’s saved for the future.

But revisiting that solution in your bookmarks folder is suboptimal for a bunch of reasons:

Unstructured bookmark lists are hard to search, and you’ve no idea where to start looking for the solution.
If you’re OCD, maybe you spend a bunch of time organizing your bookmarks, but most of us don’t have time for that
A bookmark provides minimal information unless you click through each link
Bookmarks save no context for your problem, which is often how you might want to search

Fear not - let’s look at a simple hack using the free Pieces tool that is much more effective at managing your saved links and solutions.

A much more effective way to save URLs and solutions

You might know Pieces as a snippet tool where you can save code and easily find it and reuse or reference it later. But one of the more interesting ways I use Pieces is through their Chrome plugin - which enables me to save code from any webpage in as little as a click.

The latest version of Pieces, though, added a killer new feature called Related Links that makes it far more useful as a home for your URLs. When you save a snippet from a web page using their plugin, Pieces automatically saves the URL of the page the snippet came from.

So when you need that snippet, you can search in Pieces using exact or fuzzy match based on the snippet or the language, but you’ll also find a link to the URL that you originally got the snippet from, and THAT is incredibly helpful to refresh on the context around the snippet.

Saving a snippet from StackOverflow in Pieces with tags, description and Source URL

Let’s look at some examples in the wild.

Finding Shell Commands

If you’ve ever tried bookmarking your shell commands, you know it’s much easier to just search for them again than finding them in your bookmarks list.

Here’s how you can find your shell commands quickly with Pieces.

*Finding Shell Commands without Pieces: *

Opening your bookmarks
Trying to remember what the page was
Scrolling through an endless list to search
Finally finding the link and navigating to it

Finding Shell Commands with Pieces:

Searching for the saved snippet
Navigating to its related links

Saving Git Commands

Git commands are super handy. Maybe you’ve tried bookmarking commands to merge your local branch, fetch, rebase, resolve conflicts for your ease, but forgot your way back.

If you’d saved those commands in Pieces, you can get right back to your page in no time using the Related Links feature.

Frontend Development

While working with CSS, you might get confused about when to use an inline, block or inline-block display for controlling the layout of an element. Scrolling through a never-ending list of bookmarks to find their correct usage on W3Schools is a nightmare, isn’t it? Rather, you can simply save it to Pieces and jump to the relevant pages to understand their use cases, directly from your snippets, find the right one and use them in no time.

Upgrade Your Bookmarking Game with Pieces - It’s Totally Free

You can install Pieces for free to save all your important information organized, easily accessible, and get a ton of other amazing benefits to supercharge your developer workflow.

Best Clipboard Apps for Developers

anushka-23g — Thu, 24 Mar 2022 11:10:06 +0000

Written by: Antonello Zanini

There are many clipboard managers available, but only a few of them have been designed specifically for software and web developers. If you are a developer who wants to improve your productivity, you must adopt an advanced clipboard manager.

Both Windows and macOS come with a basic, limited clipboard, which means that you can copy something and then paste it. End users’ needs have evolved in recent years, leading to the creation of more advanced clipboard managers. Not all of these options have been designed with software development in mind, though.

If you have ever felt slowed down by your operating system’s basic clipboard, it is time to try a more powerful app. This article will present the five best clipboard apps for developers, as well as what criteria were used to select them.

Why You Should Adopt a Clipboard App

As a developer, increasing your productivity should be one of your top priorities. Clipboard managers offer three ways for you to do that:

Store more than one thing: With clipboard apps, you can keep a history of all the items you’ve copied.
Search through your copied items: Clipboard managers allow you to easily retrieve the item you want to paste.
Reuse code snippets: You can copy all the code snippets you need at once and then paste them only if you need to.

Elements of a Good Clipboard App

There are specific features to consider when evaluating a clipboard app for developers. The following elements were used to select and rate the top five clipboard managers:

Integration with IDEs and text editors: Developers spend most of their time writing code. For a clipboard app to enhance your productivity, it needs to be directly integrated into your favorite IDE.
Cloud support: The clipboard app should allow you to save your copied items to the cloud so you can access them anywhere, regardless of the device you are using. For security reasons, the app should be able to encrypt the info during upload.
Custom keyboard shortcuts: Developers heavily use hotkeys and keyboard shortcuts, and they want the ability to define the shortcuts as needed.
Multi-format support: Copying is not always about text. The clipboard manager should also allow you to store multimedia items, such as images, videos, or tables.
Item organization: When many items are stored in one place, the storage location can easily become a mess. The manager app should allow you to organize your copied items or give you the option to quickly find the one you need.

Top Five Clipboard Managers
The following clipboard manager apps meet the required criteria, so they’ll help you improve your productivity as you write software.

1. Pieces

Pieces, which offers free or paid options, is a clipboard app designed specifically for developers and supports both macOS and Windows. It also supports the most popular IDEs and text editors with custom plug-ins. Check the updated list of its official integrations for details.
Pieces allows you to save, reuse, and share many data type format items, including code snippets, links, text, screenshots, and images. Each clipping will be automatically stored in the cloud so that you can access it from multiple devices.
When you need to look for a clipping, you can use its lightning-fast search feature to instantly retrieve any item you previously copied. This is especially effective because Pieces automatically captures any possible metadata related to a snippet so that you can more easily find it later.
Pieces is based on a lightweight UI to keep you focused while you are working, and it supports several intuitive keyboard shortcuts. It also allows you to configure your own hot keys.

2. Flycut

Flycut is a clean and simple free open source clipboard app for macOS and iOS that is based on Jumpcut, a minimal clipboard manager for macOS. Flycut was designed with developers in mind, and its main focus is on code snippets. For this reason, it comes with many hot keys and keyboard shortcuts, which can be customized according to your needs in the preferences panel.
On the other hand, Flycut allows you to store only text snippets. This means that images, videos, and tables are currently not supported. It also neither supports Windows nor offers specific integrations for the most common IDEs and text editors.
Although Flycut does not come with cloud features natively, you can configure it to sync with your Dropbox account. This way, you can store your clipboard history in an external cloud service and then access it from wherever you want.
When Flycut is launched, its icon appears in your menu bar. Every time you copy a text snippet, Flycut stores it in history for you. Using Shift + Command + V, you can access the history and navigate with the right or left arrows to select the item to paste. More advanced search features, as well as ways to organize your clippings, are currently unavailable.

3. Ditto

Ditto is a free extension to the standard Windows clipboard and does not support macOS. Ditto saves every item you copy, encrypts it, and sends it to the cloud for you, then allows you to access each item on multiple devices. It supports any kind of information, such as text, images, and HTML, as well as custom data formats.
Ditto can be accessed from the tray icon, but it also supports hot keys and custom keyboard shortcuts. Notably, it has an incredible amount of options available and is highly configurable and customizable. With Ditto, you can also create groups and organize your copied items as you like. You can also search through the items to easily find the one you need.
Ditto is a general-purpose application that was not built explicitly for developers, so it should not surprise you that there are no official plug-ins for the main IDEs on the market.

4. Pastebot

Pastebot is a license-based clipboard manager for macOS and iOS only. It automatically stores everything you copy on iCloud and allows you to access it on any Apple device whenever you want. It supports any kind of content, from text to images and videos.
Pastebot comes with several keyboard shortcut options to let you paste and access specific items effortlessly. It also allows you to easily organize your items and offers advanced search features to retrieve them quickly.
Pastebot currently costs $12.99. Since it is a general-purpose clipboard application, you should not expect to find official plug-ins for your favorite IDE or text editor.

5. Paste

Paste is a subscription-based clipboard manager that allows you to store everything you copy on your Mac, iPhone, or iPad. It does not currently support Windows, but it natively works with iCloud and allows you to access your copied items on any Apple device.
It has been adopted by many developers to increase their productivity, but it was not designed expressly for them. Consequently, no IDE or text editor comes with official plug-ins to support it. On the other hand, it supports multimedia files and tables. Plus, it lets you choose which apps to monitor when copying and which to ignore.
Paste also allows you to organize your clippings and modify, pin, scroll through, and search over them to find what you need. You can access this panel with Shift + Command + V, but you can define custom shortcuts as well.

Conclusion

Clipboard managers are an essential tool for productivity because they make a developer’s job easier and more efficient. Only a few clipboard apps, though, are designed and built specifically for developers. Before you choose a clipboard app, make sure it has the features you need and will work with your operating system.
The clipboard manager applications listed above offer a good array of choices for you. One of these five should be exactly what you need to help you jump-start your productivity.

Using Pieces + Flutter to build Pieces

anushka-23g — Wed, 16 Mar 2022 16:48:43 +0000

Written By: Mack Myers

Pieces is tremendously helpful for the team building Pieces, especially when using Flutter and Dart. From saving common Widget declarations to extracting code from instructional videos, we reveal how the team building Pieces, uses Pieces.

What is Pieces?

Pieces is the fastest, smartest AI Assistant for snippets, enabling developers to automatically or manually save useful code snippets, extract code from screenshots, auto-complete code, and more.
To learn more about Pieces and how it improves developer productivity, click here.

Understanding our Stack

In order to understand how we use Pieces to build Pieces, it’s helpful to review our tech stack. Pieces is primarily built using Flutter and Dart. A while back, we chose Flutter and Dart for a few key reasons:

One codebase, multiple platforms
Strong-typed
Can utilize platform-specific APIs if needed
High-performance rendering and animations out-of-the-box
Default code style and conventions
Works for desktop apps, web apps, and mobile apps

In contrast to common front-end tools like HTML, CSS, and JS, Flutter is all-encompassing. Meaning, you declare your UI, styles, and business logic all within the same file and tree using a class-based syntax and structure.

Further, instead of a DOM tree, Flutter utilizes a widget tree. Widget trees are where you find all UI elements (referred to as widgets in Flutter). Like a DOM tree, widget trees get complex extremely fast, and developers find themselves reusing a lot of the same widgets and callback functions across many areas of an application.

Pieces + Flutter = ❤️

While building the Pieces app with Flutter and Dart, our team found many valuable use cases for saving snippets in the Pieces app to improve our productivity. Let’s review some of them.

Saving & Reusing Widgets

If you’ve ever written with Flutter, you’ve probably seen a snippet just like this a thousand times. This is a preset container with a templated child widget for easy plug and play.

One might think, “Can’t you just abstract this away into a new widget?” Yes, of course, you can, but that abstracted widget will still include its own set of custom properties in order to use it. Both a custom widget and a Flutter widget can have many different properties, which can be hard to remember.

When building the Pieces app, we saved snippets like this into Pieces ALL. THE. TIME. Once you save, quickly give it a name and continue on.

When I need to reuse this Container Widget again, which is in almost every Widget, Pieces makes it simple to find with a fast, non-obtrusive search. All I need to do is enter a keyword (i.e: Container), or some of the metadata — where it’s from, the title, description, or tags.

Now, we no longer worry about messing up another widget tree in order to copy and paste it.

Saving Flutter & Dart Examples

When combing through Flutter & Dart doc sites or watching demo videos, there are hundreds of code examples that come in handy when implementing new features or figuring out which widget to use for certain purposes.

Where Pieces really comes in handy is being able to (1) save these code examples with a single click while also capturing the context of where it came from and (2) extract code from a screenshot from, say, a YouTube demo video.

Using the Pieces Chrome Extension

Using the example screenshot above, when creating a grid list with Flutter, I use the Pieces Chrome Extension to single-click save the code snippet while automatically tagging the website it came from.

Now, when I need to use a grid widget in Pieces, I can find this example and the link to the documentation in a matter of seconds.

Using Pieces OCR (Optical Character Recognition)

The other great way we use Pieces when saving Flutter, Dart, and other code examples, is using the OCR feature to extract text/code from screenshots.
One of the best ways to learn how to use specific Widgets is to watch Flutters Widget of the Week videos on YouTube. These are short, extremely focused examples of implementing a Widget.
Since these videos move quickly, we often take screenshots of the final implementation so we can (1) reference the code later on and (2) actually use the code from the example.
We do this by simply dragging the screenshot into Pieces and voila, the code is extracted and ready to use.
To see OCR in action, click here.

Import Statements

Nothing is more annoying than having to manually write an import statement. Flutter does have nice tools to alleviate this pain, but even they can be very annoying if you’re moving quickly.

As shown in the screenshot above, most of our files require some of the same common imports. The annoying thing, even when using Flutter and Dart tooling, is that you still have to make extra keystrokes to import all of the classes you’re using in the file.

Pieces has become a lifesaver when dealing with imports. When starting a new file, we can instantly grab the common imports that we know we’ll need and paste them into our new file. This way, we don’t have to spend time command-clicking, guessing file paths, or finding the import in another file.

Restructuring Widget Trees

I’ll admit, sometimes it gets a little scary when you’re about to restructure a loaded widget tree. Oftentimes, 99% of the tree is functioning nicely, but there’s that 1% that needs an upgrade or bug fix.

When this happens, I (1) don’t want to cause any regressions, (2) need to refer to my old tree to make sure I have feature-parity, and (3) don’t want to flip back and forth trying to decode my Git changes. So, to make life easier, I save my old tree in Pieces!

This gives me great peace of mind knowing that I can always refer back to the old tree if needed, and now can confidently start my updates on a blank canvas.

Merge Conflicts

Have you ever spent a few days working on something with a lot of nitty-gritty details and you’re a little nervous something might get messed up when it’s time to merge? Well, when working with Flutter, you know sometimes merge conflicts with widget trees can be impossible to read, especially when you start trying to line up closing parenthesis, brackets, and semicolons.

Another way we use Pieces is to help manage merge conflicts. Even if it is a temporary save, Pieces is great for storing a chunk of code as a backup in case you mess up your merge.

After all, the last thing any developer wants is broken code on the main branch. Thankfully, Pieces helps address that concern.

Get Started for Free

As cheesy as it may sound, Pieces is a product built for developers, by developers. Every day, we’re using Pieces to solve big and small problems for ourselves and thinking about how other developers might benefit.

If you experience some of the challenges mentioned above or anything similar, get started with Pieces today FOR FREE.

No account or personal information is required, and it runs 100% on your local machine!

Click here to learn more or here to install it on macOS or Windows.

Further reading…

If you haven’t already, be sure to check out how you can use Pieces to extract text/code from screenshots.
Learn about some of our recent features and updates via our updates page.
Share with us how we can continue to improve Pieces!

Cheers!

Mack

9 Pro Tips for Developer Productivity

anushka-23g — Tue, 15 Mar 2022 16:48:49 +0000

Written by: Piero Borrelli

Being productive is an essential skill for your success as a developer.

I’m not talking about working late nights or never taking breaks. It’s more about learning to set your priorities and goals and protecting your precious time.

All of this is especially important if you’re new to the software development industry. You have a window of opportunity to lay a strong foundation for making every day at your job a successful one.

If you learn to use the right tools and set the proper habits, increased productivity will lead to more happiness and work-life balance, more fun at work, increased respect from peers, and many opportunities for advancement in your field.

To help you set the right foundation, here are nine of the best tips for developer productivity.

Automate Everything You Can

Why spend one hour a day performing the same repetitive task when you could spend that time automating your chores forever?

In my daily job, for example, I realized that I spent a lot of time looking for tickets assigned to me on GitHub, so I used a little script that automatically sorts them and shows them to me in my note-taking tool.

Little actions like these can save you hours in the long run. Automating repetitive duties, from pushing to GitHub or migrating the DB, allow you to focus on the bigger challenges you need to tackle.

So from today, try to look at your daily workflow and ask yourself: which repetitive tasks could be automated and how?

Use the Command Line

The command line is the secret weapon of every highly productive developer. You’re probably already using it every day to start the local servers of your app, but if you can take the time to explore and master this tool, it will do wonders for you.

Navigating through the UI, working with Git — all these operations take a lot less time when you grasp a few good command-line instructions.

💡 Pro tip: if you want to increase your productivity with the CLI further, take a look at the complex commands that you run often, and write aliases for them.

Take Regular Breaks

As a human being, you have a maximum attention span you can use during the day. So don’t expect to be highly focused for eight hours straight. Instead, shorter bursts of work are much better for your productivity.

Try to work on a time frame of forty-five minutes to one hour. You will notice many benefits, including:

Increased focus: by reducing the number of connected hours you have to focus, your brain will be less overstressed and able to concentrate.
Easier to resist temptations: if you know you will have many breaks during the day, you will be more inclined to focus on your current task and not let your mind wander.

Remove All Distractions

According to a study conducted by the University of California Irvine, if you get distracted, it will take you an average of twenty-three minutes to regain control of the task you were busy with. Imagine how much time you could have saved by eliminating all the distractions around you.

Coding is a very self-centered job in terms of your attention; you must be highly focused if you want to accomplish something.

When it’s time to work, make bad habits harder to pursue. Turn off your phone completely, or leave it where it’s hard to reach. If you’re working from home, ask your family not to distract you.

Don’t listen to music if it can be a source of distraction, or use relaxing sounds like lo-fi to help you focus.

“Bad habits repeat themselves again and again not because you don’t want to change, but because you have the wrong system for change.”- James Clear

Don’t Multitask

During your work day, you might be tempted to switch between multiple tasks. While you’re reviewing code, you may switch back to bug fixing your latest feature.

When you do this, you’re actually forcing your brain to reset every time you switch between contexts, the same as with distractions. Whenever you task switch, it takes a long time to get a hang on what’s happening.

Plus, context-switching is highly time-consuming due to coding itself. If you want to work on two different features, you have to switch branches, restart the server, and download each branch’s dependencies.

Don’t try to rush. Focusing on one task at a time is always better than trying to achieve ten different things at the same time.

Communicate with Your Peers

Being stuck on a problem is frustrating, and you might be tempted to not share your issue with your colleagues out of fear of being judged as a bad developer.

Remember, your colleagues have the same goal as you — to deliver a working solution that clients will want to use. So never hesitate to ask for their help or opinion.

I usually follow this rule of thumb: if I’ve been stuck on the same problem for more than two hours, and if I’ve tested all possible solutions I could think of, I will contact one of my colleagues.

Plan What You’re Going to Do for the Day

Your time is always going to be limited, which is why you should focus on prioritizing certain tasks over others.

Every morning, or even the night before, write down exactly what you must accomplish on a specific workday. Don’t aim to compile a list with thirty items. Focus on just three to five items, or you will risk burning out or not feeling accomplished.

Also, be specific about what you want to do. Don’t say, “Tomorrow I will review code by my peers.” Rather, say “Tomorrow, from 4 pm to 6 pm, I will review two pull requests from my peers.”

Never Strive for Perfection

At the beginning of your career, you might be tempted to try and always write the most perfect solution for the problems you’re facing. You will obsess about a few lines of code, trying to make them perfect and look exactly how you imagined them.

This behavior will take you in exactly the opposite direction you’re expecting. It will slow you down tremendously, even for the easiest tasks.

“Find a judo solution, one that delivers maximum efficiency with minimum effort. When good enough gets the job done, go for it.”- Jason Fried

Don’t strive for perfection when writing software. Remember: there’s never a perfect solution, but there is a good solution for your particular case. You will always have to find a compromise between readability, maintenance, and performance.

Strive to deliver code that works, is readable, and can be scaled in the future. And remember, as the author of C++, Bjarne Stroustrup, always like to remind in his book for beginner developers :

“Perfect is the enemy of the good.” –Voltaire

Start with Complex Tasks First

As Brian Tracy, the famous author of the book Eat That Frog, says, you should always start your workday with the most important tasks for yourself.

How do you find the most important task for you? Identify the thing you can do that makes the biggest impact on your work.

Is it creating new features? Bug fixing? Reviewing code?

Identify what it is, and then start your day with that task.

You might have noticed that your energy levels decrease during the day. If you focus on the most important task first, you can handle less demanding tasks at the end of the day when you’re exhausted.

This habit not only increases your morale during the day, it also helps your career progress faster.

Conclusion

Being productive is one of the skills you must learn for a successful and fulfilling career. You don’t want to spend your days in frustration, feeling like you accomplished nothing.

These nine tips will help you to set the foundation to achieve more satisfaction, garner higher pay, receive more peer recognition, and create more opportunities.

And if you’re looking for a great tool to improve your productivity, you can try Pieces.

Pieces is the fastest way to save your code snippets. With just one click, you can save all your most important lines of code without ever breaking your workflow.

Pieces works with a variety of your favorite tools, from IntelliJ to Visual Studio Code, and you can integrate it immediately for an enhanced, effective workflow.

After all, as Addy Osmani said:

“Craftsmanship is choosing your tools well.”

10 Developer Productivity Tools for Working Smarter, not Harder

anushka-23g — Tue, 08 Mar 2022 15:41:37 +0000

Written by: Piero Borrelli

Your strengths as a software developer can be found not only in the code you write but also in the tools you choose to surround yourself with. From collaboration tools to management platforms, picking the right tools for the job is a skill that takes many years to develop — but it can be a determining factor in your productivity and efficiency as a developer.

Unfortunately, there are so many productivity tools out there that it can be hard to know where to start. Productivity tools can help you boost your performance, increase your happiness and satisfaction, and make the most of your work hours. The wrong tools, though, can slow you down and add unnecessary complexity to your daily routine.

In this article, you’ll learn about some of the most helpful productivity tools in several categories: time management, clipboard management, auto-completion, and collaboration. While it’s likely that not all these tools will be a perfect fit for your situation, there’s almost sure to be one or two that will take your productivity to new heights.

Clipboard Management

A clipboard manager is a tool that makes all your copy-pasting more efficient. Think about how often you copy-paste your code to share a function from a language’s documentation with peers. Without a clipboard manager, you are limited to copying or pasting one thing at a time and can potentially lose important snippets of code.

With a clipboard manager, you can copy every snippet you want safely, and it will be automatically stored by your clipboard management tool in an efficient, easy-to-use dashboard.

Pieces

Every day, while working on a task, you will encounter a snippet of code that should be stored for later use. Maybe you need to share it with your colleagues for review purposes, you’d like to take a closer look at its implementation, you want to use it to create documentation, or you want to use it in a future project.

Instead of limiting yourself to your computer’s clipboard to paste each snippet into a new document, consider Pieces. With Pieces, you just download an extension for your favorite IDE, and you’ll be able to save all your most important snippets in just one click. It allows you to save snippets from within the IDE or your Chrome browser without breaking your flow, and it also captures important context about the snippet, making it easier to reference later.

Pieces also creates a comprehensive index of what you save and enables you to search, not just for exact strings but by language and code structure.

Time Management

Time management is a struggle for many people, and the busier you get, the harder it becomes. Poor time management can lead to last-minute crunches, rushed work, and missed deadlines, not to mention the stress of constantly scrabbling to get things done. Thankfully, there are a lot of time management tools out there, and one of them is sure to be a good fit for you.

Clockify

Time is your most precious resource when it comes to productivity and a tool like Clockify can be your best friend in understanding how you’re spending your time. Clockify is a time-tracking app that allows you to start a timer when you begin a new activity and then switch between different timers as your activity changes.

At the end of the day, you’ll be able to review a color-coded chart showing you exactly where you spent your time. This offers great insights on the following:

What time and activity you are most productive in.
Where you’re losing time to unnecessary tasks.
What your typical day looks like in terms of activities performed.
How much of your time you’re spending on the core functions of your work.

After spending some time with Clockify, you may be surprised by how much time you spend on activities you thought of as trivial or discover that something that feels like a huge part of your day is actually a much briefer task than you’d assumed.

Focusmate
There’s something special about telling other people about your goals. The subtle pressure of someone’s attention can be very motivating, improving your performance and helping you stay on task.

This is the principle behind Focusmate.

With Focusmate, you can book a time slot of twenty-five or fifty minutes of focused work. After signing up for your session, you’ll be paired with another person. There’s a brief introductory chat where you tell each other what you’re hoping to accomplish in this session and then you start work, cameras on. You and your partner work together in silence, keeping each other focused during your shared session.

When the session ends, there’s a brief post-mortem in which you’re encouraged to share how the session went and to cheer each other’s successes. This solution is especially great for people working from home, as the human connection and the knowledge that someone’s working with you can help keep you focused and productive.

LeechBlock
One of the most important productivity principles is to avoid distraction. As developers, it can be hard not to let your focus wander during the day — after all, you literally have the whole web one click away.

A great solution to this problem is to use a service like LeechBlock, which allows you to temporarily block or limit your access to up to thirty sites. If you find yourself falling down the YouTube or Wikipedia rabbit hole during work hours, you can block your access to those sites, making it much easier to stay on task.

LeechBlock is a browser extension and works with both Firefox and Chrome, as well as Chromium-based browsers, such as Opera and Microsoft Edge. One of the great features of LeechBlock is that while you can simply block a website from nine to five, it also allows you to set more complex time rules for limiting access. For example, you could block a site after you’ve used it for fifteen minutes or allow access for ten minutes every hour of the workday.

WakaTime
WakaTime is similar to Clockify in terms of time tracking but much more detailed. It offers access to metrics on how much time you’ve spent working on a specific file, branch, or language. At the end of every week, you’ll get an email summing up key stats.
WakaTime also works as a task manager, using it to set personal coding goals, or as a collaboration platform, allowing you to use the same dashboard as your colleagues to share data about the time you’ve spent coding.

Auto-Completion
Your ability to type code quickly and accurately is crucial for a productive workflow. To help you with this issue, many modern coding tools come with an auto-completion feature, meaning your editor will show you predictions about how to complete what you’re typing.

Apart from increasing your coding speed and making your typing less error-prone, modern auto-completion tools are evolving thanks to AI, turning them into coding assistants with better predictive skills that can suggest entire blocks of code.

Tabnine

Tabnine is your personal AI code assistant, here to boost your productivity with every line of code you write. Tabnine will suggest tailor-made code completions in whatever language you choose for your project and for whatever IDE you prefer.

You can use Tabnine alone, but its real power is unleashed when you activate its team-learning functionality. The more members of your team who use Tabnine, the more Tabnine will learn about your preferences and patterns for the project’s code. It is always improving to provide you with the best suggestions.

Coding

Coding is the bread and butter of a developer’s work, but the days of doing it all manually are long gone. Using an IDE with features to enhance your work won’t just make you more productive — it will also make you a better developer.

Visual Studio Code

In recent years, Visual Studio Code has established itself as one of the most popular IDEs for developers. In addition to a great interface and code tools, Visual Studio Code is an incredible tool for productivity thanks to its endless customization options.

Inside the IDE, you can set up its extensions to facilitate your daily tasks. For example, I set up the GitHub extension so I never have to visit GitHub in my browser when fixing pull requests.

The beauty of Visual Studio Code is the endless opportunities for extensions and customizations, from code highlighters to completion tools and live servers.

If you’re interested in checking out some cool Visual Studio Code customizations to enhance your productivity, have a look at the following:

GitHub for Visual Studio Code manages your pull requests and issues directly from your editor.
Bracket Pair Colorizer makes managing of your code blocks easier by color-coding bracket pairs.
Turbo Console Log allows for easier debugging using console.log.
Live Server lets you launch a live server running your code directly from Visual Studio Code.

Collaboration

Part of your productivity as a professional is always influenced by how you interact with your peers. Are your meetings with them useful? Do you turn every interaction into something enriching?

To make the most out of collaboration, it’s important that you choose the best tools for you and your team, ranging from task management tools to pair programming platforms.

Trello

Behind an efficient team, there must be an efficient tool, and Trello is one of the best project management options out there.

With Trello, you can create a kanban board for you and your team to track your tasks. Each task is created on a card. Click the card to open it, and you’ll find important information, like the task description, deadline, people working on the task, comments left by your teammates, and relevant files attached directly to the card.

In addition, Trello offers a great deal of customization, allowing you to configure it to suit your team’s needs. It integrates with all the apps your team already uses, like Slack, Jira, Microsoft Teams, and Google Drive . Trello also offers a no-code approach to automating tasks, like creating cards or scheduling team assignments.

Codeanywhere

Codeanywhere is a powerful collaboration tool, allowing you to manage different situations for your project, from using pair programming with team members to setting up containers and deploying a development environment for your business.

In particular, with Codeanywhere, you can do the following:
Launch an IDE directly on your favorite browser, supporting every feature you would expect from a great code-writing tool, including syntax highlighting, linting, debugging tools, and support for all the languages Visual Studio Code supports.
Connect directly to your project servers. With Codeanywhere, you can connect to your servers from any device using all standard protocols (SSH/SFTP, FTP, or FTPS) and start editing your files immediately.

Set up your containers. Codeanywhere allows you to develop and run your project directly on their containers, making hosting your app an effortless operation.

Habitica

Habitica gamifies your team’s goals, making productivity an enjoyable group challenge. Just like in an RPG, you start by creating a character, but unlike an RPG, the monsters you fight and quests that you’re sent on are correlated with the tasks and daily goals that you set. Every day, you log your progress, unlocking awards and in-game add-ons if you complete your tasks — or losing them if you fail to stick to your plans.

The real strength of Habitica comes when you adopt it with other people. You and your colleagues or friends can form a group, challenge each other by completing team goals and work together to level up your characters, challenge bosses, and win awards.

It’s a great tool for your personal motivation or to inject a little fun into your workday.

Conclusion
Your ability as a coder shows not just in the code you write but in the tools you choose. As a professional, maximum productivity should be your goal, and you’ll need the right tools to achieve it. The tools in this guide are a great place to start — give them a try and watch your efficiency skyrocket!

Extract code snippets from screenshots with Pieces

anushka-23g — Thu, 13 Jan 2022 16:46:52 +0000

Rewriting code from screenshots you find online? A thing of the past.

tl;dr
Developers take a ton of screenshots of code which often live on their desktop or in some Finder tray. These screenshots are usually impossible to search and the code in the image isn’t accessible. But with the Pieces snippet saving tool, images can now be converted into text so that the code inside the screenshots can be copied, pasted, and edited in your IDE.

Drowning in screenshots?

Raise your hand if you’ve experienced these screenshot frustrations:

You face an issue while coding. A quick Google search gets you to a useful tutorial with it, so you take a screenshot and later retype the code into your editor manually.
You’re on Reddit and find a screenshot of useful code but you need to screenshot it or bookmark the page and now it’s effectively gone from your memory.
You see someone asking for help on a StackOverflow or FreeCodeCamp and want to try running their code, which turns out to be a screenshot.
You’re trying to follow a beginner’s guide to a new tech you’ve been wanting to learn, but you can’t easily copy the example code from the screenshots.
You struggle with searching text in screenshots
The common thread above is that screenshots with code aren’t searchable on your desktop and you can’t extract the code from inside the image.

Pieces extracts code from your screenshots

Pieces is a snippet-saving tool that performs magic on screenshots. You upload your screenshot to Pieces and turns it into an editable and copyable snippet.

And better yet - your screenshots become fully searchable based on the text inside them. Because let’s face it - you like have hundreds or thousands of screenshots sitting on your desktop and you have little to no way to search through them. So now you can search your screenshots based on:
Any keyword inside the screenshot
The code classification of the snippet inside the screenshot - i.e. all your Javascript screenshots
Structures inside your code - i.e. for loops or switch statements

Your Life Reimagined with Code Extraction from Screenshots Code in screenshots from Slack, Discord, Reddit, Twitter...

There’s code in screenshots everywhere you look online. But instead of having to manually re-write the in the screenshot, just upload the screenshot to Pieces and you’ll have a copyable code snippet extracted from the image!

Screenshots from Coding Bootcamps and Youtube Tutorials

If you’ve ever watched a coding tutorial or an online Coding Bootcamp, you know it can suck when the presenter moves through the code too fast. Hit pause on that video, take a screenshot, and save it to Pieces. Voila - the code inside the screenshot will be converted to text instantly!

Dealing with PDFs and hardcopies in university assignments

Scanned documents such as your university assignments need to be edited in order to finish and submit them. Sometimes you have their hardcopies or pdfs and editing them on your machine becomes a hassle. Use Pieces to convert your screenshots into formatted, copyable, editable text.
Utilizing information from a lecture
Ever run out of time during the class and snap a picture of the code rather than writing it down? No need to manually convert it later - just send that screenshot to Pieces and it’s converted.

Change your screenshot game today with Pieces

You can install Pieces for free and start turning your images and screenshots into meaningful text like magic. And Pieces does a ton of other amazing things for developers, including:

Auto-formatting your snippets
Auto-categorizing snippets by language
Auto-tagging the snippet with the things inside it like for loops or switch statements.
Auto-capturing the project and file name and line numbers that the snippet came from in your editor
Storing the URL that the snippet came from if you saved from a web page like StackOverflow
Enabling you to manually save related links to a snippet

All of this serves one critical purpose, making your life easy as a developer.
What are you waiting for? Get Pieces now and begin extracting code from screenshots! Try it out with these sample images!

Snippetizing your Coding Interviews

anushka-23g — Tue, 21 Dec 2021 14:19:54 +0000

💡 Working for FAANG companies is every developer's dream. If you are wondering about how to get a job at FAANG or how to boost your preparation, this article consists of some really useful tips that have helped developers crack their interviews at FAANG. Preparation for DSA and approaching your interviews using these tips could land you in your dream role. Practicing DSA is a crucial task in the process, but can be made much more efficient using code snippets. Pieces is a useful snippet-saving tool to help developers to save time and effort by saving their templates, important algorithms, and solutions as snippets in <1 second, making search quite easy. Hence, it is an amazing tool for developers who want to boost their FAANG preparation.

Ridiculously high salaries, beautiful offices and free meals (yes, people used to go offices and maybe one day we will again), bragging rights for your parents....it's no surprise that there's an intense competition for top developer jobs during placements.

I'm Anushka from Pieces, and I work with developers on how to leverage tools and workflow to be more productive. But before Pieces, I had my 15 minutes of fame for a post I wrote on job interview tips for younger developers that made it to the list of Top 10 trending repositories on Github worldwide.

Clearly the topic struck a nerve, so today I'm following up with part 2 on how to nail the coding interview and bag your dream offer from FAANG or that hot Web3 startup.

DSA is the key to a successful interview

While there are a lot of areas you will be evaluated on at FAANG companies, let's be clear about one thing - you need to crush the DSA interview. Never heard of DSA? Let’s understand what it is and what makes it a relevant topic for your interviews

DSA stands for data structures and algorithms. A data structure is a method of organizing data for efficient use, like sequences or data tables, whereas algorithms are the steps or procedures for solving a well-defined problem. They are the dynamic underlying parts that interact with data structures and help create well-optimized and efficient software.

Interviewers are looking for students who understand data structures like hash tables, trees, graphs, and various algorithms and who can apply the right set of tools to solve a given problem efficiently. If you know DSA well, you'll be better equipped to decide on the most efficient data structure to solve a problem.

What makes DSA so critical during FAANG interviews is that it provides the interviewer a simple approach to evaluate your problem-solving skills, coding skills, basic computer science knowledge and clarity of thought.

DSA helps in understanding the nature of the problem at a deeper level and thereby a better understanding of the world, making it a beloved topic for coding interviews.

Smash your upcoming interviews!

OK, so now you know what the DSA is and how it might feel like. How can you prepare for and crush these interviews?

Speed up your practice to learn faster

Saving templates of your most-used data structures and algorithms as code snippets is one of the best ideas to speed up your learning. Use a modern code snippet tool like Pieces to keep templates ready with your common algorithms, operations on the data structure, macros and common imports. You'll save time that you otherwise would have spent writing code from scratch, and you can repurpose that time to focus on logic building.

Finding the critical topics to study right before your interview is painful. You'll likely visit a ton of sites and webpages, and it's hard to keep track of the valuable material. Snippets can be invaluable to better organize this research and prep, and your saved snippets are easily accessible to brush over before a coding test. So if you need to do a DFS (depth-first search) ever again (or any other code), you'll have already saved it.

Pick up a language you are confident with

Most interviewers will ask you to choose any language, but you need to choose wisely. Select a single language and practice DSA entirely with it. Switching between different languages will hurt your preparation.

Talk through your solution

It never hurts to ask if you can start your implementation in pseudocode. Interviewers are keen on understanding your thought process and are likely less concerned with your ability to use proper syntax on a whiteboard.

Always start from the brute force approach

While solving questions, always make it a habit to start off with the solution with the worst time complexity. Talk the interviewer through your approach and then think of how you can improvise further to make it efficient using better approaches. For example, you can start with a solution with O(n^2) time complexity and then come to O(n) and then O(log(n)) if possible. It's better to save all the different approaches as separate snippets so that you can find them later.

The Power of the Code Snippet

Really though, we're just scratching the surface on how using a snippet management tool like Pieces can turbo-charge your preparation for these interviews. Let's dig deeper.

Saving Time

Whenever starting with a new problem, there's a lot of code that you might have used previously that is insignificant for logic-building. Think of macros, boilerplate, templates, libraries, or standard algorithms. You need them in almost every problem, but you're wasting your time rewriting them every time.

Instead, use snippets to save and reuse this sort of code. You'll only need to worry about how to reduce the time and space complexities of your solution, rather than spending most of your time writing repetitive code.

For example, if you're trying to use binary search, why waste time writing the same old template for the 100th time when you could be spending that precious time determining the best approach and then optimizing that approach? Save that template as a snippet!

Staying Organized

Another issue you might have faced is remembering all the important topics that you need to brush up on before your interviews. A hot tip for this is to save important algorithms and solutions as snippets. So whenever I finish practicing and plan to revise, I already have my saved collection of snippets of important concepts in one place that I can visit anytime.

Maintain Your Flow

You're going to prepare a lot for these interviews, and when you get into that zone when the distractions drop away and you start cranking, the last thing you want is to break your flow.

Pieces is designed with this flow state in mind. You can save snippets in literally less than a second straight from your IDE or browser, without even having the Pieces app open. There's no need to name the snippet, format it, put it into a folder. The snippets are auto-formatted, tagged and searchable, which makes it a no-brainer to save snippets there.

Get rolling with Pieces

It's completely free to get started with Pieces, with absolutely no questions asked! You don't need to enter any personal information to start using it.

Download Pieces here and boost your preparation for upcoming interviews.

Don’t forget to install our IntelliJ, VS Code, and/or Chrome integrations here to enable all the single-click saving!

You’re still not using code snippets?!

anushka-23g — Mon, 13 Dec 2021 17:29:11 +0000

💡 Snippets are small chunks of code that developers save because they might want to re-use or reference them later. You'll find use cases for snippets throughout your workflow as a developer, from researching to developing to collaborating. But many developers don't use snippets because it's a hassle to save them. Pieces is a snippet tool that allows you to save snippets less than a second from your IDE or Chrome. Best of all, the snippets are auto-formatted and auto-tagged by language and structure for easily finding and re-using later. Get started with Pieces here.

Raise your hand if you're a developer who...

Digs through endless project files looking for a solution that worked months ago
Bookmarks endless StackOverflow pages
Regrets closing tabs that could possibly have a fix for an issue you've been trying to resolve for days
Has a hard time figuring out why code that worked previously doesn't work now

If this sounds like you, you probably aren't using snippets, and you definitely should!

Code snippets are like magic mushrooms

Snippets are small pieces of code in a bigger code repository that might be useful later.

And they're everywhere. Open source code, boilerplate code, analytics tags, SQL queries, loops, algorithms, logging and validation and so much more.

Think about how much of this sort of code that you likely write and re-write over and over again. Or how much time you waste trying to find that old snippet in that other project somewhere that will save you time.

So much code that we write as developers is ripe for re-use. And snippets are the magic mushroom that can unlock this productivity gain and keep you in flow.

💡 If this all sounds like drivel and you just want to decide if our tool is useful, download Pieces here and give it a rip.

The case for using code snippets

Save time by not re-writing the same code

Inserting snippets in code saves you from wasting time typing duplicative code. Imagine the time wasted searching for how to add an attribute using CSS for multiple elements across your site.

Eliminate errors

Snippets reduce errors in your code. For example, use a snippet to add a consistent event listener across your codebase.

Make your code implementation ready

It's frustrating when you forget to save a solution and need it later. Use snippets to save solutions that you typically search for over and over.

Do better research

Snippets are also great for the research phase of projects as you read articles, take screenshots, scan doc sites and generally want to put a bunch of stuff somewhere that you might need later.

And yet, you probably don't save snippets

So why don't most devs save snippets?

Mostly because it sucks to save snippets. It takes too long. It breaks your flow. It's a pain to name the snippet, label it, put it in a folder.

And if you do battle through this save lots of snippets? Good luck finding it in that flat Notepad or TextEdit doc.

We built Pieces to unlock snippets for developers

Basically we got fed up with these limitations and built our dream code snippet management tool - Pieces.

It does one thing that is more important than any other thing:

You can save snippets in less a second, straight from your editor or browser.

You don't even have to have the Pieces app open to save a snippet. Just highlight code and hit a keyboard shortcut like CMD+SHIFT+P or right-click and select "Send to Pieces" using your mouse.

Pieces has a bunch of other super useful features:

Auto-formats your snippets
Auto-categorizes snippets by language
Auto-tags the snippet with the things inside it like for loops or switch statements.
Auto-captures the project and file name and line numbers that the snippet came from in your editor
Stores the URL that the snippet came from if you saved from a web page like StackOverflow
Enables you to manually save related links to a snippet

All of this serves one critical purpose:

Blazing fast, accurate search when you need to find just the right snippet for the job.

Getting started with Pieces

We've made it as easy as humanly possible to use Pieces. It's totally free to get started, and you don't have to give us a single piece of personal information to get started. No credit card, no email address, no phone number.

Download Pieces here and open your mind to how snippets can supercharge your workflow.

P.S. Don't forget to install our IntelliJ, VS Code and/or Chrome integrations here to enable all the single click saving!