One of the features of WebStorm is the implementation of Zen Coding. This allows you to type a string of CSS selectors and hit a key to insert an html layout based on the css selectors. For example:

… can be expanded into:

As you can see, this would greatly speed up the web development process when developing templates. However, WebStorm can take this a step further using Live Templates. Live Templates allow you to take your own “snippets” of code and assign them an abbreviation and context. To demonstrate this, I will use Cufon usage as an example.

First, we will start by creating a new html file and typing “html:xt” and hitting tab to generate the basic html tags.

Pretty nifty, huh? Now let’s create the Live Template for Cufon. To do this, go to File > Settings and then click on Live Templates on the left side of the settings screen. Then click Add… and this will open a new dialog box. We will use cu as the abbreviation and Cufon as the description. Then we paste the code in the text area. Now you will want to select the context, which is the context in which the code will be inserted. In this case, we will be inserting into an HTML file so we will put a check mark beside HTML.

Click OK to add the Live Template and click OK to close the Settings. Now before the closing head tag, we can type cu and hit Tab to insert our code.

Now that you have the basics down, let’s try adding some variables. This will allow you to quickly tab through your inserted code and add values. In this example, we will change the scripts folder, the font file name, and the CSS selector. Go back to the Live Templates area of the Settings, find the one you created and click Edit…

Below, you will see some modifications I have made to the code.

I have created three variables: $VAR0$, $VAR1$, and $VAR2$. These are the places where your cursor will go each time you hit Tab after inserting your code. For $VAR0$, this will be the folder location where the scripts are located. This location will likely be different for various projects, but will be the same for both cufon-yui.js and the font’s javascript file. Hence,$VAR0$ is inserted before these two script files.

$VAR1$ is the name of the font’s javascript file, which will also be different for each project you work on, and $VAR2$ is the CSS selector that will tell Cufon where to use the font. By adding these variables, you can now rapidly change values right after inserting the code.

This is only the tip of the iceberg. Look forward to more great things from the Atomic development team in the future!