Tweet
Tweet

Slide 1

Slide 1 text

The Modern Front End Developer Toolkit @onishiweb Talk Web Design 7th May 2014

Slide 2

Slide 2 text

Hello! @onishiweb

Slide 3

Slide 3 text

Hello! @onishiweb

Slide 4

Slide 4 text

Hello! @onishiweb

Slide 5

Slide 5 text

What is a Toolkit? @onishiweb

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Why do we need tools? @onishiweb

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Automate repetitive tasks Why? @onishiweb

Slide 12

Slide 12 text

Help to prevent errors Why? @onishiweb

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Why? @onishiweb

Slide 15

Slide 15 text

What do we consider tools? @onishiweb

Slide 16

Slide 16 text

Tools @onishiweb

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

The front end developer’s toolkit @onishiweb

Slide 19

Slide 19 text

Text Editor Tools @onishiweb

Slide 20

Slide 20 text

Tools @onishiweb

Slide 21

Slide 21 text

Tools @onishiweb

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Tools @onishiweb

Slide 25

Slide 25 text

Browsers Tools @onishiweb

Slide 26

Slide 26 text

Tools @onishiweb

Slide 27

Slide 27 text

Tools @onishiweb

Slide 28

Slide 28 text

Tools @onishiweb

Slide 29

Slide 29 text

Tools @onishiweb

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Dev Tools Tools @onishiweb

Slide 32

Slide 32 text

Tools @onishiweb

Slide 33

Slide 33 text

Tools @onishiweb

Slide 34

Slide 34 text

Tools @onishiweb

Slide 35

Slide 35 text

Beta Browsers Tools @onishiweb

Slide 36

Slide 36 text

Tools @onishiweb

Slide 37

Slide 37 text

Boilerplates / Frameworks Tools @onishiweb

Slide 38

Slide 38 text

boilerplates can be a good starting point Tools @onishiweb

Slide 39

Slide 39 text

Tools @onishiweb http://html5boilerplate.com/

Slide 40

Slide 40 text

Frameworks... Tools @onishiweb

Slide 41

Slide 41 text

Have their uses... Tools @onishiweb

Slide 42

Slide 42 text

Tools @onishiweb http://getbootstrap.com/

Slide 43

Slide 43 text

I hate frameworks Tools @onishiweb

Slide 44

Slide 44 text

Preprocessors Tools @onishiweb

Slide 45

Slide 45 text

Tools @onishiweb What’s a Preprocessor?

Slide 46

Slide 46 text

Tools @onishiweb

Slide 47

Slide 47 text

Tools @onishiweb

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Tools @onishiweb

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Project tools Tools @onishiweb

Slide 52

Slide 52 text

Tools @onishiweb Codekit Mixture Hammer

Slide 53

Slide 53 text

Tools @onishiweb

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Tools @onishiweb

Slide 56

Slide 56 text

Source Control Tools @onishiweb

Slide 57

Slide 57 text

Github Tools @onishiweb

Slide 58

Slide 58 text

HOMEWORK! @onishiweb Get a Github account!

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Javascript Libraries / Frameworks Tools @onishiweb

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Polyfills Tools @onishiweb

Slide 63

Slide 63 text

Fonts Tools @onishiweb

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

Icons Tools @onishiweb

Slide 66

Slide 66 text

Tools @onishiweb

Slide 67

Slide 67 text

Performance Tools @onishiweb

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Tools @onishiweb

Slide 70

Slide 70 text

Accessibility Tools @onishiweb

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

Design / Graphics Tools @onishiweb

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Content Management Systems Tools @onishiweb

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

How many? @onishiweb

Slide 77

Slide 77 text

Is it too much? How many? @onishiweb

Slide 78

Slide 78 text

“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?

Slide 79

Slide 79 text

HTML CSS JavaScript @onishiweb How many?

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

@onishiweb How many?

Slide 82

Slide 82 text

@onishiweb How many?

Slide 83

Slide 83 text

Pressure @onishiweb How many?

Slide 84

Slide 84 text

Rubbish! @onishiweb How many?

Slide 85

Slide 85 text

"Build what it is you want to build and learn as you go" http://themakersofthings.co.uk/ - Mike Chrisp, SMEE Member @onishiweb How many?

Slide 86

Slide 86 text

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