From 0 to Developer - Silicon Valley Code Camp
0 likes188 views
The document outlines Andrew Haskin's journey from being a business person to a developer, sharing insights on material design, coding, web apps, and open source contributions. It emphasizes the ease of building applications today through tools like Angular CLI and Materialize CSS. The agenda includes Haskin's coding journey, web app development, and practical coding tips, highlighting the supportive community and conventions in software development.
From 0 to Developer - Silicon Valley Code Camp
- 1. Material DesignFrom 0 to Developer by andrew haskin @ladyleet
- 2. Material Design From 0 to Developer with special guest Andy Nilson (@andy_nilson) by andrew haskin @ladyleet
- 3. Material Design I used to be a business person by andrew haskin @ladyleet
- 4. Material Design And I still am by andrew haskin @ladyleet
- 5. Material Design But once upon a time by andrew haskin @ladyleet
- 6. Material Design I decided I wanted to be a developer by andrew haskin @ladyleet
- 7. Material Design So I’m here to share my journey by andrew haskin @ladyleet
- 8. Material Design Hopefully it inspires you to take leaps of faith on your life by andrew haskin @ladyleet
- 9. Material Design And do what serendipity is pushing you to do by andrew haskin @ladyleet
- 12. @ladyleet@ladyleet The Dishcrawl Growth Story • 250 cities in the US, CA, UK • Grown 1000% in 1 year • 180 people working for us • Core team of 10
- 13. @ladyleet@ladyleet Acquired by DinnerLab December 2015 is now
- 14. @ladyleet@ladyleet One day I met Tomster
- 15. @ladyleet@ladyleet And Tomster changed my life
- 16. @ladyleet@ladyleet • My initial coding journey • My web apps and open source contributions • CLI tools • How easy it is to build an app Today’s Agenda
- 17. Material Design My initial coding journey by andrew haskin @ladyleet
- 18. @ladyleet@ladyleet I spent months collecting Tomsters before I deciding I wanted to learn. My initial coding journey
- 19. @ladyleet@ladyleet My “Formal” Training 2 weeks May 4, 2015 - May 15, 2015 http://ladyleet.github.io/codingclasses/ My initial coding journey
- 20. @ladyleet@ladyleet Day 1 http://ladyleet.github.io/codingclasses/ My initial coding journey
- 21. @ladyleet@ladyleet Day 3 My initial coding journey http://ladyleet.github.io/codingclasses/
- 22. @ladyleet@ladyleet Day 6 http://ladyleet.github.io/codingclasses/ My initial coding journey
- 23. @ladyleet@ladyleet Day 13 My initial coding journey
- 24. @ladyleet@ladyleet Why did I want to learn? The community. My initial coding journey
- 25. Material Design My web apps and open source contributions by andrew haskin @ladyleet
- 26. @ladyleet@ladyleet Convention over configuration makes life easy. • Do a lot with knowing very little. • A “right” way. Less probability to screw up. • If you follow conventions, things just work. • OPC - Other people’s code. I can look at other projects and know where things are even if I don’t know what they are.
- 32. Material Design CLI tools by andrew haskin @ladyleet
- 33. CLIs @ladyleet@ladyleet Anyone can create a new project easily with no knowledge needed.
- 38. Components make my code more manageable. And are easy to create and setup. @ladyleet@ladyleet
- 40. Material Design How easy it is to build an app by andrew haskin @ladyleet
- 41. @ladyleet We’re prototyping the bananaJS app
- 42. Create angular-cli ng2 app @ladyleet Here’s the journey we’re about to take Configure materialize-css Ng2 ng-cli app structure Creating components Template-driven forms Using the router
- 43. Create angular-cli ng2 app @ladyleet Angular 2 Configure materialize-css Ng2 ng-cli app structure Creating components Template-driven forms Using the router
- 44. Material Design $ npm install angular-cli $ ng new <name-of-app> $ ng s @ladyleet
- 45. Create angular-cli ng2 app @ladyleet Configure materialize-css Ng2 ng-cli app structure Creating components Angular 2 Template-driven forms Using the router
- 46. Material Design $ npm install materialize-css by andrew haskin @ladyleet
- 47. Material Design add to your index.html file <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/ jquery.js"></script> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/ materialize/0.97.6/css/materialize.min.css”> <script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/ js/materialize.min.js"></script> by andrew haskin @ladyleet
- 48. @ladyleet Success Looks Like This Font will change to material design standard font - Roboto
- 49. Create angular-cli ng2 app @ladyleet Configure materialize-css Ng2 ng-cli app structure Creating components Angular 2 Template-driven forms Using the router
- 50. @ladyleet Angular 2 Angular-CLI Webpack App Structure component based .css .html .spec.ts .ts
- 51. Create angular-cli ng2 app @ladyleet Configure materialize-css Ng2 ng-cli app structure Creating components Angular 2 Template-driven forms Using the router
- 52. Material Design Basic Component Generation $ ng generate <component-name> Shortcuts & Configurations (use ng g - - help for full list) $ ng g c -is -it - - no-spec <component-name> (generates component and adds inline style, inline template, and doesn’t generate spec file) by andrew haskin @ladyleet
- 53. Create angular-cli ng2 app @ladyleet Configure materialize-css Ng2 ng-cli app structure Creating components Angular 2 Template-driven forms Using the router
- 54. Create angular-cli ng2 app @ladyleet Configure materialize-css Ng2 ng-cli app structure Creating components Angular 2 Template-driven forms Using the router
- 55. Create angular-cli ng2 app @ladyleet Configure materialize-css Ng2 ng-cli app structure Creating components Angular 2 Template-driven forms Using the router
- 56. Create angular-cli ng2 app @ladyleet What we’ve learned today Configure materialize-css Ng2 ng-cli app structure Creating components Template-driven forms Using the router
- 57. @ladyleet@ladyleet • My initial coding journey • My web apps and open source contributions • CLI tools • How easy it is to build an app What we went over today