使用 Passport 實作 Nodejs 應用程式驗證機制
為應用程式實作穩固的驗證機制一直以來都是令人害怕的工作,當然在 Nodejs 的世界中也不例外。
在這篇文章,我們將要從零開始開發一個 Nodejs 的應用程式搭配一套熱門的驗證 Middleware - passport。
passport 本身單純只關注驗證相關的部分,在官方文件中它這麼描述:這是一套簡單,可無縫整合於 Node 的 Middlewre。理解它本質是 Middleware 有助於後續的應用。
為應用程式實作穩固的驗證機制一直以來都是令人害怕的工作,當然在 Nodejs 的世界中也不例外。
在這篇文章,我們將要從零開始開發一個 Nodejs 的應用程式搭配一套熱門的驗證 Middleware - passport。
passport 本身單純只關注驗證相關的部分,在官方文件中它這麼描述:這是一套簡單,可無縫整合於 Node 的 Middlewre。理解它本質是 Middleware 有助於後續的應用。
在 SVG 繪製的任何一個時間點,我們都可以透過內嵌 <svg> 或者使用像是 <symbol> 這類的元素來建立新的 viewport 和用戶座標。
本篇文章我們將要探討該怎麼作?以及如何利用這種方式協助我們控制 SVG 元素使其更具彈性。
本篇是探討 SVG 座標系與變形系列文章的第三篇也是最後一篇,在第一篇我們討論了 SVG 座標系的基本觀念即 viewport viewBox preserveAspectRatio 這三個東西。第二篇主要討論了關於變形的用法和座標系之間關係的觀念。系列文章的連結條例於下:
在這篇文章中,我假設您至少已經讀完第一篇文章,並且能夠掌握 SVG viewport 的觀念和 viewBox preserveAspectRatio 兩個屬性。本篇文章不需要具備第二篇討論的觀念,您可以略過無妨。
SVG 的元素可以執行縮放、移動、傾斜、旋轉等形變效果就像 HTML 元素可以用 CSS transform 一樣。然而當變形的任務牽扯到座標時,勢必也會影響結果。
在這篇文章我們要討論的是 SVG 的 transform 屬性與 CSS 屬性,內容涵蓋如何操作 SVG 變形以及座標系轉換過程您應該知道的事。
這是系列文章的第二篇,我們將開始探討 SVG 座標系與變形之間的關係。在第一篇時我們介紹了關於 SVG 座標系的基礎概念,更具體的說就是 viewBox, preserveAspectRatio 屬性和 viewport 的概念。
這裡我假設您已經閱讀並理解第一篇的部分,如果您還沒參透那麼這邊建議您先讀完第一篇。
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)遇到大量資料無法被回收的情況。這些技巧可以協助我們增加程式碼的效能。