RabbitMQ 學習筆記 - 安裝、入門、Work Queues
2017-06-08
阅读 11 分钟
2.5kRabbitMQ server 的執行與操作指令會被安裝在 /usr/local/sbin。這個路徑並不會自動被加到我們電腦的 PATH 所以我們需要在 .bash_profile 或 .profile 加入 PATH=$PATH:/usr/local/sbin。
[譯] 理解 SVG 座標系統與 Transformations - 1
2017-04-04
阅读 12 分钟
2.6kSVG 元素並不像其他 HTML 元素受到 CSS 盒模型的管轄。乍看之下元素的定位、變形、移動、旋轉等形變的行為並不是那麼直覺好控制。然而只要我們理解關於 SVG 的座標系與圖案變形(transformation)是如何運作，控制 SVG 就會變得非常容易。
[譯] 理解 SVG 座標系統與 Transformation - 2 transform 屬性
2017-04-04
阅读 10 分钟
2kSVG 的元素可以執行縮放、移動、傾斜、旋轉等形變效果就像 HTML 元素可以用 CSS transform 一樣。然而當變形的任務牽扯到座標時，勢必也會影響結果。在這篇文章我們要討論的是 SVG 的 transform 屬性與 CSS 屬性，內容涵蓋如何操作 SVG 變形以及座標系轉換過程您應該知道的事。
[譯] 理解 SVG 座標系統與 Transformation - 3 建立 viewpor
2017-04-04
阅读 10 分钟
1.8k在 SVG 繪製的任何一個時間點，我們都可以透過內嵌 <svg> 或者使用像是 <symbol> 這類的元素來建立新的 viewport 和用戶座標。本篇文章我們將要探討該怎麼作？以及如何利用這種方式協助我們控制 SVG 元素使其更具彈性。
[譯 + 補充] Webpack 2 入門
2017-02-17
阅读 15 分钟
7.4k在今時今日，webpack 已經成為前端開發非常重要的工具之一。本質上它是一個 Javascript 模組封裝工具，但透過 loaders 和 plugins 它也可以轉換封裝其他前端的資源檔像是 HTML，CSS，甚至是圖片等，讓我們能夠控制程式發出 HTTP 請求的數量（編譯結果的檔案數量）。我們可以使用偏好的方式去撰寫這些資源檔像是 Jade, Sa...
[譯 + 補充]理解 DOM 座標
2017-01-31
阅读 4 分钟
2.2k開始捲動後，document 的座標等於 window（viewport） 的座標加上 scroll 的位置，大部分的情況下我們會使用 document 座標系統，因為它即便 scroll 了，還是會保持一致。
關於 Javascript {} + {}
2016-12-27
阅读 4 分钟
2.4k這篇文章源自 What is {} + {} in JavaScript? 其實早在 2012 年就問世了。時至 2016 年末純粹是在聊天時重提這個問題，但由於年紀大了記憶力不佳，竟然記錯了，所以才會有這一篇重新紀錄的筆記。
Vue.js 由 1 到 2 的旅程 - (2)
2016-12-16
阅读 4 分钟
2.1k第二集，我們要聊的是一個很瑣碎的點也許會造成您困惑，在精神不濟的情況下建議略過本文。如果您跟我一樣閱讀的是英文版的文件加上英文又不是很牛，那麼我想這個點可能會造成您的困惑。如果您也曾對 string templates 和 non-string templates 兩個詞有疑惑的話就讓我們繼續看下去
Vue.js 由 1 到 2 的旅程 - (1)
2016-12-05
阅读 3 分钟
2.8k這系列文章會是記錄從 Vue 版一轉移到版二過程中差異點的筆記，希望以輕鬆短篇的方式撰寫。小弟認為如果您不是那種會乖乖的把文件完整娓娓讀一遍的人，有許多差異點可能就被您忽略了，當然就把它們忘了或從來沒理解過（從 Vue 2 入手的朋友們）也不會是什麼大問題，反正等到您遇到問題的時候肯定又會找到它。不過這系列...
穠纖合度的整合 Rails、Webpack、Vuejs
2016-11-07
阅读 15 分钟
4.3k如果您曾經閱讀過小弟的vue + webpack 起手式一文，裡面我曾提到關於容易與傳統 MVC 框架(Rails, ASP.NET MVC)等結合。這篇文章主要就是用來介紹其作法與為什麼我會這麼說。
[譯] Yarn - Javascript 新一代套件管理
2016-10-13
阅读 5 分钟
6k在 Javascript 社群中，開發者們分享成千上萬的原始碼讓我們可以省去重造輪子的時間，不用重新打造函式庫，框架，元件等。而每段原始碼都有可能相依於其他原始碼片段，這些相依的程式碼通常會透過套件管理（package manager）來管理。其中在 Javascript 裡，最熱門的就屬 npm ，在上面有 5 百萬個開發者，套件庫提供了超...
[譯 + 更新] 參透 Node 中 exports 的 7 種設計模式
2016-09-20
阅读 12 分钟
6.7k這篇文章試著要整理，翻譯Export This: Interface Design Patterns for Node.js Modules這篇非常值得一讀的文章。但因為這篇文章有些時日了，部分範例已經不符合現況。故這是一篇加上小弟收集彙整而成的更新翻譯。
Facebook Bot 開發小技巧
2016-08-27
阅读 3 分钟
4.4k流程 準備環境 使用 ngrok 取得 https 網址 建立與設定 Facebook App 與粉絲團 建立 webhook GET API 設定 Facebook App webhook 實作 webhook POST API 產生對話 準備 由於 Facebook bot 在執行 API 溝通的時候需要使用 SSL 協定即網址要是 https，為了在本地端開發方便。因此我們需要使用 ngrok 來協助我們產生一個 ht...
[譯] 學習 CSS clip-path 屬性
2016-07-14
阅读 3 分钟
4k這篇文章主要會介紹 clip-path 這個 css 的樣式規則可以讓我們遮掉元素的局部，就是不顯示出來。達成這項功能背後的原理就是我們可以透過它去定義可視區，類似於遮色片的概念。我們將從基礎開始然後涵蓋語法，進一步理解進階的概念。
Vue 實作簡易驗證機制 App
2016-06-23
阅读 13 分钟
11.3k為了顯示出 Vue.js 強大的能力 ，本文將會逐步指導建置一個簡單的前端應用程式。搭配 Node 所建置的後端程式範例。前後端兩個程式是完全分離的，後端使用 RESTful API 的方式負責取得資料與驗證。本文旨在說明如何替 Vue.js 程式加上驗證機制，過程中我們會使用 vue-router, vue-resource 實作 Login 與 Signup 元件展示...
Node 實作 jwt 驗證 API
2016-06-23
阅读 15 分钟
23.1k在今天，我們應該常常能看到大量使用 token 來處理驗證的服務，由於大部分的網站服務開始大量使用 API，於是 token 就成了處理驗證使用者最好的方式。我們的應用程式選擇使用 token 驗證機制有些非常重要的原因，最主要是因為:
[譯] scroll-behavior 滑順的捲動效果
2016-06-03
阅读 2 分钟
17.1k眾所皆知 HTML 錨點(anchor link)透過給定標籤 id 屬性跳到頁面上特定位置的功能。不過這個效果感覺上就像是閃一下就切換到該位置。為了使用體驗上的感覺有時候網站會設計一種平滑捲動到該位置的效果。
手把手深入理解 webpack dev middleware 原理與相關 plugins
2016-06-01
阅读 12 分钟
26.5k它就是一個用來組織包裝 webpack 使其可以變成中介軟體，或稱中間件的容器。回想一下 express 你大概可以明白關於 middleware 的用途，就是在輸入到輸出的過程中 加工 的一種手段。單純說 middleware 的話我們可以想成一系列任務, 動作(actions stack)，不只 express 有，在 Ruby 中的 rake 也具備這種機制。
vue + webpack 起手式
2016-05-27
阅读 10 分钟
39.7k前端的世界變化之快速，從 2010 開始小弟經歷了 jQuery, Backbone, Angular, 到 React。這一路走來雖然學習到了許多高明開發者融合於框架或函式庫中的智慧，卻也因為不斷快速變化感到疲憊。時至 2016 小弟認為在實務與理想之間取得一個完美平衡的前端框架大概就屬 vue.js 了。
響應式設計中百分比 % 的問題
2016-05-22
阅读 5 分钟
4.6k現在您可能會想知道關於上面這段程式碼有什麼問題，看起來這樣並不明顯，好！假設這是一個三欄(column)的網格，就算你知道 33% + 33% + 33% = 99% 並不是 100%。但在大多數的情況下並不會有什麼問題，不過這誤差的 1% 如果遇到容器像是 1400px 時就是 14px，那就是一個蠻大的誤差了。那為什麼我們不直接調整百分比的精度...
[譯] Houdini: 你還沒聽說！這可能是 CSS 下一件最令人興奮的大事
2016-03-31
阅读 7 分钟
3.3k你曾經想要使用某個 CSS 的新功能，但是最後卻因為這個功能瀏覽器還未全面支援而放棄了嗎？甚至更糟糕的狀況，瀏覽器已經支援了但卻充滿問題。我敢打賭這些情況你肯定遇過了。如果上面這種情形你曾經遇過，那麼你是應該關心一下 Houdini。
深入 css z-index 屬性
2016-03-26
阅读 4 分钟
2.2k說來汗顏，一直以來對於 css 常常是不求勝解。直到自己需要打造自己的輪子才發現對 z-index 完全不熟悉。關於 z-index 的問題其實非常少人完全明白它到底是怎麼運作的。事實上這並不複雜，不過如果你不曾花些時間閱讀規範可能你不曾察覺一些重要的觀念。
2015 的工具包，持續邁向 2016！
2016-03-09
阅读 4 分钟
12.2k以下是小弟新年時為了整理電腦所整理的清單。現在的工作主要為前端開發 React/Vue，偶而兼職後端 Rails。打勾的持續使用與推薦的，沒打勾的可能軟體不差但使用習慣關係好像沒那麼常開啟。作業系統是 OSX 分享給大家。
重讀 Axel 的 Javascript 中的 Expression vs Statement 一文
2016-03-08
阅读 6 分钟
9.7k註: 下面一些範例當我們在瀏覽器 console 執行時，回傳值與程式執行的順序在 Chrome 與 Firefox 會有差別。注意一下箭頭符號就知道哪個是 return 了。如下範例
深入 Javascript 執行環境
2016-02-25
阅读 5 分钟
4.2k在這篇筆記中我將會深入的探討 JS 底層中的一些觀念，其中最重要的就是執行環境(Execution Context)。當您閱讀完這篇文章後您可能會比較清楚關於直譯器的運作方式，明白為什麼有些 函式 變數 可以在他們被宣告之前就拿來使用，以及這些值是怎麼決定的。
[譯] 透過重新實作來學習參透閉包
2016-02-24
阅读 4 分钟
3.4k話說網路上有很多文章在探討閉包(Closures)時大多都是簡單的帶過。大多的都將閉包的定義濃縮成一句簡單的解釋，那就是一個閉包是一個函數能夠保留其建立時的執行環境。不過到底是怎麼保留的？
[譯] CSS 載入機制的未來趨勢
2016-02-18
阅读 5 分钟
9.4kChrome 正在試圖改變當 <link rel="stylesheet"> 寫在 <body> 的行為，從blink-dev 的文章並不能很清楚的知道其優點。所以這篇文章想要深入的介紹這點。
詳解 ES6 Unicode
2016-01-08
阅读 10 分钟
5.2k關於 Javascript 處理 Unicode 的方式...至少可以說是很奇怪。這篇文章闡述在 Javascript 中存取 Unicode 的痛點以及 ES6 如何改善這個問題。
從<琅琊榜>學 Redux
2016-01-06
阅读 9 分钟
11.5k這篇文章希望從另外一個角度來看關於 Redux 的機制與運用，在網路上各式的教學文章中值得先推薦的自然是官方教學如果英文不是很好的可以參考繁體中文版。這是小弟認為要學習 Redux 必讀的文件。另外還有A cartoon intro to redux也是值得一讀的好文可以加深記憶。