設定 Heroku 使用 Cloudflare HTTPS

設定 Heroku 使用 Cloudflare HTTPS

繼續閱讀

分享到

DOM 基礎複習筆記

DOM

DOM = Document Object Model。DOM 詮釋了 HTML,XML,SVG 上元件的組成建構,操作,是一套程式介面。所有的 DOM 都提供了 API 可以對其操作。實務上指的就是 HTML Tag,文件樹的結構化表示法。

例如:我們使用 HTML 標籤來撰寫,然後瀏覽器會把這些 HTML 轉成 DOM Object 讓我們可以操作。

繼續閱讀

分享到

理解 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)遇到大量資料無法被回收的情況。這些技巧可以協助我們增加程式碼的效能。

繼續閱讀

分享到

2017 歲末年終工具大掃除

很快地又到了年末大掃除了時候,今年增加的工具軟體並不多反而捨去了不少工具。剩下的這些便是展望 2017 年與 2016 整年度下來持續使用的工具。

繼續閱讀

分享到

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 的程式。希望這樣的說明可以理解這些特殊的名詞概念。

繼續閱讀

分享到