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
   

   View Slide

2. Hello!
   @onishiweb
   

   View Slide

3. Hello!
   @onishiweb
   

   View Slide

4. Hello!
   @onishiweb
   

   View Slide

5. What is a Toolkit?
   @onishiweb
   

   View Slide

6. “a set of tools, especially one kept
   in a bag or box and used for a
   particular purpose.”
   What?
   @onishiweb
   

   View Slide

7. “a personal set of resources,
   abilities, or skills”
   What?
   @onishiweb
   

   View Slide

8. "Optional software that assists in
   development of [websites]"
   What?
   @onishiweb
   - Paul Irish
   

   View Slide

9. Why do we need
   tools?
   @onishiweb
   

   View Slide

10. “[Front End development] is BIG.
    You just won't believe how vastly,
    hugely, mind-bogglingly big it is.”
    Why?
    @onishiweb
    

    View Slide

11. Automate repetitive
    tasks
    Why?
    @onishiweb
    

    View Slide

12. Help to prevent
    errors
    Why?
    @onishiweb
    

    View Slide

13. DRY
    (don’t write things already written*)
    Why?
    @onishiweb
    

    View Slide

14. Why?
    @onishiweb
    

    View Slide

15. What do we
    consider tools?
    @onishiweb
    

    View Slide

16. Tools
    @onishiweb
    

    View Slide

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
    

    View Slide

18. The front end
    developer’s toolkit
    @onishiweb
    

    View Slide

19. Text Editor
    Tools
    @onishiweb
    

    View Slide

20. Tools
    @onishiweb
    

    View Slide

21. Tools
    @onishiweb
    

    View Slide

22. Tools
    @onishiweb
    http://www.sublimetext.com/
    

    View Slide

23. Tools
    @onishiweb
    ‣ Emmet (Zen Coding)
    ‣ Git
    ‣ DocBlockr
    ‣ SublimeLinter
    ‣ WordPress
    

    View Slide

24. Tools
    @onishiweb
    

    View Slide

25. Browsers
    Tools
    @onishiweb
    

    View Slide

26. Tools
    @onishiweb
    

    View Slide

27. Tools
    @onishiweb
    

    View Slide

28. Tools
    @onishiweb
    

    View Slide

29. Tools
    @onishiweb
    

    View Slide

30. Tools
    @onishiweb
    http://vanamco.com/ghostlab/
    

    View Slide

31. Dev Tools
    Tools
    @onishiweb
    

    View Slide

32. Tools
    @onishiweb
    

    View Slide

33. Tools
    @onishiweb
    

    View Slide

34. Tools
    @onishiweb
    

    View Slide

35. Beta Browsers
    Tools
    @onishiweb
    

    View Slide

36. Tools
    @onishiweb
    

    View Slide

37. Boilerplates /
    Frameworks
    Tools
    @onishiweb
    

    View Slide

38. boilerplates can be a
    good starting point
    Tools
    @onishiweb
    

    View Slide

39. Tools
    @onishiweb
    http://html5boilerplate.com/
    

    View Slide

40. Frameworks...
    Tools
    @onishiweb
    

    View Slide

41. Have their uses...
    Tools
    @onishiweb
    

    View Slide

42. Tools
    @onishiweb
    http://getbootstrap.com/
    

    View Slide

43. I hate frameworks
    Tools
    @onishiweb
    

    View Slide

44. Preprocessors
    Tools
    @onishiweb
    

    View Slide

45. Tools
    @onishiweb
    What’s a
    Preprocessor?
    

    View Slide

46. Tools
    @onishiweb
    

    View Slide

47. Tools
    @onishiweb
    

    View Slide

48. Tools
    @onishiweb
    http://sass-lang.com
    

    View Slide

49. Tools
    @onishiweb
    

    View Slide

50. Tools
    @onishiweb
    http://compass-style.org/
    

    View Slide

51. Project tools
    Tools
    @onishiweb
    

    View Slide

