Speed up your web development

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

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

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

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

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

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

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

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

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

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

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

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

Speed up your web development

Related slideshows

More Related Content

Speed up your web development