Who is Emmet?

Wed, 14 Dec 2022 00:00:00 +0000

I knew there was some magical way of entering all the the boilerplate in Visual Studio Code as I’d seen it happen in several videos, and assumed is was some sort of macro expansion thing in the editor. Fast forward a few blog post readings and youtube viewings and I keep seeing tangential references to someone called Emmet. Turns out they’re the same thing, and it’s pretty cool.

It’s not a new idea to have functionality in code editors to insert snippets of code. Emmet goes a bit further than that - and like many tools made by programmers for programmers it goes way to technical to the point where you need to memorise ridiculous amounts of combos to to some awesome stuff (I’m looking at you whoever made it possible to use vi commands in VS Code). Nevertheless, Emmet is extremely handy even at my n00b level.

The key thing to know, is that it borrows from the CSS selector syntax. So if you want to insert <div></div> you enter div and press tab.

Want a div with a class named “container”?

div.container becomes <div class="container"></div>.

The same trick works for an id - Enter

div#emmet becomes <div id="emmet"></div>

Would you like a div, with a heading inside? The greater than sign nests elements, so div>h4 becomes:

<div>
 <h4></h4>
<div>

If you’d like some text up in there, try div>h4{Hello world}

<div>
 <h4>Hello world</h4>
</div>

You can repeat things numbers of times, so to create a list with three items, try ul>li*3 to get:

<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>

That’s about as complex as I’d want to get, though of course it gets more complex. It’s a super handy feature that quickly becomes second nature.

Vim

Wed, 10 Aug 2022 00:00:00 +0000

I’ve been working through the Missing Semester lectures from MIT, and recently completed the lecture about the Vim editor. Vim is a test editor, called from the command line, and optimised for programming - in the sense that it assumes most of the use of the editor is navigating around a big text file making small changes rather than entering large amount of test.

It uses simple, short key presses (as opposed to mouse movements or using menus or toolbars) to achieve things. This makes it highly efficient for good typists who know all the commands, and slightly incomprehensible to those who do not. An additional level of complexity is the idea of modes. Vim has several modes, the main ones being:

Normal - for navigating around and making those little edits. To get into this mode press the esc key
Insert - for entering text - ie the mode you’d assume you were in when opening an editor and not that you would have to press the letter ‘i’ to make that happen
Command - to run commands - like saving or closing VIM To get into this mode press the ‘:’ key

Apart from this lecture here are many good guides for learning VIM, a couple I’ve looked at are this one from OpenSource.com and this one from Stanford.

Even though I will never invest the time to become a power user of Vim, it’s available most places you’ll be using the command line, so the basics are a requirement for any programmer. Plus if you’re ever hired by a film production company to advise on a computer hacking scene, you’ll need it to scroll though some syntax highlighted Javascript.

Great cheat sheet from https://www.vimcheatsheet.com/

Editor on blog.iankulin.com

Who is Emmet?

Vim