In this article, I'd like to show how much more efficient designing in the browser…
Install Awesomeness the easy way
Opening index.html in your editor of choice is not enough to start a development project these days. Doing web development in 2014 means working with libraries, preprocessors like SASS or HAML and optimisers that minimise and concatenate files to boost website performance. Yeoman, Bower and Grunt help you that you don’t get lost amidst all of these components.
$ yo awesomeness
It doesn’t just have a nice ring to it, it also saves you a lot of work. It executes the package generator-awesomeness which builds on Yeoman and scaffolds a new development project for you. That means, it copies all the needed files and directories, so you can start coding right away. To do that, Yo will first ask you how you want to call your project, e.g. awesome-project. This will generate the following directory structure:
awesome-project/ bower.json bower_components/ dist/ node_modules/ package.json
awesome-project/ holds an example
index.html to get you started and all the SASS-files you need to customise Awesomeness. The libraries used by Awesomeness are loaded into
bower_components/. That’s the work of Bower, a package manager for the web. Much like gem or the Debian package manager, Bower knows most common (and obscure) libraries and their dependencies. So Bower won’t download a version of Modernizr that’s incompatible with your jQuery version. You can easily add new libraries with
bower install NAME --save. The appendix
--save saves the dependency in
bower.json, so that your next
bower update will correctly update it.
Awesomeness builds on SASS, which means faster development time and better maintainability using features such as variables, inheritance and modular code. However, the SASS code has to be compiled before the browser can display it. This is where Grunt comes in:
$ grunt serve
This command starts the taskrunner Grunt, which can be compared to make or ant. It compiles the SASS code with compass to CSS, optimises HTML with htmlmin and then starts Browsersync. Browsersync is a handy extension for Grunt, that automatically opens a browser window with your Awesomeness project. All changes to HTML or SASS in
awesome-project/ are now automatically processed in the background and directly injected into your browsing session. Changes appear without having to reload.
But Browsersync can do more. With multiple browsers (e.g. on different devices) accessing the same URL, it automatically syncs all interactions between them. For example, if you scroll in a desktop browser, your smartphone automatically scrolls with you. That saves a lot of time when doing crossbrowser or crossdevice testing.
If you want to work with your own web server instead, that’s fine, too. Just run
grunt build and it will compile your code into the build-directory
Apart from Awesomeness there are hundreds of generators for Yeoman to choose from, from an AngularJS application to a WordPress widget. Combined with Bower and Grunt there is no more excuse for wasting time on downloading the latest libraries and manually setting up your file structure.Show all articles