Cool Tools that make front-end development fun!

129
Cool Tools That make Front-end development fun!

description

 

Transcript of Cool Tools that make front-end development fun!

Page 1: Cool Tools that make front-end development fun!

Cool Tools

That make Front-end development fun!

Page 2: Cool Tools that make front-end development fun!

Cool Tools that make front-end

development fun!

Jarne W. Beutnagel

ITDays October 2012

[email protected]

This slide is available at www.beutnagel.dk/itdays2012/

Page 3: Cool Tools that make front-end development fun!

Purpose?

Page 4: Cool Tools that make front-end development fun!

What is out there?

Page 5: Cool Tools that make front-end development fun!
Page 6: Cool Tools that make front-end development fun!

Buh!

- Repetitive tasks

- Starting over again

EVERY time

Page 7: Cool Tools that make front-end development fun!

Yeah!

- Effective workflow

- Productive environment

Page 8: Cool Tools that make front-end development fun!

How it used to be

Page 9: Cool Tools that make front-end development fun!
Page 10: Cool Tools that make front-end development fun!
Page 11: Cool Tools that make front-end development fun!

How it is now

Page 12: Cool Tools that make front-end development fun!
Page 13: Cool Tools that make front-end development fun!
Page 14: Cool Tools that make front-end development fun!
Page 15: Cool Tools that make front-end development fun!
Page 16: Cool Tools that make front-end development fun!

Starting

Projects

Page 17: Cool Tools that make front-end development fun!

Boilerplates

Page 18: Cool Tools that make front-end development fun!

HTML5 Boilerplatehttp://html5boilerplate.com/

Page 19: Cool Tools that make front-end development fun!

Initializrhttp://www.initializr.com/

Page 20: Cool Tools that make front-end development fun!

Bootstraphttp:// twitter.github.com/bootstrap /

Page 21: Cool Tools that make front-end development fun!

Jetstraphttp://jetstrap.com/

Page 22: Cool Tools that make front-end development fun!

CSS Grids

Page 23: Cool Tools that make front-end development fun!

960 Grid Systemhttp:// 960.gs /

Page 24: Cool Tools that make front-end development fun!

Blueprinthttp://blueprintcss.org/

Page 25: Cool Tools that make front-end development fun!

YUI Gridhttp:// developer.yahoo.com/yui/grids /

Page 26: Cool Tools that make front-end development fun!

Reset CSS

Page 27: Cool Tools that make front-end development fun!

ResetRemove all browser defaults

NormalizePreserve useful defaultsCorrect a few bugs

Page 28: Cool Tools that make front-end development fun!

Reset.csshttp://meyerweb.com/eric/tools/css/reset/

Page 29: Cool Tools that make front-end development fun!

Normalize.csshttp://necolas.github.com/normalize.css/

Page 30: Cool Tools that make front-end development fun!

cssreset.comhttp://www.cssreset.com/

Page 31: Cool Tools that make front-end development fun!

CSS Helpers

Page 32: Cool Tools that make front-end development fun!

CSS Generatorhttp:// css3generator.com /

Page 33: Cool Tools that make front-end development fun!

Westcivhttp://westciv.com/tools/

Page 34: Cool Tools that make front-end development fun!

Button Xhttp://webarti.com/best‐CSS3‐button‐maker/

Page 35: Cool Tools that make front-end development fun!

Colorzillahttp://colorzilla.com/gradient‐editor

Page 36: Cool Tools that make front-end development fun!

Subtle Patternshttp://subtlepatterns.com/

Page 37: Cool Tools that make front-end development fun!

Specificity Calculatorhttp://specificity.keegan.st/

Page 38: Cool Tools that make front-end development fun!

Prefixrhttp://prefixr.com

Page 39: Cool Tools that make front-end development fun!

Working with

Browsers

Page 40: Cool Tools that make front-end development fun!

Online Refs

Page 41: Cool Tools that make front-end development fun!

HTML5 Testhttp://html5test.com

