Your SlideShare is downloading. ×
0
Cool ToolsThat make Front-end development fun!
Cool Tools that make front-end       development fun!                        Jarne W. Beutnagel                      ITDay...
Purpose?
What is out there?
Buh!- Starting over againEVERY time- Repetitive tasks
Yeah!- Productive environment - Effective workflow
How it used to be
How it is now
StartingProjects
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
Reset Remove all browser defaultsNormalize Preserve useful defaults Correct 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 APIUse functionality that is not 100% suppor...
Modernizrhttp://modernizr.com
Polyfills, Shims & Fallbackshttps://github.com/Modernizr/Modernizr/wiki/HTML5‐Cross‐Browser‐Polyfills
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/OServer scriptingAllocate resources on a as‐needed basis
NodeJShttp://nodejs.org/
A command line approachComes 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 pluginRecord‐and‐playback of interactions with the browser
Unit Test
What it is:Check functionality of codeTest 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 markupCompiles to HTMLCan 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 stylingVariables, 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 mannerStructure 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 javascriptAdopt 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 backgroundAutocompiles 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/
OnlinePlaygrounds
GitHubhttps://github.com/
JSFiddlehttp://jsfiddle.net/
SQL Fiddlehttp://sqlfiddle.com/
CSSDeckhttp://cssdeck.com/
CodePenhttp://codepen.io/
Codropshttp://tympanus.net/codrops/
Cool Tools that make front-end development fun!
Cool Tools that make front-end development fun!
Cool Tools that make front-end development fun!
Cool Tools that make front-end development fun!
Cool Tools that make front-end development fun!
Cool Tools that make front-end development fun!
Cool Tools that make front-end development fun!
Cool Tools that make front-end development fun!
Cool Tools that make front-end development fun!
Cool Tools that make front-end development fun!
Upcoming SlideShare
Loading in...5
×

Cool Tools that make front-end development fun!

1,758

Published on

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,758
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
25
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×