Speed up your web development
116
Speed up your Web Development Ushering in 2012 Speaker : Spin Lai Date : 2012/1/10 2012年1月10日星期二
-
Upload
spin-lai -
Category
Technology
-
view
305 -
download
6
Transcript of Speed up your web development
Speed up your Web Development
Ushering in 2012
Speaker : Spin LaiDate : 2012/1/10
2012年1月10日星期二
Time breakdown of modern web development
2012年1月10日星期二
40%
Trying to get the bastard to work in Internet fu*king Explorer
2012年1月10日星期二
15%
Swearing
2012年1月10日星期二
20%
Trying to get the layout to work using only CSS before giving up and using table
2012年1月10日星期二
10%
Making the site W3C comliant
2012年1月10日星期二
10%
Wishing a slow, painful death on Bill Gat*s
2012年1月10日星期二
5%
Actually coding/design
2012年1月10日星期二
Can somebody help us,
Please ?
2012年1月10日星期二
Can somebody help us,
Of course!
2012年1月10日星期二
ZenCoding
SASS/Compass
Dojo
2012年1月10日星期二
ZenCoding
2012年1月10日星期二
ZenCoding
2012年1月10日星期二
What is ZenCoding ?
2012年1月10日星期二
What is ZenCoding ?
Get HTML
done faster !
2012年1月10日星期二
But I have code snippetplugins for my IDE.
2012年1月10日星期二
Cross-platform Cross-editor CSS-like syntax
ZenCoding is ...
2012年1月10日星期二
It works with ...
2012年1月10日星期二
<textarea>
2012年1月10日星期二
And how ?
2012年1月10日星期二
HTML[ ]
[ ]Zen Code
<div id="content"></div>
2012年1月10日星期二
HTML[ ]
[ ]Zen Code
<div id="content"></div>
div#content
2012年1月10日星期二
HTML[ ]
[ ]Zen Code
<div id="content"></div>
div#content
2012年1月10日星期二
HTML[ ]
[ ]Zen Code
<ul id="navigation"> <li></li> <li></li> <li></li></ul>
2012年1月10日星期二
HTML[ ]
[ ]Zen Code
<ul id="navigation"> <li></li> <li></li> <li></li></ul>
ul#navigation>li*3
2012年1月10日星期二
HTML[ ]
[ ]Zen Code
<ul id="navigation"> <li></li> <li></li> <li></li></ul>
ul#navigation>li*3
2012年1月10日星期二
HTML[ ]
[ ]Zen Code
<select id="jazz" name="" class="album"> <option value=""></option> <option value=""></option></select>
2012年1月10日星期二
HTML[ ]
[ ]Zen Code
select#jazz.album>option*2
<select id="jazz" name="" class="album"> <option value=""></option> <option value=""></option></select>
2012年1月10日星期二
HTML[ ]
[ ]Zen Code
select#jazz.album>option*2
<select id="jazz" name="" class="album"> <option value=""></option> <option value=""></option></select>
2012年1月10日星期二
HTML[ ]
[ ]Zen Code
<div id="thediv"> <p class="first"></p> <p class="second"></p></div>
2012年1月10日星期二
HTML[ ]
[ ]Zen Code
<div id="thediv"> <p class="first"></p> <p class="second"></p></div>
div#thediv>p.first+p.second
2012年1月10日星期二
HTML[ ]
[ ]Zen Code
<div id="thediv"> <p class="first"></p> <p class="second"></p></div>
div#thediv>p.first+p.second
2012年1月10日星期二
DEMO
2012年1月10日星期二
SASS/Compass
2012年1月10日星期二
CSS/SASS/Compass
2012年1月10日星期二
尛2012年1月10日星期二
2012年1月10日星期二
CSS / SASS / Compass
2012年1月10日星期二
CSS / SASS / Compass
2012年1月10日星期二
Everything is much easier
2012年1月10日星期二
Everything is much easier
in the
beginning...
2012年1月10日星期二
body { margin: 0; padding: 0; background-color: #D1E7FF; font-family: Verdana, Arial, Helvetica, sans-serif;}
div#main { margin: 0 2em 0 2em; padding: 0; background: #FFF;}
div#footer { margin: 0 3em; padding: 0.5em 0; background: #FFF; height: 64px; background-image: url('images/inex_06.jpg');}
2012年1月10日星期二
2012年1月10日星期二
When the project grows up...
2012年1月10日星期二
table#tb_product_grid {width: 100%;}table#tb_product_grid td {margin: 0;padding: 0; text-align: center;}table#tb_product_grid img{width: 350px;}
table#tb_LT_realtime th.y_desc {border-right: 1px solid #999; border-bottom: 1px solid #999; background: #5A042C; color: #FFF; width: 22%;}
table#tb_LT_realtime th.x_var {background: #E7E5E5; width: 13%;}table#tb_LT_realtime th.y_var {border: 1px solid #DDD; padding: 0.25em 1.5em 0.25em 0; text-align: right;}
.formbutton04{
cursor:poi
nter;
border:out
set 1px #ccc;
background
:#999;
color:#000
;
font-fa
mily:Verdana,s
ans-serif;
font-weigh
t:bold;
padding: 1
px 2px;
background
:url(images/fo
rmbg04.gif) re
peat-x left to
p;
}.btn3_mouseout {BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid}.btn3_mouseover {BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid}
iv#display_img{ text-align: center; margin: 0 0 0 2.5em; width: 1000px;}div#img_name{ width: 1000px; height:20px; font-size: large; text-align: center;}div#img_list_name{ padding:2px; font-size: large; height: 20px; text-align: center; width: 1000px;}div#down_gif{ margin: 0.5em 0 0 2.5em; width:1000px; /* height:20px; */ text-align:right; cursor: pointer;}
.ui-tabs { padding: .2em; zoom: 1; }.ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0; }.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; }.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; }.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; }.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; }.ui-tabs .ui-tabs-hide { display: none !important; }
div.sitemap_layer_1{ border: 1px solid #B5D9EA; margin: 0.5em 0 0 28px; background: #D9F1FC; padding: 0.25em 1em 0.25em 1em; display: inline-block; *display: inline; /* This is for IE6 */ zoom: 1; /* This is for inline-block in IE */ *display: inline !important; /* This is for IE7 */}
2012年1月10日星期二
2012年1月10日星期二
2012年1月10日星期二
2012年1月10日星期二
CSS / SASS / Compass
2012年1月10日星期二
SASS is ...
2012年1月10日星期二
NOT SuperASS
SASS is ...
2012年1月10日星期二
NOT SuperASS Syntatically Awsome StyleSheet
SASS is ...
2012年1月10日星期二
NOT SuperASS Syntatically Awsome StyleSheet SASS v3 is known as SCSS
SASS is ...
2012年1月10日星期二
Okay, but what can she do?
2012年1月10日星期二
Nesting Variable Mixins Inheritance and so on...
2012年1月10日星期二
Nesting Variable Mixins Inheritance and so on...
2012年1月10日星期二
[ CSS ] [ SCSS ]
#header { margin-bottom: 50px;}#header h1 { font-size: 24px; color: red;}#header h1 a { display: block;}#header ul.nav li { float: left;}
2012年1月10日星期二
[ CSS ] [ SCSS ]
#header { margin-bottom: 50px;}#header h1 { font-size: 24px; color: red;}#header h1 a { display: block;}#header ul.nav li { float: left;}
#header { margin-bottom: 50px; h1 { font-size: 24px; color: red; a { display: block; } } ul.nav { li { float:left; } }}
2012年1月10日星期二
[ CSS ] [ SCSS ]
#header { margin-bottom: 50px;}#header h1 { font-size: 24px; color: red;}#header h1 a { display: block;}#header ul.nav li { float: left;}
#header { margin-bottom: 50px; h1 { font-size: 24px; color: red; a { display: block; } } ul.nav { li { float:left; } }}
2012年1月10日星期二
[ CSS ] [ SCSS ]
#header { margin-bottom: 50px;}#header h1 { font-size: 24px; color: red;}#header h1 a { display: block;}#header ul.nav li { float: left;}
#header { margin-bottom: 50px; h1 { font-size: 24px; color: red; a { display: block; } } ul.nav { li { float:left; } }}
2012年1月10日星期二
[ CSS ]
#header { margin-bottom: 50px;}#header h1 { font-size: 24px; color: red;}#header h1 a { display: block;}#header ul.nav li { float: left;}
#header { margin-bottom: 50px; h1 { font-size: 24px; color: red; a { display: block; } } ul.nav { li { float:left; } }}
[ SCSS ]
2012年1月10日星期二
Nesting Variable Mixins Inheritance and so on...
2012年1月10日星期二
[ CSS ] [ SCSS ]
a, h1, h2, h3, h4, h5 { color: #ff9900;}
#header { background: #ff9900;}
.section { padding: 10px; margin-bottom: 20px;}
2012年1月10日星期二
[ CSS ] [ SCSS ]
a, h1, h2, h3, h4, h5 { color: #ff9900;}
#header { background: #ff9900;}
.section { padding: 10px; margin-bottom: 20px;}
$LINK_COLOR: #FF9900;$MARGIN: 20px;
a, h1, h2, h3, h4, h5 { color: $LINK_COLOR;}#header { background: $LINK_COLOR;}.section { padding: $MARGIN / 2; margin-bottom: $MARGIN;}
2012年1月10日星期二
[ CSS ] [ SCSS ]
a, h1, h2, h3, h4, h5 { color: #ff9900;}
#header { background: #ff9900;}
.section { padding: 10px; margin-bottom: 20px;}
$LINK_COLOR: #FF9900;$MARGIN: 20px;
a, h1, h2, h3, h4, h5 { color: $LINK_COLOR;}#header { background: $LINK_COLOR;}.section { padding: $MARGIN / 2; margin-bottom: $MARGIN;}
2012年1月10日星期二
[ CSS ] [ SCSS ]
a, h1, h2, h3, h4, h5 { color: #ff9900;}
#header { background: #ff9900;}
.section { padding: 10px; margin-bottom: 20px;}
$LINK_COLOR: #FF9900;$MARGIN: 20px;
a, h1, h2, h3, h4, h5 { color: $LINK_COLOR;}#header { background: $LINK_COLOR;}.section { padding: $MARGIN / 2; margin-bottom: $MARGIN;}
2012年1月10日星期二
[ CSS ] [ SCSS ]
a, h1, h2, h3, h4, h5 { color: #ff9900;}
#header { background: #ff9900;}
.section { padding: 10px; margin-bottom: 20px;}
$LINK_COLOR: #FF9900;$MARGIN: 20px;
a, h1, h2, h3, h4, h5 { color: $LINK_COLOR;}#header { background: $LINK_COLOR;}.section { padding: $MARGIN / 2; margin-bottom: $MARGIN;}
2012年1月10日星期二
Nesting Variable Mixins Inheritance and so on...
2012年1月10日星期二
[ CSS ] [ SCSS ]
#navbar li { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px;}
#footer { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px;}
2012年1月10日星期二
[ CSS ] [ SCSS ]
@mixin rounded-top { $RADIUS: 10px;
border-top-radius: $RADIUS; -moz-border-radius-top: $RADIUS; -webkit-border-top-radius: $RADIUS;}
#navbar li { @include rounded-top; }#footer { @include rounded-top; }
#navbar li { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px;}
#footer { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px;}
2012年1月10日星期二
[ CSS ] [ SCSS ]
@mixin rounded-top { $RADIUS: 10px;
border-top-radius: $RADIUS; -moz-border-radius-top: $RADIUS; -webkit-border-top-radius: $RADIUS;}
#navbar li { @include rounded-top; }#footer { @include rounded-top; }
#navbar li { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px;}
#footer { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px;}
2012年1月10日星期二
Nesting Variable Mixins Inheritance and so on...
2012年1月10日星期二
[ CSS ] [ SCSS ]
.warn { background: yellow;}
.bad_warn { background: yellow; font-weight: bold; color: red;}
2012年1月10日星期二
[ CSS ] [ SCSS ]
.warn { background: yellow;}
.bad_warn { @extend .warn;
font-weight: bold; color: red;}
.warn { background: yellow;}
.bad_warn { background: yellow; font-weight: bold; color: red;}
2012年1月10日星期二
[ CSS ] [ SCSS ]
.warn { background: yellow;}
.bad_warn { @extend .warn;
font-weight: bold; color: red;}
.warn { background: yellow;}
.bad_warn { background: yellow; font-weight: bold; color: red;}
2012年1月10日星期二
Nesting Variable Mixins Inheritance and so on...
2012年1月10日星期二
CSS / Sass / Compass
2012年1月10日星期二
Powered by SASS Meta framework Code snippets Best practices
Compass is ...
2012年1月10日星期二
Tell me more !
2012年1月10日星期二
Helpers Extension Project Context and lots more...
2012年1月10日星期二
Helpers Extension Project Context and lots more...
2012年1月10日星期二
@import "compass"
.linear { @include background(linear-gradient( top left, #333, #0C0));}
2012年1月10日星期二
@import "compass"
.box { @include border-radius(8px); @include box-shadow( rgba(#CCC, 0.5) 3px 3px 5px );}
2012年1月10日星期二
Helpers Extension Project Context and lots more...
2012年1月10日星期二
Helpers Extension Project Context and lots more...
2012年1月10日星期二
Helpers Extension Project Context and lots more...
2012年1月10日星期二
DEMO
2012年1月10日星期二
Dojo
2012年1月10日星期二
Dojo
2012年1月10日星期二
One day ...
2012年1月10日星期二
Doraemon
2012年1月10日星期二
It’s easy! see...
2012年1月10日星期二
It’s easy! see...
2012年1月10日星期二
But I use IE9, and...
2012年1月10日星期二
But I use IE9, and...
2012年1月10日星期二
2012年1月10日星期二
2012年1月10日星期二
I use IE6, WTF...
2012年1月10日星期二
I use IE6, WTF...
2012年1月10日星期二
2012年1月10日星期二
God !
Help us !!
2012年1月10日星期二
Dojo ? What’s that?
2012年1月10日星期二
Powerful Javascript toolkit Open source BSD licensed
Dojo is ...
2012年1月10日星期二
Powerful ? Show me
2012年1月10日星期二
Layout Form Dialogs Tooltips Trees and lots more...
2012年1月10日星期二
Layout Form Dialogs Tooltips Trees and lots more...
2012年1月10日星期二
Layout Form Dialogs Tooltips Trees and lots more...
2012年1月10日星期二
Layout Form Dialogs Tooltips Trees and lots more...
2012年1月10日星期二
Layout Form Dialogs Tooltips Trees and lots more...
2012年1月10日星期二
Layout Form Dialogs Tooltips Trees and lots more...
2012年1月10日星期二
Layout Form Dialogs Tooltips Trees and lots more...
2012年1月10日星期二
DEMO
2012年1月10日星期二
Last ,
but not
least...
2012年1月10日星期二
IE6 must die!2012年1月10日星期二
Reference
2012年1月10日星期二
ZenCoding http://code.google.com/p/zen-coding/
SASS http://sass-lang.com Compass http://compass-style.org Dojo http://dojotoolkit.org
2012年1月10日星期二
