DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for CSS Flexbox Cheatsheet VS Code extension v2
Dzhavat Ushev
Dzhavat Ushev

Posted on • Originally published at dzhavat.github.io

CSS Flexbox Cheatsheet VS Code extension v2

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. πŸ˜‰

Top comments (18)

Collapse
 
monfernape profile image
Usman Khalil

How did I miss this one? Amazing plugin

Collapse
 
dzhavat profile image
Dzhavat Ushev Author

I don't know, it's quite easy to miss πŸ˜‚ I hope you find it useful πŸ˜‰

Collapse
 
monfernape profile image
Usman Khalil

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

Collapse
 
jharteaga profile image
Jose Arteaga

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

Collapse
 
dzhavat profile image
Dzhavat Ushev Author

Thanks for your positive words πŸ™ Hope you find it useful. πŸ˜‰

Collapse
 
coryrunn profile image
Cory

Omg, this is amazing! As someone new to coding, having this visualization is going to be super helpful πŸ₯³

Collapse
 
dzhavat profile image
Dzhavat Ushev Author

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

Collapse
 
mrlsk8 profile image
Marcelo Lima

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

Collapse
 
dzhavat profile image
Dzhavat Ushev Author

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

Collapse
 
mrlsk8 profile image
Marcelo Lima

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

Thread Thread
 
dzhavat profile image
Dzhavat Ushev Author

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

Collapse
 
janmallari profile image
Jan Mallari

Thanks for creating this plugin! Cheers!

Collapse
 
danifrontdev profile image
Dani • Edited on

Great plugin!! Very useful, good job man πŸ˜€

Collapse
 
dzhavat profile image
Dzhavat Ushev Author

Thanks. I appreciate it πŸ™

Collapse
 
mongezi3 profile image
Mongezi3

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

Collapse
 
dzhavat profile image
Dzhavat Ushev Author

Awesome! Means a lot β€πŸ˜‰

Collapse
 
ajayadav09 profile image
ajayadav09

This is gold..

Collapse
 
dzhavat profile image
Dzhavat Ushev Author

Thanks πŸ™

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.