DEV Community

Flexbox cheatsheet inside VS Code

Dzhavat Ushev on September 04, 2019

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

Read full post

Joseph Pinder • Sep 4 '19

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

Dzhavat Ushev • Sep 4 '19

You're welcome :)

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

Macario James • Sep 4 '19

Oh! Installing this as soon as I get to my computer for the morning.

Macario James • Sep 4 '19 • Edited

Update. I'm LOVING this. The visual representation of each attribute is exactly what I needed. I learned something. I was like, so THAT'S what "align-item: stretch" does. Sweet.

Added first review to the marketplace! Time to check out your other extensions.

Dzhavat Ushev • Sep 4 '19

Thanks for your review! Really appreciate it 🙏

Hope you find the other extensions useful as well :)

Macario James • Sep 4 '19

Question, how did you create the .svg images for each attribute?

Dzhavat Ushev • Sep 4 '19

The whole cheatsheet is based on the excellent work by Darek Kay. I'm not sure which tools he used to create them but you can check out the code on GitHub. :)

Mike Lockhart • Sep 4 '19 • 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.

Dzhavat Ushev • Sep 5 '19

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

Mike Lockhart • Sep 5 '19

Yes please!

Dzhavat Ushev • Sep 5 '19 • 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

30 Day Vanilla JS Coding Challenge by Wes Bos who will help you play with JS by building some small JS projects. The videos are free.

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.

n8trufe • Sep 4 '19

Thank you for that. I will install it immediately. If you would make the same with Grid would be awesome.
I also love your css to MDN.

Dzhavat Ushev • Sep 4 '19

Thanks. Hope it serves you well :)

Will appreciate your feedback once you've used them for some time. If you feel like there's something that can be improved, let me know.

Suzanne Aitchison • Sep 4 '19

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

Dzhavat Ushev • Sep 4 '19

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

Kerzhain • Sep 11 '19

Thanks it's really helpfull.

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

Dzhavat Ushev • Sep 11 '19

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

Kai Oswald • Sep 4 '19

Now make one for CSS Grid, where you can generate and export your grid 😉.

Suzanne Aitchison • Sep 4 '19

It's not an extension but this generator is pretty amazing cssgrid-generator.netlify.com/

Dzhavat Ushev • Sep 4 '19

Yes, it is! Sarah Drasner has released a lot of amazing tools. All of them deserve to be bookmarked :)

Dzhavat Ushev • Sep 4 '19

That's a really good idea :)

I might give it a try in the future, or of someone wants to take on the challenge, he/she can do it as well.

It's going to be great if my little extension inspires other people to build more tools like this embedded in the code editor.

Chris Achard • Sep 5 '19

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

Dzhavat Ushev • Sep 5 '19 • 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. :)

Chris Achard • Sep 5 '19

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.