The Modern Front End Developers Toolkit

My deck from Talk Web Design 2014 about the toolkit used by Front End Developers nowadays. Related resources:

https://medium.com/design-ux/799d16952a56
https://github.com/getdave/Frontend-Developers-Toolkit
http://www.paulirish.com/2012/talk-tooling-the-webapp-development-stack/
https://speakerdeck.com/addyosmani/automating-front-end-workflow
http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/
https://storify.com/onishiweb/front-end-tools

Transcript

1. The Modern Front End Developer Toolkit @onishiweb Talk Web Design 7th May 2014
2. Hello! @onishiweb
3. Hello! @onishiweb
4. Hello! @onishiweb
5. What is a Toolkit? @onishiweb
6. “a set of tools, especially one kept in a bag or box and used for a particular purpose.” What? @onishiweb
7. “a personal set of resources, abilities, or skills” What? @onishiweb
8. "Optional software that assists in development of [websites]" What? @onishiweb - Paul Irish
9. Why do we need tools? @onishiweb
10. “[Front End development] is BIG. You just won't believe how vastly, hugely, mind-bogglingly big it is.” Why? @onishiweb
11. Automate repetitive tasks Why? @onishiweb
12. Help to prevent errors Why? @onishiweb
13. DRY (don’t write things already written*) Why? @onishiweb
14. Why? @onishiweb
15. What do we consider tools? @onishiweb
16. Tools @onishiweb
17. Tools @onishiweb Sublime Text Gulp Notepad++ Git Grunt Atom WebStorm Sass JSHint Live Reload Coda Composer Transit.js jQuery Visual Studio iTerm Bower Espresso Dev Tools Adobe Edge Code Mixture Codekit Pen & Paper Photoshop Sketch Yeoman LESS Bit Bucket Git Tower Parallels BBEdit PHP Storm Drush FireBug VMWare CodeIgniter Illustrator Emmet Node Foundation SkyFonts Middleman Bourbon MAMP NPM Colorzilla Snagit Dropbox Measureit SourceTree Autoprefixer Jenkins WordPress Console2 iOS Simulator Jade Divvy Hammer Transmit Simplenote Alfred Foundation Vim Compass Modern.ie SVN jQuery UI Dreamweaver NetBeans Brackets Jekyll GhostLab xScope Fireworks https://storify.com/onishiweb/front-end-tools
18. The front end developer’s toolkit @onishiweb
19. Text Editor Tools @onishiweb
20. Tools @onishiweb
21. Tools @onishiweb
22. Tools @onishiweb http://www.sublimetext.com/
23. Tools @onishiweb ‣ Emmet (Zen Coding) ‣ Git ‣ DocBlockr ‣ SublimeLinter ‣ WordPress
24. Tools @onishiweb
25. Browsers Tools @onishiweb
26. Tools @onishiweb
27. Tools @onishiweb
28. Tools @onishiweb
29. Tools @onishiweb
30. Tools @onishiweb http://vanamco.com/ghostlab/
31. Dev Tools Tools @onishiweb
32. Tools @onishiweb
33. Tools @onishiweb
34. Tools @onishiweb
35. Beta Browsers Tools @onishiweb
36. Tools @onishiweb
37. Boilerplates / Frameworks Tools @onishiweb
38. boilerplates can be a good starting point Tools @onishiweb
39. Tools @onishiweb http://html5boilerplate.com/
40. Frameworks... Tools @onishiweb
41. Have their uses... Tools @onishiweb
42. Tools @onishiweb http://getbootstrap.com/
43. I hate frameworks Tools @onishiweb
44. Preprocessors Tools @onishiweb
45. Tools @onishiweb What’s a Preprocessor?
46. Tools @onishiweb
47. Tools @onishiweb
48. Tools @onishiweb http://sass-lang.com
49. Tools @onishiweb
50. Tools @onishiweb http://compass-style.org/
51. Project tools Tools @onishiweb
52. Tools @onishiweb Codekit Mixture Hammer
53. Tools @onishiweb
54. Tools @onishiweb ‣ JSHint ‣ Uglify ‣ Concatenation ‣ Compass ‣ ImageOptim ‣ RequireJS ‣ Autoprefixer ‣ QUnit ‣ Live Reload ‣ Connect
55. Tools @onishiweb
56. Source Control Tools @onishiweb
57. Github Tools @onishiweb
58. HOMEWORK! @onishiweb Get a Github account!
59. Git GUIs Tools @onishiweb ‣ Git Tower ‣ Github for Mac ‣ Gitbox ‣ SourceTree ‣ SmartGit
60. Javascript Libraries / Frameworks Tools @onishiweb
61. Tools @onishiweb ‣ jQuery ‣ AngularJS ‣ Backbone ‣ Flight ‣ Knockout.js ‣ Ember.js ‣ Meteor ‣ Node ‣ MooTools ‣ Kendo
62. Polyfills Tools @onishiweb
63. Fonts Tools @onishiweb
64. Tools @onishiweb ‣ Google WebFonts ‣ SkyFonts ‣ Typekit ‣ Fonts.com ‣ Edge Web Fonts
65. Icons Tools @onishiweb
66. Tools @onishiweb
67. Performance Tools @onishiweb
68. Tools @onishiweb http://mattgemmell.com/network-link-conditioner-in-lion/
69. Tools @onishiweb
70. Accessibility Tools @onishiweb
71. Tools @onishiweb ‣ WAVE ‣ AChecker ‣ Mozilla Accessibility Evaluation Toolbar ‣ Cynthia Says ‣ Colour Contrast testers
72. Design / Graphics Tools @onishiweb
73. Tools @onishiweb ‣ Photoshop ‣ Illustrator ‣ Sketch ‣ Pixelmator ‣ GIMP
74. Content Management Systems Tools @onishiweb
75. Tools @onishiweb ‣ WordPress ‣ Squarespace ‣ Perch ‣ Drupal ‣ Jekyll ‣ Middleman ‣ ModX ‣ Joomla! ‣ Shopify ‣ Koken
76. How many? @onishiweb
77. Is it too much? How many? @onishiweb
78. “All of these things are power tools used by experts, and power tools in the hands of beginners is sometimes a very bad idea” - Christian Heilmann @onishiweb How many?
79. HTML CSS JavaScript @onishiweb How many?
80. HTML (5) CSS (3) JavaScript (?) @onishiweb How many?
81. @onishiweb How many?
82. @onishiweb How many?
83. Pressure @onishiweb How many?
84. Rubbish! @onishiweb How many?
85. "Build what it is you want to build and learn as you go" http://themakersofthings.co.uk/ - Mike Chrisp, SMEE Member @onishiweb How many?
86. Thank You @onishiweb adamonishi.com github.com/onishiweb @onishiweb