ZenDev

• 

  ZenDev Example Use

Inspiration

Our project was inspired by the significant stress programmers face as they struggle to see a working project. In fact, we designed the project so that developers can visualize how every line of code they write is progress. This helps to alleviate the pressure placed on the determinism of functionality. We were also inspired by GitHub’s activity graph, which showed progress over a longer time span than our tool. We even alluded to this feature of Github with images of trees that look like the activity graph.

What it does

Our project creates a web view in a separate tab of visual studio code which contains sunny skies and green pastures. The view slowly populates with trees based on the number of character changes the user makes and the configured difficulty.

How we built it

We built our project by using Yeoman to create boilerplate code for our extension and Javascript to implement the functionality. Furthermore, we built our web tab using vanilla HTML, CSS, and JS.

Challenges we ran into

One challenge we faced was creating random location values for the trees which would persist every time the project was refreshed. To fix this issue we seeded the random value generator such that it would create the same location values for our trees every time. This approach also allowed us to optimize the space usage of the program as we wouldn’t have to store the location of every tree. Other challenges that we ran into include VSCode resetting our webview whenever the user left our tab. We were able to fix this by changing one of the flags on the configuration of the webview after reading through the documentation and finding a well hidden configuration option.

Accomplishments that we're proud of

We are proud of creating a developer tool which meets our standards for personal use. Furthermore, we are proud of onboarding onto completely new technologies to build this product.

What we learned

We learned the web development workflow and the HTML and CSS languages from scratch. But more importantly, this was the first time that anyone on our team has built an extension. We learned how the VSCode extensions that we use on a near daily basis function and the lifecycle of VSCode extensions from activation to deactivation.

What's next for ZenDev

In an attempt to make the scene more personable and thus a stronger motivation, we plan to introduce nighttime and daytime mode, i.e. the sun turns into a moon, and make the scene replicate the live weather of the user. In addition, to increase the visual diversity of our webview we plan to introduce birds in the sky and rarer trees to increase motivation. We also plan to integrate our tool into GitHub so that new developers can track their progress using the amount of trees they planted as a metric for motivation.

Built With

• css
• extension
• github
• html
• javascript
• vscode
• yeoman