Web Dev Toolbox

The Toolbox of an modern web developer.

Transcript

1. Béla Varga ecmanauts.com 1 Tools Best Practices WORKFLOW Web Development TOOLBOX
2. Béla Varga ecmanauts.com 2 Context - code quality - more speed - Maintenance - usability - coolness
3. Béla Varga ecmanauts.com 3 Code Quality - style guide & commit hocks - jshint & JSLint - testing & analysis - documentation - pair programming
4. Béla Varga ecmanauts.com 4
5. Béla Varga ecmanauts.com 5 DOCUMENTATION - mozilla developer network - WebPlatform.org - Stackoverflow - Blogs - SPECS
6. Béla Varga ecmanauts.com 6 DOCUMENTATION IEEE 754 - 7.11 Every NaN shall compare unordered with everything, including itself.
7. 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
8. Béla Varga ecmanauts.com 8 Prototyping - rapid & iterative - Online playgrounds - Local with Live REload - direct inbrowser edit - js console (node, jsc)
9. Béla Varga ecmanauts.com 9 online playground - JSFiddle, jsbin, codepen - live Preview - JS Libs included - Preprocessors included - collaboration
10. Béla Varga ecmanauts.com 10 Scaffolding - Boilerplates - Frameworks - tools like yeoman - PAckage manager
11. Béla Varga ecmanauts.com 11 boilerplates - faster development - best practices included - but you should look inside - html5boilerplate, bootstrap, skeleton, foundation, 960 grid system, ...
12. Béla Varga ecmanauts.com 12 Package Manager - NPM - Bower (by twitter) - Ender (NPM registry) - volo (like bower) - component (commonjs) - jam (amd)
13. Béla Varga ecmanauts.com 13 Environments - SimpleHTTPServer - Grunt - WAmp & Mamp - Virtual Machine - Vagrant - Docker.io
14. 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
15. Béla Varga ecmanauts.com 15 Virtual Box - real web server - works on all os - portable - open source
16. Béla Varga ecmanauts.com 16 Vagrant - dev Environment - single file config - use chef or puppet - works on all os
17. Béla Varga ecmanauts.com 17 docker - apps as container - Easy app delivery - Easy deploying - scaling systems
18. Béla Varga ecmanauts.com 18 IDE vs Editor - online tools - IDEs for business workflow - Editors for fast hacking - depends on you - depends on the company
19. Béla Varga ecmanauts.com 19 Editor - smaller - faster - Extendable - for single programmer - sublime, brackets, vi
20. 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)
21. Béla Varga ecmanauts.com 21 IDE - for projects (.settings) - Maybe slower - workflow integrated - for company workers - webstorm, visual studio
22. Béla Varga ecmanauts.com 22 WEbstorm - good js / node support - refactoring - debugging - Unit testing - zen coding, Emmet
23. Béla Varga ecmanauts.com 23 Browser tools - developer Tools - Extensions / plugins - Bookmarklets - dev tool snippets
24. Béla Varga ecmanauts.com 24 Chrome CAnary - newest experiments - chrome devtools - source maps - live editing - debugging - profilling
25. Béla Varga ecmanauts.com 25 Chrome CAnary
26. Béla Varga ecmanauts.com 26 browser plugins - web developer - Edit this cookie - page speed - firebug - yslow - clear cache
27. Béla Varga ecmanauts.com 27 bookmarklets - javascript snippets - Easy installation - lighter then plugins - cross browser - No Updates
28. Béla Varga ecmanauts.com 28 bookmarklets 㲗 Resizer
29. Béla Varga ecmanauts.com 29 devtool snippets
30. Béla Varga ecmanauts.com 30 Command line - settings - bindings - shell scripts - Coloring
31. Béla Varga ecmanauts.com 31 command line - bourne, bash, zsh - themes, tools, plugins - alias, path, git - oh-my-zsh, prezto - vi, grep, pipes
32. Béla Varga ecmanauts.com 32
33. Béla Varga ecmanauts.com 33 .dotfiles - git config / git ignore - shell config - editorconfig.org - dotfiles.github.io - sync over dropbox
34. Béla Varga ecmanauts.com 34 Testing - usability testing - Device testing - browser testing - functional Testing - Unit testing
35. Béla Varga ecmanauts.com 35 browser testing - graded browser support - pixel perfect is dead - user first - smallest device first
36. Béla Varga ecmanauts.com 36 browser testing - modern.ie - browserstack - saucelabs - Virtual Machine - opendevicelab & DEvice
37. Béla Varga ecmanauts.com 37
38. Béla Varga ecmanauts.com 38 device testing - responsive - os GUI & Theme - Screenshots - functional Testing - Unit testing
39. 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
40. Béla Varga ecmanauts.com 40 Debugging - Console API - Breakpoints - debugger Statement - Chrome Canary Dev Tools - remote Debugging
41. Béla Varga ecmanauts.com 41 Profiling - memory leaks - render speed - dom reflow - nEtwork speed - source analysis - code complexity
42. Béla Varga ecmanauts.com 42 Version Management - Git Workflows - visual merging tools - Pre Commit Hocks
43. Béla Varga ecmanauts.com 43 Git WorkFlow - centralized Workflow - feature branch Workflow - gitflow Workflow - forking Workflow http://www.atlassian.com/git/workflows
44. Béla Varga ecmanauts.com 44 Gitflow WorkFlow
45. Béla Varga ecmanauts.com 45 DEployment - version checkout - build prozess - testing - server distribution - cache buster, cdn purge - continuous deployment
46. Béla Varga ecmanauts.com 46 the end