cool tools that make front-end development fun!
DESCRIPTION
TRANSCRIPT
![Page 1: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/1.jpg)
Cool Tools
That make Front-end development fun!
![Page 2: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/2.jpg)
Cool Tools that make front-end
development fun!
Jarne W. Beutnagel
ITDays October 2012
This slide is available at www.beutnagel.dk/itdays2012/
![Page 3: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/3.jpg)
Purpose?
![Page 4: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/4.jpg)
What is out there?
![Page 5: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/5.jpg)
![Page 6: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/6.jpg)
Buh!
- Repetitive tasks
- Starting over again
EVERY time
![Page 7: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/7.jpg)
Yeah!
- Effective workflow
- Productive environment
![Page 8: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/8.jpg)
How it used to be
![Page 9: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/9.jpg)
![Page 10: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/10.jpg)
![Page 11: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/11.jpg)
How it is now
![Page 12: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/12.jpg)
![Page 13: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/13.jpg)
![Page 14: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/14.jpg)
![Page 15: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/15.jpg)
![Page 16: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/16.jpg)
Starting
Projects
![Page 17: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/17.jpg)
Boilerplates
![Page 18: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/18.jpg)
HTML5 Boilerplatehttp://html5boilerplate.com/
![Page 19: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/19.jpg)
Initializrhttp://www.initializr.com/
![Page 20: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/20.jpg)
Bootstraphttp:// twitter.github.com/bootstrap /
![Page 21: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/21.jpg)
Jetstraphttp://jetstrap.com/
![Page 22: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/22.jpg)
CSS Grids
![Page 23: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/23.jpg)
960 Grid Systemhttp:// 960.gs /
![Page 24: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/24.jpg)
Blueprinthttp://blueprintcss.org/
![Page 25: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/25.jpg)
YUI Gridhttp:// developer.yahoo.com/yui/grids /
![Page 26: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/26.jpg)
Reset CSS
![Page 27: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/27.jpg)
ResetRemove all browser defaults
NormalizePreserve useful defaultsCorrect a few bugs
![Page 28: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/28.jpg)
Reset.csshttp://meyerweb.com/eric/tools/css/reset/
![Page 29: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/29.jpg)
Normalize.csshttp://necolas.github.com/normalize.css/
![Page 30: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/30.jpg)
cssreset.comhttp://www.cssreset.com/
![Page 31: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/31.jpg)
CSS Helpers
![Page 32: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/32.jpg)
CSS Generatorhttp:// css3generator.com /
![Page 33: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/33.jpg)
Westcivhttp://westciv.com/tools/
![Page 34: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/34.jpg)
Button Xhttp://webarti.com/best‐CSS3‐button‐maker/
![Page 35: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/35.jpg)
Colorzillahttp://colorzilla.com/gradient‐editor
![Page 36: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/36.jpg)
Subtle Patternshttp://subtlepatterns.com/
![Page 37: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/37.jpg)
Specificity Calculatorhttp://specificity.keegan.st/
![Page 38: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/38.jpg)
Prefixrhttp://prefixr.com
![Page 39: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/39.jpg)
Working with
Browsers
![Page 40: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/40.jpg)
Online Refs
![Page 41: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/41.jpg)
HTML5 Testhttp://html5test.com
![Page 42: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/42.jpg)
CSS3 Testhttp://css3test.com
![Page 43: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/43.jpg)
HTML5 Pleasehttp://html5please.com
![Page 44: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/44.jpg)
Webplatform.orghttp://www.webplatform.org/
![Page 45: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/45.jpg)
Shims &
Polyfills
![Page 46: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/46.jpg)
What it is:Shims add functionality to an API and polyfills add to the Browser API
Use functionality that is not 100% supported by all browsers
![Page 47: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/47.jpg)
Modernizrhttp://modernizr.com
![Page 48: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/48.jpg)
https://github.com/Modernizr/Modernizr/wiki/HTML5‐Cross‐Browser‐Polyfills
Polyfills, Shims & Fallbacks
![Page 49: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/49.jpg)
Dev Tools
![Page 50: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/50.jpg)
Chrome Dev Toolhttps://developers.google.com/chrome‐developer‐tools/docs/overview
![Page 51: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/51.jpg)
Firebughttp://getfirebug.com
![Page 52: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/52.jpg)
HTTP Headershttps://chrome.google.com/webstore/detail/http‐headers‐‐log‐examine/aaflgiahilldnhmlfpemmiinkcljjmli
![Page 53: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/53.jpg)
Web Developerhttps:/
![Page 54: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/54.jpg)
Scripting
![Page 55: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/55.jpg)
NodeJS
![Page 56: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/56.jpg)
What it is:Non‐blocking event driven I/O
Server scripting
Allocate resources on a as‐needed basis
![Page 57: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/57.jpg)
NodeJShttp://nodejs.org/
![Page 58: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/58.jpg)
A command line approach
Comes with NPM – The Node Package Manager (https://npmjs.org/)
![Page 59: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/59.jpg)
Fonts
![Page 60: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/60.jpg)
Libraries
![Page 61: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/61.jpg)
Typekithttps://typekit.com/
![Page 62: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/62.jpg)
Google Web Fontshttp://www.google.com/webfonts
![Page 63: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/63.jpg)
Adobe Web Fontshttp://html.adobe.com/edge/webfonts
![Page 64: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/64.jpg)
WhatFont Pluginhttp://chengyinliu.com/whatfont.html
![Page 65: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/65.jpg)
Testing
![Page 66: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/66.jpg)
Linting
![Page 67: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/67.jpg)
JSLinthttp://www.jslint.com/
![Page 68: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/68.jpg)
CSSLinthttp://csslint.net/
![Page 69: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/69.jpg)
Other linters: jquery, coffeescript, ruby, php etc
![Page 70: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/70.jpg)
User Actions
![Page 71: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/71.jpg)
Seleniumhttp://seleniumhq.org
![Page 72: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/72.jpg)
What it is:Firefox plugin
Record‐and‐playback of interactions with the browser
![Page 73: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/73.jpg)
Unit Test
![Page 74: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/74.jpg)
What it is:Check functionality of code
Test by assertion
![Page 75: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/75.jpg)
QUnit.jshttp://qunitjs.com
![Page 76: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/76.jpg)
Jasminehttp://github.com/pivotal/jasmine
![Page 77: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/77.jpg)
Read more: http://coding.smashingmagazine.com/2012/06/27/introduction‐to‐javascript‐unit‐testing/
![Page 78: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/78.jpg)
Browser Test
![Page 79: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/79.jpg)
Browserlabhttp://browserlab.adobe.com
![Page 80: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/80.jpg)
Browserstackhttp://browserstack.com
![Page 81: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/81.jpg)
Browserlinghttp:// browserling.com
![Page 82: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/82.jpg)
Hide My Asshttp://hidemyass.com
![Page 83: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/83.jpg)
Performance
![Page 84: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/84.jpg)
Pingdom Toolshttp://tools.pingdom.com/fpt/
![Page 85: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/85.jpg)
Google Page Speedhttp://developers.google.com/speed/pagespeed
![Page 86: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/86.jpg)
Loads.inhttp://loads.in/
![Page 87: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/87.jpg)
![Page 88: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/88.jpg)
Fun Markup
![Page 89: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/89.jpg)
Templating
![Page 90: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/90.jpg)
What it is:Allows for easy markup
Compiles to HTML
Can insert data
![Page 91: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/91.jpg)
Jadehttp://jade‐lang.com
![Page 92: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/92.jpg)
Hamlhttp://haml.info/
![Page 93: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/93.jpg)
Slimhttp://slim‐lang.com/
![Page 94: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/94.jpg)
Markdownhttp://daringfireball.net/projects/markdown/
![Page 95: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/95.jpg)
Fun CSS
![Page 96: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/96.jpg)
Preprocessors
![Page 97: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/97.jpg)
What it is:Add Dynamic to styling
Variables, Mixins, Operations, Functions
![Page 98: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/98.jpg)
LESShttp://lesscss.org /
![Page 99: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/99.jpg)
SASShttp://sass‐lang.com /
![Page 100: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/100.jpg)
Compasshttp://compass‐style.org /
![Page 101: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/101.jpg)
Stylushttp://learnboost.github.com/stylus /
![Page 102: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/102.jpg)
Dev Standard
![Page 103: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/103.jpg)
What it is:Structure your CSS in a consistent manner
Structure for maintainability and flexibility
![Page 104: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/104.jpg)
SMACSShttp://smacss.com /
![Page 105: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/105.jpg)
Degradation
![Page 106: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/106.jpg)
CSS3 Degrade Bookmarklethttp://davatron5000.github.com/deCSS3/
![Page 107: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/107.jpg)
Fun Scripting
![Page 108: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/108.jpg)
Preprocessors
![Page 109: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/109.jpg)
What it is:Simplify how you write javascript
Adopt a simpler language and compile to javascript
![Page 110: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/110.jpg)
Coffeescripthttp://coffeescript.org
![Page 111: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/111.jpg)
Google Darthttp://code.google.com/p/dart/
![Page 112: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/112.jpg)
Othershttps://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS
![Page 113: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/113.jpg)
Fun Apps
![Page 114: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/114.jpg)
Processors
![Page 115: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/115.jpg)
What it is:Applications that run in the background
Autocompiles LESS, SASS, Compass, Jade, Haml, Coffeescript, etc
![Page 116: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/116.jpg)
Codekit (mac)http://incident57.com/codekit/
![Page 117: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/117.jpg)
Fire.apphttp://fireapp.handlino.com/
![Page 118: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/118.jpg)
Toolkit
![Page 119: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/119.jpg)
LiveReloadhttp://livereload.com/
![Page 120: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/120.jpg)
Adobe Edge Toolshttp://html.adobe.com/edge/
![Page 121: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/121.jpg)
Online
Playgrounds
![Page 122: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/122.jpg)
GitHubhttps://github.com/
![Page 123: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/123.jpg)
JSFiddlehttp://jsfiddle.net/
![Page 124: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/124.jpg)
SQL Fiddlehttp://sqlfiddle.com/
![Page 125: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/125.jpg)
CSSDeckhttp://cssdeck.com/
![Page 126: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/126.jpg)
CodePenhttp://codepen.io/
![Page 127: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/127.jpg)
Codropshttp://tympanus.net/codrops/
![Page 128: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/128.jpg)
![Page 129: Cool Tools that make front-end development fun!](https://reader033.vdocument.in/reader033/viewer/2022061120/546c42d8af7959ba0e8b4d35/html5/thumbnails/129.jpg)