Page 42: Cool Tools that make front-end development fun!

CSS3 Testhttp://css3test.com

Page 43: Cool Tools that make front-end development fun!

HTML5 Pleasehttp://html5please.com

Page 44: Cool Tools that make front-end development fun!

Webplatform.orghttp://www.webplatform.org/

Page 45: Cool Tools that make front-end development fun!

Shims &

Polyfills

Page 46: Cool Tools that make front-end development fun!

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!

Modernizrhttp://modernizr.com

Page 48: Cool Tools that make front-end development fun!

https://github.com/Modernizr/Modernizr/wiki/HTML5‐Cross‐Browser‐Polyfills

Polyfills, Shims & Fallbacks

Page 49: Cool Tools that make front-end development fun!

Dev Tools

Page 50: Cool Tools that make front-end development fun!

Chrome Dev Toolhttps://developers.google.com/chrome‐developer‐tools/docs/overview

Page 51: Cool Tools that make front-end development fun!

Firebughttp://getfirebug.com

Page 52: Cool Tools that make front-end development fun!

HTTP Headershttps://chrome.google.com/webstore/detail/http‐headers‐‐log‐examine/aaflgiahilldnhmlfpemmiinkcljjmli

Page 53: Cool Tools that make front-end development fun!

Web Developerhttps:/

Page 54: Cool Tools that make front-end development fun!

Scripting

Page 55: Cool Tools that make front-end development fun!

NodeJS

Page 56: Cool Tools that make front-end development fun!

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!

NodeJShttp://nodejs.org/

Page 58: Cool Tools that make front-end development fun!

A command line approach

