CSS Flexbox Cheatsheet VS Code extension v2

#news #vscode #css #beginners

This post was originally published on my blog.

A few months ago I noticed that my CSS Flexbox Cheatsheet VS Code extension had been installed 5k times. This was a huge milestone for me because I never imagined such a simple extension would get that much attention. At that time I promised myself that if the installs ever get to 10k I will release v2 with redesigned visuals.

Well, ten days ago what was once something unimaginable, finally happened! The extension hit 10k installs! Now I had to keep my promise and deliver v2.

Not long before that I got an idea of showing the visuals of how the flexbox properties work as part of the hover popup. I thought this will bring the cheatsheet closer to where it’s actually needed and make it easier to understand each property. I quickly generated a demo extension to try this out. It turned out to be relatively easy to achieve. The content in the hover popup supports Markdown so images could be included as well. Perfect!

This got me to work. My next challenge was to figure out a way to detect whether the text under the hover is in fact a flexbox property and if so, show the relevant visual from the cheatsheet. I used some RegEx to target these properties. The final result is something I’m quite happy with. There are probably ways to make it smarter and with less lines of code but I’ll save that for v3. You know what they say “Fake it 'til you make it”. 💪

This leads me to a special announcement - v2 is out! 🚀

After installing it, besides the normal cheatsheet, you will also see a visual in the hover popup showing you how a particular flexbox property works. Hopefully you’ll like this update and have an easier time working with flexbox.

Here’s a little demo:

As for redesigning the visuals, this can wait until v3. Hopefully at the 20k mark. 😉

Top comments (18)

Usman Khalil • Mar 18 '20

How did I miss this one? Amazing plugin

Dzhavat Ushev • Mar 18 '20

I don't know, it's quite easy to miss 😂 I hope you find it useful 😉

Usman Khalil • Mar 18 '20

Absolutely. I've installed it. I'm quite new to flexbox. I know the basics but visualization surely help.

Jose Arteaga • Mar 19 '20

Such a great extension man! Thanks for taking your time to build it. I'm gonna use it and recommend it as well.

Dzhavat Ushev • Mar 19 '20

Thanks for your positive words 🙏 Hope you find it useful. 😉

Cory • Mar 19 '20

Omg, this is amazing! As someone new to coding, having this visualization is going to be super helpful 🥳

Dzhavat Ushev • Mar 19 '20

Thanks 🙏 I hope this extension will be of benefit to your learning. If you have some feedback for improvements, I'd love to hear them :)

Marcelo Lima • Mar 22 '20

Hey there, I love the idea and all, very helpful. Well done, dude!
Just a tiny problem, I've just installed it, and when I hover it, it doesn't show anything...

Dzhavat Ushev • Mar 23 '20

Hey, thanks for reporting this. I really want to make it work for you but will need some additional info.
Can you open an issue where you mention your VS Code version and provide a CSS snippet I can test with? That will help me identify the problem. You can also do it here. :)