GitGlow

GitGlow Lab boosts efficiency with markdown context menus, auto-save, native Git cloning, and Gitpods' 'always save' features, streamlining your GitLab experience.

Comment

Important: If you are not able to see the video, that means Youtube has removed it due to some violations. I covered this case already, head to the GitLab readme file and you will find the missing blocks 😉

Inspiration

Be it Version Control, CI/CD, Issue tracking, Code review, or DevOps lifecycle, GitLab is undoubtedly a one-stop solution for each of those. I started using and learning about Gitlab when I learnt about this event (and it was not long back, I started working on this project 7 days ago before the submission deadline) and while using the platform, I found some pain points that should be tackled. The pain points are listed as below:

  1. Be it any sort of developer using GitLab, Readme is a markdown file that carries a lot of weight because it tells the reader/visitor clearly about the issue my project/repository is trying to solve. Suppose, I am a startup and have made a REST API that will let you solve a serious issue. Undoubtedly, the structure and number of files in the project will be huge, but with the help of a clean, structured, and nice README I can convey and break the message of my project to the visitors so that they can onboard easily and be benefitted from the same.

Issue: The markdown commands for styling the readme files currently are very cumbersome and break the flow for anyone who is writing the same. Have you forgotten the golden-old days in which we used to do our work on Microsoft Word, and the best thing about it was that it can be perceived almost as a no-mouse editor as almost each of the thing can be done rightly from the keyboard. In short, there was a keyboard shortcut for almost anything.

What I did do?: In my extension, I have provided a context-menu for the GitLab's Readme Pages and thus whenever you will be editing the same, you can just select the text and then right-click to see a plethora of commands (bold, italic, underline, justify, make a link, and much more). So, you can just forget about the md files-specific commands for making text bold/italic/underlined or even for a code block. Refer to the video in which I have explained everything about the same. (Are you able to spot the keyboard shortcuts for some of them too 😉)

  1. Issue: While I was making the extension for this event, my browser crashed (using the web IDE of GitLab to code my project) and then after I re-opened the browser, all of my project code (the bit that was not saved) was wiped off! I changed almost 500 lines of code in that iteration and due to an unexpected behaviour I lost a major part of the project and that is why I am running late for this event.

What did I do?: That incident affected me a lot and then I decided that I should integrate an auto-save functionality to GitLab so that no matter what, the extension will be there for you and your code. So, when you enable the Auto-save icon before editing any file in GitLab, then the extension saves a copy of your code every 5 seconds and thus there will always be a recent snapshot of what were you writing within the extension In case you want to get the code in case of data loss, you can use the extension to copy the code back and paste it again into a repository. One can use the copy code for a maximum of 5 files because of the storage limitation of a browser, but even that is a boon in an unfortunate event.

  1. Issue: If we edit the code in Web IDE/in GitLab itself, then there is an alert always whenever we forget to save the edit file before editing it. It is a great feature because that restricts the user from mistakenly closing the file without saving it. But, this is not the case with GitPods. If we edit any file in GitPod and then try to close the pod, then it doesn't ask me to save the code.

What did I do?: When we enable the Prevent Unintentional Close toggle button, then for each tab in which we will be editing the GitLab code, it will prompt us that we have not saved the code (just like in the case of Web IDE and GitLab in-file editing). But this one is made possible with the help of the extension (using content scripts, background workers, and extension script files).

  1. Issue: Suppoe I love a public repository and want to clone the same onto my local machine so that I can tweak it and play with it. Currently, we have to use the git clone command to do the same in a bash/terminal window and after my extension, that is a very long process 😅

What did I do?: I have made a native application (a Python script) that lets you send commands right from your extension and with just a click, your repository will be saved onto your local machine. Isn't that great! It has a complex logic beneath it, but be aware of the fact that it saves/downloads the repository in your preferred location without you doing anything.

How I built it

I built an extension for this event because it is super lightweight and barely eats up the computer's resources and screen. There are many restrictions when working with an extension, but I went with it because I know it will look great once completed. Pure JS is used for the custom logic

Challenges I ran into

  1. Adding all of the 4 features into an extension was cumbersome because everything has to be done in a restricted environment.

  2. I have added GitLab OAuth to log in the user and that required a lot of brainstorming because first I had to somehow get the code from the OAuth flow and then convert it into an access token after that only I was able to login/verify the user.

  3. Making the native application for the extension was a bit difficult as it will work with Windows to get things done.

Accomplishments that I'm proud of

As said earlier, my project code was washed while editing the same and I almost lost my hope then. From that instance to now submitting the project, it has been a great journey for me.

But I have one regret: I cannot post the code on GitLab because I was working on this project till the last moment. So, there was no time to edit the GiLab file at the end and thus I uploaded everything to my website: https://versatilevats.com/gitglow (on that page you will be able to see the steps needed to download the extension files and run them, also has detailed information about the project)

What I learned

Dealing with impossible situations and delivering things on time. Also, I want to say that this is not a liability to the current GitLab ecosystem. It is not a heat map that is of no use because it is only deteriorating the UI and nothing useful to the community, whereas it is not a game where users will be seeing something un-useful. Each section of this project speaks about easing the lives of developers and is trying to remove the small-roadblocks that were used to come in the path of the future changers 🧑‍💻👩‍💻

What's next for GitGlow

As of now, I accomplished what I wanted for this project, but I am sure there are many more things that I can do with this project. So, jumping right off to see what is the next destination 🤞

Built With

Share this project:

Updates