Comes with NPM – The Node Package Manager (https://npmjs.org/)

Page 59: Cool Tools that make front-end development fun!

Fonts

Page 60: Cool Tools that make front-end development fun!

Libraries

Page 61: Cool Tools that make front-end development fun!

Typekithttps://typekit.com/

Page 62: Cool Tools that make front-end development fun!

Google Web Fontshttp://www.google.com/webfonts

Page 63: Cool Tools that make front-end development fun!

Adobe Web Fontshttp://html.adobe.com/edge/webfonts

Page 64: Cool Tools that make front-end development fun!

WhatFont Pluginhttp://chengyinliu.com/whatfont.html

Page 65: Cool Tools that make front-end development fun!

Testing

Page 66: Cool Tools that make front-end development fun!

Linting

Page 67: Cool Tools that make front-end development fun!

JSLinthttp://www.jslint.com/

Page 68: Cool Tools that make front-end development fun!

CSSLinthttp://csslint.net/

Page 69: Cool Tools that make front-end development fun!

Other linters: jquery, coffeescript, ruby, php etc

Page 70: Cool Tools that make front-end development fun!

User Actions

Page 71: Cool Tools that make front-end development fun!

Seleniumhttp://seleniumhq.org

Page 72: Cool Tools that make front-end development fun!

What it is:Firefox plugin

Record‐and‐playback of interactions with the browser

Page 73: Cool Tools that make front-end development fun!

Unit Test

Page 74: Cool Tools that make front-end development fun!

What it is:Check functionality of code

Test by assertion

Page 75: Cool Tools that make front-end development fun!

QUnit.jshttp://qunitjs.com

Page 76: Cool Tools that make front-end development fun!

Jasminehttp://github.com/pivotal/jasmine

Page 77: Cool Tools that make front-end development fun!

Read more: http://coding.smashingmagazine.com/2012/06/27/introduction‐to‐javascript‐unit‐testing/

Page 78: Cool Tools that make front-end development fun!

Browser Test

Page 79: Cool Tools that make front-end development fun!

Browserlabhttp://browserlab.adobe.com

Page 80: Cool Tools that make front-end development fun!

Browserstackhttp://browserstack.com

Page 81: Cool Tools that make front-end development fun!

Browserlinghttp:// browserling.com

Page 82: Cool Tools that make front-end development fun!

Hide My Asshttp://hidemyass.com

Page 83: Cool Tools that make front-end development fun!

Performance

Page 84: Cool Tools that make front-end development fun!

Pingdom Toolshttp://tools.pingdom.com/fpt/ 

Page 85: Cool Tools that make front-end development fun!

Google Page Speedhttp://developers.google.com/speed/pagespeed

Page 86: Cool Tools that make front-end development fun!

Loads.inhttp://loads.in/

Page 87: Cool Tools that make front-end development fun!
Page 88: Cool Tools that make front-end development fun!

Fun Markup

Page 89: Cool Tools that make front-end development fun!

Templating

Page 90: Cool Tools that make front-end development fun!

What it is:Allows for easy markup

Compiles to HTML

Can insert data

Page 91: Cool Tools that make front-end development fun!

Jadehttp://jade‐lang.com

Page 92: Cool Tools that make front-end development fun!

Hamlhttp://haml.info/

Page 93: Cool Tools that make front-end development fun!

Slimhttp://slim‐lang.com/

Page 94: Cool Tools that make front-end development fun!

Markdownhttp://daringfireball.net/projects/markdown/

Page 95: Cool Tools that make front-end development fun!

Fun CSS

Page 96: Cool Tools that make front-end development fun!

Preprocessors

Page 97: Cool Tools that make front-end development fun!

What it is:Add Dynamic to styling

Variables, Mixins, Operations, Functions

Page 98: Cool Tools that make front-end development fun!

LESShttp://lesscss.org /

Page 99: Cool Tools that make front-end development fun!

SASShttp://sass‐lang.com /

Page 100: Cool Tools that make front-end development fun!

Compasshttp://compass‐style.org /

Page 101: Cool Tools that make front-end development fun!

Stylushttp://learnboost.github.com/stylus /

Page 102: Cool Tools that make front-end development fun!

Dev Standard

Page 103: Cool Tools that make front-end development fun!

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!

SMACSShttp://smacss.com /

Page 105: Cool Tools that make front-end development fun!

Degradation

Page 106: Cool Tools that make front-end development fun!

CSS3 Degrade Bookmarklethttp://davatron5000.github.com/deCSS3/

Page 107: Cool Tools that make front-end development fun!

Fun Scripting

Page 108: Cool Tools that make front-end development fun!

Preprocessors

Page 109: Cool Tools that make front-end development fun!

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!

Coffeescripthttp://coffeescript.org

Page 111: Cool Tools that make front-end development fun!

Google Darthttp://code.google.com/p/dart/

Page 112: Cool Tools that make front-end development fun!

Othershttps://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS

Page 113: Cool Tools that make front-end development fun!

Fun Apps

Page 114: Cool Tools that make front-end development fun!

Processors

Page 115: Cool Tools that make front-end development fun!

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!

Codekit (mac)http://incident57.com/codekit/

Page 117: Cool Tools that make front-end development fun!

Fire.apphttp://fireapp.handlino.com/

Page 118: Cool Tools that make front-end development fun!

Toolkit

Page 119: Cool Tools that make front-end development fun!

LiveReloadhttp://livereload.com/

Page 120: Cool Tools that make front-end development fun!

Adobe Edge Toolshttp://html.adobe.com/edge/

Page 121: Cool Tools that make front-end development fun!

Online

Playgrounds

Page 122: Cool Tools that make front-end development fun!

GitHubhttps://github.com/

Page 123: Cool Tools that make front-end development fun!

JSFiddlehttp://jsfiddle.net/

Page 124: Cool Tools that make front-end development fun!

SQL Fiddlehttp://sqlfiddle.com/

Page 125: Cool Tools that make front-end development fun!

CSSDeckhttp://cssdeck.com/

Page 126: Cool Tools that make front-end development fun!

CodePenhttp://codepen.io/

Page 127: Cool Tools that make front-end development fun!

Codropshttp://tympanus.net/codrops/

Page 128: Cool Tools that make front-end development fun!
Page 129: Cool Tools that make front-end development fun!