HomeGitHubAboutBlog

Emmet love

13 February, 2020 - 3 min read

What is emmet

Emmet is a plugin that comes built in VScode (and probably 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! One thing that I realized is vital is learning your tools.

Why the name emmet?

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

I was initially using the html tag matcher from emmet, but it is so much more powerful. The HTML Pair Matcher allows you to locate the matching open/close tag for the tag at the current cursor position.

  • The syntax is inspired by CSS selectors
  • You can customize your own snippets
  • Written in pure Javascript

Emmet has intuitive abbreviations. Many of them are triggered by a single character. For example btn expands to button. Code screenshot

You can do a lot by adding values to your abbreviations. If I type li*10 I will get 10 list items. Code emmet screenshot

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 waterbottle labels? Or interchangeable phone pop sockets that have different things available?

Gradients

I love making pretty gradients with third party GUIs, but it would be nice doing it all in my editor. 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.

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.

Valentine's Day

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

In the spirit of the commercial holiday, here is a love letter to myself Code screenshot, infinite loop javascript