52. Tools
    @onishiweb
    Codekit Mixture
    Hammer
    

    View Slide

53. Tools
    @onishiweb
    

    View Slide

54. Tools
    @onishiweb
    ‣ JSHint
    ‣ Uglify
    ‣ Concatenation
    ‣ Compass
    ‣ ImageOptim
    ‣ RequireJS
    ‣ Autoprefixer
    ‣ QUnit
    ‣ Live Reload
    ‣ Connect
    

    View Slide

55. Tools
    @onishiweb
    

    View Slide

56. Source Control
    Tools
    @onishiweb
    

    View Slide

57. Github
    Tools
    @onishiweb
    

    View Slide

58. HOMEWORK!
    @onishiweb
    Get a Github account!
    

    View Slide

59. Git GUIs
    Tools
    @onishiweb
    ‣ Git Tower
    ‣ Github for Mac
    ‣ Gitbox
    ‣ SourceTree
    ‣ SmartGit
    

    View Slide

60. Javascript
    Libraries / Frameworks
    Tools
    @onishiweb
    

    View Slide

61. Tools
    @onishiweb
    ‣ jQuery
    ‣ AngularJS
    ‣ Backbone
    ‣ Flight
    ‣ Knockout.js
    ‣ Ember.js
    ‣ Meteor
    ‣ Node
    ‣ MooTools
    ‣ Kendo
    

    View Slide

62. Polyfills
    Tools
    @onishiweb
    

    View Slide

63. Fonts
    Tools
    @onishiweb
    

    View Slide

64. Tools
    @onishiweb
    ‣ Google WebFonts
    ‣ SkyFonts
    ‣ Typekit
    ‣ Fonts.com
    ‣ Edge Web Fonts
    

    View Slide

65. Icons
    Tools
    @onishiweb
    

    View Slide

66. Tools
    @onishiweb
    

    View Slide

67. Performance
    Tools
    @onishiweb
    

    View Slide

68. Tools
    @onishiweb
    http://mattgemmell.com/network-link-conditioner-in-lion/
    

    View Slide

69. Tools
    @onishiweb
    

    View Slide

70. Accessibility
    Tools
    @onishiweb
    

    View Slide

71. Tools
    @onishiweb
    ‣ WAVE
    ‣ AChecker
    ‣ Mozilla Accessibility Evaluation Toolbar
    ‣ Cynthia Says
    ‣ Colour Contrast testers
    

    View Slide

72. Design / Graphics
    Tools
    @onishiweb
    

    View Slide

73. Tools
    @onishiweb
    ‣ Photoshop
    ‣ Illustrator
    ‣ Sketch
    ‣ Pixelmator
    ‣ GIMP
    

    View Slide

74. Content Management
    Systems
    Tools
    @onishiweb
    

    View Slide

75. Tools
    @onishiweb
    ‣ WordPress
    ‣ Squarespace
    ‣ Perch
    ‣ Drupal
    ‣ Jekyll
    ‣ Middleman
    ‣ ModX
    ‣ Joomla!
    ‣ Shopify
    ‣ Koken
    

    View Slide

76. How many?
    @onishiweb
    

    View Slide

77. Is it too much?
    How many?
    @onishiweb
    

    View Slide

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?
    

    View Slide

79. HTML
    CSS
    JavaScript
    @onishiweb
    How many?
    

    View Slide

80. HTML (5)
    CSS (3)
    JavaScript (?)
    @onishiweb
    How many?
    

    View Slide

81. @onishiweb
    How many?
    

    View Slide

82. @onishiweb
    How many?
    

    View Slide

83. Pressure
    @onishiweb
    How many?
    

    View Slide

84. Rubbish!
    @onishiweb
    How many?
    

    View Slide

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?
    

    View Slide

86. Thank You
    @onishiweb
    adamonishi.com
    github.com/onishiweb
    @onishiweb
    

    View Slide