1. Speed up your Web
Development
Ushering in 2012
Speaker : Spin Lai
Date : 2012/1/10
2012年1月10日星期二

2. Time breakdown of modern
web development
2012年1月10日星期二

3. 40%
Trying to get the bastard to work in
Internet fu*king Explorer
2012年1月10日星期二

4. 15%
Swearing
2012年1月10日星期二

5. 20%
Trying to get the layout to work using
only CSS before giving up and using table
2012年1月10日星期二

6. 10%
Making the site W3C comliant
2012年1月10日星期二

7. 10%
Wishing a slow, painful death on Bill Gat*s
2012年1月10日星期二

8. 5%
Actually coding/design
2012年1月10日星期二

9. Can somebody help us,
Please ?
2012年1月10日星期二

10. Can somebody help us,
Of course!
2012年1月10日星期二

11. ZenCoding
SASS/Compass
Dojo
2012年1月10日星期二

12. ZenCoding
2012年1月10日星期二

13. ZenCoding
2012年1月10日星期二

14. What is ZenCoding ?
2012年1月10日星期二

15. What is ZenCoding ?
Get HTML
done faster !
2012年1月10日星期二

16. But I have code snippet
plugins for my IDE.
2012年1月10日星期二

17. Cross-platform
Cross-editor
CSS-like syntax
ZenCoding is ...
2012年1月10日星期二

18. It works with ...
2012年1月10日星期二

19. <textarea>
2012年1月10日星期二

20. And how ?
2012年1月10日星期二

21. HTML[ ]
[ ]Zen Code
<div id="content">
</div>
2012年1月10日星期二

22. HTML[ ]
[ ]Zen Code
<div id="content">
</div>
div#content
2012年1月10日星期二

23. HTML[ ]
[ ]Zen Code
<div id="content">
</div>
div#content
2012年1月10日星期二

24. HTML[ ]
[ ]Zen Code
<ul id="navigation">
<li></li>
<li></li>
<li></li>
</ul>
2012年1月10日星期二

25. HTML[ ]
[ ]Zen Code
<ul id="navigation">
<li></li>
<li></li>
<li></li>
</ul>
ul#navigation>li*3
2012年1月10日星期二

26. HTML[ ]
[ ]Zen Code
<ul id="navigation">
<li></li>
<li></li>
<li></li>
</ul>
ul#navigation>li*3
2012年1月10日星期二

27. HTML[ ]
[ ]Zen Code
<select id="jazz" name="" class="album">
<option value=""></option>
<option value=""></option>
</select>
2012年1月10日星期二

28. HTML[ ]
[ ]Zen Code
select#jazz.album>option*2
<select id="jazz" name="" class="album">
<option value=""></option>
<option value=""></option>
</select>
2012年1月10日星期二

29. HTML[ ]
[ ]Zen Code
select#jazz.album>option*2
<select id="jazz" name="" class="album">
<option value=""></option>
<option value=""></option>
</select>
2012年1月10日星期二

30. HTML[ ]
[ ]Zen Code
<div id="thediv">
<p class="first"></p>
<p class="second"></p>
</div>
2012年1月10日星期二

31. HTML[ ]
[ ]Zen Code
<div id="thediv">
<p class="first"></p>
<p class="second"></p>
</div>
div#thediv>p.first+p.second
2012年1月10日星期二

32. HTML[ ]
[ ]Zen Code
<div id="thediv">
<p class="first"></p>
<p class="second"></p>
</div>
div#thediv>p.first+p.second
2012年1月10日星期二

33. DEMO
2012年1月10日星期二

34. SASS/Compass
2012年1月10日星期二

35. CSS/SASS/Compass
2012年1月10日星期二

36. 尛
2012年1月10日星期二

37. 2012年1月10日星期二

38. CSS / SASS / Compass
2012年1月10日星期二

39. CSS / SASS / Compass
2012年1月10日星期二

40. Everything is much easier
2012年1月10日星期二

41. Everything is much easier
in the
beginning...
2012年1月10日星期二

42. 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日星期二

43. 2012年1月10日星期二

44. When the project grows up...
2012年1月10日星期二

45. 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:pointer;
border:outset 1px #ccc;
background:#999;
color:#000;
font-family:Verdana,sans-serif;
font-weight:bold;
padding: 1px 2px;
background:url(images/formbg04.gif) repeat-x left top;
}
.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 groupseems obsolete, but required to overcome bug inOpera applying cursor: text overall if definedelsewhere... */
.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日星期二

46. 2012年1月10日星期二

47. 2012年1月10日星期二

48. 2012年1月10日星期二

49. CSS / SASS / Compass
2012年1月10日星期二

50. SASS is ...
2012年1月10日星期二

