Download - A day in the office of a js developer
![Page 1: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/1.jpg)
JS The new black
Kresimir AntolicJavaScript Team Dictator
![Page 2: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/2.jpg)
A day in the officeOf a JavaScript developer
![Page 3: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/3.jpg)
Environmenta place to lay my head
![Page 4: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/4.jpg)
Desktop environment
![Page 5: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/5.jpg)
Alternative Environments
![Page 6: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/6.jpg)
Sofa
![Page 7: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/7.jpg)
Bathtub
![Page 8: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/8.jpg)
Editorthe right tool for the right job
![Page 9: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/9.jpg)
Sublime Text
![Page 10: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/10.jpg)
Alternative Editors● WebStorm● Atom● Brackets● Aptana (Eclipse)● Notepad++● VisualStudio
![Page 11: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/11.jpg)
ShellBecause H4x0rz
![Page 12: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/12.jpg)
Shells● ZSH
○ interactive shell!○ “oh my zsh” plugin pack
● xterm
● win command prompt○ oh well
![Page 13: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/13.jpg)
DebuggingThe bread and butter
![Page 14: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/14.jpg)
Chrome Developer Tools
Debug the web
![Page 15: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/15.jpg)
Alternatives● Firefox Dev Tools + FireBug
● Opera DragonFly
● IE dev tools (I kid you not)
![Page 16: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/16.jpg)
Mobile Debugging
● Chrome (4+, adb)
● iOS 6 - Safari dev tools
● external tools (weinre, jsconsole)..
![Page 17: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/17.jpg)
LibrariesThe Helpers
![Page 18: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/18.jpg)
jQuery/Zepto
![Page 19: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/19.jpg)
Helpfull ● jQuery Ui - widgets● underscore - the JS batman utilty belt● modernizr - feaure detection● select2 - fancy select fields● Moment - date library● all the jQuery plugins
![Page 20: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/20.jpg)
FrameworksThe Builders
![Page 21: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/21.jpg)
Backbone/Angular
![Page 22: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/22.jpg)
The others● KnockoutJs● EmberJs● CanJS● BatmanJs
![Page 23: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/23.jpg)
Mobile
● jQuery mobile
● Sencha Touch
![Page 24: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/24.jpg)
ModularizationBecause we don’t want a pile...
![Page 25: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/25.jpg)
RequireJS
![Page 26: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/26.jpg)
Alternatives● almond
● Curl
● StealJS
![Page 27: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/27.jpg)
CSS preprocessorsBecause we don’t like CSS
Say NO to CSS
![Page 28: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/28.jpg)
SASS + Compass
![Page 29: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/29.jpg)
Alternatives● Less
● Stylus
![Page 30: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/30.jpg)
TemplatingBecause we love dresses
![Page 31: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/31.jpg)
Handlebars
![Page 32: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/32.jpg)
![Page 33: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/33.jpg)
Others● Mustache
○ minimal; passive view● Jade
○ HAML-like; (to)rich● Underscore
○ minimal, but comes with underscore
![Page 34: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/34.jpg)
FluffBecause we like it pretty
![Page 35: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/35.jpg)
● Bootstrap
● Foundation, etc grids
● Topcoat
● Purecss
● Kendo UI
● jQueryUI
● YUI
![Page 36: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/36.jpg)
Package ManagmentNever having to worry about where you put something
![Page 37: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/37.jpg)
Bower
![Page 38: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/38.jpg)
Alternatives● Jam
● Ender
● browserify
![Page 39: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/39.jpg)
ScaffoldBecause we’re lazy
![Page 40: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/40.jpg)
Yo (Yeoman) - Grunt and Yeoman included
![Page 41: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/41.jpg)
Task RunnersBecause we’re really really lazy*
* practical
![Page 42: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/42.jpg)
Grunt
![Page 43: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/43.jpg)
Grunt - JS● code quality (JSLint / JSHint)● optimization
○ concatenation○ minifier○ uglifier ○ client side templating
![Page 44: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/44.jpg)
Grunt - CSS● CSS preprocessors
○ Less
○ Sass (libSass)
○ Stylus
● CSS minifier
![Page 45: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/45.jpg)
Everything!● testing
● deployment
● watchers
● cleaning windows
![Page 46: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/46.jpg)
Honorable Mention
Gulp.js
![Page 47: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/47.jpg)
HumansBecause humans!
![Page 48: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/48.jpg)
A team
![Page 49: A day in the office of a js developer](https://reader033.vdocuments.us/reader033/viewer/2022060107/554a0ec9b4c9058c5d8b4896/html5/thumbnails/49.jpg)
Here is a duck. Questions?