Brush up your Coding! 2013 winter
-
Upload
sensui-shogo -
Category
Technology
-
view
5.389 -
download
3
description
Transcript of Brush up your Coding! 2013 winter
![Page 1: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/1.jpg)
Brush up your Coding 2013 Winter
SaCSS Special 4Frontrend in Sapporo
@1000ch
![Page 2: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/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! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/3.jpg)
agenda
Conclusion
Demonstration
Tool Introduction
![Page 4: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/4.jpg)
TOOL INTRODUCTION…の前に
![Page 5: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/5.jpg)
なぜブラッシュ アップするのか?
![Page 6: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/6.jpg)
REASON TO BRUSH UP
パフォーマンスの向上
メンテナンス性の維持
![Page 7: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/7.jpg)
メンテナンス性の維持
![Page 8: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/8.jpg)
そのコード誰が見ても
理解できますか?
![Page 9: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/9.jpg)
明日、そのコードを
他人に説明できますか?
![Page 10: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/10.jpg)
パフォーマンスの向上
![Page 11: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/11.jpg)
最近のフロントエンド技術…
![Page 12: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/12.jpg)
CSS3
SVG
Canvas
WebGL
![Page 13: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/13.jpg)
WebStorage
IndexedDB
![Page 14: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/14.jpg)
AudioElement
VideoElement
![Page 15: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/15.jpg)
WebWorker
WebSocket
AppCache
![Page 16: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/16.jpg)
フロントエンドで
できることが増えている
![Page 17: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/17.jpg)
できることが増えている分
ボトルネックになりやすい
![Page 18: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/18.jpg)
the Performance Golden Rule http://www.stevesouders.com/blog/2012/02/10/the-performance-
golden-rule/
![Page 19: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/19.jpg)
80-90% of the end-user response time
is spent on the frontend. Start there.
- Steve Souders
![Page 20: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/20.jpg)
サイトパフォーマンスの大部分をフロントエンドで改善出来る
![Page 21: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/21.jpg)
LET’S BRUSH UP!
![Page 22: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/22.jpg)
今回紹介するツールは3つHTML / CSS / JavaScript
![Page 23: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/23.jpg)
HTMLInspector
![Page 24: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/24.jpg)
Introducing HTML Inspector http://philipwalton.com/articles/introducing-html-inspector/
![Page 25: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/25.jpg)
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
![Page 26: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/26.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 27: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/27.jpg)
WITH CLI...
$ npm install -g html-inspector
HTMLInspectorをインストールする
# execute url $ htmlinspector http://1000ch.net/ !# execute local file $ htmlinspector index.html
HTMLInspectorを実行する
![Page 28: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/28.jpg)
もっと手軽に使いたい…ChromeのExtensionを作りました。
![Page 29: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/29.jpg)
H:Inspector Please search for Chrome Store!
![Page 30: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/30.jpg)
CSSLint
![Page 32: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/32.jpg)
CSS Lint open sourced http://www.stubbornella.org/content/2011/06/15/css-lint-open-
sourced/
![Page 33: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/33.jpg)
CSSLINT Ultra Translation https://gist.github.com/hail2u/1303613
![Page 34: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/34.jpg)
WITH BROWSER...Webサイトにアクセスする
CSSを貼り付けて実行する
![Page 35: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/35.jpg)
WITH CLI...
$ npm install -g csslint
CSSLINTをインストールする
# execute csslint $ csslint [options] [file or directory]
CSSLINTを実行する
![Page 36: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/36.jpg)
JSHint
![Page 39: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/39.jpg)
WITH BROWSER...
JavaScriptを貼り付けて実行する
Webサイトにアクセスする
![Page 40: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/40.jpg)
WITH CLI...
$ npm install -g jslint
JSHINTをインストールする
# execute jshint $ jshint [options] [file or directory]
JSHINTを実行する
![Page 41: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/41.jpg)
毎回ブラウザ見たり コマンド叩くのか…
いいえ、自動化出来ます。
![Page 43: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/43.jpg)
WHAT IS GRUNT?Node.jsで動くタスクランナー
設定ファイルがJavaScript
共有に必要なのは2ファイル
![Page 44: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/44.jpg)
Gruntはフロントエンドエンジニアにも扱いやすいツール
![Page 45: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/45.jpg)
Gruntの概要と導入手順とメリット http://1000ch.net/2012/12/08/ReconsideringGruntJs/
![Page 46: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/46.jpg)
demonstration
http://github.com/1000ch/brushup-sample
![Page 47: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/47.jpg)
CHECK HTML
![Page 48: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/48.jpg)
! Failed rule "validate-attributes". " The 'bgcolor' attribute is no longer valid on the <body> element and should not be used.
HTMLは文書構造を定義、CSSは装飾やレイアウトという切り分けを行いましょう。
![Page 49: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/49.jpg)
! Failed rule "unused-classes". " The class 'hoge' is used in the HTML but not found in any stylesheet.
定義されていないCSSはHTMLで参照しないようにしましょう。CSSの参照コストが発生してしまいます。
![Page 50: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/50.jpg)
! Failed rule "unnecessary-elements". " Do not use <div> or <span> elements without any attributes.
CSSの装飾や、属性値も持たない<div>や<span>
は必要ないはずです。深ければ深いほど、描画時のリフローの回数が増え、CSSやJSの参照のコストが増えます。
![Page 51: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/51.jpg)
! Failed rule "validate-attributes". " The 'alt' attribute is required for <img> elements.
必須とされている属性値は記述するようにしましょう。ちなみに、<img>にはwidthとheightをつけるのが望ましいです。そして、srcの値を空にしないようにしましょう。
![Page 52: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/52.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 53: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/53.jpg)
! Failed rule "validate-elements". " The <font> element is obsolete and should not be used.
<font>タグは非推奨です。前述の通り、HTMLは文書構造の定義という役割になったためです。<center>、<basefont>、<u>、<s>等にも同様のことが言えます。
![Page 54: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/54.jpg)
HTML要素リファレンス https://developer.mozilla.org/ja/docs/Web/HTML/Element
![Page 55: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/55.jpg)
! Failed rule "inline-event-handlers". " An 'onclick' attribute was found in the HTML. Use external scripts for event binding instead.
イベントの定義はJSファイルで行うようにしましょう。インラインの定義は管理が非常に難しく、予期しない不具合を引き起こします。
![Page 56: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/56.jpg)
<button id="js-bar" onclick="alert('Clicked!')">
var btn = document.getElementById("js-bar"); btn.addEventListener("click", function() { alert("Clicked!"); });
「JavaScriptはJSファイルに書きましょう。」
![Page 57: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/57.jpg)
! Failed rule "script-placement". " <script> elements should appear right before the closing </body> tag for optimal performance.
<script>タグは同期的に実行されるため、その間ページの描画が止まります。</body>の上に置くことでそれを極力避ける事ができます。
![Page 58: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/58.jpg)
CHECK CSS
![Page 59: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/59.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 60: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/60.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 61: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/61.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 62: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/62.jpg)
The properties padding-top, padding-bottom, padding-left, padding-right can be replaced by padding. Use shorthand properties where possible. (shorthand)
ショートハンドで記述し、冗長な表現は避けましょう。
![Page 63: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/63.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 64: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/64.jpg)
@import prevents parallel downloads, use <link> instead. Don't use @import, use <link> instead. (import)
さらに良いのは、CSSファイルをすべて結合して1
ファイルにすることです。Webパフォーマンスの向上の第一歩はHTTPリクエストの数を減らす + ダウンロードサイズを減らすことです。
![Page 65: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/65.jpg)
Mobile Front-endOptimization Standard:2012
https://speakerdeck.com/t32k/mobile-front-end-optimization-standard-2012
![Page 66: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/66.jpg)
CHECK Javascript
![Page 67: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/67.jpg)
eval can be harmful.
eval()はパフォーマンスが悪い上に、スコープがわかりにくくセキュリティ的にも危ないです。eval()
を必要とするケースはほとんど無いはずです。
![Page 68: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/68.jpg)
Missing semicolon.
処理の終わりには忘れずセミコロンを付けましょう。括弧も省略するべきではありません。省略することで振る舞いが変わってしまう恐れがあります。
![Page 69: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/69.jpg)
Use '!==' to compare with 'null'
nullとの比較に限らず、基本的に厳密等価演算子を推奨します。キャストがない分高速である上、暗黙の型変換は誤解を招きやすいです。
![Page 70: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/70.jpg)
Equals Operator vs Strict Equals Operator http://jsperf.com/equals-operator-vs-strict-equals-operator/2
![Page 71: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/71.jpg)
The object literal notation {} is preferrable.
The array literal notation [] is preferrable.
new Array()による配列の初期化は、引数がわかりにくいです。双方ともリテラルを使ったほうが完結でわかりやすいです。
![Page 72: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/72.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 73: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/73.jpg)
JavaScript Garden http://bonsaiden.github.io/JavaScript-Garden/ja/
![Page 74: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/74.jpg)
CONCLUSION
![Page 75: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/75.jpg)
HTML
レイアウトや装飾はCSSにやってもらう
Scriptタグはページ下部に置く
HTML5で提唱される要素のキャッチアップ
![Page 76: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/76.jpg)
CSS
Sass等を使う場合はコンパイル後を意識する
CSSは壊れやすい!
HTML構造に依存しないCSSを書く
![Page 77: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/77.jpg)
JavaScript
書き方一つで実行速度が変わる
CSSで出来ることはCSSでやる
省略しない!JavaScriptは可読性が命
![Page 78: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/78.jpg)
リファクタリングのフロー化Jenkins、ローカル環境でのGrunt、Travis CI等。
![Page 79: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/79.jpg)
The first draft of anything is shit
- Ernest Hemingway
![Page 80: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/80.jpg)
指摘される内容の理解必ず理由があります。調べて理解して直す!
![Page 81: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/81.jpg)
スキルアップに直結踏まえてやれば間違いなく技術は向上します。
![Page 82: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/82.jpg)
KEEP OPTIMIZING!
![Page 83: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/83.jpg)
THANK YOU!@1000ch
![Page 84: Brush up your Coding! 2013 winter](https://reader031.fdocument.pub/reader031/viewer/2022020218/5571c05cd8b42ac0228b5022/html5/thumbnails/84.jpg)
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/