Around a month back, after the end semester examinations of my 7th semester were over and before the placement season was about to begin, I was looking for some random inspiration to build some cool stuff. During that period, one of my friends was working on some piece of code and was facing some errors, so he used to send me the code file to help him fix it. I would edit some parts and send him back, and then he would add some stuff, face some bugs and then send me back again. This soon led to multiple rounds of to-and-fro messaging, all taking place over Whatsapp (our primary medium of chatting). We both use Visual Studio Code (VSCode) as our primary code editor, and hence it seemed redundant to me that again and again, I had to go to Whatsapp, attach the file and send it to the other guy, and then he would download it and open it in his VSCode. And then an idea (a rather obvious idea) clicked: to make an vscode extension to simplify this process of file sharing. Also, I have never built one before so this project idea could be a good learning experience.

However, I did not want this time for my project to just land in my pile of unfinished projects 🥲 (you know what they say :- “Ideas are Shit; Execution is Everything”), so I started seriously penning down my course of action in my Notion doc. As simple as the extension sounds, I found it highly challenging since I have little to no practical experience in frontend, let alone working on Typescript. Fast forward a week, and I was able to build and test the first version of my baby; although basic and naive in retrospect, it did exactly what I wanted it to do, and I was proud of it. I reached the stage where most developers slack off:- actually deploying and publishing the stuff on web. This is the part where I also procastinated a lot, and thanks to my lack of creativity, I was not able to chose even a decent, let alone a cool name for my extension. I asked few of my friends for the same, and got codedrop as one of the suggestion. The name sticked with me, and I dropped off the “de” to arrive at the final name:- “codrop”. Thanks to AI logo generators out there and some hours of donkey-work figuring out the Azure Devops, I was able to package and publish my extension on the marketplace 🥳.

You can find excerpts from my Notion doc below. Please go through it to understand what the extension does and the features it provides. Ignore the all-small-case style of writing; I usually do it for personal notes and documentation (too lazy to press Shift ⇧ key to capitalise 😌). I hope the doc helps you to find motivation to complete one of your unfinished project of crazy ideas!

The code is currently closed-source under my Github organisation codrop-xyz.

Peace 🕊️

Go check out the extension here. Feel free to install and use, and report bugs (if any) at gurbaazsn123 [at] gmail [dot] com

problem 📌

vscode has become a staple editor for most developers, ranking as one of the top developer environment tools. but quickly sharing a code file becomes a repetitive task. let’s see a general day-to-day flow when you are sharing some code files with your friend

  1. writing your code on vscode, you encounter an error, and you seek help from your tech geek friend
  2. you go to whatsapp (or discord or telegram or whatever) and go to send a document, navigate through your system and finally select the file, and then click on send
  3. your friend receives the message, downloads the file, places it somewhere (or default downloads folder) and then opens vscode, and then opens the file

as we can see, the process of transferring files from one system to another, although quick, has still a lot of steps, which can be avoided with a simple solution (and no, i am not talking about github-like places to push code to and then share it, and some live collaboration feature): link sharing

solution 💡

what i am proposing is a vscode extension for link-sharing, which you would be able to install from the vscode marketplace itself.

once added, you can simply write your code, and then click on the share icon and generate a link that would get copied to your clipboard, and then share it with your friend over any communication channel.

your friend would simply click on the link which would open the app with the required files in it. simple? i bet your ass it is.

features and demo

as of current version, two commands are provided in your command pallete

  • Codrop: Get Shareable Link: Copies a shareable link of active code file to your system’s clipboard.
  • Codrop: Add Code to Workspace: Paste the link

the above commands feel a bit mechanical, hence alternatively, we provide a Get Shareable Link button in the status bar of vscode itself, which performs the task of link-generation on click. when a user pastes the link in browser, desktop vscode application is triggered and the corresponding file gets created, filled with the required content.

Extension Demo

learning roadmap 🛣️

  • figure out typescript and how to write a basic vscode extension
  • add a widget to obtain shareable link
    • if that doesn’t work, allow the same simply from the command palette (ctrl+shift+p)
  • generate the link
    • might involve a separate backend if it’s possible with vscode extensions or i do not get much familiar with typescript (golang ftw)
      • edit: golang truly was ftw
  • copy the link to the clipboard
  • clicking on the trigger should trigger the desktop launch of the vscode application
    • if the app doesn’t exist on the client’s system, as a fallback we can have two options
      • download the code
      • open vscode in the browser
      • option to launch any other code editor
  • finalise the extension name
  • write extensions readme
  • deploy the backend and get a nice domain name
  • logo and stuff
  • publish the extension to the marketplace
  • share and publicize the tool

i am looking forward to extending the same to sharing multiple files/folders at once, but let’s focus on POC first!!

as this is my first time with this vscode extension ecosystem, i would be penning down all the tools and resources i gather along the way 💀

tools 🔨

  • programming language(s)
    • typescript (extension's frontend)
    • golang (to build APIs)
  • database: postgres
  • server: aws ec2
  • domain+SSL: namecheap

resources 📚