How to install:

1. Remove current Emmet package from Package Control.
2. Quit Sublime Text editor.
3. Clone plugin repo and switch to v1.1 branch: git checkout v1.1. Or simply download and unpack plugin into Packages folder of Sublime Text.
4. Start editor.

New features of v1.1

• Support of Can I Use database. All CSS abbreviations are resolved against “Can I Use” database to provide vendor-prefixed properties. By default, Emmet uses previous 2 versions of all browsers, but you can tweak this behavior with caniuse.era and caniuse.vendors preferences. See module header for description.
• Full LESS and SCSS support. Actions like Toggle Comment, Update Image Size, Select Item and so on are now working with LESS and SCSS (not SASS) syntaxes.
• Slim and Jade output syntaxes support. You can use the very same Emmet abbreviations to generate Slim and Jade content.
• Updated CSS Gradient generator supports W3C syntax specs, Can I Use database and multiple definitions (e.g. you can now expand lg(red, black), lg(yellow, blue)).
• Boolean attributes. You can now write boolean attributes (attributes with the same name and value) a bit shorter by placing dot after attribute name, like so: inp[checked.] → <input type="text" checked="checked" /> or <input type="text" checked />, depending on your output profile. Some attributes are globally defined as boolean (for example, contenteditable) so you don’t have to place dot after them. See module header for more info.
• Implied attributes. Some HTML tags are useless without their required attributes, for example, <img> tag without src attribute. Instead of writing img[src=image.png], you can use shorter syntax: img[image.png]. Every invalid attribute name will be treated as a value for empty attribute. You can also wrap default attribute value in quotes, like so: img['my image.png'].
• Default attributes. Pretty much the same as implied attributes feature, but allows you to output specific attributes only if default value is provided. For example, script will produce <script></script>, but script[jquery.js] results to <script src="jquery.js"></script>. Default attributes are used in abbreviation definitions in snippets.json.
• New “Update Tag” action allows you to easily update any existing HTML tag with Emmet abbreviation. For example, if you have <div class="c1"> element, place caret on it, run “Update Tag” action (Ctrl+Shift+U) and enter .+c2[title=Hello] to update tag to <div class="c1 c2" title="Hello">. This action uses additional syntax to overwrite, modify or remove attribute. By default, all attributes in abbreviation will overwrite existing ones. Precede attribute or class name with + to append value, add - before attribute or class name to remove it. More docs and examples will be available later.
• “Match Tag Pair” was renamed to “Balance” and now works with CSS. You can quickly select property value, full property or selector content.
• Option to write CSS abbreviations on single line: in syntaxProfiles.json, set CSS’ output profile to css_line. Read docs about output profiles.
• New syntax to write RGBA colors. You can add .N after color value in CSS abbreviation to produce RGBA color: c#dca.7 will produce color: rgba(221, 204, 170, 0.7).

Under the hood

• Emmet is now fully Node.JS-compliant. You can use Emmet in your own packages (npm package will be available later).
• Huge performance boost on many actions, especially in interactive actions (Wrap With Abbreviation, Expand as you type) on large documents.
• Many other bugfixes and improvements.

If you experience any issues with beta, please fill an issue, but read CONTRIBUTING file first, especially about keyboard shortcuts.

What is TernJS?

TernJS is a JavaScript inferring engine written by Marijn Haverbeke. Basically, it can trace context object in JavaScript and give you some info about it: its type, available properties, definition and so on. It can provide you with great advantages while editing JavaScript code: correct code completions, basic refactoring (like variable renaming) and location of object definition. Also, it’s written in JavaScript and it can be extended.

Usually, features like valid code completions and variable renaming are available in big IDEs like Eclipse and WebStorm, but now they are coming into your favourite editor with Sublime Tern plugin!

How to install

Sublime Tern can be installed as any other plugin with Package Control:

1. In ST editor, call “Install Package” command from Command Palette.
2. Find “TernJS” in plugins list and hit Enter to install it.

When installed, Sublime Tern will automatically download PyV8 binary required to run this plugin. If you experience issues with PyV8 loader, you can install it manually.

Warning: if you have Emmet plugin installed (and you really should :-) and using Sublime Text 2, you have to make sure you have the latest PyV8 binary. It must be automatically updated within 24 hours (you need to restart ST2 editor), but you can forcibly update it:

