Frontend development tools 2/2014
(By Pål & co.)
Build & live reload
Have a dev server that live updates when files are saved and can also run tests, builds etc. – see an example here: https://github.com/iterate/iterateconf/blob/master/Gruntfile.js (using grunt with watch).
Of course, make sure to use JSHint, testing etc.
Any, but f.ex. in LightTable it is possible to have code in one pane and live preview of the page in another next to it so the feedback loop is really short.
Tip: Use Chrome Web Inspector’s workspaces as development environment when doing lot of changes to HTML/CSS/LESS – “inspect element”, change it, WI can store changes back to the original files, after proper configuration. See this screencast of fully in-Chrome development and description of worskpaces at HTML5 Rocks. Basically: chrome://flags – “Enable Developer Tools experiments,” web inspector settings – add a new workspace, right-click on a file in the Sources tab and “Map to Network Resource”.
AngularJS: Batarang is a must-have Chrome plugin for inspecting scopes and variables.