Web Dev Toolbox - Speaker Deck

Slide 1

Slide 1 text

Béla Varga ecmanauts.com 1 Tools Best Practices WORKFLOW Web Development TOOLBOX

Slide 2

Slide 2 text

Béla Varga ecmanauts.com 2 Context - code quality - more speed - Maintenance - usability - coolness

Slide 3

Slide 3 text

Béla Varga ecmanauts.com 3 Code Quality - style guide & commit hocks - jshint & JSLint - testing & analysis - documentation - pair programming

Slide 4

Slide 4 text

Béla Varga ecmanauts.com 4

Slide 5

Slide 5 text

Béla Varga ecmanauts.com 5 DOCUMENTATION - mozilla developer network - WebPlatform.org - Stackoverﬂow - Blogs - SPECS

Slide 6

Slide 6 text

Béla Varga ecmanauts.com 6 DOCUMENTATION IEEE 754 - 7.11 Every NaN shall compare unordered with everything, including itself.

Slide 7

Slide 7 text

Béla Varga ecmanauts.com 7 Style guides - use code standards - take the winning style - not which but same style - code should be look like it was be written by one guy

Slide 8

Slide 8 text

Béla Varga ecmanauts.com 8 Prototyping - rapid & iterative - Online playgrounds - Local with Live REload - direct inbrowser edit - js console (node, jsc)

Slide 9

Slide 9 text

Béla Varga ecmanauts.com 9 online playground - JSFiddle, jsbin, codepen - live Preview - JS Libs included - Preprocessors included - collaboration

Slide 10

Slide 10 text

Béla Varga ecmanauts.com 10 Scaffolding - Boilerplates - Frameworks - tools like yeoman - PAckage manager

Slide 11

Slide 11 text

Béla Varga ecmanauts.com 11 boilerplates - faster development - best practices included - but you should look inside - html5boilerplate, bootstrap, skeleton, foundation, 960 grid system, ...

Slide 12

Slide 12 text

Béla Varga ecmanauts.com 12 Package Manager - NPM - Bower (by twitter) - Ender (NPM registry) - volo (like bower) - component (commonjs) - jam (amd)

Slide 13

Slide 13 text

Béla Varga ecmanauts.com 13 Environments - SimpleHTTPServer - Grunt - WAmp & Mamp - Virtual Machine - Vagrant - Docker.io

Slide 14

Slide 14 text

Béla Varga ecmanauts.com 14 GRunt Connect - static web server - tooling with js - add own middleware - works on all os - for fast testing only

Slide 15

Slide 15 text

Béla Varga ecmanauts.com 15 Virtual Box - real web server - works on all os - portable - open source

Slide 16

Slide 16 text

Béla Varga ecmanauts.com 16 Vagrant - dev Environment - single ﬁle conﬁg - use chef or puppet - works on all os

Slide 17

Slide 17 text

Béla Varga ecmanauts.com 17 docker - apps as container - Easy app delivery - Easy deploying - scaling systems

Slide 18

Slide 18 text

Béla Varga ecmanauts.com 18 IDE vs Editor - online tools - IDEs for business workﬂow - Editors for fast hacking - depends on you - depends on the company

Slide 19

Slide 19 text

Béla Varga ecmanauts.com 19 Editor - smaller - faster - Extendable - for single programmer - sublime, brackets, vi

Slide 20

Slide 20 text

Béla Varga ecmanauts.com 20 sublime text 2/3 - clean & functional - fast code Editor - plugins, snippets - package control - sublimeLinter, codeintel (sync sublime with dropbox)

Slide 21

Slide 21 text

Béla Varga ecmanauts.com 21 IDE - for projects (.settings) - Maybe slower - workﬂow integrated - for company workers - webstorm, visual studio

Slide 22

Slide 22 text

Béla Varga ecmanauts.com 22 WEbstorm - good js / node support - refactoring - debugging - Unit testing - zen coding, Emmet

Slide 23

Slide 23 text

Béla Varga ecmanauts.com 23 Browser tools - developer Tools - Extensions / plugins - Bookmarklets - dev tool snippets

Slide 24

Slide 24 text

Béla Varga ecmanauts.com 24 Chrome CAnary - newest experiments - chrome devtools - source maps - live editing - debugging - proﬁlling

Slide 25

Slide 25 text

Béla Varga ecmanauts.com 25 Chrome CAnary

Slide 26

Slide 26 text

Béla Varga ecmanauts.com 26 browser plugins - web developer - Edit this cookie - page speed - ﬁrebug - yslow - clear cache

Slide 27

Slide 27 text

Béla Varga ecmanauts.com 27 bookmarklets - javascript snippets - Easy installation - lighter then plugins - cross browser - No Updates

Slide 28

Slide 28 text

Béla Varga ecmanauts.com 28 bookmarklets 㲗 Resizer

Slide 29

Slide 29 text

Béla Varga ecmanauts.com 29 devtool snippets

Slide 30

Slide 30 text

Béla Varga ecmanauts.com 30 Command line - settings - bindings - shell scripts - Coloring

Slide 31

Slide 31 text

Béla Varga ecmanauts.com 31 command line - bourne, bash, zsh - themes, tools, plugins - alias, path, git - oh-my-zsh, prezto - vi, grep, pipes

Slide 32

Slide 32 text

Béla Varga ecmanauts.com 32

Slide 33

Slide 33 text

Béla Varga ecmanauts.com 33 .dotfiles - git config / git ignore - shell config - editorconfig.org - dotfiles.github.io - sync over dropbox

Slide 34

Slide 34 text

Béla Varga ecmanauts.com 34 Testing - usability testing - Device testing - browser testing - functional Testing - Unit testing

Slide 35

Slide 35 text

Béla Varga ecmanauts.com 35 browser testing - graded browser support - pixel perfect is dead - user ﬁrst - smallest device ﬁrst

Slide 36

Slide 36 text

Béla Varga ecmanauts.com 36 browser testing - modern.ie - browserstack - saucelabs - Virtual Machine - opendevicelab & DEvice

Slide 37

Slide 37 text

Béla Varga ecmanauts.com 37

Slide 38

Slide 38 text

Béla Varga ecmanauts.com 38 device testing - responsive - os GUI & Theme - Screenshots - functional Testing - Unit testing

Slide 39

Slide 39 text

Béla Varga ecmanauts.com 39 synchronized testing - adobe edge inspect cc - grunt + live Reload - ghostlab (mac) - remote preview (js) - emmet livestyle (plugin) cross DEvice

Slide 40

Slide 40 text

Béla Varga ecmanauts.com 40 Debugging - Console API - Breakpoints - debugger Statement - Chrome Canary Dev Tools - remote Debugging

Slide 41

Slide 41 text

Béla Varga ecmanauts.com 41 Proﬁling - memory leaks - render speed - dom reﬂow - nEtwork speed - source analysis - code complexity

Slide 42

Slide 42 text

Béla Varga ecmanauts.com 42 Version Management - Git Workﬂows - visual merging tools - Pre Commit Hocks

Slide 43

Slide 43 text

Béla Varga ecmanauts.com 43 Git WorkFlow - centralized Workflow - feature branch Workflow - gitflow Workflow - forking Workflow http://www.atlassian.com/git/workflows

Slide 44

Slide 44 text

Béla Varga ecmanauts.com 44 Gitﬂow WorkFlow

Slide 45

Slide 45 text

Béla Varga ecmanauts.com 45 DEployment - version checkout - build prozess - testing - server distribution - cache buster, cdn purge - continuous deployment

Slide 46

Slide 46 text

Béla Varga ecmanauts.com 46 the end