brush up your coding!
TRANSCRIPT
![Page 1: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/1.jpg)
Brush up your Coding!HTML5Beginners Vol.3
@1000ch
![Page 2: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/2.jpg)
Self introduction
http://github.com/1000ch
@1000ch
http://1000ch.net/
Web Developer at CyberAgent, Inc.
![Page 3: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/3.jpg)
agenda
Conclusion
Demonstration
Tool Introduction
![Page 4: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/4.jpg)
TOOL INTRODUCTION…の前に
![Page 5: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/5.jpg)
なぜブラッシュ アップするのか?
![Page 6: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/6.jpg)
REASON TO BRUSH UP
パフォーマンスの向上
メンテナンス性の維持
![Page 7: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/7.jpg)
REASON TO BRUSH UP
パフォーマンスの向上
メンテナンス性の維持
![Page 8: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/8.jpg)
KEEP maintainabilityそのコード、誰が見ても理解できますか?
明日そのコードを説明できますか?
バグの危険性
![Page 9: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/9.jpg)
REASON TO BRUSH UP?
パフォーマンスの向上
メンテナンス性の維持
フロントの役割は大きくなっている!
![Page 10: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/10.jpg)
Gradation Shadow
Animation...
Performance depends on Frontend!
Canvas WebGL
FileAPI...
FRONTEND ROLES
![Page 11: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/11.jpg)
フロントエンドのやること多い…_:(´ཀ`」 ∠):
![Page 12: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/12.jpg)
LET’S BRUSH UP!
![Page 13: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/13.jpg)
FOCUS ON...HTML
CSS
JavaScript
![Page 14: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/14.jpg)
FOCUS ON...HTML
CSS
JavaScript
![Page 15: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/15.jpg)
HTMLInspectorby Philip Walton
![Page 16: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/16.jpg)
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.’”⁹
![Page 17: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/17.jpg)
HTMLInspector https://github.com/philipwalton/html-inspector
![Page 18: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/18.jpg)
WITH BROWSER...
$ npm install -g bower $ bower install html-inspector
HTMLInspectorをダウンロードする
HTMLでロードし実行する
<script src="path/to/html-inspector.js"></script> <script>HTMLInspector.inspect()</script>
![Page 19: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/19.jpg)
WITH CLI...
$ npm install -g html-inspector
HTMLInspectorをインストールする
# execute url $ htmlinspector http://1000ch.net/ !# execute local file $ htmlinspector index.html
HTMLInspectorを実行する
![Page 20: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/20.jpg)
もっと手軽に使いたい…ChromeのExtensionを作りました。
![Page 21: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/21.jpg)
H:Inspector Please search Chrome Store with œš‘“›⁸1000ch’”⁹
![Page 22: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/22.jpg)
FOCUS ON...HTML
CSS
JavaScript
![Page 23: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/23.jpg)
CSSLINTby Nicole Sullivan and Nicholas Zakas
![Page 25: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/25.jpg)
CSSLINT Ultra Translation https://gist.github.com/hail2u/1303613
![Page 26: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/26.jpg)
WITH BROWSER...Webサイトにアクセスする
CSSを貼り付けて実行する
![Page 28: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/28.jpg)
WITH CLI...
$ npm install -g csslint
CSSLINTをインストールする
# execute csslint $ csslint [options] [file or directory]
CSSLINTを実行する
![Page 29: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/29.jpg)
FOCUS ON...HTML
CSS
JavaScript
![Page 30: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/30.jpg)
JSHINTby Anton Kovalyov
![Page 32: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/32.jpg)
WITH BROWSER...
JavaScriptを貼り付けて実行する
Webサイトにアクセスする
![Page 34: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/34.jpg)
WITH CLI...
$ npm install -g jslint
JSHINTをインストールする
# execute jshint $ jshint [options] [file or directory]
JSHINTを実行する
![Page 35: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/35.jpg)
毎回ブラウザ見たり コマンド叩くのか…
いいえ、自動化出来ます。
![Page 36: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/36.jpg)
FOCUS ON...HTML
CSS
JavaScript
Gruntによる自動化
![Page 37: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/37.jpg)
FOCUS ON...HTML
CSS
JavaScript
Gruntによる自動化
継続的インテグレーション
![Page 38: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/38.jpg)
WHAT IS GRUNT?Node.jsで動くタスクランナー
設定ファイルがJavaScript
共有に必要なのは2ファイル
ディベロッパーにも扱いやすいツール
![Page 40: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/40.jpg)
$ 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...
![Page 41: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/41.jpg)
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
![Page 42: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/42.jpg)
Gruntの概要と導入手順とメリット
http://1000ch.net/2012/12/08/ReconsideringGruntJs/
![Page 43: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/43.jpg)
詳しくはWebで!Please check it!
![Page 44: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/44.jpg)
demonstration
![Page 45: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/45.jpg)
CHECK HTML
![Page 46: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/46.jpg)
! Failed rule "validate-attributes". " The 'bgcolor' attribute is no longer valid on the <body> element and should not be used.
HTMLは文書構造を定義、CSSは装飾やレイアウトという切り分けを行いましょう。
![Page 47: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/47.jpg)
! Failed rule "unused-classes". " The class 'hoge' is used in the HTML but not found in any stylesheet.
定義されていないCSSはHTMLで参照しないようにしましょう。CSSの参照コストが発生してしまいます。
![Page 48: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/48.jpg)
! Failed rule "unnecessary-elements". " Do not use <div> or <span> elements without any attributes.
CSSの装飾や、属性値も持たない<div>や<span>
は必要ないはずです。深ければ深いほど、描画時のリフローの回数が増え、CSSやJSの参照のコストが増えます。
![Page 49: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/49.jpg)
! Failed rule "validate-attributes". " The 'alt' attribute is required for <img> elements.
必須とされている属性値は記述するようにしましょう。ちなみに、<img>にはwidthとheightをつけるのが望ましいです。そして、srcの値を空にしないようにしましょう。
![Page 50: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/50.jpg)
「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/
![Page 51: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/51.jpg)
! Failed rule "validate-elements". " The <font> element is obsolete and should not be used.
<font>タグは非推奨です。前述の通り、HTMLは文書構造の定義という役割になったためです。<center>、<basefont>、<u>、<s>等にも同様のことが言えます。
![Page 52: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/52.jpg)
HTML要素リファレンス
https://developer.mozilla.org/ja/docs/Web/HTML/Element
![Page 53: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/53.jpg)
! Failed rule "inline-event-handlers". " An 'onclick' attribute was found in the HTML. Use external scripts for event binding instead.
イベントの定義はJSファイルで行うようにしましょう。インラインの定義は管理が非常に難しく、予期しない不具合を引き起こします。
![Page 54: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/54.jpg)
<button id="js-bar" onclick="alert('Clicked!')">
var btn = document.getElementById("js-bar"); btn.addEventListener("click", function() { alert("Clicked!"); });
「JavaScriptはJSファイルに書きましょう。」
![Page 55: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/55.jpg)
! Failed rule "script-placement". " <script> elements should appear right before the closing </body> tag for optimal performance.
<script>タグは同期的に実行されるため、その間ページの描画が止まります。</body>の上に置くことでそれを極力避ける事ができます。
![Page 56: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/56.jpg)
CHECK CSS
![Page 57: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/57.jpg)
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であることに変わりはありません。単位を削ってファイルサイズを減らしましょう。
![Page 58: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/58.jpg)
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を使用するのもやめましょう。
![Page 59: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/59.jpg)
「コードそのものの量を抑え、パフォーマンスが向上し、 可搬性を向上させ、詳細度を減らすことができる。」
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/
![Page 60: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/60.jpg)
The properties padding-top, padding-bottom, padding-left, padding-right can be replaced by padding. Use shorthand properties where possible. (shorthand)
ショートハンドで記述し、冗長な表現は避けましょう。
![Page 61: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/61.jpg)
「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; } !!
![Page 62: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/62.jpg)
@import prevents parallel downloads, use <link> instead. Don't use @import, use <link> instead. (import)
さらに良いのは、CSSファイルをすべて結合して1
ファイルにすることです。Webパフォーマンスの向上の第一歩はHTTPリクエストの数を減らす + ダウンロードサイズを減らすことです。
![Page 63: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/63.jpg)
Mobile Front-end Optimization Standard:2012 https://speakerdeck.com/t32k/mobile-front-end-
optimization-standard-2012
![Page 64: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/64.jpg)
CHECK Javascript
![Page 65: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/65.jpg)
eval can be harmful.
eval()はパフォーマンスが悪い上に、スコープがわかりにくくセキュリティ的にも危ないです。eval()
を必要とするケースはほとんど無いはずです。(僕は見たことない。)
![Page 66: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/66.jpg)
Missing semicolon.
処理の終わりには忘れずセミコロンを付けましょう。括弧も省略するべきではありません。省略することで振る舞いが変わってしまう恐れがあります。
![Page 67: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/67.jpg)
Use '!==' to compare with 'null'
nullとの比較に限らず、基本的に厳密等価演算子を推奨します。キャストがない分高速である上、暗黙の型変換は誤解を招きやすいです。
![Page 68: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/68.jpg)
Equals Operator vs Strict Operator http://jsperf.com/equals-operator-vs-strict-equals-
operator/2
![Page 69: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/69.jpg)
The object literal notation {} is preferrable.
The array literal notation [] is preferrable.
new Array()による配列の初期化は、引数がわかりにくいです。双方ともリテラルを使ったほうが完結でわかりやすいです。
![Page 70: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/70.jpg)
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はもっとわかりにくいので割愛…。」
![Page 71: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/71.jpg)
JavaScript Garden http://bonsaiden.github.io/JavaScript-Garden/ja/
![Page 72: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/72.jpg)
CONCLUSION
![Page 73: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/73.jpg)
HTML
レイアウトや装飾はCSSにやってもらう
Scriptタグはページ下部に置く
HTML5で提唱される要素のキャッチアップ
![Page 74: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/74.jpg)
CSS
Sass等を使う場合はコンパイル後を意識する
CSSは壊れやすい!
HTML構造に依存しないCSSを書く
![Page 75: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/75.jpg)
JavaScript
書き方一つで実行速度が変わる
CSSで出来ることはCSSでやる
省略しない!JavaScriptは可読性が命
![Page 76: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/76.jpg)
リファクタリングのフロー化Jenkins、ローカル環境でのGrunt、Travis CI等。
![Page 77: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/77.jpg)
œš‘“›⁸The first draft of anything is shit’”⁹
- Ernest Hemingway
![Page 78: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/78.jpg)
指摘される内容の理解必ず理由があります。調べて理解して直す!
![Page 79: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/79.jpg)
スキルアップに直結踏まえてやれば間違いなく技術は向上します。
![Page 80: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/80.jpg)
KEEP OPTIMIZING!
![Page 81: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/81.jpg)
THANK YOU!@1000ch
![Page 82: Brush up your Coding!](https://reader034.vdocuments.mx/reader034/viewer/2022042817/55a2b61d1a28ab0c0d8b4696/html5/thumbnails/82.jpg)
PHOTO CREDITS• http://www.flickr.com/photos/fotuwe/6851855959/
• http://www.flickr.com/photos/mckenzieo/2006687207/
• http://www.flickr.com/photos/pasharome/10186380003/
• http://www.flickr.com/photos/gaetanlee/298680664/
• http://www.flickr.com/photos/64312248@N04/5969283186/
• http://www.flickr.com/photos/55027967@N07/5189465437/