Pictury VS-Code Extension

A tool to search, upload and edit stock-free images into a workspace.

Comment

Inspiration

Have you ever spent hours on google finding the perfect picture for your website or app, and after you found them, facing the hassle of uploading all these files to your development environment to use them in your project? All this takes time and patience... 🥺

We now have the solution for you: Pictury!

Pictury is a VS-Code extension that will fetch popular stock-free images from sites such as Unsplash and display the best pictures for you from a search output, right from your development environment.

You don’t need to google, you don’t need to leave your sandbox! With the Pictury extension for VS-Code, you can search, use and edit stock-free images directly within your project, with just ONE click.

Pictury is a must for all your development endeavors. And it's free. Download it now: https://marketplace.visualstudio.com/items?itemName=Pictury.pictury

What it does

  1. Load stock-free photo library from inside vs-code

  2. Ability to display images in a webview, inside vs-code, upon a search

  3. Ability to allow downloads or copy and paste pictures' URLs from the search window

  4. Ability to modify the downloaded pictures (Convert format, Resize, and Rotate)

Challenges we ran into

  1. Working in different time zones was a main challenge to collaborate and code together
  2. VS Code's API documentation is super specific and demanded an important learning curve... We spent a long time just studying and understanding how it works
  3. Some of us were totally new to JS, so we had to learn it from scratch and hit the ground running. It was hard, but overall exciting: it was an amazing experience/chance to learn new technologies!

Accomplishments that we're proud of

  1. We managed to overcome a MAJOR bug that appeared in the last few days, that made our extension unusable: the dynamic search bar linked to a restful API. In this case, we decided to change how we secure our API, and we are still troubleshooting this issue (we plan to update it in the next versions).
  2. Publishing the extension on the VS Code marketplace felt really amazing!

What we learned

  1. We learned new technologies such as JS and CSS!
  2. We got to use GitHub a lot, so we HAD to learn the best practices, the CLI commands, and all of that. Considering that GitHub is a must for any dev, we are thrilled with this experience!
  3. Going through the VS Code API gave us plenty of new ideas that we want to explore in the future, so this experience may influence/motivate us not only to continue to maintain Pictury, but also for future projects!

What's next for Pictury

  1. Keybindings for all the features, so that you can leave your mouse alone!
  2. Snippet to generate the URL of a random picture (or the best result for your query) directly in your file, so you won't have to open the webview.
  3. Ability to download a .txt file with image credits information, to copy and paste into the readme.md credits session.
  4. More image conversion formats.
  5. And whatever more the future holds!

Built With

Share this project:

Updates