Chrome dev tools
LiveReloadHow many times on average do you hit the refresh key on your keyboard every day? A lot, right? LiveReload is a simple Web protocol that triggers events to the clients whenever files are modified Clients can handle this event in their own way, even if the most common use case is when a file is modified (or is a compiled version). The client/server come in various implementations.
We personally use the one bundled in the Grunt watcher plugin, as well as this simple Chrome extension as a client (which has the advantage of being switchable, because you don’t always want live reload, after all). You can see it in action here.
Talking about Chrome extensions, the Chrome store is full of powerful ones. Go and explore, and you’re sure to discover things that will make your life far more easier.
Here are some of our favorite ones:
- WhatFont, which lets you discover the rendered font of any element on any website (useful when looking for the perfect typography you saw on another site, or for debugging your font-face styles).
- Page ruler: another useful one, mainly because just like any front-end developer, you’re obsessed by pixel perfection.
- Proxy SwitchySharp can also be of great help when it comes to debugging localized information (default currency, phone numbers, etc).
- And of course, our Chrome app to get the most of mention!
Mocha/Chai/SinonDoes testing make you queasy? It’s often the case, mainly because it requires a ton of bootstrapping and if you don’t design things to be testable from the beginning, things can become very hard.
Fortunately, we now have great testing frameworks, as powerful as what you may have already used with other languages. The two main frameworks today are Jasmine and Mocha.
The chosen syntax for Jasmine is the default one, described in the official documentation. This unofficial extension enhances Jasmine async feature to provide the same thing that Mocha. Take a few minutes to understand this sample and observe how clearer is the Mocha syntax.
Unlike Jasmine, Mocha offers only the behavior testing structure (more about BDD), and not the assertion/mock framework. But there’s nothing bad here, since it perfectly integrates with dedicated frameworks like Chai and Sinon. Sinon comes with a full-set of functions to easily mock objects and stub methods.
For example, here’s how you can assess that a method has been called using the Sinon’s spy type (taken from the excellent documentation):
Chai is remarkable in the way that it lets you make assertions in a very similar way to natural language.
For instance, please consider the following example, leveraging the should assertion syntax: