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.
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:
- 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.
- Minified: The production version that end users of the application will load.
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.