DEV Community

Cover image for Flexbox cheatsheet inside VS Code
Dzhavat Ushev
Dzhavat Ushev

Posted on • Originally published at dzhavat.github.io

Flexbox cheatsheet inside VS Code

This post was originally published on my blog.


Another week, another VS Code extension. I’ve published two so far and this is my third in just a month. I’m not participating in any sort of “30 VS Code extensions” challenge 😂. It’s just the ideas that keep popping up in my head and I can’t help myself but try to make something out of them.

It’s needless to say that I enjoy doing this quite a lot because these extensions are something I’ve been missing in my work. So by building them, I benefit directly and they make my work as a front-end developer a little bit easier.

Over the last few years flexbox got more and more popular. And rightly so, because it helps us build one-dimensional layouts much faster. Have you tried positioning something in the middle of an element using flexbox? It’s fun, right?

But there’s just one problem! Remembering all flexbox properties can be hard. I know it’s hard for me! Should I use justify-content or align-items to do X? What values does justify-content accept? There are quite many of them and we’re not always sure which one does what. That’s why we have our favorite articles, guides, cheatsheets, etc., to consult during those times. But they all “live” outside of the code editor and that forces us to switch context.

A week ago I asked myself “Why not have a flexbox cheatsheet inside VS Code where I can quickly look up what I need and continue my work? Why do I need to switch context? Why isn’t there a tool that lets me do that?”. That’d be great, right?

I think so too, so I built it! 🚀

I’m thrilled to share my new extension “CSS Flexbox Cheatsheet”. Here’s a little demo:

Demo

Currently there are two ways to open the cheatsheet:

  • By pressing Ctrl+Shift+P (Win) / Cmd+Shift+P (Mac) and searching for the Open Flexbox Cheatsheet command.
  • Hovering any display: flex declaration and clicking the Open Flexbox Cheatsheet link in the popup (as shown in the demo).

I have a few ideas for future improvements but I’d like to share it with the world in order to get feedback. So if you work with CSS, please give it a try. I hope you find it useful.

Latest comments (39)

Collapse
 
kerzhain profile image
Kerzhain

Thanks it's really helpfull.

"justify-content: space-evenly;" is missing from your cheatsheet

Collapse
 
dzhavat profile image
Dzhavat Ushev

Thanks for letting me know! Will add it in the next update :)

Collapse
 
k3nnet profile image
k3nnet

Thanks for this 😀

Collapse
 
yuanhao profile image
YuanHao Chiang • Edited

Amazing Dzhavat! I just installed it :)

I really like hovering on display: flex and being able to open it 👍

Collapse
 
chrisachard profile image
Chris Achard

Building cheatsheets right into extensions is such a good idea! Do you have any good resources for how to go about building an extension?

Collapse
 
dzhavat profile image
Dzhavat Ushev • Edited

When I think about it, I can’t understand why we haven’t explored this idea earlier. It makes a lot of sense to me now (or maybe I’m already biased :)). We work with code so the tools needed to support our work should be as close as possible. I’d love to see more extensions similar to this one. An obvious one is a Grid cheatsheet.

As for resources, I’m only looking at the official documentation at the moment. Sometimes I find them a bit hard to understand, though, but it helps by looking at the examples. They have a nice CLI tool for generating new extensions. It makes it very easy to get started. :)

Collapse
 
chrisachard profile image
Chris Achard

Absolutely! This post has given me a bunch of similar ideas of information or little tools that I want available when I'm writing code; but before this I would have to go look up separately, etc. So thanks for the inspiration!

Those docs look great, thanks :) I'll take a look.

Collapse
 
judecodes profile image
Cool

Damn this is quite helpful as I always forgot what element I should add to regardless thank you

Collapse
 
codingsam profile image
Coding Sam

Just tried it... Awesome!
Shared with the Tech Team in the company I work for :)

Collapse
 
dzhavat profile image
Dzhavat Ushev

That's awesome! Thanks :)

Collapse
 
andres profile image
Andrés Pérez

This is exactly what I needed so I don't have to google what each property does for the 100th time 😃

Collapse
 
dzhavat profile image
Dzhavat Ushev

This is exactly why I built it :) Hope you find it useful.

Collapse
 
cameronapak profile image
cameronapak

Thanks for making this! It'll come in handy soon

Collapse
 
sinewalker profile image
Mike Lockhart • Edited

Writing and choosing extensions for an editor are the surest way to making it "your" editor. I've enjoyed it for years in Emacs, and this is why Code has quickly become my new favourite. It's giving me incentive to finally learn JavaScript too.

Collapse
 
dzhavat profile image
Dzhavat Ushev

I also like how Code gets updated on a monthly basis. So bug fixes and new features land pretty fast. Good luck with learning JavaScript! If you need some resources, I can share a few that I find useful :)

Collapse
 
sinewalker profile image
Mike Lockhart

Yes please!

Thread Thread
 
dzhavat profile image
Dzhavat Ushev • Edited

Sorry for the late response. Was a bit busy today.

There are quite a lot of resources on the Web but the ones I can recommend are:

Books

  • JavaScript for impatient programmers by Axel Rauschmayer. This book was released recently and is available for free online. You can also buy it in paper format if you can spend some money.
  • Exploring ES6 by Axel Rauschmayer. It's is a bit older than the one above but still worth a look.
  • Eloquent JavaScript by Marijn Haverbeke is quite good as well.

Courses

  • freeCodeCamp. Not really a course but they have different tracks and learning JS is part of them.
  • MDN has a section dedicated to JS as well. It's a good resource for both learning and as a reference.
  • Getting Started with JavaScript, v2 by Kyle Simpson. I haven't watched this course but have read some of his books and like his style of explaining stuff. So I think the course will be just as good. FrontendMasters is paid so if you decide to give it a try, you can also watch other courses as well.

Building stuff

The are tons of other resources as well but I hope you'll find these useful :)

Edit: Oh, I forgot our lovely DEV.to :) You can follow the js tag. There are a lot of good posts.

Collapse
 
jsphpndr profile image
Joseph Pinder

Do one for CSS Grid, too! Haha. Please and thank you! :)

Collapse
 
dzhavat profile image
Dzhavat Ushev

You're welcome :)

Having one for CSS Grid will be quite handy as well. Might consider it for a future project.

Collapse
 
refiloedig profile image
Refiloe Digoamaye

genius!

Collapse
 
nickytonline profile image
Nick Taylor

Nice work @dzhavat ! 💪🏻🗳️

Collapse
 
s_aitchison profile image
Suzanne Aitchison

So good! I can stop mixing up align-items and justify-content now 🙈

Collapse
 
dzhavat profile image
Dzhavat Ushev

I feel you! Hope this little tool can help you with that :)

Collapse
 
mehdiraash profile image
Mehdi Raash

If someone needs to see this cheatsheet to solve the problem, the problem wouldn't be solved!

Collapse
 
dzhavat profile image
Dzhavat Ushev • Edited

I see what you mean and I agree. But many times the problem is remembering the right property, not much about the end result.

Collapse
 
siddev profile image
Siddhant Jaiswal

Very helpful and useful extension ❤️❤️❤️