Save 37% off PRO during our Black Friday Sale! »

Brush up your Coding 2013 Winter

0d605a3350dd7e91b8136aecffd5ceeb?s=47 Shogo Sensui
December 07, 2013

Brush up your Coding 2013 Winter

2013/12/7に開催されたSaCSS Special4 Frontrend in SapporoのBrush up your Coding 2013 Winterのセッションの資料です。

0d605a3350dd7e91b8136aecffd5ceeb?s=128

Shogo Sensui

December 07, 2013
Tweet

Transcript

  1. Brush up your Coding 2013 Winter SaCSS Special 4
 Frontrend

    in Sapporo @1000ch
  2. Self introduction http://github.com/1000ch @1000ch http://1000ch.net/ Web Developer at CyberAgent, Inc.

  3. agenda Conclusion Demonstration Tool Introduction

  4. TOOL INTRODUCTION …ͷલʹ

  5. ͳͥϒϥογϡ Ξοϓ͢Δͷ͔ʁ

  6. REASON TO BRUSH UP ύϑΥʔϚϯεͷ޲্ ϝϯςφϯεੑͷҡ࣋

  7. ϝϯςφϯεੑͷҡ࣋

  8. ͦͷίʔυ୭͕ݟͯ΋ ཧղͰ͖·͔͢ʁ

  9. ໌೔ɺͦͷίʔυΛ ଞਓʹઆ໌Ͱ͖·͔͢ʁ

  10. ύϑΥʔϚϯεͷ޲্

  11. ࠷ۙͷϑϩϯτΤϯυٕज़…

  12. CSS3 SVG Canvas WebGL

  13. WebStorage IndexedDB

  14. AudioElement VideoElement

  15. WebWorker WebSocket AppCache

  16. ϑϩϯτΤϯυͰ Ͱ͖Δ͜ͱ͕૿͍͑ͯΔ

  17. Ͱ͖Δ͜ͱ͕૿͍͑ͯΔ෼ ϘτϧωοΫʹͳΓ΍͍͢

  18. the Performance Golden Rule http://www.stevesouders.com/blog/2012/02/10/the-performance- golden-rule/

  19. 80-90% of the end-user response time is spent on the

    frontend. Start there. - Steve Souders
  20. αΠτύϑΥʔϚϯεͷେ෦෼ ΛϑϩϯτΤϯυͰվળग़དྷΔ

  21. LET’S BRUSH UP!

  22. ࠓճ঺հ͢Δπʔϧ͸3ͭ HTML / CSS / JavaScript

  23. HTMLInspector

  24. Introducing HTML Inspector http://philipwalton.com/articles/introducing-html-inspector/

  25. HTML Inspector is a code quality tool to help you

    and your team write better markup. It's written in JavaScript and runs in the browser, so testing your HTML has never been easier. - Philip Walton
  26. WITH BROWSER... $ npm install -g bower $ bower install

    html-inspector HTMLInspectorΛμ΢ϯϩʔυ͢Δ HTMLͰϩʔυ࣮͠ߦ͢Δ <script src="path/to/html-inspector.js"></script> <script>HTMLInspector.inspect()</script>
  27. WITH CLI... $ npm install -g html-inspector HTMLInspectorΛΠϯετʔϧ͢Δ # execute

    url $ htmlinspector http://1000ch.net/ ! # execute local file $ htmlinspector index.html HTMLInspectorΛ࣮ߦ͢Δ
  28. ΋ͬͱखܰʹ࢖͍͍ͨ… ChromeͷExtensionΛ࡞Γ·ͨ͠ɻ

  29. H:Inspector Please search for Chrome Store!

  30. CSSLint

  31. CSSLINT.NET http://csslint.net/

  32. CSS Lint open sourced http://www.stubbornella.org/content/2011/06/15/css-lint-open- sourced/

  33. CSSLINT Ultra Translation https://gist.github.com/hail2u/1303613

  34. WITH BROWSER... WebαΠτʹΞΫηε͢Δ CSSΛషΓ෇͚࣮ͯߦ͢Δ

  35. WITH CLI... $ npm install -g csslint CSSLINTΛΠϯετʔϧ͢Δ # execute

    csslint $ csslint [options] [file or directory] CSSLINTΛ࣮ߦ͢Δ
  36. JSHint

  37. JSHINT.COM http://jshint.com/

  38. JSHINT Documentation http://jshint.com/docs/

  39. WITH BROWSER... JavaScriptΛషΓ෇͚࣮ͯߦ͢Δ WebαΠτʹΞΫηε͢Δ

  40. WITH CLI... $ npm install -g jslint JSHINTΛΠϯετʔϧ͢Δ # execute

    jshint $ jshint [options] [file or directory] JSHINTΛ࣮ߦ͢Δ
  41. ຖճϒϥ΢βݟͨΓ ίϚϯυୟ͘ͷ͔… ͍͍͑ɺࣗಈԽग़དྷ·͢ɻ

  42. GRUNT http://gruntjs.com/

  43. WHAT IS GRUNT? Node.jsͰಈ͘λεΫϥϯφʔ ઃఆϑΝΠϧ͕JavaScript ڞ༗ʹඞཁͳͷ͸2ϑΝΠϧ

  44. Grunt͸ϑϩϯτΤϯυΤϯδχ Ξʹ΋ѻ͍΍͍͢πʔϧ

  45. Gruntͷ֓ཁͱಋೖखॱͱϝϦοτ http://1000ch.net/2012/12/08/ReconsideringGruntJs/

  46. demonstration http://github.com/1000ch/brushup-sample

  47. CHECK HTML

  48. ! Failed rule "validate-attributes". " The 'bgcolor' attribute is no

    longer valid on the <body> element and should not be used. HTML͸จॻߏ଄ΛఆٛɺCSS͸૷০΍ϨΠΞ΢τ ͱ͍͏੾Γ෼͚Λߦ͍·͠ΐ͏ɻ
  49. ! Failed rule "unused-classes". " The class 'hoge' is used

    in the HTML but not found in any stylesheet. ఆٛ͞Ε͍ͯͳ͍CSS͸HTMLͰࢀর͠ͳ͍Α͏ʹ ͠·͠ΐ͏ɻCSSͷࢀরίετ͕ൃੜͯ͠͠·͍ ·͢ɻ
  50. ! Failed rule "unnecessary-elements". " Do not use <div> or

    <span> elements without any attributes. CSSͷ૷০΍ɺଐੑ஋΋࣋ͨͳ͍<div>΍<span> ͸ඞཁͳ͍͸ͣͰ͢ɻਂ͚Ε͹ਂ͍΄Ͳɺඳը࣌ ͷϦϑϩʔͷճ਺͕૿͑ɺCSS΍JSͷࢀরͷίε τ͕૿͑·͢ɻ
  51. ! Failed rule "validate-attributes". " The 'alt' attribute is required

    for <img> elements. ඞਢͱ͞Ε͍ͯΔଐੑ஋͸هड़͢ΔΑ͏ʹ͠· ͠ΐ͏ɻͪͳΈʹɺ<img>ʹ͸widthͱheightΛ ͚ͭΔͷ͕๬·͍͠Ͱ͢ɻͦͯ͠ɺsrcͷ஋Λۭʹ ͠ͳ͍Α͏ʹ͠·͠ΐ͏ɻ
  52. ʮsrcɺhrefͷ஋Λۭʹ͠ͳ͍ɻ Ϟμϯϒϥ΢βͰ͸΄ͱΜͲղܾ͞Ε͍ͯΔ͕ɺ HTTPϦΫΤετ͕ൃੜͯ͠͠·͏ϒϥ΢β͕͋Δɻʯ ! <img src="" > <script src=""></script> <link

    href=""> ! var img = new Image(); img.src = ""; ! Empty image src can destroy your site http://www.nczonline.net/blog/2009/11/30/empty-image-src-can- destroy-your-site/
  53. ! Failed rule "validate-elements". " The <font> element is obsolete

    and should not be used. <font>λά͸ඇਪ঑Ͱ͢ɻલड़ͷ௨ΓɺHTML͸ จॻߏ଄ͷఆٛͱ͍͏໾ׂʹͳͬͨͨΊͰ͢ɻ <center>ɺ<basefont>ɺ<u>ɺ<s>౳ʹ΋ಉ༷ͷ ͜ͱ͕ݴ͑·͢ɻ
  54. HTMLཁૉϦϑΝϨϯε https://developer.mozilla.org/ja/docs/Web/HTML/Element

  55. ! Failed rule "inline-event-handlers". " An 'onclick' attribute was found

    in the HTML. Use external scripts for event binding instead. Πϕϯτͷఆٛ͸JSϑΝΠϧͰߦ͏Α͏ʹ͠· ͠ΐ͏ɻΠϯϥΠϯͷఆٛ͸؅ཧ͕ඇৗʹ೉͘͠ɺ ༧ظ͠ͳ͍ෆ۩߹ΛҾ͖ى͜͠·͢ɻ
  56. <button id="js-bar" onclick="alert('Clicked!')"> var btn = document.getElementById("js-bar"); btn.addEventListener("click", function() {

    alert("Clicked!"); }); ʮJavaScript͸JSϑΝΠϧʹॻ͖·͠ΐ͏ɻʯ
  57. ! Failed rule "script-placement". " <script> elements should appear right

    before the closing </body> tag for optimal performance. <script>λά͸ಉظతʹ࣮ߦ͞ΕΔͨΊɺͦͷؒ ϖʔδͷඳը͕ࢭ·Γ·͢ɻ</body>ͷ্ʹஔ͘ ͜ͱͰͦΕΛۃྗආ͚Δࣄ͕Ͱ͖·͢ɻ
  58. CHECK CSS

  59. Values of 0 shouldn't have units specified. You don't need

    to specify units when a value is 0. (zero-units) 0px΋0%΋0Ͱ͋Δ͜ͱʹมΘΓ͸͋Γ·ͤΜɻ ୯ҐΛ࡟ͬͯϑΝΠϧαΠζΛݮΒ͠·͠ΐ͏ɻ
  60. Element (a.active) is overqualified, just use .active without element name.

    Don't use classes or IDs with elements (a.foo or a#foo). (overqualified-elements) a.active͸ෆཁʹৄࡉ౓͕૿͍ͯ͠ΔηϨΫλͰ ͢ɻ.activeͱ͠ɺλάʹґଘ͠ͳ͍Α͏ʹ͠· ͠ΐ͏ɻηϨΫλʹIDΛ࢖༻͢Δͷ΋΍Ί·͠ΐ ͏ɻ
  61. ʮίʔυͦͷ΋ͷͷྔΛ཈͑ɺύϑΥʔϚϯε͕޲্͠ɺ ՄൖੑΛ޲্ͤ͞ɺৄࡉ౓ΛݮΒ͢͜ͱ͕Ͱ͖Δɻʯ ul.nav li.active a {} ! div.header a.logo img

    {} ! .main ul.features a.btn {} .nav .active a {} ! .logo > img {} ! .features-btn {} Code smells in CSS http://csswizardry.com/2012/11/code-smells-in-css/
  62. The properties padding-top, padding-bottom, padding-left, padding-right can be replaced by

    padding. Use shorthand properties where possible. (shorthand) γϣʔτϋϯυͰهड़͠ɺ৑௕ͳදݱ͸ආ͚·͠ΐ ͏ɻ
  63. ʮmarginɺpaddingɺ·ͱΊΔɻʯ .foo { margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left:

    20px; } ! .bar { margin-top: 5px; margin-left: 15px; margin-bottom: 10px; margin-right: 15px; } ! ! .foo { margin: 10px 20px; } ! ! .bar { margin: 5px 15px 10px; } ! !
  64. @import prevents parallel downloads, use <link> instead. Don't use @import,

    use <link> instead. (import) ͞Βʹྑ͍ͷ͸ɺCSSϑΝΠϧΛ͢΂ͯ݁߹ͯ͠1 ϑΝΠϧʹ͢Δ͜ͱͰ͢ɻWebύϑΥʔϚϯεͷ ޲্ͷୈҰา͸HTTPϦΫΤετͷ਺ΛݮΒ͢ + μ ΢ϯϩʔυαΠζΛݮΒ͢͜ͱͰ͢ɻ
  65. Mobile Front-end
 Optimization Standard:2012 https://speakerdeck.com/t32k/mobile-front-end-optimization- standard-2012

  66. CHECK Javascript

  67. eval can be harmful. eval()͸ύϑΥʔϚϯε͕ѱ্͍ʹɺείʔϓ͕Θ ͔Γʹ͘͘ηΩϡϦςΟతʹ΋ةͳ͍Ͱ͢ɻeval() Λඞཁͱ͢Δέʔε͸΄ͱΜͲແ͍͸ͣͰ͢ɻ

  68. Missing semicolon. ॲཧͷऴΘΓʹ͸๨ΕͣηϛίϩϯΛ෇͚·͠ΐ ͏ɻׅހ΋লུ͢Δ΂͖Ͱ͸͋Γ·ͤΜɻলུ͢ Δ͜ͱͰৼΔ෣͍͕มΘͬͯ͠·͏ڪΕ͕͋Γ· ͢ɻ

  69. Use '!==' to compare with 'null' nullͱͷൺֱʹݶΒͣɺجຊతʹݫີ౳Ձԋࢉࢠ Λਪ঑͠·͢ɻΩϟετ͕ͳ͍෼ߴ଎Ͱ͋Δ্ɺ ҉໧ͷܕม׵͸ޡղΛট͖΍͍͢Ͱ͢ɻ

  70. Equals Operator vs Strict Equals Operator http://jsperf.com/equals-operator-vs-strict-equals-operator/2

  71. The object literal notation {} is preferrable. The array literal

    notation [] is preferrable. new Array()ʹΑΔ഑ྻͷॳظԽ͸ɺҾ਺͕Θ͔Γ ʹ͍͘Ͱ͢ɻ૒ํͱ΋ϦςϥϧΛ࢖ͬͨ΄͏͕׬ ݁ͰΘ͔Γ΍͍͢Ͱ͢ɻ
  72. var array1 = new Array("foo"); // ["foo"] ! var array2

    = new Array("foo", "bar"); // ["foo", "bar"] ! var array3 = new Array(3); // [] and array3.length is 3 var array1 = ["foo"]; // ["foo"] ! var array2 = ["foo", "bar"]; // ["foo", "bar"] ! var array3 = [undefined, undefined, undefined]; // [] and array3.length is 3 ʮObject͸΋ͬͱΘ͔Γʹ͍͘ͷͰׂѪ…ɻʯ
  73. JavaScript Garden http://bonsaiden.github.io/JavaScript-Garden/ja/

  74. CONCLUSION

  75. HTML ϨΠΞ΢τ΍૷০͸CSSʹ΍ͬͯ΋Β͏ Scriptλά͸ϖʔδԼ෦ʹஔ͘ HTML5Ͱఏএ͞ΕΔཁૉͷΩϟονΞοϓ

  76. CSS Sass౳Λ࢖͏৔߹͸ίϯύΠϧޙΛҙࣝ͢Δ CSS͸յΕ΍͍͢ʂ HTMLߏ଄ʹґଘ͠ͳ͍CSSΛॻ͘

  77. JavaScript ॻ͖ํҰͭͰ࣮ߦ଎౓͕มΘΔ CSSͰग़དྷΔ͜ͱ͸CSSͰ΍Δ লུ͠ͳ͍ʂJavaScript͸Մಡੑ໋͕

  78. ϦϑΝΫλϦϯάͷϑϩʔԽ JenkinsɺϩʔΧϧ؀ڥͰͷGruntɺTravis CI౳ɻ

  79. The first draft of anything is shit - Ernest Hemingway

  80. ࢦఠ͞ΕΔ಺༰ͷཧղ ඞͣཧ༝͕͋Γ·͢ɻௐ΂ͯཧղͯ͠௚͢ʂ

  81. εΩϧΞοϓʹ௚݁ ౿·͑ͯ΍Ε͹ؒҧ͍ͳٕ͘ज़͸޲্͠·͢ɻ

  82. KEEP OPTIMIZING!

  83. THANK YOU! @1000ch

  84. PHOTO CREDITS • http://www.flickr.com/photos/fotuwe/6851855959/ • http://www.flickr.com/photos/88256536@N00/5420396616/ • http://www.flickr.com/photos/mckenzieo/2006687207/ • http://www.flickr.com/photos/gaetanlee/298680664/

    • http://www.flickr.com/photos/64312248@N04/5969283186/ • http://www.flickr.com/photos/55027967@N07/5189465437/