One of the most significant advancements of 2013 was the maturation of tooling and workflow processes for web developers, including the use of preprocessors for CSS and (to a lesser extent) HTML. But between shortcuts, preprocessors, frameworks and postprocessors, it’s easy to become confused in the welter of tooling technologies.

In this introduction, I'll explain what role each technology takes in the modern web development workflow.

For all their power, modern web browsers understand only a few things: HTML, CSS, JavaScript, and a few media formats. It is the limitations of these formats that generate the need for assistive technologies. Perhaps the easiest way to understand each is to categorize how closely the tool is integrated with fundamental web technologies.

Shortcuts

Everyone should be familiar with keyboard shortcuts in operating systems and applications. Naturally, the same techniques can be applied to web technologies. Shortcut tools such as Emmet allow you to quickly generate code by expanding codes and keywords via macros. The limitation of these systems is that they are one-way processes that map directly to CSS and HTML: once you expand a keyword, the code it generates is “baked” into the file, and there is no way to undo it other than by removing the generated code and retyping a new shortcut. Shortcuts are used directly on the document as you are writing it: styles.css, index.html, etc.

Some technologies, such as Markdown, may be used as either shortcuts or preprocessors,depending on the context.

Preprocessors

Preprocessors create code that is interpreted into a syntax that browsers understand. Preprocessor code is often kept as a separate source file,and only interpreted into the target code when it is saved or accessed by the browser. For example, a Sass file may be saved as a .scss document, and interpreted into a .css file that is used by the final site. This allows far greater flexibility in coding, but potentially creates a reliance on the toolset: while the code generated must ultimately be CSS or HTML, it may be very complex and difficult to change without access to the original source file and tool.

Frameworks are a very similar idea to preprocessors, but are more commonly interpreted “on the fly” by the browser, rather than being processed into target code during development.

Postprocessors

Tools that manipulate code after it has been integrated with the site. A script such as –prefix-free is a good example of this, adding vendor prefixes “live” to a site’s stylesheet after it has been published.

It’s important to understand that these tools are not necessarily exclusive of each other: it is entirely possible to use a shortcut tool like Emmet in Sass within the context of a framework. For beginners, it’s probably easier to merge these new technologies one at a time with their existing workflow, rather than taking them all on at once.

Hopefully this brief explanation has helped clear up the differences between these technologies. I’ve touched on shortcut tools in past articles; in 2014, I’ll turn my attention to mature preprocessor tools.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.