理解 DOM 座標

座標系統

在瀏覽器中有兩種座標系統 & 滑鼠座標:
1. 相對於 document - 座標 (0, 0) 在整個頁面的最左上角。
2. 相對於 window - 座標 (0, 0) 在可視區 Viewport 的最左上角。
3. 滑鼠座標 - 通常透過事件取得。

當頁面還沒捲動時 window 和 document 的原點 (0, 0) 與其他座標是相同的。

開始捲動後,document 的座標等於 window(viewport) 的座標加上 scroll 的位置,大部分的情況下我們會使用 document 座標系統,因為它即便 scroll 了,還是會保持一致。

繼續閱讀

關於 Javascript {} + {}

這篇文章源自 What is {} + {} in JavaScript? 其實早在 2012 年就問世了。
時至 2016 年末純粹是在聊天時重提這個問題,但由於年紀大了記憶力不佳,竟然記了,所以才會有這一篇重新紀錄的筆記。

源頭是當時由 Gary Bernhardt 在閃電秀中指出 Javascript 的詭異行為 - Wat

繼續閱讀

撰寫高效能的 Javascript 小技巧

這篇文章將會介紹簡單的技巧來優化我們的程式碼讓 Javascript 編譯的過程更具效率,最終我們的程式碼可以執行的更加快速。
特別是當您在遊戲類型的專案上發現掉禎或記憶體回收機制(garbage collector)遇到大量資料無法被回收的情況。這些技巧可以協助我們增加程式碼的效能。

繼續閱讀

Vue.js 由 1 到 2 的旅程 - (2)

第二集,我們要聊的是一個很瑣碎的點也許會造成您困惑,在精神不濟的情況下建議略過本文。如果您跟我一樣閱讀的是英文版的文件加上英文又不是很牛,那麼我想這個點可能會造成您的困惑。
如果您也曾對 string templatesnon-string templates 兩個詞有疑惑的話就讓我們繼續看下去…

繼續閱讀

Vue.js 由 1 到 2 的旅程 - (1)

這系列文章會是記錄從 Vue 版一轉移到版二過程中差異點的筆記,希望以輕鬆短篇的方式撰寫。小弟認為如果您不是那種會乖乖的把文件完整娓娓讀一遍的人,有許多差異點可能就被您忽略了,當然就把它們忘了或從來沒理解過(從 Vue 2 入手的朋友們)也不會是什麼大問題,反正等到您遇到問題的時候肯定又會找到它。不過這系列跟希望紀錄的是思路的演進,像是為什麼不支援內建 filter 這類的議題,每一次改變總有它的道理我們不一定能參透但試著想想看並記錄下來希望下一次能成為更好的開發者。

廢話不多說就讓我們開始來說今天的故事:

繼續閱讀

穠纖合度的整合 Rails、Webpack、Vuejs

前言

如果您曾經閱讀過小弟的vue + webpack 起手式一文,裡面我曾提到關於容易與傳統 MVC 框架(Rails, ASP.NET MVC)等結合。這篇文章主要就是用來介紹其作法與為什麼我會這麼說。

我先承認吧!我不總是需要使用 SPA 的架構 雖然它很好,但對於很多小型專案,或者我們應該說 UI/UX 設計本身非常單純的專案 - 殺雞焉用牛刀。所以這邊文章的作法針對的是那些專案不是使用 SPA 搭配 API 的架構的人,而是您覺得既有的 MVC 框架對於您的需求開發已經非常足夠且想保留大多數這些框架提供的功能(本文僅針對 Rails 介紹)。

網路上有非常多關於 Rails 與 Webpack 整合的方式,其實都非常不錯。而關於本文只是介紹其中一種小弟認為剛剛好的整合方式,其中許多觀念都不是新創的,都只是整理過去學習經驗而成。

繼續閱讀

Heroku 運行類別、 Procfile、常用指令筆記

Procfile 是一種定義指令是否可以在 Heroku dynos(一種輕量化的容器,可以執行特定用戶設定的指令)上執行的機制。
它遵循著 Unix 的程序模型(process model)。這裡為了簡化概念,我們可以說 dyno 就是執行指令的一個個體。舉例來說一個 web dyno 就意味著執行一個 web server 的程式。希望這樣的說明可以理解這些特殊的名詞概念。

繼續閱讀

[譯] Yarn - Javascript 新一代套件管理

本文轉譯並補充自 - Yarn: A new package manager for JavaScript

在 Javascript 社群中,開發者們分享成千上萬的原始碼讓我們可以省去重造輪子的時間,不用重新打造函式庫,框架,元件等。
而每段原始碼都有可能相依於其他原始碼片段,這些相依的程式碼通常會透過套件管理(package manager)來管理。
其中在 Javascript 裡,最熱門的就屬 npm ,在上面有 5 百萬個開發者,套件庫提供了超過 300,000 模組,更驚人的是每個月有超過 5 億次的下載量。

繼續閱讀

Vue + webpack 起手式

介紹

前端的世界變化之快速,從 2010 開始小弟經歷了 jQuery, Backbone, Angular, 到 React。這一路走來雖然學習到了許多高明開發者融合於框架或函式庫中的智慧,卻也因為不斷快速變化感到疲憊。時至 2016 小弟認為在實務與理想之間取得一個完美平衡的前端框架大概就屬 vue.js 了。

當然這前端世界裡並沒有萬能藥可以完美的處理所有問題,不過 vue.js 的精美,不只容易與傳統 MVC 框架(Rails, ASP.NET MVC)等結合,當要使用最新的設計模式如 Flux, redux 等也都是沒問題的,再加上易學與一些你肯定能感受到作者從實戰淬煉出來的特性。因此在 2016 我也決定轉戰 vue.js

繼續閱讀

npm 最佳實作的小技巧

npm 最佳實作

npm install 是我們最常在 npm 中用到的指令,但其實它還提供了更多的功能。在這篇文章中我們將會學到 npm 如何在開發過程中協助我們 - 從建立專案到部署應用程式。

繼續閱讀