Building a VScode Extension After Graduating Bootcamp!
This story has been in the draft for a long time! By the time I was writing it, the imposter syndrome. The project was very special to me because it proved that I have grown, by constantly doing challenging things and putting friction in front, I was able to be better technically and mentally, this a project that I have never dreamt of one day.
The story
After graduating from a programming boot camp during the covid quarantine of March 2020, thoughts of my next career direction and goals began to manifest as I lazily procrastinated on the sofa. Suddenly a voice in the background was calling my name “Adam, Adam …”, I looked over to see my roommate, and replied “yes”? He wanted a snippet of code for a project.
To get him the code here is what I had to do:
- Open vscode code editor
2. Navigate to the file and then find the code he needed
3. Take a screenshot of the code
4. Export the screenshot to a Paint app
5. Make highlights over some of the code
6. Upload the screenshot to a file-sharing server
It annoyed me how much it took to share a snippet of code with someone, why there isn’t an app for this, then the light bulb turned on, why not building it my self.
Screen-if-y | The name
The name of screenify is inspired by the famous JSON method called Stringify, if you would ask me why I have picked that name I would answer basically because of its simplicity, and it sounded cool!
Some of the things that I have learnt throughout the journey:
1 - VSCODE Development API
VScode is a code editor that is built with Electron.js a runtime framework that allows the user to create desktop-suite applications, part of the interface to develop your own extension on it. The vast majority of the documentation was clear and truly made my life much easier. However, some were not, unfortunately, some features that I need from the vscode it didn’t support, I had to dig deeper to find a way to implement it — I had to rely on the upstream API directly for this matter.
Unit Testing
At a high level, unit testing refers to the practice of testing certain functions and areas — or units — of the code. This gives the ability to verify that software work as expected.
It is one of the fascinating topics that I find interesting as I watch Uncle Bob's lectures, I thought writing software to test my software was easy. In my head, all I had to do is to stitch an extra code in your codebase, and hola! I am FANG ready software engineer ( not anywhere near that level yet).
A few hours later, as I am struggling to write the first test, a simple word came to my mind like a bubble “why”.
It’s a disciple e.g. doctors have a disciple of synthesising their hands 10 different times before surgery, rubbing each finger against the other nine.
Software development is craftsmanship, and it’s discipline to provide constant proof that your code is working. I had to stop crying like a baby and start to write the unit test, I had to constantly remind myself not to take the path with the least resistance. This aligned me to ship more reliable and tight code into production.
System Design
The extension has an image uploading feature, a CDN server setting on top of Nodejs server on monolith architecture, I knew that I could have thousands of users which will generate huge traffic, more than a single-threaded nodejs process could handle, I needed to find another solution!
Docker
Docker is an open-source project for automating the deployment of applications as portable, self-sufficient containers that can run on the cloud or on-premises.
If you would tell me to deploy a project back then using docker, my answer would be “are you kidding me”. After working with this technology I finally understood the technology (or I tell myself). It creates a virtualized environment (container) in which your code lives as an image. This would solve different operating systems incompatibly issues, moreover, I had another challenge, hooking multiple docker containers together requires another beast, one that I need to tap into.
Docker Compose is a “tool for defining and running your multi-container Docker applications”
Multi connection to the database has been established with dynamic scalability of the service, it had introduced new challenges with synchronization.
Google Cloud Platform
Google offers wonderful cloud-computing resources with a $300 free tier. Technical wise the learning curve was steep, it was a little bit fuzzy, thanks to their great community and their documentation, I was able to follow along and work my way there. A scalable Cloud run service was used to deploy multiple containers, and Google will handle the load balancing, this means when we have more users it will create more instances to distribute the load.
Linear Algebra
You might be asking yourself by now how did I cross by linear Algebra when building vscode extension, insane right? I thought the same, as I tried to tune the linear regression model. I used math to solve the linear shifting alignment problems, to give an example, calculating the shifting distance of canvas to be aligned perfectly over the captured code with respect to the drawing dimensions.
Google it!
For various days, I had been looking trying to find a solution for bugs and errors, google was my only saviour, sometimes I find a solution from reading comments and blog posts. knowing how to search using keywords, how to focus on specific information and leave others, and reading carefully are skills of their own.
Conclusion
All in all, it was an amazing learning experience that taught me a ton, the fact that some people are using my extension and adding value is literally amazing. Thanks for reading the blog post I hope that you have found this blog post helpful in any essence.
