Marketplace UI

Lessons, tricks, and various and sundry other things I think of

@potch, Mozilla

Questions?

Doing it "right"

(Mozilla is awesome)

harder
better
faster
stronger

• $.pjax?
• pushState!
• deep-linking
• Django-friendly

^Frag_ments

lessc++

Frameless

@column: 48;    // The column-width of your grid in pixels
@gutter: 24;    // The gutter-width of your grid in pixels
@px: 1px;       // Multiply by this to make a number in px.

.width(@cols:1) {
    width: (@cols * (@column + @gutter) - @gutter) * @px;
}
.max-width(@cols:1) {
    max-width: (@cols * (@column + @gutter) - @gutter) * @px;
}
      

format('Templating for {0} and {1}!',
       'fun', 'profit');

var t = template('Templating for {0} and {1}!');

alert(t('booze', 'drugs'));
      

$.when(life_gets_hard)
.done(Defer your troubles);

Real production code

$.when(doPaypal(product))
 .then(completePurchase);
      

Other things