SVG 元素並不像其他 HTML 元素受到 CSS 盒模型的管轄。乍看之下元素的定位、變形、移動、旋轉等形變的行為並不是那麼直覺好控制。
然而只要我們理解關於 SVG 的座標系與圖案變形(transformation)是如何運作，控制 SVG 就會變得非常容易。
在這篇文章我們要討論 SVG 中最重要的 1 個觀念和 2 個屬性 ，它們控制了 SVG 座標系統：viewport、viewBox、preserveAspectRatio。
我們將探討 SVG 的座標系統和 Transformations ，這系列文章將會包含下列 3 篇
在今時今日，webpack 已經成為前端開發非常重要的工具之一。本質上它是一個 Javascript 模組封裝工具，但透過 loaders 和 plugins 它也可以轉換封裝其他前端的資源檔像是 HTML，CSS，甚至是圖片等，讓我們能夠控制程式發出 HTTP 請求的數量（編譯結果的檔案數量）。我們可以使用偏好的方式去撰寫這些資源檔像是 Jade, Sass, ES6 等等。同時也讓我們能夠輕易的使用來自 npm 的套件。
這篇文章目標讀者是那些剛接觸 webpack 的新手。內容將會包含設定，模組的使用，loaders，plugins，code splitting（分拆程式碼），熱替換（Hot module replacement）。
每過一陣子，重新學習 webpack 就會有些新的發現 - 廢話。
DOM = Document Object Model。DOM 詮釋了 HTML，XML，SVG 上元件的組成建構，操作，是一套程式介面。所有的 DOM 都提供了 API 可以對其操作。實務上指的就是 HTML Tag，文件樹的結構化表示法。
例如：我們使用 HTML 標籤來撰寫，然後瀏覽器會把這些 HTML 轉成 DOM Object 讓我們可以操作。
在瀏覽器中有兩種座標系統 & 滑鼠座標：
1. 相對於 document - 座標 (0, 0) 在整個頁面的最左上角。
2. 相對於 window - 座標 (0, 0) 在可視區 Viewport 的最左上角。
3. 滑鼠座標 - 通常透過事件取得。
當頁面還沒捲動時 window 和 document 的原點 (0, 0) 與其他座標是相同的。
開始捲動後，document 的座標等於 window（viewport） 的座標加上 scroll 的位置，大部分的情況下我們會使用 document 座標系統，因為它即便 scroll 了，還是會保持一致。
這篇文章源自 What is {} + {} in JavaScript? 其實早在 2012 年就問世了。
時至 2016 年末純粹是在聊天時重提這個問題，但由於年紀大了記憶力不佳，竟然記錯了，所以才會有這一篇重新紀錄的筆記。
源頭是當時由 Gary Bernhardt 在閃電秀中指出 Javascript 的詭異行為 - Wat
這篇文章將會介紹簡單的技巧來優化我們的程式碼讓 Javascript 編譯的過程更具效率，最終我們的程式碼可以執行的更加快速。
特別是當您在遊戲類型的專案上發現掉禎或記憶體回收機制(garbage collector)遇到大量資料無法被回收的情況。這些技巧可以協助我們增加程式碼的效能。
很快地又到了年末大掃除了時候，今年增加的工具軟體並不多反而捨去了不少工具。剩下的這些便是展望 2017 年與 2016 整年度下來持續使用的工具。
第二集，我們要聊的是一個很瑣碎的點也許會造成您困惑，在精神不濟的情況下建議略過本文。如果您跟我一樣閱讀的是英文版的文件加上英文又不是很牛，那麼我想這個點可能會造成您的困惑。
如果您也曾對 string templates 和 non-string templates 兩個詞有疑惑的話就讓我們繼續看下去…
這系列文章會是記錄從 Vue 版一轉移到版二過程中差異點的筆記，希望以輕鬆短篇的方式撰寫。小弟認為如果您不是那種會乖乖的把文件完整娓娓讀一遍的人，有許多差異點可能就被您忽略了，當然就把它們忘了或從來沒理解過（從 Vue 2 入手的朋友們）也不會是什麼大問題，反正等到您遇到問題的時候肯定又會找到它。不過這系列跟希望紀錄的是思路的演進，像是為什麼不支援內建 filter 這類的議題，每一次改變總有它的道理我們不一定能參透但試著想想看並記錄下來希望下一次能成為更好的開發者。
廢話不多說就讓我們開始來說今天的故事：