here - JSinSA

bolivialodgeInternet and Web Development

Dec 14, 2013 (3 years and 5 months ago)

63 views

Lessons learnt building

Mimi 2
Marc Heiligers
marcheiligers
Mimi

2
vs
HTML
.
Fight!
Marc Heiligers
@marcheiligers
Mad Mimi
Chief of Technology
RUBYFUZA
Cape Town, first week of February every year
Distributed Development
Tobie Langel

Prototype.js Core Member

Github tobie
3392
Dave Hoover

Author of Apprenticeship
Patterns

Partner at Obtiva

Senior Developer at Groupon

Github redsquirrel
2512
Juriy “Kangax” Zaytsev

Author of Fabric.js

Prototype.js Core Member

Creator Scripteka.com

Github kangax
383
Jesse Newland
Github jnewland
47!
His Github ID is so low...
...they had to hire him.
Marc Heiligers
Github marcheiligers

173701
The point is...
HTML5
<!DOCTYPE html>
<!
DOCTYPE
 html>
     
<!-­‐-­‐[if  lt  IE  7  ]>  <html  lang="en"  class="no-­‐js  ie6">  <![endif]-­‐-­‐>
 
<!-­‐-­‐[if  IE  7  ]>        <html  lang="en"  class="no-­‐js  ie7">  <![endif]-­‐-­‐>
 
<!-­‐-­‐[if  IE  8  ]>        <html  lang="en"  class="no-­‐js  ie8">  <![endif]-­‐-­‐>
 
<!-­‐-­‐[if  IE  9  ]>        <html  lang="en"  class="no-­‐js  ie9">  <![endif]-­‐-­‐>
 
<!-­‐-­‐[if  (gt  IE  9)|!(IE)]><!-­‐-­‐>
 
   
<
html
 
lang
=
"en"
 
class
=
"no-­‐js  non-­‐ie"
>
 
<!-­‐-­‐<![endif]-­‐-­‐>
<
head
>
...
   
<!-­‐-­‐[if  IE  7  ]><%=  mimi2_stylesheet_link_tag(
"ie7"
)  %><![endif]-­‐-­‐>
 
   
<!-­‐-­‐[if  IE  8  ]><%=  mimi2_stylesheet_link_tag(
"ie8"
)  %><![endif]-­‐-­‐>
   
<!-­‐-­‐[if  IE  9  ]><%=  mimi2_stylesheet_link_tag(
"ie9"
)  %><![endif]-­‐-­‐>
   <
script
 
src
=
"/scripts/modernizr.min.js?mimi2=1"
></
script
>
   
<!-­‐-­‐[if  lt  IE  9]>
       <script>document.execCommand("BackgroundImageCache",  false,  true);</script>
   <![endif]-­‐-­‐>
   
<!-­‐-­‐[if  lt  IE  9]>
       <script  src="/scripts/excanvas.js?mimi2=1"></script>
   <![endif]-­‐-­‐>
CSS3
Buttons
//subtle  
button
.btn.subtle
 {
   
background
:  
none
;
   
border
:
1
px
 
solid
 
transparent
;
   @include  
box-­‐shadow
(none);
   
font-­‐weight
:  $
medium
-­‐weight;    
   
color
:  darken($
default
-­‐
text
-­‐color,
10
%
);
}
.btn
,  
.btn.subtle:hover
 {
   
cursor
:  
pointer
;
   
text-­‐align
:  
center
;
   
margin
:  
0
;            
   
border
:  
1
px
 
solid
 
rgba
(
0,0,0,0.25
);  
   
color
:  darken($
default
-­‐
text
-­‐color,
10
%
);
   
font-­‐size
:  $
default
-­‐font-­‐size;
   
padding
:  #{(
6
/
16
)}
em
 0
.75em
 #{(10/16)}
em
 0
.75em
 !important;  
//16  =  default-­‐font-­‐size
...
//subtle  
button
.btn.subtle
 {
   
background
:  
none
;
   
border
:
1
px
 
solid
 
transparent
;
   @include  
box-­‐shadow
(none);
   
font-­‐weight
:  $
medium
-­‐weight;    
   
color
:  darken($
default
-­‐
text
-­‐color,
10
%
);
}
.btn
,  
.btn.subtle:hover
 {
   
cursor
:  
pointer
;
   
text-­‐align
:  
center
;
   
margin
:  
0
;            
   
border
:  
1
px
 
solid
 
rgba
(
0,0,0,0.25
);  
   
color
:  darken($
default
-­‐
text
-­‐color,
10
%
);
   
font-­‐size
:  $
default
-­‐font-­‐size;
   
padding
:  #{(
6
/
16
)}
em
 0
.75em
 #{(10/16)}
em
 0
.75em
 !important;  //16  =  default-­‐font-­‐size
   position:  relative;
   text-­‐decoration:  none;
   text-­‐shadow:  0  1px  0  rgba(255,255,255,0
.8
);
   font-­‐weight:  $medium-­‐weight;
   background-­‐color:  
