It was mid-morning on a Tuesday in February, and I had 10 minutes in between meetings. So I decided to try and solve a pain point of mine.

You see, I had to memorize this HTML snippet to create a collapsible section in GitLab Issue descriptions and comments, but I kept forgetting it. Was it summary or section? I could never remember.

<details>
<summary>Insert Title</summary>
Hidden content
</details>

Even though it is not vanilla Markdown, GitLab knows how to interpret some HTML. I used this formatting trick fairly often since full-page screenshots can occupy a lot of screen space, which leads to excessive scrolling.

So I decided to poke around our codebase to see how the other Markdown shortcuts worked. To my surprise, it was pretty straightforward. Each shortcut had a simple text input that mapped to each button. This implementation was simple to replicate since I just needed to copy/paste and replace a few words.

Image of Vue and Haml files with editor shortcuts

The Vue and Haml files with the new shortcut

I started a branch and began hacking away at the code. Now, I would never call myself a Software Engineer, but I like to try and make things from time to time. I was able to add a new shortcut to the toolbar to insert this code snippet for me in less than 10 minutes. No more memorizing! Making contributions like this is what makes working at GitLab so special.

Now, it wasn't ready for production, but I at least had something that worked. I shared it with my UX colleagues in Slack, and it started to gain traction with several up-votes and few constructive comments on how to make it better.

With the functionality flushed out, a few other designers helped me get a better icon added to our SVG library. Using clear iconography is critical for communicating information more clearly.

Initial Icon Final Icon
SVG of chevron right icon SVG of details block icon

The last thing to do was resolve my failing tests, and I had several teammates help me do that.

Gif of the shortcut being used

Today this change merged! Now I solved a pain point for me and others. It took a few months to go from idea to production, but the effort was super low. I'd say the return on my initial investment, 10 minutes, is super high.

Having a direct impact on a product was never an option for me before joining GitLab.

Image of participants in the Merge Request

Thank you to everyone that helped me deploy this

Git is a trademark of Software Freedom Conservancy and our use of 'GitLab' is under license