Speed up your web development

Transcript

1. Speed up your Web Development Ushering in 2012 Speaker : Spin Lai Date : 2012/1/10 ϋ˜˚݋ಂɚ
2. Time breakdown of modern web development ϋ˜˚݋ಂɚ
3. 40% Trying to get the bastard to work in Internet fu*king Explorer ϋ˜˚݋ಂɚ
4. 15% Swearing ϋ˜˚݋ಂɚ
5. 20% Trying to get the layout to work using only CSS before giving up and using table ϋ˜˚݋ಂɚ
6. 10% Making the site W3C comliant ϋ˜˚݋ಂɚ
7. 10% Wishing a slow, painful death on Bill Gat*s ϋ˜˚݋ಂɚ
8. 5% Actually coding/design ϋ˜˚݋ಂɚ
9. Can somebody help us, Please ? ϋ˜˚݋ಂɚ
10. Can somebody help us, Of course! ϋ˜˚݋ಂɚ
11. ZenCoding SASS/Compass Dojo ϋ˜˚݋ಂɚ
12. ZenCoding ϋ˜˚݋ಂɚ
13. ZenCoding ϋ˜˚݋ಂɚ
14. What is ZenCoding ? ϋ˜˚݋ಂɚ
15. What is ZenCoding ? Get HTML done faster ! ϋ˜˚݋ಂɚ
16. But I have code snippet plugins for my IDE. ϋ˜˚݋ಂɚ
17. Cross-platform Cross-editor CSS-like syntax ZenCoding is ... ϋ˜˚݋ಂɚ
18. It works with ... ϋ˜˚݋ಂɚ
19. <textarea> ϋ˜˚݋ಂɚ
20. And how ? ϋ˜˚݋ಂɚ
21. HTML [ ] [ ] Zen Code <div id="content"> </div> ϋ˜˚݋ಂɚ
22. HTML [ ] [ ] Zen Code <div id="content"> </div> div#content ϋ˜˚݋ಂɚ
23. HTML [ ] [ ] Zen Code <div id="content"> </div> div#content ϋ˜˚݋ಂɚ
24. HTML [ ] [ ] Zen Code <ul id="navigation"> <li></li> <li></li> <li></li> </ul> ϋ˜˚݋ಂɚ
25. HTML [ ] [ ] Zen Code <ul id="navigation"> <li></li> <li></li> <li></li> </ul> ul#navigation>li*3 ϋ˜˚݋ಂɚ
26. HTML [ ] [ ] Zen Code <ul id="navigation"> <li></li> <li></li> <li></li> </ul> ul#navigation>li*3 ϋ˜˚݋ಂɚ
27. HTML [ ] [ ] Zen Code <select id="jazz" name="" class="album"> <option value=""></option> <option value=""></option> </select> ϋ˜˚݋ಂɚ
28. HTML [ ] [ ] Zen Code select#jazz.album>option*2 <select id="jazz" name="" class="album"> <option value=""></option> <option value=""></option> </select> ϋ˜˚݋ಂɚ
29. HTML [ ] [ ] Zen Code select#jazz.album>option*2 <select id="jazz" name="" class="album"> <option value=""></option> <option value=""></option> </select> ϋ˜˚݋ಂɚ
30. HTML [ ] [ ] Zen Code <div id="thediv"> <p class="first"></p> <p class="second"></p> </div> ϋ˜˚݋ಂɚ
31. HTML [ ] [ ] Zen Code <div id="thediv"> <p class="first"></p> <p class="second"></p> </div> div#thediv>p.first+p.second ϋ˜˚݋ಂɚ
32. HTML [ ] [ ] Zen Code <div id="thediv"> <p class="first"></p> <p class="second"></p> </div> div#thediv>p.first+p.second ϋ˜˚݋ಂɚ
33. DEMO ϋ˜˚݋ಂɚ
34. SASS/Compass ϋ˜˚݋ಂɚ
35. CSS/SASS/Compass ϋ˜˚݋ಂɚ
36. 尛 ϋ˜˚݋ಂɚ
37. ϋ˜˚݋ಂɚ
38. CSS / SASS / Compass ϋ˜˚݋ಂɚ
39. CSS / SASS / Compass ϋ˜˚݋ಂɚ
40. Everything is much easier ϋ˜˚݋ಂɚ
41. Everything is much easier in the beginning... ϋ˜˚݋ಂɚ
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'); } ϋ˜˚݋ಂɚ
43. ϋ˜˚݋ಂɚ
44. When the project grows up... ϋ˜˚݋ಂɚ
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 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 */ } ϋ˜˚݋ಂɚ
46. ϋ˜˚݋ಂɚ
47. ϋ˜˚݋ಂɚ
48. ϋ˜˚݋ಂɚ
49. CSS / SASS / Compass ϋ˜˚݋ಂɚ
50. SASS is ... ϋ˜˚݋ಂɚ
51. NOT SuperASS SASS is ... ϋ˜˚݋ಂɚ
52. NOT SuperASS Syntatically Awsome StyleSheet SASS is ... ϋ˜˚݋ಂɚ
53. NOT SuperASS Syntatically Awsome StyleSheet SASS v3 is known as SCSS SASS is ... ϋ˜˚݋ಂɚ
54. Okay, but what can she do? ϋ˜˚݋ಂɚ
55. Nesting Variable Mixins Inheritance and so on... ϋ˜˚݋ಂɚ
56. Nesting Variable Mixins Inheritance and so on... ϋ˜˚݋ಂɚ
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; } ϋ˜˚݋ಂɚ
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; } } } ϋ˜˚݋ಂɚ
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; } } } ϋ˜˚݋ಂɚ
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; } } } ϋ˜˚݋ಂɚ
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 ] ϋ˜˚݋ಂɚ
62. Nesting Variable Mixins Inheritance and so on... ϋ˜˚݋ಂɚ
63. [ CSS ] [ SCSS ] a, h1, h2, h3, h4, h5 { color: #ff9900; } #header { background: #ff9900; } .section { padding: 10px; margin-bottom: 20px; } ϋ˜˚݋ಂɚ
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; } ϋ˜˚݋ಂɚ
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; } ϋ˜˚݋ಂɚ
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; } ϋ˜˚݋ಂɚ
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; } ϋ˜˚݋ಂɚ
68. Nesting Variable Mixins Inheritance and so on... ϋ˜˚݋ಂɚ
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; } ϋ˜˚݋ಂɚ
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; } ϋ˜˚݋ಂɚ
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; } ϋ˜˚݋ಂɚ
72. Nesting Variable Mixins Inheritance and so on... ϋ˜˚݋ಂɚ
73. [ CSS ] [ SCSS ] .warn { background: yellow; } .bad_warn { background: yellow; font-weight: bold; color: red; } ϋ˜˚݋ಂɚ
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; } ϋ˜˚݋ಂɚ
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; } ϋ˜˚݋ಂɚ
76. Nesting Variable Mixins Inheritance and so on... ϋ˜˚݋ಂɚ
77. CSS / Sass / Compass ϋ˜˚݋ಂɚ
78. Powered by SASS Meta framework Code snippets Best practices Compass is ... ϋ˜˚݋ಂɚ
79. Tell me more ! ϋ˜˚݋ಂɚ
80. Helpers Extension Project Context and lots more... ϋ˜˚݋ಂɚ
81. Helpers Extension Project Context and lots more... ϋ˜˚݋ಂɚ
82. @import "compass" .linear { @include background(linear- gradient( top left, #333, #0C0)); } ϋ˜˚݋ಂɚ
83. @import "compass" .box { @include border-radius(8px); @include box-shadow( rgba(#CCC, 0.5) 3px 3px 5px ); } ϋ˜˚݋ಂɚ
84. Helpers Extension Project Context and lots more... ϋ˜˚݋ಂɚ
85. Helpers Extension Project Context and lots more... ϋ˜˚݋ಂɚ
86. Helpers Extension Project Context and lots more... ϋ˜˚݋ಂɚ
87. DEMO ϋ˜˚݋ಂɚ
88. Dojo ϋ˜˚݋ಂɚ
89. Dojo ϋ˜˚݋ಂɚ
90. One day ... ϋ˜˚݋ಂɚ
91. Doraemon ϋ˜˚݋ಂɚ
92. It’s easy! see... ϋ˜˚݋ಂɚ
93. It’s easy! see... ϋ˜˚݋ಂɚ
94. But I use IE9, and... ϋ˜˚݋ಂɚ
95. But I use IE9, and... ϋ˜˚݋ಂɚ
96. ϋ˜˚݋ಂɚ
97. ϋ˜˚݋ಂɚ
98. I use IE6, WTF... ϋ˜˚݋ಂɚ
99. I use IE6, WTF... ϋ˜˚݋ಂɚ
100. ϋ˜˚݋ಂɚ
101. God ! Help us !! ϋ˜˚݋ಂɚ
102. Dojo ? What’s that? ϋ˜˚݋ಂɚ
103. Powerful Javascript toolkit Open source BSD licensed Dojo is ... ϋ˜˚݋ಂɚ
104. Powerful ? Show me ϋ˜˚݋ಂɚ
105. Layout Form Dialogs Tooltips Trees and lots more... ϋ˜˚݋ಂɚ
106. Layout Form Dialogs Tooltips Trees and lots more... ϋ˜˚݋ಂɚ
107. Layout Form Dialogs Tooltips Trees and lots more... ϋ˜˚݋ಂɚ
108. Layout Form Dialogs Tooltips Trees and lots more... ϋ˜˚݋ಂɚ
109. Layout Form Dialogs Tooltips Trees and lots more... ϋ˜˚݋ಂɚ
110. Layout Form Dialogs Tooltips Trees and lots more... ϋ˜˚݋ಂɚ
111. Layout Form Dialogs Tooltips Trees and lots more... ϋ˜˚݋ಂɚ
112. DEMO ϋ˜˚݋ಂɚ
113. Last , but not least... ϋ˜˚݋ಂɚ
114. IE6 must die! ϋ˜˚݋ಂɚ
115. Reference ϋ˜˚݋ಂɚ
116. ZenCoding http://code.google.com/p/zen-coding/ SASS http://sass-lang.com Compass http://compass-style.org Dojo http://dojotoolkit.org ϋ˜˚݋ಂɚ