#f1f1f1
;
   line-­‐height:  normal;    
   display:  inline-­‐block;
   vertical-­‐align:  middle;
   white-­‐space:  nowrap;
   overflow:  visible;
   outline:  0;  
   -­‐webkit-­‐appearance:  none;  
   -­‐moz-­‐appearance:  none;
   @include  transform(  translateZ(0)  );
   @include  transition(  none  !important  );
   @include  user-­‐
select
(  none  );
   @include  border-­‐radius($
input
-­‐radius);
   @include  box-­‐sizing(  border-­‐box  );
   @include  background-­‐clip(  border-­‐box  );
   @include  box-­‐shadow("inset  0  -­‐4px  0  rgba(0,0,0,0
.06
),
           inset  0  -­‐3px  0  rgba(0,0,0,0
.06
),
           inset  0  -­‐2px  0  rgba(0,0,0,0
.06
),
           inset  0  -­‐1px  0  rgba(0,0,0,0
.06
),
           inset  0  -­‐5px  0  rgba(255,255,255,1),
           inset  0  1px  1px  rgba(255,255,255,1),
           0  2px  3px  rgba(0,0,0,0
.1
)");  
           
   
.no-­‐boxshadow
 &{
       
border
:  
1
px
 
solid
 
#bbb
;  
       
padding
:  
0.5
em
 
0.75
em
 
0.5
em
 
0.75
em
 
!important
;
       
background
:  $subtle-­‐bg-­‐color  
url
(
/img/button_bg.png
)  
0
 
0
 
repeat-­‐x
;
       @include  
box-­‐shadow
(none);
   }
   
   
/*  Hovered  State  */
   &
:hover
,  &
:focus
,  &
.hover
{
       
outline
:  
none
;    
       
color
:  darken($
default
-­‐
text
-­‐color,
10
%
);
       
background-­‐color
:  
#f6f6f6
;
       
/*  
       background:  
           rgba(255,255,255,1)  
           -­‐webkit-­‐gradient(
               linear,  
               left  top,
               left  bottom,
               color-­‐stop(0,  rgba(0,0,0,0.06)  ),
               color-­‐stop(.3,  rgba(0,0,0,0.03)  ),
               color-­‐stop(1,  rgba(0,0,0,0.01)  )
           );
       background:  
           rgba(255,255,255,1)  
           -­‐moz-­‐linear-­‐gradient(
               center  top,
               rgba(0,0,0,0.06)  0%,
               rgba(0,0,0,0.03)  30%,
               rgba(0,0,0,0.01)  100%
           );
       */
           
       @include  
background
-­‐
clip
(  
padding
-­‐box  );    
           
       .no-­‐boxshadow  &{
           
background-­‐color
:
#ddd
;
           
background-­‐position
:  
0
 
-­‐100
px
;
           &.primary{
                   
background-­‐position
:  
0
 
-­‐400
px
;
           }
       }  
       &
.primary
{
           
background-­‐color
:  lighten(
#FF9800
,
5
%
);
           //removed  due  to  performance  issues
           //@include  linear-­‐gradient(#FFAE00,#FF6C00);    
           
color
:  
#fff
;
       }  
   }
   
   &
:focus
{
       
border-­‐color
:  
#6CB9E6
;
       @include  
box-­‐shadow
("inset  0  -­‐4px  0  rgba(0,0,0,0.06),
           inset  0  -­‐3px  0  rgba(0,0,0,0.06),
           inset  0  -­‐2px  0  rgba(0,0,0,0.06),
           inset  0  -­‐1px  0  rgba(0,0,0,0.06),
           inset  0  -­‐5px  0  rgba(255,255,255,1),
           inset  0  1px  1px  rgba(255,255,255,1),
           0  2px  3px  rgba(0,0,0,0.1),
           0  0  4px  #80bfff");
   }
   
   
/*  Active  State  */
   &
:active
,  &
.active
,  &
:active:focus
 {
       
color
:  $
default
-­‐
text
-­‐color;
       
padding
:  
0.5
em
 
0.75
em
 
!important
;
       @include  
box-­‐shadow
("inset  0  1px  1px  rgba(255,255,255,1),  0  2px  3px  rgba(0,0,0,0.1)");  
       
outline
:  
none
;
       
       .no-­‐boxshadow  &  {
           
background-­‐position
:  
0
 
-­‐200
px
;
           &.primary  {
               
background-­‐position
:  
0
 
-­‐500
px
;
               @include  
box-­‐shadow
(none);
           }
       }
       
       
/*  Primary  Button,  Active  */
       &
.primary
 {
           @include  
box-­‐shadow
("inset  0  -­‐1px  0  rgba(255,255,255,0.2),inset  0  1px  1px  rgba(255,255,255,0.2)");
           
color
:  
#fff
;
       }
   }
   
   
/*  Selected  Button  */
   &
.selected
,  &
.selected:active
{
       
border-­‐color
:  
#aaa
;
       
border-­‐top-­‐color
:  
#777
;
       
border-­‐bottom-­‐color
:  
#ddd
;
       
margin-­‐top
:  
0
 
!important
;
       
padding
:
0.5
em
 
0.75
em
 
!important
;
       @include  box-­‐sizing(  
border
-­‐box  );
       @include  
box-­‐shadow
(inset  0  2px  1px  0  rgba(0,0,0,0.25));
       @include  linear-­‐gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.1));
       
       
