Cool Tools
That make Front-end development fun!
Cool Tools that make front-end
development fun!
Jarne W. Beutnagel
ITDays October 2012
This slide is available at www.beutnagel.dk/itdays2012/
Purpose?
What is out there?
Buh!
- Repetitive tasks
- Starting over again
EVERY time
Yeah!
- Effective workflow
- Productive environment
How it used to be
How it is now
Starting
Projects
Boilerplates
HTML5 Boilerplatehttp://html5boilerplate.com/
Initializrhttp://www.initializr.com/
Bootstraphttp:// twitter.github.com/bootstrap /
Jetstraphttp://jetstrap.com/
CSS Grids
960 Grid Systemhttp:// 960.gs /
Blueprinthttp://blueprintcss.org/
YUI Gridhttp:// developer.yahoo.com/yui/grids /
Reset CSS
ResetRemove all browser defaults
NormalizePreserve useful defaultsCorrect a few bugs
Reset.csshttp://meyerweb.com/eric/tools/css/reset/
Normalize.csshttp://necolas.github.com/normalize.css/
cssreset.comhttp://www.cssreset.com/
CSS Helpers
CSS Generatorhttp:// css3generator.com /
Westcivhttp://westciv.com/tools/
Button Xhttp://webarti.com/best‐CSS3‐button‐maker/
Colorzillahttp://colorzilla.com/gradient‐editor
Subtle Patternshttp://subtlepatterns.com/
Specificity Calculatorhttp://specificity.keegan.st/
Prefixrhttp://prefixr.com
Working with
Browsers
Online Refs
HTML5 Testhttp://html5test.com
CSS3 Testhttp://css3test.com
HTML5 Pleasehttp://html5please.com
Webplatform.orghttp://www.webplatform.org/
Shims &
Polyfills
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
Modernizrhttp://modernizr.com
https://github.com/Modernizr/Modernizr/wiki/HTML5‐Cross‐Browser‐Polyfills
Polyfills, Shims & Fallbacks
Dev Tools
Chrome Dev Toolhttps://developers.google.com/chrome‐developer‐tools/docs/overview
Firebughttp://getfirebug.com
HTTP Headershttps://chrome.google.com/webstore/detail/http‐headers‐‐log‐examine/aaflgiahilldnhmlfpemmiinkcljjmli
Web Developerhttps:/
Scripting
NodeJS
What it is:Non‐blocking event driven I/O
Server scripting
Allocate resources on a as‐needed basis
NodeJShttp://nodejs.org/
A command line approach
Comes with NPM – The Node Package Manager (https://npmjs.org/)
Fonts
Libraries
Typekithttps://typekit.com/
Google Web Fontshttp://www.google.com/webfonts
Adobe Web Fontshttp://html.adobe.com/edge/webfonts
WhatFont Pluginhttp://chengyinliu.com/whatfont.html
Testing
Linting
JSLinthttp://www.jslint.com/
CSSLinthttp://csslint.net/
Other linters: jquery, coffeescript, ruby, php etc
User Actions
Seleniumhttp://seleniumhq.org
What it is:Firefox plugin
Record‐and‐playback of interactions with the browser
Unit Test
What it is:Check functionality of code
Test by assertion
QUnit.jshttp://qunitjs.com
Jasminehttp://github.com/pivotal/jasmine
Read more: http://coding.smashingmagazine.com/2012/06/27/introduction‐to‐javascript‐unit‐testing/
Browser Test
Browserlabhttp://browserlab.adobe.com
Browserstackhttp://browserstack.com
Browserlinghttp:// browserling.com
Hide My Asshttp://hidemyass.com
Performance
Pingdom Toolshttp://tools.pingdom.com/fpt/
Google Page Speedhttp://developers.google.com/speed/pagespeed
Loads.inhttp://loads.in/
Fun Markup
Templating
What it is:Allows for easy markup
Compiles to HTML
Can insert data
Jadehttp://jade‐lang.com
Hamlhttp://haml.info/
Slimhttp://slim‐lang.com/
Markdownhttp://daringfireball.net/projects/markdown/
Fun CSS
Preprocessors
What it is:Add Dynamic to styling
Variables, Mixins, Operations, Functions
LESShttp://lesscss.org /
SASShttp://sass‐lang.com /
Compasshttp://compass‐style.org /
Stylushttp://learnboost.github.com/stylus /
Dev Standard
What it is:Structure your CSS in a consistent manner
Structure for maintainability and flexibility
SMACSShttp://smacss.com /
Degradation
CSS3 Degrade Bookmarklethttp://davatron5000.github.com/deCSS3/
Fun Scripting
Preprocessors
What it is:Simplify how you write javascript
Adopt a simpler language and compile to javascript
Coffeescripthttp://coffeescript.org
Google Darthttp://code.google.com/p/dart/
Othershttps://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS
Fun Apps
Processors
What it is:Applications that run in the background
Autocompiles LESS, SASS, Compass, Jade, Haml, Coffeescript, etc
Codekit (mac)http://incident57.com/codekit/
Fire.apphttp://fireapp.handlino.com/
Toolkit
LiveReloadhttp://livereload.com/
Adobe Edge Toolshttp://html.adobe.com/edge/
Online
Playgrounds
GitHubhttps://github.com/
JSFiddlehttp://jsfiddle.net/
SQL Fiddlehttp://sqlfiddle.com/
CSSDeckhttp://cssdeck.com/
CodePenhttp://codepen.io/
Codropshttp://tympanus.net/codrops/