Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Brush up your Coding

Brush up your Coding

2013/10/23に開催されたHTML5BeginnersのBrush up your Codingのセッションの資料です。

Shogo Sensui

October 23, 2013
Tweet

More Decks by Shogo Sensui

Other Decks in Programming

Transcript

  1. Introducing HTML Inspector http://philipwalton.com/articles/introducing-html-inspector/ HTMLInspector is... “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.”
  2. WITH BROWSER... $ npm install -g bower $ bower install

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

    url $ htmlinspector http://1000ch.net/ # execute local file $ htmlinspector index.html HTMLInspectorΛ࣮ߦ͢Δ
  4. WITH CLI... $ npm install -g csslint CSSLINTΛΠϯετʔϧ͢Δ # execute

    csslint $ csslint [options] [file or directory] CSSLINTΛ࣮ߦ͢Δ
  5. WITH CLI... $ npm install -g jslint JSHINTΛΠϯετʔϧ͢Δ # execute

    jshint $ jshint [options] [file or directory] JSHINTΛ࣮ߦ͢Δ
  6. $ npm install -g grunt-cli $ cd path/to/your/workspace $ npm

    init $ npm install --save-dev grunt $ npm install --save-dev grunt-html-inspector $ npm install --save-dev grunt-contrib-csslint $ npm install --save-dev grunt-contrib-jshint IN WORKSPACE...
  7. module.exports = function(grunt) { grunt.initConfig({ "html-inspector": { all: { src:

    ["*.html"] } }, csslint: { all: { src: ["css/*.css"] } }, jshint: { all: ["js/*.js"] } }); grunt.loadNpmTasks("grunt-html-inspector"); grunt.loadNpmTasks("grunt-contrib-csslint"); grunt.loadNpmTasks("grunt-contrib-jshint"); grunt.registerTask("check", ["html-inspector", "csslint", "jshint"]); }; CREATE GRUNTFILE.JS
  8. ! Failed rule "validate-attributes". " The 'bgcolor' attribute is no

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

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

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

    for <img> elements. ඞਢͱ͞Ε͍ͯΔଐੑ஋͸هड़͢ΔΑ͏ʹ͠·͠ ΐ͏ɻͪͳΈʹɺ<img>ʹ͸widthͱheightΛͭ ͚Δͷ͕๬·͍͠Ͱ͢ɻͦͯ͠ɺsrcͷ஋Λۭʹ͠ ͳ͍Α͏ʹ͠·͠ΐ͏ɻ
  12. ʮ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/
  13. ! Failed rule "validate-elements". " The <font> element is obsolete

    and should not be used. <font>λά͸ඇਪ঑Ͱ͢ɻલड़ͷ௨ΓɺHTML͸ จॻߏ଄ͷఆٛͱ͍͏໾ׂʹͳͬͨͨΊͰ͢ɻ <center>ɺ<basefont>ɺ<u>ɺ<s>౳ʹ΋ಉ༷ͷ ͜ͱ͕ݴ͑·͢ɻ
  14. ! Failed rule "inline-event-handlers". " An 'onclick' attribute was found

    in the HTML. Use external scripts for event binding instead. Πϕϯτͷఆٛ͸JSϑΝΠϧͰߦ͏Α͏ʹ͠·͠ ΐ͏ɻΠϯϥΠϯͷఆٛ͸؅ཧ͕ඇৗʹ೉͘͠ɺ ༧ظ͠ͳ͍ෆ۩߹ΛҾ͖ى͜͠·͢ɻ
  15. ! Failed rule "script-placement". " <script> elements should appear right

    before the closing </body> tag for optimal performance. <script>λά͸ಉظతʹ࣮ߦ͞ΕΔͨΊɺͦͷؒ ϖʔδͷඳը͕ࢭ·Γ·͢ɻ</body>ͷ্ʹஔ͘ ͜ͱͰͦΕΛۃྗආ͚Δࣄ͕Ͱ͖·͢ɻ
  16. 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Ͱ͋Δ͜ͱʹมΘΓ͸͋Γ·ͤΜɻ ୯ҐΛ࡟ͬͯϑΝΠϧαΠζΛݮΒ͠·͠ΐ͏ɻ
  17. 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Λ࢖༻͢Δͷ΋΍Ί·͠ΐ ͏ɻ
  18. ʮίʔυͦͷ΋ͷͷྔΛ཈͑ɺύϑΥʔϚϯε͕޲্͠ɺ ՄൖੑΛ޲্ͤ͞ɺৄࡉ౓ΛݮΒ͢͜ͱ͕Ͱ͖Δɻʯ 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/
  19. The properties padding-top, padding-bottom, padding-left, padding-right can be replaced by

    padding. Use shorthand properties where possible. (shorthand) γϣʔτϋϯυͰهड़͠ɺ৑௕ͳදݱ͸ආ͚·͠ ΐ͏ɻ
  20. ʮ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; }
  21. @import prevents parallel downloads, use <link> instead. Don't use @import,

    use <link> instead. (import) ͞Βʹྑ͍ͷ͸ɺCSSϑΝΠϧΛ͢΂ͯ݁߹ͯ͠1 ϑΝΠϧʹ͢Δ͜ͱͰ͢ɻWebύϑΥʔϚϯεͷ ޲্ͷୈҰา͸HTTPϦΫΤετͷ਺ΛݮΒ͢ + μ ΢ϯϩʔυαΠζΛݮΒ͢͜ͱͰ͢ɻ
  22. The object literal notation {} is preferrable. The array literal

    notation [] is preferrable. new Array()ʹΑΔ഑ྻͷॳظԽ͸ɺҾ਺͕Θ͔Γ ʹ͍͘Ͱ͢ɻ૒ํͱ΋ϦςϥϧΛ࢖ͬͨ΄͏͕׬ ݁ͰΘ͔Γ΍͍͢Ͱ͢ɻ
  23. 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͸΋ͬͱΘ͔Γʹ͍͘ͷͰׂѪ…ɻʯ