1. Quit ST2 editor
2. Completely remove PyV8 package (remove this folder from ST2’s Packages folder)
3. Start ST2 editor. Latest PyV8 should be downloaded and installed automatically.

With old PyV8 binary, you’ll experience a lot of crashes.

How to use it

You should keep in mind a few things before using Sublime Tern plugin.

Projects first

To get most of Sublime Tern plugin, you should edit your files inside Project. When you open a JavaScript file in ST editor, plugin automatically detects project for it and loads all JS files from it for code completion (read “Configuring Project” section below to alter this behaviour).

Otherwise, if you’re editing file outside project, code completion and other actions will work for this file only.

Slow start

When you open JS file from project for the first time, you may experience editor slow down, especially for large projects. It’s because Sublime Tern plugin loads and analyses JS files from your project so you have to wait a bit.

Also, you may receive a “slow plugin” warning in Sublime Text 2: you can either skip it or disable this warning.

Reload TernJS

If you create or update files outside ST editor, or you believe that TernJS doesn’t contains most recent version of your project files, you can force Sublime Tern plugin to update it’s state. Simply call “TernJS: Reload” action from Command Palette to re-initialize TernJS servers.

Available actions

• Code Completions. Press Ctrl+Space to show completions for current context. They can also appear automatically, depending on your ST preferences.
• Jump to definition: goes to file and position where context variable/function in defined.
• Rename variable: marks context object occurrences and allows you to rename them. Press Enter or Esc to commit changes.
• Next/Previous occurrence: selects next/previous occurrence of context variable/method.
• Reload: reloads all JS files from project. Use this action if your files were changed outside ST editor.

All actions are available in ST’s Command Palette and have no default keyboard shortcuts. You can define them by your own, valid command names are:

• ternjs_jump_to_definition
• ternjs_rename_variable
• ternjs_next_occurance
• ternjs_previous_occurance
• ternjs_reload

Configuring project

By default, Sublime Tern loads all JS from your project folder and provides completions for standard ECMA5 objects like String, Array etc. If you want to load specific files only or have completions for browser objects or jQuery, you need to configure project first.

In Sublime Text, projects are defined by simple JSON file with .sublime-project extension. You can add ternjs section into .sublime-project file to set-up TernJS for your project.

The example project file with TernJS config may look like this:

{
    …

    "ternjs": {
        "exclude": ["wordpress/**", "node_modules/**"],
        "libs": ["browser", "jquery"],
        "plugins": {
            "requirejs": {
                "baseURL": "./js"
            }
        }

    }
}

Available options:

• include and exclude are glob patterns for files that should be analysed by TernJS. By default, plugin loads all JS files from project folder (equals to "include": ["**/*.js"]). With these options, you can narrow down file list that should be analysed by TernJS which speeds-up overall plugin performance and gives you less noise for completions.
• libs: array of static type descriptions. These are JSON files with types structure that can be cheaply loaded by TernJS for code completions. See list of predefined descriptions. You can also specify a path (either relative to current project or absolute) to your custom JSON files.
• plugins: set of plugins for TernJS instance. Plugins can extend inferring engine and provide completions for some complex situations, for example, to resolve Require.JS or Node.JS modules. See list of redefined plugins. For custom plugins, add pluginPath property into your plugin config with path to plugin folder.

Known issues

Sometimes, especially on complex libraries like jQuery or Underscore.js, you may experience heavy slowdowns or even crashes. Check ST console for possible errors. If you see something like this:

RangeError: Maximum call stack size exceeded ( js/infer.js @ 43 : 21 )

…you should:

1. Report to main TernJS repo (like so).
2. Exclude this file(s) from project config with include and exclude preferences (see “Configuring Project” section above).

Please note that Sublime Tern (as TernJS itself) is in early beta stage and may not work properly or even crash your editor. If you experience issues with code completions or crashes, you should report directly to main TernJS repo or Sublime Tern plugin repo.

How to install:

The preferred way to install Emmet is to use Package Control:

1. Open Command Palette in Sublime Text
2. Pick “Install Package” command
3. Find and install “Emmet” plugin

Or install it manually:

1. Quit ST3.
2. Clone plugin repo or download and unpack plugin into Packages folder of ST3.
3. Start editor.

The plugin will automatically download and install PyV8 binary for OS. The PyV8 is required to run Emmet (written in JavaScript) as Sublime Text plugin (should be written in Python). If it doesn’t happen or you experience issues, try to install it manually.

