Web Platform Team Blog

Adobe

decor

Making the web awesome

CSS FilterLab + Grunt.js = Love

Note: Custom Filters is no longer supported in Chrome or WebKit Nightlies.

A couple of weeks ago we released a new tool called CSS FilterLab. Web designers can quickly learn the syntax of the new CSS Filters specification by using the tool’s drag-and-drop interface. Moreover, the built-in filters showcased in the tool are already supported in stable browsers such as Safari 6 and Chrome, meaning that developers can copy-paste the generated CSS code into their pages today. The tool can also create and preview CSS3 animations, so if you didn’t see CSS FilterLab already, I highly recommend checking it out.

By the way, the tool itself is completely open-source and written in web technologies. We’ve hosted it on GitHub, and it’s happily waiting for your issues and pull-requests.

The awesome part of open-source projects is that other developers get to see your code. A couple of minutes after releasing the project on GitHub, Hans Christian Reinl suggested an improvement to the build release workflow by recommending we use grunt.js to build the project.

As an educational open-source project, we didn’t want to obfuscate our code because we wanted developers to view the source, add breakpoints, and debug the code. Thus, we didn’t bother minifying the source code. However, this is the web, so loading 30 JavaScript files is never a good idea.

The project already used SASS CSS files, so we already had a minimal build process. We had to preprocess the SASS files manually and integrate the CSS output into the repository. By the way, integrating generated files into your repo is almost never a good idea, as merges quickly start becoming a pain.

This was the first time I’d heard about Grunt.js, so I started looking into it. Grunt.js is a build system, like make or ant, but it is really small and easy to understand. Moreover, it already has plenty of plugins for different types of build tasks you might need in your web project.

I still wanted the luxury of debugging the original code, so it turned out we need 3 different versions of generated files:

  1. Development: Includes the unprocessed JavaScript files, perfect for debugging. This is published using a different filename: index.dev.html.
  2. Concatenated: Includes all of the JS files concatenated into one file, but not yet minified. This is helpful in debugging concatenation and minification bugs. This version is also available as: index.concat.html.
  3. Minified: The production version that end users of the application will load.

Grunt.js feels natural for web developers as it’s written in JavaScript and uses Node.js. Even the configuration file is a JavaScript file, so you are free to use any Node.js library. For example, I used embeddedjs, a templating framework that uses JavaScript syntax to generate different index.html files. Each index.html can include different JavaScript and CSS files for different targets.

We are hosting a live version of CSS FilterLab on html.adobe.com, so we decided to add an Adobe logo on only this version. Our Grunt.js script detects whether a “branding” folder exists under the same project and uses it to “patch” the configuration as needed.

Another interesting command line tool is “grunt watch”. It detects changes to your project files and triggers the appropriate tasks to regenerate the project. If you are used to saying that your build command is hitting the refresh button, then you’ll feel right at home.

There are more details about the Grunt.js build system on the CSS FilterLab GitHub project page. Of course, you’re welcome to fork it and send us pull-requests.

Comments are closed.