/*  IE7/8  Selected  States  */
       .no-­‐boxshadow  &  {
           
background-­‐position
:  
0
 
-­‐200
px
;
           @include  
box-­‐shadow
(none);
       }
       
       
/*  Primary  Selected  Button  */
       &
.primary
 {
           @include  
box-­‐shadow
(inset  0  2px  2px  0  #C03F04);
           @include  linear-­‐gradient(#FF6C00,#FF9800);
       }
   }
   
   
/*  Disabled  Button  */
   &
.primary.disabled
,  &
.disabled
 {
       
color
:  $
default
-­‐
text
-­‐color  
!important
;
       
text-­‐shadow
:  
none
 
!important
;
       @include  
opacity
(0.5);
       @include  
box-­‐shadow
(none  !important);
       
cursor
:  
default
 
!important
;
       
pointer-­‐events
:  
none
 
!important
;
       
padding
:  
0.5
em
 
0.75
em
;
   }
   &
.primary.disabled
,&
.actions
 
.disabled
 {
       
background
:  
none
;
       
border-­‐color
:  
transparent
;
   }
   
/*  IE7  borks  on  these  selectors,  so  I  reclare  them  separately  */
   &[disabled="disabled"],  &
:disabled
,  &[
disabled
],  &
.primary
[
disabled
]{
       
color
:  $
default
-­‐
text
-­‐color  
!important
;
       
text-­‐shadow
:  
none
 
!important
;
       @include  
opacity
(0.5);
       @include  
box-­‐shadow
(none  !important);
       
cursor
:  
default
 
!important
;
border-­‐radius:  0.4em;
box-­‐shadow:  
   rgba(0,  0,  0,  0.06)  0  -­‐4px  0  0  inset,  
   rgba(0,  0,  0,  0.06)  0  -­‐3px  0  0  inset,  
   rgba(0,  0,  0,  0.06)  0  -­‐2px  0  0  inset,  
   rgba(0,  0,  0,  0.06)  0  -­‐1px  0  0  inset,  
   #FFFFFF  0  -­‐5px  0  0  inset,  
   #FFFFFF  0  1px  1px  0  inset,  
   rgba(0,  0,  0,  0.1)  0  2px  3px  0;
http://
perfectionkills.com/
profiling-css-for-fun-
and-profit-optimization-
notes
Profiling CSS for fun and profit. Optimization notes.
border-­‐radius:  0.4em;
box-­‐shadow:  
   rgba(0,  0,  0,  0.06)  0  -­‐4px  0  0  inset,  
   rgba(0,  0,  0,  0.06)  0  -­‐3px  0  0  inset,  
   rgba(0,  0,  0,  0.06)  0  -­‐2px  0  0  inset,  
   rgba(0,  0,  0,  0.06)  0  -­‐1px  0  0  inset,  
   #FFFFFF  0  -­‐5px  0  0  inset,  
   #FFFFFF  0  1px  1px  0  inset,  
   rgba(0,  0,  0,  0.1)  0  2px  3px  0;
Image Loading
.loading {
...
background-image:
url("
https://madmimi.com/img/loading.gif
")
...
}
<
img
 
src
=
"
<%=  promotion.tiny_thumbnail_url  %>
"
   
onload
=
"$(this).up('.promotion_thumb')
       .setStyle({  backgroundImage:  'none'  });"
>
<
img
 
src
=
"
<%=  promotion.tiny_thumbnail_url  %>
"
   
onerror
=
"$(this).fire('image:error')"
 
   
onload
=
"$(this).up('.promotion_thumb')
       .setStyle({  backgroundImage:  'none'  });"
>
document
.observe(
"image:error"
,  
function
(e)  {
   
var
 img  
=
 e.findElement(),
           name  
=
 
"/images/promotion_thumb_"
 
+
               img.
src
.
split
(
"/"
).last();
   img.
src
 
=
 name;
});
JavaScript
Popup
Dialog
ConfirmDialog
DropDown
Select
Overlay
   
scroll
:  
function
(
e
)  {
       
this
.scrolled  
=
 
true
;
   },
   
doScroll
:  
function
()  {
       
if
(
this
.scrolled)  {
           
this
.position();
           
this
.element.fire(
"window:scrolled"
);
           
this
.scrolled  
=
 
false
;
       }
   },
   
enableScroll
:  
function
()  {
       Event.observe(
window
,  
"scroll"
,  
this
.scrollBound);
       
this
.scrollTimer  
=
 
setInterval
(
this
.doScroll.bind(
this
),  
250
);
       
this
.doScroll();
   },
Evolution
jQuery
Backbone
Underscore
http://www.quora.com/Is-Underscore-js-+-Backbone-js-+-
jQuery-Prototype-js
Is Underscore.js + Backbone.js + jQuery =
Prototype.js?
Questions?