Slide 1
Slide 1 text
Brush up your Coding!
HTML5Beginners Vol.3
@1000ch
Slide 2
Slide 2 text
Self introduction
http://github.com/1000ch
@1000ch
http://1000ch.net/
Web Developer at CyberAgent, Inc.
Slide 3
Slide 3 text
agenda
Conclusion
Demonstration
Tool Introduction
Slide 4
Slide 4 text
TOOL INTRODUCTION
…ͷલʹ
Slide 5
Slide 5 text
ͳͥϒϥογϡ
Ξοϓ͢Δͷ͔ʁ
Slide 6
Slide 6 text
REASON TO BRUSH UP
ύϑΥʔϚϯεͷ্
ϝϯςφϯεੑͷҡ࣋
Slide 7
Slide 7 text
REASON TO BRUSH UP
ύϑΥʔϚϯεͷ্
ϝϯςφϯεੑͷҡ࣋
Slide 8
Slide 8 text
KEEP maintainability
ͦͷίʔυɺ୭͕ݟͯཧղͰ͖·͔͢ʁ
໌ͦͷίʔυΛઆ໌Ͱ͖·͔͢ʁ
όάͷةݥੑ
Slide 9
Slide 9 text
REASON TO BRUSH UP?
ύϑΥʔϚϯεͷ্
ϝϯςφϯεੑͷҡ࣋
ϑϩϯτͷׂେ͖͘ͳ͍ͬͯΔʂ
Slide 10
Slide 10 text
Gradation
Shadow
Animation...
Performance
depends on
Frontend!
Canvas
WebGL
FileAPI...
FRONTEND ROLES
Slide 11
Slide 11 text
ϑϩϯτΤϯυͷΔ͜
ͱଟ͍…_:(´ཀ`ʯ ∠):
Slide 12
Slide 12 text
LET’S BRUSH UP!
Slide 13
Slide 13 text
FOCUS ON...
HTML
CSS
JavaScript
Slide 14
Slide 14 text
FOCUS ON...
HTML
CSS
JavaScript
Slide 15
Slide 15 text
HTMLInspector
by Philip Walton
Slide 16
Slide 16 text
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.”
Slide 17
Slide 17 text
HTMLInspector
https://github.com/philipwalton/html-inspector
Slide 18
Slide 18 text
WITH BROWSER...
$ npm install -g bower
$ bower install html-inspector
HTMLInspectorΛμϯϩʔυ͢Δ
HTMLͰϩʔυ࣮͠ߦ͢Δ
HTMLInspector.inspect()
Slide 19
Slide 19 text
WITH CLI...
$ npm install -g html-inspector
HTMLInspectorΛΠϯετʔϧ͢Δ
# execute url
$ htmlinspector http://1000ch.net/
# execute local file
$ htmlinspector index.html
HTMLInspectorΛ࣮ߦ͢Δ
Slide 20
Slide 20 text
ͬͱखܰʹ͍͍ͨ…
ChromeͷExtensionΛ࡞Γ·ͨ͠ɻ
Slide 21
Slide 21 text
H:Inspector
Please search Chrome Store with “1000ch”
Slide 22
Slide 22 text
FOCUS ON...
HTML
CSS
JavaScript
Slide 23
Slide 23 text
CSSLINT
by Nicole Sullivan and Nicholas Zakas
Slide 24
Slide 24 text
CSSLINT
https://github.com/stubbornella/csslint
Slide 25
Slide 25 text
CSSLINT Ultra Translation
https://gist.github.com/hail2u/1303613
Slide 26
Slide 26 text
WITH BROWSER...
WebαΠτʹΞΫηε͢Δ
CSSΛషΓ͚࣮ͯߦ͢Δ
Slide 27
Slide 27 text
CSSLINT.NET
http://csslint.net/
Slide 28
Slide 28 text
WITH CLI...
$ npm install -g csslint
CSSLINTΛΠϯετʔϧ͢Δ
# execute csslint
$ csslint [options] [file or directory]
CSSLINTΛ࣮ߦ͢Δ
Slide 29
Slide 29 text
FOCUS ON...
HTML
CSS
JavaScript
Slide 30
Slide 30 text
JSHINT
by Anton Kovalyov
Slide 31
Slide 31 text
JSHINT Documentation
http://jshint.com/docs/
Slide 32
Slide 32 text
WITH BROWSER...
JavaScriptΛషΓ͚࣮ͯߦ͢Δ
WebαΠτʹΞΫηε͢Δ
Slide 33
Slide 33 text
JSHINT.COM
http://jshint.com/
Slide 34
Slide 34 text
WITH CLI...
$ npm install -g jslint
JSHINTΛΠϯετʔϧ͢Δ
# execute jshint
$ jshint [options] [file or directory]
JSHINTΛ࣮ߦ͢Δ
Slide 35
Slide 35 text
ຖճϒϥβݟͨΓ
ίϚϯυୟ͘ͷ͔…
͍͍͑ɺࣗಈԽग़དྷ·͢ɻ
Slide 36
Slide 36 text
FOCUS ON...
HTML
CSS
JavaScript
GruntʹΑΔࣗಈԽ
Slide 37
Slide 37 text
FOCUS ON...
HTML
CSS
JavaScript
GruntʹΑΔࣗಈԽ
ܧଓతΠϯς
άϨʔγϣϯ
Slide 38
Slide 38 text
WHAT IS GRUNT?
Node.jsͰಈ͘λεΫϥϯφʔ
ઃఆϑΝΠϧ͕JavaScript
ڞ༗ʹඞཁͳͷ2ϑΝΠϧ
σΟϕϩούʔʹѻ͍͍͢πʔϧ
Slide 39
Slide 39 text
GRUNT
http://gruntjs.com/
Slide 40
Slide 40 text
$ 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...
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
Gruntͷ֓ཁͱಋೖखॱͱϝϦοτ
http://1000ch.net/2012/12/08/ReconsideringGruntJs/
Slide 43
Slide 43 text
ৄ͘͠WebͰʂ
Please check it!
Slide 44
Slide 44 text
demonstration
Slide 45
Slide 45 text
CHECK HTML
Slide 46
Slide 46 text
! Failed rule "validate-attributes".
" The 'bgcolor' attribute is no longer valid on the
element and should not be used.
HTMLจॻߏΛఆٛɺCSS০ϨΠΞτ
ͱ͍͏Γ͚Λߦ͍·͠ΐ͏ɻ
Slide 47
Slide 47 text
! Failed rule "unused-classes".
" The class 'hoge' is used in the HTML but not found in any
stylesheet.
ఆٛ͞Ε͍ͯͳ͍CSSHTMLͰࢀর͠ͳ͍Α͏ʹ
͠·͠ΐ͏ɻCSSͷࢀরίετ͕ൃੜͯ͠͠·͍
·͢ɻ
Slide 48
Slide 48 text
! Failed rule "unnecessary-elements".
" Do not use
or elements without any
attributes.
CSSͷ০ɺଐੑ࣋ͨͳ͍
ඞཁͳ͍ͣͰ͢ɻਂ͚Εਂ͍΄Ͳɺඳը࣌
ͷϦϑϩʔͷճ͕૿͑ɺCSSJSͷࢀরͷίε
τ͕૿͑·͢ɻ
Slide 49
Slide 49 text
! Failed rule "validate-attributes".
" The 'alt' attribute is required for ![]()
elements.
ඞਢͱ͞Ε͍ͯΔଐੑهड़͢ΔΑ͏ʹ͠·͠
ΐ͏ɻͪͳΈʹɺ![]()
ʹwidthͱheightΛͭ
͚Δͷ͕·͍͠Ͱ͢ɻͦͯ͠ɺsrcͷΛۭʹ͠
ͳ͍Α͏ʹ͠·͠ΐ͏ɻ
Slide 50
Slide 50 text
ʮsrcɺhrefͷΛۭʹ͠ͳ͍ɻ
ϞμϯϒϥβͰ΄ͱΜͲղܾ͞Ε͍ͯΔ͕ɺ
HTTPϦΫΤετ͕ൃੜͯ͠͠·͏ϒϥβ͕͋Δɻʯ
![]()
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/
Slide 51
Slide 51 text
! Failed rule "validate-elements".
" The element is obsolete and should not be used.
λάඇਪͰ͢ɻલड़ͷ௨ΓɺHTML
จॻߏͷఆٛͱ͍͏ׂʹͳͬͨͨΊͰ͢ɻ
ɺɺɺʹಉ༷ͷ
͜ͱ͕ݴ͑·͢ɻ
Slide 52
Slide 52 text
HTMLཁૉϦϑΝϨϯε
https://developer.mozilla.org/ja/docs/Web/HTML/Element
Slide 53
Slide 53 text
! Failed rule "inline-event-handlers".
" An 'onclick' attribute was found in the HTML. Use
external scripts for event binding instead.
ΠϕϯτͷఆٛJSϑΝΠϧͰߦ͏Α͏ʹ͠·͠
ΐ͏ɻΠϯϥΠϯͷఆٛཧ͕ඇৗʹ͘͠ɺ
༧ظ͠ͳ͍ෆ۩߹ΛҾ͖ى͜͠·͢ɻ
Slide 54
Slide 54 text
var btn = document.getElementById("js-bar");
btn.addEventListener("click", function() {
alert("Clicked!");
});
ʮJavaScriptJSϑΝΠϧʹॻ͖·͠ΐ͏ɻʯ
Slide 55
Slide 55 text
! Failed rule "script-placement".
" elements should appear right before the closing
</body> tag for optimal performance.
<script>λάಉظతʹ࣮ߦ͞ΕΔͨΊɺͦͷؒ
ϖʔδͷඳը͕ࢭ·Γ·͢ɻ</body>ͷ্ʹஔ͘
͜ͱͰͦΕΛۃྗආ͚Δࣄ͕Ͱ͖·͢ɻ
Slide 56
Slide 56 text
CHECK CSS
Slide 57
Slide 57 text
Values of 0 shouldn't have units specified. You don't need
to specify units when a value is 0. (zero-units)
0px0%0Ͱ͋Δ͜ͱʹมΘΓ͋Γ·ͤΜɻ
୯ҐΛͬͯϑΝΠϧαΠζΛݮΒ͠·͠ΐ͏ɻ
Slide 58
Slide 58 text
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Λ༻͢ΔͷΊ·͠ΐ
͏ɻ
Slide 59
Slide 59 text
ʮίʔυͦͷͷͷྔΛ͑ɺύϑΥʔϚϯε্͕͠ɺ
ՄൖੑΛ্ͤ͞ɺৄࡉΛݮΒ͢͜ͱ͕Ͱ͖Δɻʯ
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/
Slide 60
Slide 60 text
The properties padding-top, padding-bottom, padding-left,
padding-right can be replaced by padding. Use shorthand
properties where possible. (shorthand)
γϣʔτϋϯυͰهड़͠ɺͳදݱආ͚·͠
ΐ͏ɻ
Slide 61
Slide 61 text
ʮ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;
}
Slide 62
Slide 62 text
@import prevents parallel downloads, use instead.
Don't use @import, use instead. (import)
͞Βʹྑ͍ͷɺCSSϑΝΠϧΛͯ݁͢߹ͯ͠1
ϑΝΠϧʹ͢Δ͜ͱͰ͢ɻWebύϑΥʔϚϯεͷ
্ͷୈҰาHTTPϦΫΤετͷΛݮΒ͢ + μ
ϯϩʔυαΠζΛݮΒ͢͜ͱͰ͢ɻ
Slide 63
Slide 63 text
Mobile Front-end Optimization Standard:2012
https://speakerdeck.com/t32k/mobile-front-end-
optimization-standard-2012
Slide 64
Slide 64 text
CHECK Javascript
Slide 65
Slide 65 text
eval can be harmful.
eval()ύϑΥʔϚϯε͕ѱ্͍ʹɺείʔϓ͕Θ
͔Γʹ͘͘ηΩϡϦςΟతʹةͳ͍Ͱ͢ɻeval()
Λඞཁͱ͢Δέʔε΄ͱΜͲແ͍ͣͰ͢ɻ
ʢݟͨ͜ͱͳ͍ɻʣ
Slide 66
Slide 66 text
Missing semicolon.
ॲཧͷऴΘΓʹΕͣηϛίϩϯΛ͚·͠ΐ
͏ɻׅހলུ͢Δ͖Ͱ͋Γ·ͤΜɻলུ͢
Δ͜ͱͰৼΔ͍͕มΘͬͯ͠·͏ڪΕ͕͋Γ·
͢ɻ
Slide 67
Slide 67 text
Use '!==' to compare with 'null'
nullͱͷൺֱʹݶΒͣɺجຊతʹݫີՁԋࢉࢠ
Λਪ͠·͢ɻΩϟετ͕ͳ͍ߴͰ͋Δ্ɺ
҉ͷܕมޡղΛট͖͍͢Ͱ͢ɻ
Slide 68
Slide 68 text
Equals Operator vs Strict Operator
http://jsperf.com/equals-operator-vs-strict-equals-
operator/2
Slide 69
Slide 69 text
The object literal notation {} is preferrable.
The array literal notation [] is preferrable.
new Array()ʹΑΔྻͷॳظԽɺҾ͕Θ͔Γ
ʹ͍͘Ͱ͢ɻํͱϦςϥϧΛͬͨ΄͏͕
݁ͰΘ͔Γ͍͢Ͱ͢ɻ
Slide 70
Slide 70 text
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ͬͱΘ͔Γʹ͍͘ͷͰׂѪ…ɻʯ
Slide 71
Slide 71 text
JavaScript Garden
http://bonsaiden.github.io/JavaScript-Garden/ja/
Slide 72
Slide 72 text
CONCLUSION
Slide 73
Slide 73 text
HTML
ϨΠΞτ০CSSʹͬͯΒ͏
ScriptλάϖʔδԼ෦ʹஔ͘
HTML5Ͱఏএ͞ΕΔཁૉͷΩϟονΞοϓ
Slide 74
Slide 74 text
CSS
SassΛ͏߹ίϯύΠϧޙΛҙࣝ͢Δ
CSSյΕ͍͢ʂ
HTMLߏʹґଘ͠ͳ͍CSSΛॻ͘
Slide 75
Slide 75 text
JavaScript
ॻ͖ํҰͭͰ࣮ߦ͕มΘΔ
CSSͰग़དྷΔ͜ͱCSSͰΔ
লུ͠ͳ͍ʂJavaScriptՄಡੑ໋͕
Slide 76
Slide 76 text
ϦϑΝΫλϦϯάͷϑϩʔԽ
JenkinsɺϩʔΧϧڥͰͷGruntɺTravis CIɻ
Slide 77
Slide 77 text
“The !rst draft of
anything is shit”
- Ernest Hemingway
Slide 78
Slide 78 text
ࢦఠ͞ΕΔ༰ͷཧղ
ඞͣཧ༝͕͋Γ·͢ɻௐͯཧղͯ͢͠ʂ
Slide 79
Slide 79 text
εΩϧΞοϓʹ݁
౿·͑ͯΕؒҧ͍ͳٕ͘ज़্͠·͢ɻ
Slide 80
Slide 80 text
KEEP OPTIMIZING!
Slide 81
Slide 81 text
THANK YOU!
@1000ch
Slide 82
Slide 82 text
PHOTO CREDITS
• http://www.!ickr.com/photos/fotuwe/6851855959/
• http://www.!ickr.com/photos/mckenzieo/2006687207/
• http://www.!ickr.com/photos/pasharome/10186380003/
• http://www.!ickr.com/photos/gaetanlee/298680664/
• http://www.!ickr.com/photos/64312248@N04/5969283186/
• http://www.!ickr.com/photos/55027967@N07/5189465437/