Emmet love

I have recently started my own blog to keep track of my learning progress, this will serve as a blog post rather than a full tutorial.

Whenever I ask for help with a coding program, and the person asks me to change a certain line, I always feel clunky and slow with my typing. I need to take full advantage of shortcuts and extensions available. One of them is Emmet.

What is Emmet?

Emmet is a plugin that comes built in VScode (and other IDE's, if not, you can add it as an extension). It is a plugin that improves your workflow, well if you know how to use it!

Why the name Emmet?

Emmet is a word that originally meant ant, which is known to carry over 50 times of its weight. The word is also similar to "emit," which is basically what Emmet does when it expands abbreviations.

The HTML Pair Matcher allows you to locate the matching open/close tag for the tag at the current cursor position.
I was only using the html tag matcher from emmet, but it is so much more powerful. There is no reason to be intimidated by emmet, I thought I would need to watch a video tutorial to grasp it but the documentation is clear and to the point.
The cool thing is:

• The syntax is inspired by CSS selectors
• You can customize your own snippets
• It is written in pure Javascript
• Emmet has intuitive abbreviations. Many of them are triggered by a single character. For example btn expands to button.
• You can do a lot by adding values to your abbreviations. If I type li*10 I will get 10 list items.

The documentation is beginner friendly, I highly recommend opening it side to side with your IDE and practising the shortcuts. They also have a cheat sheet available.

sidenote : Someone needs to invent flexible cheatsheet items. I have seen mousepads with vscode shortcuts, but I need more options. Maybe blankets? Or interchangeable phone pop sockets that have different options available?

Gradients

lg(left,#808,#FFF)

The expected output :

[css]background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#808), to(#FFF));
background-image: -webkit-linear-gradient(left, #808, #FFF);
background-image: -moz-linear-gradient(left, #808, #FFF);
background-image: -o-linear-gradient(left, #808, #FFF);
background-image: linear-gradient(left, #808, #FFF);[/css]

I love making pretty gradients with third party GUIs, but it would be nice to do it all in my IDE.
Only issue is that the documentation did not work for me in this case, I tried googling it but I cannot figure out why it did not work. If someone has a tried and tested solution to using the gradients shortcut in vscode please feel free to share.

Repeated “Lorem ipsum”

I thought I escaped Lorem Ipsum when I "left" design for programming, but it has come back to haunt me.

You can use lorem generator inside repeated elements to create tags filled with completely random sentences. For example, p*10>lorem will generate 10 paragraphs with random sentences in them.

All in all, Emmet is pretty great. I did not know much about it, but I hope it inspires you to try it out.

Valentine's Day

cool discovery : I wanted to share a code snippet, and I discovered Carbon. I have always wondered what people used to create beautiful code snippets.

In the spirit of the commercial holiday coming up, here is a love letter to programming, and to my first post here!