Modern Web Development Techniques

Meeting #1

June 17, 2014

OrganizerMark Santiago / @msantiago508

Hi, I'm...

So, Why Another Meetup?

Let your inner geek out.

Urkle

This used to be fun, remember?

Modern Workflow Techniques

Part 1

(with an excessive use of Gifs)

Warning!!

You might have heard about some of this!

Workflow

Processes through which a piece of work passes from initiation to completion.

Modern Development Workflow

Helps you get to completion faster.

Advanced Workflow

VS.

Getting $#*T Done

Working through ideas...

IDEATION

“All of the sudden we can see and show others something that is concrete and meaningful (at least to us) yet extremely accessible and easy to change.”

Troy Church (Medium.com Post)

Low fidelity ok?

Balsamic

bootsketch

POP-great for mobile

Need Higher Fidelity....

 

The point is you have

Tons of Options

OR

Start Building to Design

Do you Grid?

Twitter Bootstrap,Zurb,Ect.

Ok,

But do you really need a framework?

These "Frameworks" are used mostly as "Systems"

“A system is "parts making a whole"”

“Frameworks "take input spit out different output"”

Sam Richards

When you just need a grid:

  • Singularity
  • Susy
  • Griddle
  • Sooooo Many

    • In Browser Dev

    Pattern Lab

    Yeoman

    Chrome

    With a Few extensions

     

    LiveStyle
    Bi-Directional CSS Cap

    Full Page
    Screen

    Edge Inspect/Live Reload

    Livestyle is a clever way to keep your design changes on any given project.

    (It's still in Beta.)

    Screen Cap to keep alternate versions for revision

     

    LIVE RELOADING TO SEE ON REAL DEVICES AS YOU DESIGN

    Starting (really) Small

    Atoms & Molecules

     

    Atoms are items such as basic tags.

    Molecules encourages a “do one thing and do it well” mentality. Such as form lable.

    Getting Slightly Bigger

    Organisms

     

    Joined together to form complete interface pieces.

    A Product Grid or an entire Form Field.

    This is what we see

    Templates & Pages

     

    Templates provide context from all the molecules and organisms

    Pages are instances of those templates. This is where you start putting in your actual content.

    Has Some Great Resources

    • Design Patterns
    • Examples
    • ISH
     

    Yeoman

    Around since 2012

    Scaffolding your next project

     

     

    • An opinionated structure
    • Dev Toolset
    • TONS of Options to start

    Frameworks Galore

     

    Awesome Helpers

     

    Does your dirty Work

    Does the scafolding

     Gets what you what you need 

    Super Quick to Go

    Just Install Node and NPM

    Then...

    npm install -g yo

    Get a basic Web app up in seconds

    npm install -g generator-webapp

    Add some cool things like fontAwsome for icons

    $ bower install font-awesome --save

    You can control what bower installs with Bower.json file

    {
"name":  "MyProject",
"version": "0.0.1",
"dependencies": {
    "backbone": "latest",
    "requirejs": "2.1.1"
    }
}
    Then 
    bower install

    Then get that Hog to work for you

    See what's done so far

    grunt serve

    Great Sites to Check Out

    THE END???

    Part 2 TBS in July

    • Digging into the build
    • Testing
    • Remote Debugging on Mobile
    • Get it Production Ready
    Mark Santiago/ @msantiago508

    Thanks For Coming

    Now go have some fun.

    WorkFlow Techniques Part 1

    By Mark Santiago

    Made with Slides.com

    WorkFlow Techniques Part 1

    Visit our site for more meetup notes: http://wmwdt.github.io

    • 1,628

    More from Mark Santiago