Emmet – A must see if you ever write HTML!

June 7, 2018
Reading Time: 2 minutes

VS Code + Emmet

If you’ve spent any amount of time programming, you will learn quickly to enjoy a particular editor or IDE. The great part of Visual Studio Code is that you can extend it in ways that you’d never believe sometimes. Emmet is just one of those ways.

Emmet might be the coolest extension I’ve seen. The ability to expand a sequence of characters into actual HTML or CSS is incredibly nice – especially once you get into the habit of using it.


  1. HTML5 Boilerplate
  2. Tag Manipulation
  3. Custom Tags
  4. CSS
  5. Cheat Sheet

HTML5 Boilerplate

Take this for example:

Just some boilerplate HTML5 setup syntax.

Believe it or not, you can very quickly create this with 6 characters and a ‘tab’ – ‘html:5’, tab

Check it out:

Emmet simple expansion for html5 boilerplace

Very cool!


Tag Multiplication

The power of Emmet really comes into play when you’re looking to create an expansion of some slightly more complex html. For instance, what could be a common scenario is to have a list with many list items in it. Doing this again requires very little work:


Custom Tags

It even works for custom HTML tags, which is especially nice when working with a front end framework like Angular, React or Vue:

This extension is just extremely flexible.


Another area that you can utilize Emmet is with CSS files too.

Just incredible how well it speeds up boilerplate syntax.

Cheat Sheet

There are so many shortcut sequences that it’s quite overwhelming to say the least, but to get it down you will be crazy efficient. Check out the entire Emmet cheat sheet here: https://docs.emmet.io/cheat-sheet/


One of the most important parts of development unfortunately (or fortunately?) requires us to create a lot of the same exact code/syntax with very similar constructs all the time. Being able to be more efficient when working with that boilerplate set will allow you to spend more time working on solutions – a win for everyone. If you get a chance, I highly recommend seriously using Emmet. You won’t regret it.

Hiatus Over! Get More Efficient Today!

May 26, 2018
Reading Time: 1 minute

It’s been well over a year since I last made a write up. In that time I’ve seen contracts and projects come and go. I’ve created a full-stack startups MVP (Angular/Node) and continued building my client list. I’ve taken the time to get a great feature of using async/await in ES6 to good use – it makes reading async code a lot easier. And, I’ve also updated the theme for the blog.

Currently I’ve been looking to get further integrated with Blockchain and developing additional iOS apps. I already have a number of contributions to some additional Crypto currencies. Being able to work with many talented individuals over the last year has also been a great experience. I look forward to discussing these and other technologies as I work with them.

If there’s one thing you should start doing today it would be to get a Jenkins build server setup and working for the work that you’re doing, whether it’s Web or Mobile. The amount of additional efficiency that you’ll gain will be significant.

Here are some of my favorite Jenkin’s Plugins:

1) Slack Notification Plugin – Get slack notifications for your jobs as they build (or fail)

2) Publish Over SSH – Allows me to very easily setup everything to be pushed to the deployment target.

3) Embeddable Build Status – Whether your using a formal PR setup, thus allowing the code mergers to understand the build status of your branch, OR if you have a repo that you want others to know about the build status, this very handy plugin gives quick build details to a user.

4) Sounds Plugin – I sometimes don’t want to watch for build notifications, but would rather hear a sound on success / failure. This plugin allows just that.