The Modern Hacker's Guide to the Universe

0368b95a18e594981083b2eb9b177b2d?s=47 volkan
January 24, 2014

The Modern Hacker's Guide to the Universe

a practical approach to surviving a hackathon.

In this talk, we'll create a fully-functional MEAN app, and deploy it to the cloud in less than 30 minutes, using modern web technologies, and cloud services.

0368b95a18e594981083b2eb9b177b2d?s=128

volkan

January 24, 2014
Tweet

Transcript

  1. THE MODERN HACKER’S GUIDE TO THE UNIVERSE {'a practical approach':

    'to surviving a #hackathon ;)'} Volkan Özçelik me@volkan.io ! 02/07/2014 #hack4good 0.5 http://hack4good.io
  2. about:me • Volkan Özçelik • Mobile Front End Engineer @

    JiveSoftware.com • twitter: @linkibol • GitHub: https://github.com/v0lkan
  3. Other Places to Find Me • http://volkan.io/ • http://linkedin.com/in/volkanozcelik •

    http://speakerdeck.com/volkan/ • <shameless-plug rel=“Wanna Ace That Job Interview?”>
 http://o2js.com/interview-questions
 </shameless-plug>
  4. – E.F. Schumacher “Any intelligent fool can make things 


    bigger and more complex... 
 It takes a touch of genius - and a lot of courage 
 to move in the opposite direction.” WHEN IN DOUBT… KISS
  5. WE WILL… • Create a MEAN web app; • And

    deploy it to the cloud; • in less than 30 minutes!
  6. USING… • Yeoman (http://yeoman.io) • Grunt (http://gruntjs.com) • Bower (http://bower.io)

    • Angular.js (http://angularjs.org) • Sass (http://sass-lang.com/) • Compass (http://compass-style.org/) • LiveReload (http://livereload.com/) • Node.JS (http://nodejs.org) • MongoDB (http://mongodb.org) • Heroku (http://heroku.com) • MongoLab (https://mongolab.com/welcome/)
  7. PREREQUISITES • Install git (http://git-scm.com/book/en/Getting-Started-Installing-Git) • Install Node.JS (http://nodejs.org/) •

    Install MongoDB (http://www.mongodb.org/) • Install Ruby (https://www.ruby-lang.org/en/) • Install Sass (gem install sass;) • Install Compass (gem install compass;)
  8. YEOMAN at your service

  9. YEOMAN • mkdir ~/PROJECTS/hack4good05; • cd ~/PROJECTS/hack4good05; • git init;

    • npm install -g yo; • npm install -g generator-angular-fullstack;
  10. ANGULAR-FULLSTACK yo angular-fullstack;

  11. ANGULAR-FULLSTACK

  12. ANGULAR-FULLSTACK

  13. INITIAL LAUNCH • mongod; • grunt serve;

  14. INITIAL LAUNCH

  15. IN LESS THAN FIVE MINUTES… • We Have Created A

    Fully Functional Web App: • Node.JS / Express.js Server; • Angular.JS Client; • SASS Integration; • MongoDB Data Store; • LiveReload Integration.
  16. NOT BAD

  17. LET’S MODIFY IT!

  18. LET’S MODIFY IT!

  19. LET’S MODIFY IT!

  20. LET’S MODIFY IT!

  21. LET’S MODIFY IT!

  22. LET’S MODIFY IT!

  23. LET’S MODIFY IT!

  24. THE RESULT

  25. TO THE CLOUD… and beyond!

  26. TO THE CLOUD… • Signup to https://mongolab.com/ (for free) •

    Create a blank database • That’s it!
  27. TO THE CLOUD…

  28. TO THE CLOUD…

  29. TO THE CLOUD… • Signup to https://www.heroku.com/ (for free) •

    Install the Heroku Toolbelt • That’s It! more info: https://devcenter.heroku.com/articles/quickstart
  30. TO THE CLOUD… • grunt build; • yo angular-fullstack:deploy heroku;

    • cd dist; • git push heroku master;
  31. TO THE CLOUD… • grunt build; • yo angular-fullstack:deploy heroku;

    • cd dist; • foreman start; • git push heroku master;
  32. TO THE CLOUD…

  33. TIPS FOR YOUR SUCCESS • DONE IS BETTER THAN PERFECT!

    • Time is Candy (Don’t Re-Invent the Wheel) • Know Your Tools (Show Love to Yeoman) • Take Frequent Breaks (Enjoy the Event!) • Have Fun!
  34. THANK YOU! now go and hack the world!