The Modern Front End Developers Toolkit

The Modern Front End Developers Toolkit

Fc7368fd45560e1e7401bc80684f5867?s=128

Adam Onishi

May 07, 2014
Tweet

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