51. NOT SuperASS
SASS is ...
2012年1月10日星期二

52. NOT SuperASS
Syntatically Awsome StyleSheet
SASS is ...
2012年1月10日星期二

53. NOT SuperASS
Syntatically Awsome StyleSheet
SASS v3 is known as SCSS
SASS is ...
2012年1月10日星期二

54. Okay, but what can she do?
2012年1月10日星期二

55. Nesting
Variable
Mixins
Inheritance
and so on...
2012年1月10日星期二

56. Nesting
Variable
Mixins
Inheritance
and so on...
2012年1月10日星期二

57. [ 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日星期二

58. [ 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日星期二

59. [ 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日星期二

60. [ 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日星期二

61. [ 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日星期二

62. Nesting
Variable
Mixins
Inheritance
and so on...
2012年1月10日星期二

63. [ CSS ] [ SCSS ]
a, h1, h2, h3, h4, h5 {
color: #ff9900;
}
#header {
background: #ff9900;
}
.section {
padding: 10px;
margin-bottom: 20px;
}
2012年1月10日星期二

64. [ 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日星期二

65. [ 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日星期二

66. [ 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日星期二

67. [ 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日星期二

68. Nesting
Variable
Mixins
Inheritance
and so on...
2012年1月10日星期二

69. [ 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日星期二

70. [ 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日星期二

71. [ 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日星期二

72. Nesting
Variable
Mixins
Inheritance
and so on...
2012年1月10日星期二

73. [ CSS ] [ SCSS ]
.warn {
background: yellow;
}
.bad_warn {
background: yellow;
font-weight: bold;
color: red;
}
2012年1月10日星期二

74. [ 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日星期二

75. [ 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日星期二

76. Nesting
Variable
Mixins
Inheritance
and so on...
2012年1月10日星期二

77. CSS / Sass / Compass
2012年1月10日星期二

78. Powered by SASS
Meta framework
Code snippets
Best practices
Compass is ...
2012年1月10日星期二

79. Tell me more !
2012年1月10日星期二

80. Helpers
Extension
Project Context
and lots more...
2012年1月10日星期二

81. Helpers
Extension
Project Context
and lots more...
2012年1月10日星期二

82. @import "compass"
.linear {
@include background(linear-
gradient(
top left, #333, #0C0));
}
2012年1月10日星期二

83. @import "compass"
.box {
@include border-radius(8px);
@include box-shadow(
rgba(#CCC, 0.5) 3px 3px 5px
);
}
2012年1月10日星期二

84. Helpers
Extension
Project Context
and lots more...
2012年1月10日星期二

85. Helpers
Extension
Project Context
and lots more...
2012年1月10日星期二

86. Helpers
Extension
Project Context
and lots more...
2012年1月10日星期二

87. DEMO
2012年1月10日星期二

88. Dojo
2012年1月10日星期二

89. Dojo
2012年1月10日星期二

90. One day ...
2012年1月10日星期二

91. Doraemon
2012年1月10日星期二

92. It’s easy! see...
2012年1月10日星期二

93. It’s easy! see...
2012年1月10日星期二

94. But I use IE9, and...
2012年1月10日星期二

95. But I use IE9, and...
2012年1月10日星期二

96. 2012年1月10日星期二

97. 2012年1月10日星期二

98. I use IE6, WTF...
2012年1月10日星期二

99. I use IE6, WTF...
2012年1月10日星期二

100. 2012年1月10日星期二

101. God !
Help us !!
2012年1月10日星期二

102. Dojo ? What’s that?
2012年1月10日星期二

103. Powerful Javascript toolkit
Open source
BSD licensed
Dojo is ...
2012年1月10日星期二

104. Powerful ? Show me
2012年1月10日星期二

105. Layout
Form
Dialogs
Tooltips
Trees
and lots more...
2012年1月10日星期二

106. Layout
Form
Dialogs
Tooltips
Trees
and lots more...
2012年1月10日星期二

107. Layout
Form
Dialogs
Tooltips
Trees
and lots more...
2012年1月10日星期二

108. Layout
Form
Dialogs
Tooltips
Trees
and lots more...
2012年1月10日星期二

109. Layout
Form
Dialogs
Tooltips
Trees
and lots more...
2012年1月10日星期二

110. Layout
Form
Dialogs
Tooltips
Trees
and lots more...
2012年1月10日星期二

111. Layout
Form
Dialogs
Tooltips
Trees
and lots more...
2012年1月10日星期二

112. DEMO
2012年1月10日星期二

113. Last ,
but not
least...
2012年1月10日星期二

114. IE6 must die!
2012年1月10日星期二

115. Reference
2012年1月10日星期二

116. 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日星期二