Cool Tools that make front-end development fun!

Cool Tools

That make Front-end development fun!

Cool Tools that make front-end

development fun!

Jarne W. Beutnagel

ITDays October 2012

jwb@eaaa.dkwww.beutnagel.dk

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/