Processing Your Visualisation Files
There’s actually no need to process your HTML, CSS and Javascript files behind your visualisations before uploading them to the web.
There are however benefits to doing so. Quite a number of use-cases, but a few are -
- You want the pages to load faster — this can be achieved by minifying the files
- You would prefer that your code not be easily read by others — this can be achieved by uglifying the files (but do note that this is easily reversed by beautifying the files)
- You might not be using CSS direct, but via an extension language such as Sass, and you require an easy way of compiling Sass to CSS
- You might want to write code in the latest version of Javascript, but want your Javascript files to be backward compatible, and you want an easy way of using Babel to compile your Javascript code to be backward compatible.
One commonly used tool is Webpack. It’s open source and quite easy to use, but has a slightly more steep (albeit not that steep learning curve).
My personal preference is CodeKit. It’s an app that can help with the processing of files and more. You can find out at its website, but for the purposes of this post, I’ll just do a quick run-through of how to use it to build a simple set of HTML+Javascript files.
First, assume have a folder with my index.html, a Javascript file, and libraries.
We drag all of it into a newly created ‘source’ folder, and create a ‘build’ folder at the same level.
Open CodeKit. Go to the menu bar and select — Tasks > Apply Best Defaults for Using Build Folders.
Now, drag the whole folder (the one that contains both the ‘source’ and ‘build’ folders) into CodeKit.
Go to options (the one with a cog icon), and select ‘This project uses a build folder’.
Now go back to your files. On the right bottom part of the right-most pane, you will see a pane with the button ‘Build Project’. Click it. Almost instantly, a new set of files will be created in the ‘build’ folder.
Take a look at the Javascript files in the ‘build’ folder. You will see that they have all been minified and uglified, and are pretty much impossible to read!
