Embed Size (px)
Citation preview
Material DesignFrom 0 to Developerby andrew haskin
@ladyleet
Material Design
From 0 to Developer with special guest
Andy Nilson (@andy_nilson)
by andrew haskin
@ladyleet
Material DesignI used to be a business personby andrew haskin
@ladyleet
Material DesignAnd I still amby andrew haskin
@ladyleet
Material DesignBut once upon a timeby andrew haskin
@ladyleet
Material DesignI decided I wanted to be a developerby andrew haskin
@ladyleet
Material DesignSo I’m here to share my journeyby andrew haskin
@ladyleet
Material DesignHopefully it inspires you to take leaps of faith
on your lifeby andrew haskin
@ladyleet
Material DesignAnd do what serendipity is pushing you to doby andrew haskin
@ladyleet
Tracy Lee
@ladyleet github.com/ladyleet
modern-web.org medium.com/@ladyleet
@ladyleet
@ladyleet@ladyleet
@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
@ladyleet@ladyleet
Acquired by DinnerLab December 2015
is now
@ladyleet@ladyleet
One day I met Tomster
@ladyleet@ladyleet
And Tomster changed my life
@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
Material DesignMy initial coding journeyby andrew haskin
@ladyleet
@ladyleet@ladyleet
I spent months collecting Tomsters before I deciding I wanted to learn.
My initial coding journey
@ladyleet@ladyleet
My “Formal” Training 2 weeks
May 4, 2015 - May 15, 2015http://ladyleet.github.io/codingclasses/
My initial coding journey
@ladyleet@ladyleet
Day 1
http://ladyleet.github.io/codingclasses/
My initial coding journey
@ladyleet@ladyleet
Day 3
My initial coding journeyhttp://ladyleet.github.io/codingclasses/
@ladyleet@ladyleet
Day 6
http://ladyleet.github.io/codingclasses/
My initial coding journey
@ladyleet@ladyleet
Day 13
My initial coding journey
@ladyleet@ladyleet
Why did I want to learn? The community.
My initial coding journey
Material DesignMy web apps and open source contributionsby andrew haskin
@ladyleet
@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.
@ladyleet
My Web Apps
@ladyleet@ladyleet
My Web Apps
@ladyleet@ladyleet
My Web Apps
@ladyleet@ladyleet
Open Source Contributions
@ladyleet@ladyleet
Open Source Contributions
Material DesignCLI toolsby andrew haskin
@ladyleet
CLIs
@ladyleet@ladyleet
Anyone can create a new project easily with no knowledge needed.
Ember-CLI
@ladyleet@ladyleet
Angular-CLI
@ladyleet@ladyleet
Dev Server
@ladyleet@ladyleet
Dev Server
@ladyleet@ladyleet
Components make my code more manageable. And are easy to create and
setup.
@ladyleet@ladyleet
Free Tests!
@ladyleet@ladyleet
Material DesignHow easy it is to build an appby andrew haskin
@ladyleet
@ladyleet
We’re prototyping the bananaJS app
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
Create angular-cli ng2 app
@ladyleet
Angular 2
Configure materialize-css
Ng2 ng-cli app structure
Creating components
Template-driven forms
Using the router
Material Design
$ npm install angular-cli
$ ng new <name-of-app>
$ ng s
@ladyleet
Create angular-cli ng2 app
@ladyleet
Configure materialize-css
Ng2 ng-cli app structure
Creating components
Angular 2
Template-driven forms
Using the router
Material Design$ npm install materialize-cssby andrew haskin
@ladyleet
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
@ladyleet
Success Looks Like This
Font will change to material design standard font - Roboto
Create angular-cli ng2 app
@ladyleet
Configure materialize-css
Ng2 ng-cli app structure
Creating components
Angular 2
Template-driven forms
Using the router
@ladyleet
Angular 2 Angular-CLI Webpack App Structure component based.css .html .spec.ts .ts
Create angular-cli ng2 app
@ladyleet
Configure materialize-css
Ng2 ng-cli app structure
Creating components
Angular 2
Template-driven forms
Using the router
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
Create angular-cli ng2 app
@ladyleet
Configure materialize-css
Ng2 ng-cli app structure
Creating components
Angular 2
Template-driven forms
Using the router
Create angular-cli ng2 app
@ladyleet
Configure materialize-css
Ng2 ng-cli app structure
Creating components
Angular 2
Template-driven forms
Using the router
Create angular-cli ng2 app
@ladyleet
Configure materialize-css
Ng2 ng-cli app structure
Creating components
Angular 2
Template-driven forms
Using the router
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
@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
Tracy Lee
@ladyleet github.com/ladyleet
modern-web.org medium.com/@ladyleet
@ladyleet
