in a serious webapp project

@naugtur, meet.js 02.2013

Why so serious?

  • new rendering model
    and why googling isn't helpful
  • CSS architecture
  • styleguide first
  • we defeated Flash, but it's
    still way ahead (css transforms)

Flexible layouts

W3C says:
An element with ‘display:flex’ or ‘display:inline-flex’ is a flex container. Children of a flex container are called flex items and are laid out using the flex layout model.

Flex dimensions

main, cross, all the specs

Tons of things to use: overview on MDN

>>Live DEMO<<

Too much flexibility makes you sloppy

Cool, I want to use it

    Browser support is a mess
  • Old 2009 version partial:
  • Chrome, Firefox 2+, Safari 3.1+
    IE10 - something in between
    (the "we almost nailed it" spec version)
  • New syntax:
  • Firefox 20+, Chrome 21+, Opera (&Mobile) 12.1+, Blackberry 10+
  • Current state - caniuse.com
  • html5please says avoid

Just don't use it yet...

- so you're a clientside architect

- that's right!

- and how is your CSS structured?

Structure tips

  • #namespace in front of everything at least
  • sort it, comment it (describe hacks!)
  • future proof
    .yellowthing .firstSection .top .center
  • meaningful classes
    .role-{role name} .bt-{action name}
    .box-{what it does}
  • split to multiple files
  • separate functionality from looks
  • start using LESS/SASS while you can
  • STYLEGUIDE!!!!11one

Style guide

Reusable CSS bits to aid UI development. Good practices are strong in this one.

.button {  }
.button:hover {  }
.button.active {  }

.icon-duck {  }

.navbar {  }

.notification {  }
.notification.error {  }
.notification.success {  }

.item {  }

Style guide

It has a demo page too. Easy to work with, easy to demo. Saves the hassle of running the app

  <p>Test all markup elements you want to turn into buttons</p>

  <div class="button">div button</div>
  <a href="" class="button">a button</a>
  <span class="button">span button</span>
  <input type="button" class="button" value="input button" />

  <div class="button active icon-duck">active button with duck icon</div>
  <div class="button icon-duck" title="empty icon button"></div>


Style guide

  • Start your project from making a styleguide
  • LESS/SASS are the best for that!
  • You can start small
  • Did you know that designers are learning to CSS now?
  • You can use twitter bootstrap and alikes
    if you don't have a designer :)

What's in it for me?

  • You might have to clean it up
  • ...but it's still better than a drawing
  • Build structure, forget pixel perfection
  • Now merge it in - once and for all

The setup

  • less.js for development
  • Styleguide as a part of your app
  • Single optimized css file on production
  • How about I show you some? (live demo)


CSS transforms

So you're writing an app...
well, good luck with that.

  • Want to know how the object was transformed?
    No problem, you just need a parser
  • Fix: don't store variables in CSS, ok?
  • Forget mouse interactions
  • jQueryUI *able is a solid piece of code
    with all the options you'd need. not.
  • Fix: ... doh

CSS transforms

I'm going on an adventure!

  • drag, drop, select, zoom, pan, scroll and don't forget the fingers
  • controls for transformed elements are hard. You know it when you try
  • libraries are full of assumptions
  • I've recently patched jQuery UI draggable and selectable to work
    with scale

Flash had it all figured out over a decade ago!
[I checked]

There's hope

famo.us might solve all the problems. Now we wait.





Beginner JS developers who want to learn from working with experienced developers on open-source projects
Experienced JS developers who want to learn how to manage a team, create conventions and or just have cool pet projects.