tl;dr - Tools to make a professional high-performance website with DocPad

• Use docpad-plugin-menu for automatic menu generation for your website.
• Use grunt-frontend and docpad-plugin-frontend to minify CSS and JS files and cache them properly.
• Create a special debugging environment for docpad-plugin-frontend to use source CSS and JS files instead of minified ones.
• Set up a web hooks on GitHub and Gith on your server to automatically deploy website after each commit.
• Setting up nginx to properly cache static files and save CPU resources.

DocPad is a static website generator written in CoffeeScript. Unlike websites created with regular CMS as Django, Drupal and Wordpress, static websites, being a set of simple pre-generated HTML files, consume very little of server resources. That’s why you need web server like Apache or nginx only to serve such websites

It was an ideal solution for Emmet documentation (source code) website because it not only provides a simplified development process, but allows me to reduce my hosting costs greatly.

But DocPad, like many other generators, has a several disadvantages, which do not allow to create a truly professional and fast websites. So I decided to fix them by writing a few plug-ins:

• docpad-plugin-menu - Automatic web-site menu generation.
• grunt-frontend - “smart” front-end assets builder.
• docpad-plugin-frontend - outputs CSS and JS files, builded with grunt-frontend, with proper correct caching, and provides assets management across templates.

If you are not familiar with DocPad, I recommend you to see and read Introduction to DocPad for better understanding what I’m going to talk about.

Menu generation

The docpad-plugin-menu can generate a structured menu for all documents of your website (that is, for all the files in src/documents folder). This plugin adds a generateMenu(url) method to the templateData object: the context object of all templates rendering. This method takes the URL of the page for which the menu should be generated and returns a menu object, which can be rendered, for example, using partials.

For further information about the plugin and usage examples visit project’s main page.

Building front-end assets

For convenience, I usually split-up my CSS and JS into several files, which are concatenated and minified for production website. It’s a common practice for high-performance websites development. For building, I use Grunt.js which seems to have all the required plug-ins for concatenation and minification.

But I didn’t find anything suitable there. The problem is that minified file’s modification date is very important for me because I’m going to use it in file’s URL to effectively reset file cache. Therefore, the destination file should be updated only if any of the source files did.

To solve this problem I wrote the grunt-frontend plugin. Here’s how it works. During concatenation and minification of source files, it writes files list and their md5 hashes into a special .build-catalog.json file. On the next build plugin compares saved file list state with the original one and if nothing changed, it doesn‘t update the destination file.

This not only reduces the build time, but also allows you to save important data of destination file such as modification date and md5 hash. This data is stored in .build-catalog.json (it’s better to keep this file out of version control) and can be read by third-party apps.

The grunt-frontend plugin uses Yandex’s CSSO with automatic @imports inlining and UglifyJS for minification.

For more info visit plugin’s project page.

Assets management

Very often there is a need to manage collections of CSS and JS files on different pages of your website. For example, you want all pages to use a set1 files collection; all pages of /about/ section must additionally use set2 and set3 collections, but for the /about/contacts/ page you want to use set4 instead of set2 (i.e. set1, set4, set3, in exactly that order). Additionally, each resource URL must contain file’s last modification date for effective cache resetting.

I wrote a docpad-plugin-frontend for assets management. It adds assets(prefix) method to templateData, which allows you to get a sorted list of assets from the current document and its templates chain. If the project root folder contains .build-catalog.json, the plugin reads it and returns a list of resource URLs prefixed with a modification date.

For example, the problem with resource management described above can be solved as follows. In meta-data of default.html.eco template specify the primary files collection:

---
js: "/js/fileA.js"
---

