Cool Tools that make Front-end Development Fun

Transcript

1. Cool Tools That make Front-end development fun!
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. Purpose?
4. What is out there?
6. Buh! - Repetitive tasks - Starting over again EVERY time
7. Y eah! - Effective workflow - Productive environment
8. How it used to be
11. How it is now
16. Starting Projects
17. Boilerplates
18. HTML5 Boilerplate http://html5boilerplate.com/
19. Initializr http://www.initializr.com/
20. Bootstrap http:// twitter.github.com/bootstrap /
21. Jetstrap http://jetstrap.com/
22. CSS Grids
23. 960 Grid System http:// 960.gs /
24. Blueprint http://blueprintcss.org/
25. YUI Grid http:// developer.yahoo.com/yui/grids /
26. Reset CSS
27. Reset Remove all browser defaults Normalize Preserve useful defaults Correct a few bugs
28. Reset.css http://meyerweb.com/eric/tools/css/reset/
29. Normalize.css http://necolas.github.com/normalize.css/
30. cssreset.com http://www.cssreset.com/
31. CSS Helpers
32. CSS Generator http:// css3generator.com /
33. Westciv http://westciv.com/tools/
34. Button X http://webarti.com/best‐CSS3‐button‐maker/
35. Colorzilla http://colorzilla.com/gradient‐editor
36. Subtle Patterns http://subtlepatterns.com/
37. Specificity Calculator http://specificity.keegan.st/
38. Prefixr http://prefixr.com
39. Working with Browsers
40. Online Refs
41. HTML5 Test http://html5test.com
42. CSS3 Test http://css3test.com
43. HTML5 Please http://html5please.com
44. Webplatform.org http://www.webplatform.org/
45. Shims & Polyfills
46. 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
47. Modernizr http://modernizr.com
48. https://github.com/Modernizr/Modernizr/wiki/HTML5‐ Cross‐Browser‐Polyfills Polyfills, Shims & Fallbacks
49. Dev Tools
50. Chrome Dev Tool https://developers.google.com/chrome‐developer‐tools/docs/overview
51. Firebug http://getfirebug.com
52. HTTP Headers https://chrome.google.com/webstore/detail/http‐headers‐‐log‐examine/aaflgiahilldnhmlfpemmiinkcljjmli
53. Web Developer https:/
54. Scripting
55. NodeJS
56. What it is: Non‐blocking event driven I/O Server scripting Allocate resources on a as‐needed basis
57. NodeJS http://nodejs.org/
58. A command line approach Comes with NPM – The Node Package Manager (https://npmjs.org/)
59. Fonts
60. Libraries
61. Typekit https://typekit.com/
62. Google Web Fonts http://www.google.com/webfonts
63. Adobe Web Fonts http://html.adobe.com/edge/webfonts
64. WhatFont Plugin http://chengyinliu.com/whatfont.html
65. Testing
66. Linting
67. JSLint http://www.jslint.com/
68. CSSLint http://csslint.net/
69. Other linters: jquery, coffeescript, ruby, php etc
70. User Actions
71. Selenium http://seleniumhq.org
72. What it is: Firefox plugin Record‐and‐playback of interactions with the browser
73. Unit Test
74. What it is: Check functionality of code Test by assertion
75. QUnit.js http://qunitjs.com
76. Jasmine http://github.com/pivotal/jasmine
77. Read more: http://coding.smashingmagazine.com/2012/06/ 27/introduction‐to‐javascript‐unit‐testing/
78. Browser Test
79. Browserlab http://browserlab.adobe.com
80. Browserstack http://browserstack.com
81. Browserling http:// browserling.com
82. Hide My Ass http://hidemyass.com
83. Performance
84. Pingdom Tools http://tools.pingdom.com/fpt/
85. Google Page Speed http://developers.google.com/speed/pagespeed
86. Loads.in http://loads.in/
88. Fun Markup
89. Templating
90. What it is: Allows for easy markup Compiles to HTML Can insert data
91. Jade http://jade‐lang.com
92. Haml http://haml.info/
93. Slim http://slim‐lang.com/
94. Markdown http://daringfireball.net/projects/markdown/
95. Fun CSS
96. Preprocessors
97. What it is: Add Dynamic to styling Variables, Mixins, Operations, Functions
98. LESS http://lesscss.org /
99. SASS http://sass‐lang.com /
100. Compass http://compass‐style.org /
101. Stylus http://learnboost.github.com/stylus /
102. Dev Standard
103. What it is: Structure your CSS in a consistent manner Structure for maintainability and flexibility
104. SMACSS http://smacss.com /
105. Degradation
106. CSS3 Degrade Bookmarklet http://davatron5000.github.com/deCSS3/
107. Fun Scripting
108. Preprocessors
109. What it is: Simplify how you write javascript Adopt a simpler language and compile to javascript
110. Coffeescript http://coffeescript.org
111. Google Dart http://code.google.com/p/dart/
112. Others https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS
113. Fun Apps
114. Processors
115. What it is: Applications that run in the background Autocompiles LESS, SASS, Compass, Jade, Haml, Coffeescript, etc
116. Codekit (mac) http://incident57.com/codekit/
117. Fire.app http://fireapp.handlino.com/
118. Toolkit
119. LiveReload http://livereload.com/
120. Adobe Edge Tools http://html.adobe.com/edge/
121. Online Playgrounds
122. GitHub https://github.com/
123. JSFiddle http://jsfiddle.net/
124. SQL Fiddle http://sqlfiddle.com/
125. CSSDeck http://cssdeck.com/
126. CodePen http://codepen.io/
127. Codrops http://tympanus.net/codrops/