Emmet is a powerful and expressive tool for web developers to abbreviate HTML, SVG, XSL and other similar markup languages. It has many snippets that abbriviate CSS too. Currently Emmet is mostly used in IDEs (Integrated Development Environment) to speed type HTML markup using a CSS selectors inspired syntax. These days most IDEs come with Emmet plug-in that dynamically expand Emmet abbreviations as you type and replace them with corresponding HTML/CSS. Emmet also works at the server side using a NodeJS library as well as at the client side using a client JavaScript library. This opens up exciting possibilities for reducing server to client data transfer volumes and thereby enhancing web application performance. For example, consider this scenario. The server sends the following Emmet snippet to the client browser:
ul.nav.nav-tabs>li*4>a[href=”#step-$”]{Step $}In the browser, Emmet expand-abbreviation JS library function expands it to:
<ul class="nav nav-tabs">
<li><a href="#step-1">Step 1</a></li>
<li><a href="#step-2">Step 2</a></li>
<li><a href="#step-3">Step 3</a></li>
<li><a href="#step-4">Step 4</a></li>
</ul>Cool, right? That is a whopping 75% reduction in data transfer size! It can tremendously improve the performance of your web app - especially if your app…