For about.html.eco template, which is inherited from the default template and used by documents of /about/* section, define the following:

---
layout: default
js2: ["/js/fileB.js", "/js/fileC.js"]
js3: ["/js/fileD.js", "/js/fileE.js"]
---

In /about/contacts/index.html document, override js2 collection:

---
layout: about
js2: "/js/contacts.js"
---

Now, during /about/contacts/index.html document rendering, the assets('js') method call will return the following collection of files:

• /js/fileA.js
• /js/contacts.js
• /js/fileD.js
• /js/fileE.js

As you can see, plugin usage is pretty simple: come up with a prefix for resource category and use numeric suffixes to define collections of files. Then, call the assets() method with category prefix inside templates to get sorted list of files. Collections with the same name are overridden.

For more info about how to use plugin visit project’s home page.

Debug Mode

Very often users of your website may send you error reports: a JavaScript or CSS layout problems in specific web-browser. But all your CSS and JS files are minified and it’s pretty hard to track the problem source.

You can track issues using Source Maps in the future, but currently not every minifier and web-browsers supports them.

The docpad-plugin-frontend has a special debugging mode. Since the structure of minified files is stored in the JSON catalog, we can easily extract source files and use them instead on minified ones when necessary.

To do this, you can create a separate DocPad environment with frontendDebug: true option. When frontendDebug option is set to true, the assets() method will try to return list of corresponding source files found in .build-catalog.json.Here’s example docpad.coffee config with debug environment:

module.exports = {
    ...
    environments:
        debug:
            frontendDebug: true
}

Now if you run DocPad with debug environment, you will get a HTML-page with the original CSS and JS files so you will be able to spot errors:

docpad run --env​​=debug

Automatically deploy from GitHub

I’ve set-up my server so it can automatically re-generate a full website after each commit into master branch of project’s GitHub repo.

On GitHub I’ve set up a custom web hook and Gith on my server.

Gith is a convenient Node.JS web server which is able to receive and filter payload coming from GitHub web hooks. My Gith server script that deploys website looks like this:

var childProc = require('child_process');
var path = require('path');

var gith = require('gith').create(3000);

gith({
    // Listen to the hooks from "master" branch only
    branch: 'master'
}).on('all', function(payload) {
    console.log('Run deply script on', new Date());

    // Run deploy script
    var deploy = childProc.spawn('sh', ['/web/deploy.sh']);

    deploy.stdout.on('data', function(data) {
        var message = data.toString('utf8');

        if (~message.indexOf('subscribe')) {
            // Docpad may ask for newsletter subscription, say "no"
            deploy.stdin.write('n');
        } else if (~message.toLowerCase().indexOf('privacy')) {
            // Docpad may ask about privacy policy, agree with it
            deploy.stdin.write('y');
        }
    });

    deploy.stderr.on('data', function(data) {
        console.log('Error: ', data.toString('utf8'));
    });

    deploy.on('exit', function(code) {
        console.log('Deploy complete with exit code ' + code);
    });
});

The deploy.sh script looks like this:

#! /usr/bin/env bash
git pull
git submodule foreach 'git checkout master && git pull origin master'
npm install
grunt
docpad generate
find ./out -type f \( -name '*.html' -o -name '*.css' -o -name '*.js' \)  -exec sh -c "gzip -7 -f < {} > {}.gz" \;

Configuring nginx

I use nginx as a web server, which is highly optimized for static files serving. In nginx website config, we need to specify the following:

• Rewrite paths for static files: remove the timestamp prefix from URL and send the correct caching headers.
• Serve static files gzipped to reduce the amount of transferred data.

If you take a closer look at the deploy.sh script, you’ll see that in the last step we created a gzipped versions of HTML, CSS and JS files. There is a special nginx HttpGzipStaticModule which can serve a precompressed .gz file (if it exists at the same location) instead of compressing it for each request. This trick allows us to save CPU resources. To use this module, you must add it to nginx at compile time:

./configure --with-http_gzip_static_module

My nginx config looks like this:

server {
    server_name  your-server.com;
    root         /path/to/web-site/out;

    index  index.html index.htm;

    # trim modification date from resource URL
    location ~* ^/\d+/(css|js)/ {
        rewrite ^/(\d+)/(.*)$ /$2;
    }

    # cache front-end assets
    location ~* \.(ico|css|js|gif|jpe?g|png)$ {
        expires max;
        access_log off;
        add_header Pragma public;
        add_header Cache-Control "public";
    }

    # enable precompressed .gz files serving
    gzip_static on;
}

The first thing I would like to introduce to you is a CodeMirror Movie. You can see it in many pages of documentation web-site: it is the plugin that shows interactive code demos.

When I started working on the documentation, I wanted to demonstrate all Emmet features in a more descriptive manner. Reading long texts describing how actions work is always boring and tedious, it is much more better to see “live” how they work.

Usually, developers record videos with demos, but it’s not my case for many reasons:

• Recording a high-quality video takes too much time. For example, it took me about four hours to create a six-minute video about Zen Coding v0.5.
• The video is hard to update. For example, if someone finds errors or users will not understand how action works, it’s likely required to create a new movie.
• Because Emmet is written in pure JavaScript (and hence works in web browsers), I wanted users not only to see how things work, but to try them in action right in documentation pages.

To solve these and other problems, I’ve created CodeMirror Movie plugin. It’s pretty easy to use it: you create a small script, which defines what should be done by plugin. For example, ”write the text, wait a moment, and then show the tooltip on current caret position”.

As you can guess from the plugin name, it is based on amazing CodeMirror editor, which means that you can create demos for any programming language supported by this editor.

Creating a movie

Usually, to create CodeMirror editor instance you create a <textarea> element with the initial contents of the editor and call the following JS code:

var myCodeMirror = CodeMirror.fromTextArea(myTextArea);

To create a movie, you need to create a <textarea> too with initial contents and movie scenario, separated by @@@ line:

<textarea id="code">
&lt;div class="content"&gt;
    |
&lt;/div&gt;
@@@
type: Hello world
wait: 1000
tooltip: Sample tooltip
</textarea>

To initialize the movie, you should call CodeMirror.movie() method and pass <textarea> ID (or element reference) as the first argument:

var movie = CodeMirror.movie('code');

// start playback
movie.play();

Movie scenario

As noted above, to create a movie you need to write its scenario.

A scenario is a list of commands to be executed. Each command is written on a separate line in the name: value form. The value can be written as JS object with command options, but each command has a pretty good default values so you can pass just a string value of the most important option. For example, the following scenario tells CodeMirror Movie to type “Hello world”, then to wait for a second and show “CodeMirror rocks!” tooltip:

type: Hello world
wait: 1000
tooltip: CodeMirror rocks!

For more info about all available scenario commands and examples visit plugin page. You can use this plugin whatever you like (MIT license). It looks especially great in JS-based presentation engines like impress.js or reveal.js. I hope you’ll enjoy it!

What has been changed since the Zen Coding?

At first, the project name has been changed. “Emmet” is gonna be brand name for new tools and not all of them will be related to “coding”.

Secondly, the project has received official web-site and extensive documentation about all available features.

Thirdly, improved CSS support: you can write property values directly in the abbreviation, create gradients and vendor-prefixed properties. Also, user’s reports about lengthy and hard-to-remember CSS abbreviations were considered and now Emmet utilizes fuzzy search for CSS abbreviations.

Here is a list of other significant changes:

• The project’s code base was rewritten from scratch. It has become more modular and extensible.
• The Python version was discarded. I found it quite difficult to maintain two versions of the core. Instead, Emmet uses bridges for Python, Objective-C and Java, which allow to fix bugs and add new features for all platforms very quickly.
• Improved implicit tag name resolver. Previously, if you tried to expand abbreviations like .item, you could receive either <div class="item">, or <span class="item">, depending on the parent tag. The resolver is now looking at a parent tag’s name and can produce, for example, <li>, <td>, <option>.
• Extensions support. Now, to add a new abbreviation or customize the output format, there’s no need to dig into the plugin code, you just have to create simple JSON files in a special folder.
• “Lorem Ipsum” generator. Previously, to get a “dummy” text for the web-site, you had to use third-party services to generate “dummy” text and then format it. Now you can get it right in your text editor, and you can control the number of generated words by simply appending a number after the abbreviation. Moreover, the generator uses all Emmet abbreviations features, allowing you to add attributes to the generated elements and control the number of created blocks.
• New ^ operator. Despite the fact that there is a more powerful grouping operator, often it takes too much time to update abbreviation with braces to output the next element one level up. Now it is sufficient to write the ^ operator to output next element one level up the tree.

What’s new since beta release

• You can control numbering base and direction with @ modifier. For example, ul>li.item$@-*5 will number items in descending order (e.g. from 5 to 1).
• To automatically align expanded CSS properties with vendor prefixes, set css.alignVendor preference to true.
• In most editors, “Update Image Size” will also work for remote images (like http://example.com/image.png).
• Fuzzy search for CSS abbreviations.
• Embedded color values in CSS abbreviations.
• Espresso, Coda and TextMate plugins are automatically updated via Sparkle.
• Notepad++ plugin now uses Python Script base (thanks to Dave Brotherstone) which is more stable and feature-rich than previous one. Also, it’s available in Plugin Manager.

The project source code and plug-ins are available in special repository. If you find any errors or have suggestions for improvement, please let me know.