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!
- Starting over again
EVERY time
- Repetitive tasks

7. Yeah!
- Productive environment
- Effective workflow

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. Polyfills, Shims & Fallbacks
https://github.com/Modernizr/Modernizr/wiki/HTML5‐
Cross‐Browser‐Polyfills

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/