As a web developer, it is important to stay on top of the latest tools and techniques in the development community. Rapid Web Development is not so much a development as it is an evolution in efficiency. As web developers take on more projects, they must continually find ways to improve their efficiency so they can move on to the next project sooner.

The most important tool that web developers use is the IDE, the Integrated Development Environment. This is where all the “code weaving” takes place, and it is what makes rapid web development possible. While many developers may be happy using Adobe Dreamweaver, my IDE of choice isJetBrains WebStorm. It is free for educational and open source purposes, but a personal license is $69. This is very reasonable, considering Adobe’s Dreamweaver is $400 and is not as powerful or as customizable.

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:

1.<ul id="navigation">

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!

Blog Categories

Interested in a specific topic? Review the categories below and get the info, news, and tips you need based on your interest!

Recent Posts