Frontend tooling and workflows

1. HTTPS://GITHUB.COM/SEMIGRADSKY

2. Know Your
IDE

4. WebStorm (Java)
www.jetbrains.com/webstorm
Visual Studio (C++, C#)
https://www.visualstudio.com/
…
Sublime Text (C++, Python)
www.sublimetext.com/3
Brackets (JavaScript)
brackets.io
Atom (C++, JavaScript)
https://atom.io/
Visual Studio Code (C++, JavaScript)
https://code.visualstudio.com/
…

7. • HTTPS://WWW.JETBRAINS.COM/WEBSTORM/QUICKSTART/
• HTTP://BLOG.JETBRAINS.COM/WEBSTORM/
• HTTP://BLOG.JETBRAINS.COM/WEBSTORM/2015/06/LIVE-
WEBINAR-WEBSTORM-THINGS-YOU-PROBABLY-DIDNT-KNOW/

9. • HTTPS://SCOTCH.IO/COURSES/GET-TO-KNOW-SUBLIME-TEXT-3
• HTTPS://SCOTCH.IO/BAR-TALK/BEST-OF-SUBLIME-TEXT-3-FEATURES-
PLUGINS-AND-SETTINGS

11. http://www.stuff.tv/news/microsoft-reveals-
new-anime-internet-explorer-mascot-yes-really

12. http://gs.statcounter.com/

13. IE8 < 3% IE9 < 2.5% IE10 < 2% IE11 > 11%

15. • HTTPS://WWW.MOZILLA.ORG/EN-US/FIREFOX/DEVELOPER/
• HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/TOOLS

17. • HTTPS://DEVELOPER.CHROME.COM/DEVTOOLS
• HTTP://DEVTOOLSTIPS.COM/ARCHIVE

20. • HTTPS://MSDN.MICROSOFT.COM/EN-
US/LIBRARY/BG182326(V=VS.85).ASPX

30. npm install jquery
// node_modules
npm install jquery@3.0.0-alpha1
npm install -g jquery
npm search jquery
npm view jquery
npm update jquery

31. npm init
npm install
npm install --save bootstrap
npm install --save-dev webpack
npm uninstall --save react
npm run init
package.json

32. • HTTPS://GITHUB.COM/NPM/NODE-SEMVER
• HTTP://JUBIANCHI.GITHUB.IO/SEMVER-CHECK/

33. NODE-GYP
• HTTPS://GITHUB.COM/TOOTALLNATE/NODE-GYP#INSTALLATION

34. npm install -g bower
bower init
bower install
bower install --save bootstrap
bower install --save-dev jquery
// bower_components
bower uninstall --save react
bower.json

35. Asynchronous module definition

36. REQUIRE.JS

37. REQUIRE.JS

38. REQUIRE.JS

41. npm install -g browserify
browserify src/js/main.js -o dest/main.js -d
npm install -g watchify
watchify src/js/main.js -o dest/main.js -d

42. REQUIRE.JS

44. http://kangax.github.io/compat-table/es6/

48. PostCSS

50. npm install -g grunt-cli
npm install --save-dev browserify
npm install --save-dev grunt
npm install --save-dev grunt-browserify
touch Gruntfile.js

54. npm install -g grunt-cli
npm install --save-dev grunt
npm install --save-dev grunt-tslint
npm install --save-dev grunt-typescript
npm install --save-dev grunt-contrib-watch
touch Gruntfile.js

60. npm install -g gulp
npm install --save-dev gulp
npm install --save-dev gulp-tslint
npm install --save-dev gulp-typescript
touch gulpfile.js
https://truongtx.me/2015/06/07/gulp-with-browserify-and-watchify-updated/

62. TAKE ADVANTAGE OF
CODE ANALYSIS TOOLS
ESLINT

65. AUTOMATE YOUR
CODING STANDARD

66. STEP BACK AND
AUTOMATE, AUTOMATE,
AUTOMATE

67. npm install browser-sync --save-dev
browser-sync start --server app
browser-sync reload --port 4000 --files="*.css"

72. http://yeoman.io/generators/
npm install -g grunt-cli bower
yo generator-karma generator-angular
mkdir my-new-project && cd $_
yo angular [app-name]
// subgenerators
yo angular:route myroute
yo angular:controller user
yo angular:directive myDirective
…

73. HTTPS://DEVELOPERS.GOOGLE.COM/WEB/TOOLS/STARTER-KIT/

76. npm install webpack -g
npm install --save css-loader style-loader
webpack ./main.js bundle.js

77. webpack
webpack --progress --watch
npm install webpack-dev-server –g
webpack-dev-server --progress

79. • HTTPS://WWW.BROWSERSTACK.COM/ ( )
• HTTP://DEV.MODERN.IE/TOOLS/SCREENSHOTS/

80. • HTTPS://WWW.BROWSERSTACK.COM/ ( )
• HTTP://DEV.MODERN.IE/TOOLS/VMS/WINDOWS/

81. • YSLOW
• PAGESPEED INSIGHTS