loading...
Cover image for CSS Flexbox Cheatsheet VS Code extension v2

CSS Flexbox Cheatsheet VS Code extension v2

dzhavat profile image Dzhavat Ushev Originally published at dzhavat.github.io ・2 min read

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:

Flexbox visuals inside the hover popup

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

Posted on by:

dzhavat profile

Dzhavat Ushev

@dzhavat

Front-end developer trying to make useful stuff.

Discussion

markdown guide
 

How did I miss this one? Amazing plugin

 

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

 

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

 

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

 

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

 

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

 

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 :)

 

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...

 

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. :)

 

Well, I don't know if you did anything, but it started working all of a sudden hahah thank you anyway!

That's great to hear! I hope you'll find the extension useful.

 

Thanks for creating this plugin! Cheers!

 

Great plugin!! Very useful, good job man 😀

 

Thanks. I appreciate it 🙏

 

loved the flexbox extenstion,can't wait to use this!

 

Awesome! Means a lot ❤😉