15-437 Web development tools

Transcript

1. Web Development Tools Thierry Sans
2. Browsersync 
 browser synchronization
3. Usage $ browser-sync start --server --no-online --files=“**/*"
4. JSHint javascript code quality tools
5. Usage Check a specific file $ jshint app/myscript.js/
 Check a directory $ jshint app 
 Check this JSHint cheatsheet: http://ricostacruz.com/cheatsheets/jshint.html
6. Bower
 package manager for frontend development
7. Usage Create a bower.json config file for your project (first time only) $ bower init Install a component (e.g. jQuery) and save it to bower.json $ bower install jQuery --save
8. Git version control system
9. Configuration (first time only) $ git config --global user.name $ git config --global user.email
10. The essentials Clone a new repository $ git clone https://github.com/CarnegieMellonQatar/15-437.git Update local files $ git pull Pushing files to the server $ git add example/file $ git rm example/file $ git commit -m “here is what changed” $ git push
11. Basic concepts $ git commit https://www.youtube.com/watch?v=A-Cll9jEnnM&list=PL0lo9MOBetEHhfG9vJzVCTiDYcbhAiEqL&index=8 $ git log https://www.youtube.com/watch?v=Ew8HQsFyVHo&list=PL0lo9MOBetEHhfG9vJzVCTiDYcbhAiEqL&index=6 $ git diff https://www.youtube.com/watch?v=RXSriVcoI70&list=PL0lo9MOBetEHhfG9vJzVCTiDYcbhAiEqL&index=7
12. Advanced concepts - Branching $ git branch https://www.youtube.com/watch?v=H5GJfcp3p4Q&list=PL0lo9MOBetEHhfG9vJzVCTiDYcbhAiEqL&index=2 $ git checkout https://www.youtube.com/watch?v=HwrPhOp6-aM&list=PL0lo9MOBetEHhfG9vJzVCTiDYcbhAiEqL&index=1 $ git merge https://www.youtube.com/watch?v=yyLiplDQtf0&list=PL0lo9MOBetEHhfG9vJzVCTiDYcbhAiEqL&index=12
13. Advanced concepts - Forking (specific to GitHub) Forking https://www.youtube.com/watch?v=5oJHRbqEofs Pull request https://www.youtube.com/watch?v=d5wpJ5VimSU&index=19&list=PLg7s6cbtAD15G8lNyoaYDuKZSKyJrgwB-