RabbitMQ 學習筆記 - 安裝、入門、Work Queues

本篇是關於 RabbitMQ 的入門學習筆記,內容從安裝到學習使用 Work Queue 的方式。能夠引導您快速入門。大部分的資料來自於官方的學習文件佐以實作時相關問題的資料補充。

繼續閱讀

Heroku 優化 Node 應用程式 - 併發

Node 對於擴展到不同規格的主機環境上其能力有限。首先是它是單執行緒,所以預設它不會自動使用額外的 CPU 核心。再者由於它基於 v8 引擎所以有記憶體上的限制概略是 1.5GB,所以也無法自動使用額外的記憶體。

因此 Nodejs 的應用程式需要多個進程來最大化可用的資源。這個過程我們稱為叢集,我們可以透過使用 Nodejs Cluster API 來完成這個功能。
我們可以直接在程式中使用 API 又或者使用基於這些 API 抽象化的函式庫。這裡我們將使用 throng

使用叢集的方式,應用程式可以善加利用各種 dyno 的資源使效能得到提升。Heroku 的 Nodejs buildpack 也提供一些環境變數來協助我們。

繼續閱讀

[譯] 使用 stream 的方式處理 JSON 傳輸

網頁應用程式在處理大量資料時一直都不是一件簡單的事。當需要接受大量資料時不只速度會變慢,且容易出錯,逾時等等。因此這是使用者體驗設計上的一個挑戰。
傳送大量資料同樣的也不容易,特別是在傳送前處理某些複雜的資料成為我們需要的資料時。

在這篇文章,我們將要來看看如何面對這些挑戰

繼續閱讀

[譯] 理解 SVG 座標系統與 Transformation - 3 建立 viewpor

在 SVG 繪製的任何一個時間點,我們都可以透過內嵌 <svg> 或者使用像是 <symbol> 這類的元素來建立新的 viewport 和用戶座標。
本篇文章我們將要探討該怎麼作?以及如何利用這種方式協助我們控制 SVG 元素使其更具彈性。

本篇是探討 SVG 座標系與變形系列文章的第三篇也是最後一篇,在第一篇我們討論了 SVG 座標系的基本觀念即 viewport viewBox preserveAspectRatio 這三個東西。第二篇主要討論了關於變形的用法和座標系之間關係的觀念。系列文章的連結條例於下:

在這篇文章中,我假設您至少已經讀完第一篇文章,並且能夠掌握 SVG viewport 的觀念和 viewBox preserveAspectRatio 兩個屬性。本篇文章不需要具備第二篇討論的觀念,您可以略過無妨。

繼續閱讀

[譯] 理解 SVG 座標系統與 Transformation - 2 transform 屬性

SVG 的元素可以執行縮放、移動、傾斜、旋轉等形變效果就像 HTML 元素可以用 CSS transform 一樣。然而當變形的任務牽扯到座標時,勢必也會影響結果。
在這篇文章我們要討論的是 SVG 的 transform 屬性與 CSS 屬性,內容涵蓋如何操作 SVG 變形以及座標系轉換過程您應該知道的事。

這是系列文章的第二篇,我們將開始探討 SVG 座標系與變形之間的關係。在第一篇時我們介紹了關於 SVG 座標系的基礎概念,更具體的說就是 viewBox, preserveAspectRatio 屬性和 viewport 的概念。

這裡我假設您已經閱讀並理解第一篇的部分,如果您還沒參透那麼這邊建議您先讀完第一篇。

繼續閱讀

[譯] 理解 SVG 座標系統與 Transformations - 1

SVG 元素並不像其他 HTML 元素受到 CSS 盒模型的管轄。乍看之下元素的定位、變形、移動、旋轉等形變的行為並不是那麼直覺好控制。
然而只要我們理解關於 SVG 的座標系與圖案變形(transformation)是如何運作,控制 SVG 就會變得非常容易。

在這篇文章我們要討論 SVG 中最重要的 1 個觀念和 2 個屬性 ,它們控制了 SVG 座標系統:viewportviewBoxpreserveAspectRatio

我們將探討 SVG 的座標系統和 Transformations ,這系列文章將會包含下列 3 篇

繼續閱讀

[譯 + 補充] Webpack 2 學習筆記

在今時今日,webpack 已經成為前端開發非常重要的工具之一。本質上它是一個 Javascript 模組封裝工具,但透過 loaders 和 plugins 它也可以轉換封裝其他前端的資源檔像是 HTML,CSS,甚至是圖片等,讓我們能夠控制程式發出 HTTP 請求的數量(編譯結果的檔案數量)。我們可以使用偏好的方式去撰寫這些資源檔像是 Jade, Sass, ES6 等等。同時也讓我們能夠輕易的使用來自 npm 的套件。

這篇文章目標讀者是那些剛接觸 webpack 的新手。內容將會包含設定,模組的使用,loaders,plugins,code splitting(分拆程式碼),熱替換(Hot module replacement)。

每過一陣子,重新學習 webpack 就會有些新的發現 - 廢話。

繼續閱讀

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

繼續閱讀