As planned we're continuing our tradition to present JavaScript Developer Toolkit. Last time we've talked about Emmet and today's article I'd like to devote to HTML/CSS/JavaScript editing.
How often do you change your CSS rules and JavaScript within your browser? How often do copy/paste the changes made into appropriate resource files? It's time to do this Zen style.
IDE integration
This is my preferable way to develop and live-editing the changes. Let me show you why. Wouldn't it be cool if you could develop using your beloved IDE with all the neat plugins it offers and see the changes reflected live in the browser? Well - you can, with both Sublime Text and Webstorm we've talked about during our previous JavaScript toolkit article. You do this by installing JetBrains IDE Chrome extension for Webstorm:
or Emmet LiveStyle for Sumblime Text:
Look into their sites and see how properly things should to be configured. Both tools only offer support for Chrome, so Firefox fans will have to wait for now...
Browser Extensions
As time passed, passionate developers have been creating bunch of extensions both for Chrome and Firefox to enable this functionality. The most prominent ones are Chrome DevTools Autosave and EditCSS. However this work has not only inspired the developer community, but also the creators of both most commonly used browsers. As a result as of Firefox 11 and Chrome 28 the functionality has been bundled with the browsers, making the extensions obsolete.
Browser built-in capabilities
While Firefox has done some progress and enabled the live editing of CSS using it's Style Editor, the real advancement came from Google camp with the introduction of workspaces. It allows one to save both CSS rules and JavaScript code and even supports Sass debugging of Sass (.scss) files in the Sources panel, and view the results without having to leave DevTools or refresh the page. When you inspect an element whose styles are provided by a Sass-generated CSS file, the Elements panel displays a link to the .scss file, not the generated .css file. We'll talk more about Sass and Compass in the future. Find the time to watch the whole presentation about this feature:
