$30 off During Our Annual Pro Sale. View Details »

The Modern Front End Developers Toolkit

The Modern Front End Developers Toolkit

Adam Onishi

May 07, 2014
Tweet

More Decks by Adam Onishi

Other Decks in Technology

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