在 React.memo 實作 re-render 條件

幾週前 React 發佈了版本 16.6,一口氣推出了 lazymemocontextType 等新功能。而其中的 React.memo 就是過去 React.PureComponent 的 HOC 版本,比起過去改動成 PureComponent 要動到較大量的程式碼,如今只要套上 React.memo 即可。不過在 class component 可以寫 class method 自定 shouldComponentUpdate 的實作,function component 好像不能這樣搞?其實 memo 是有第二個參數可以使用的。

READ MORE
充分利用 lodash 讓你的程式碼更易讀及維護

一般在開發 JavaScript 的專案的時候,一定會大量的操作 Array / Object / String…等,但大部分人通常會使用 prototype fucntion,例如使用 Array.prototype.pushArray.prototype.map 等等,此文將會講解透過 lodash 所提供的方法,可以如何讓程式碼更佳的簡潔及好維護。

READ MORE
透過 namespacing 讓 Vuex 更結構化

去年底退伍之後進入新公司開始工作,近一年來都在 Vue / Vuex / Vue-Router 之間打滾,也寫出一些心得了,就在睽違一年多之後可以來寫新的東西了 XD。

大部分人透過 Vue 開發 SPA(Single Page Application)時通常都會搭配 Vuex 一起使用,如果不知道 Vuex 的作用的話那可以先去參考一下官方介紹

READ MORE
在 OSX 使用 Fish shell 取代 bash/zsh

在 Mac 上用 zsh 已經有一陣子了,最讓我詬病的就是 zsh 的 auto suggestion 及 auto completion 速度相當慢,而且有一些很奇怪的問題(bugs?)。最近 fish 這個 shell 好像很紅,索性就把 zsh 換成 fish 了。

裝完後不只速度 ++,連 plugin / theme 的套件管理都有(fisherman),使用起來相當快速方便,要說缺點呢,就是與 bash 不相容,所以很常在寫 bash 的捧油只能看看囉。

READ MORE
在 OSX 使用 Homebrew 打造精巧的 Laravel 開發環境

更新於 2017/1/10:Laravel 官方已推出 Laravel Valet,建議採用 Valet 方式進行安裝。

建議你熟悉 Terminal 的操作再參考本篇,否則容易把系統環境搞亂。

在開發 Laravel Application 時,新手可能使用 *AMP 的系統環境整合包,而大多數人會選擇官方所提供的 Homestead。但 Homestead 其實就是一包很大包的虛擬機再配上 Vargrant,曾幾何時我也是使用 Homestead,但是因為我的小 Macbook Air 實在是受不了虛擬機容量一大包,又吃一堆記憶體。

雖然標題是寫 Laravel,但是要應用在其他的 PHP Application 也是可行的。本篇就以 Homebrew 為主軸,打造 Laravel 的開發環境。

READ MORE
在 laravel 5 實作瀏覽器推播通知

更新於 2017/1/10:Laravel 官方已推出 Laravel Echo,可簡化整個建置流程,有興趣可前往參考。

今天在逛 PHPHub 時剛好看到這篇,想著之前也想做類似 Facebook 的通知服務,剛好之前也有碰過一陣子的 socket.io,所以就試著實做看看了。不過推播通知在手機上是相當常見的,但在 Web 上不知為何卻相當少見,也可能是我見識太淺了,看過的網站太少 XD。

本文的原始碼

READ MORE
防止 SSH 因長時間未動作而斷線

在使用 SSH 連線到遠端主機時,常常因為一段時間未動作而逾時斷線。要避免這樣的情形發生, 只要設定自己的 SSH 設定即可。

READ MORE
在 iDevice 上執行 React Native(不需付費)

之前在練著寫 React Native 時詢問過開發 iOS 的朋友,能不能將 App 燒至自己的裝置上。當時好像因為 Apple 規範的關係,必須加入 Developer Program年付 $99 取得憑證才行。而因為我沒有打算上架到 App Store 上所以只好放棄付錢作罷。

最近剛好想寫一些自己的工具,又試著上網找了一下資料,發現在 XCode 7 之後已經開放未付費也可以燒至裝置上了,因此紀錄一下。

READ MORE
Redux 起手式:Actions、Reducers 及 Store

真正開始寫 React 大概是這一兩個月的時間吧,印象中前幾個月正火紅的時候,觀望著開發架構,從 Facebook 剛開始的 Flux,一路看到 fluxxoralt 這些 Library 等等,真的是多到爆,然後那個 Flux 的概念圖看了不下 N 次,但還是不得其門而入。

直到不久前出現了一個叫 Redux 的東西,剛好有新 project 要用 React 寫,看著各方大神推薦就順勢跳進 Redux 的世界了。最近也利用 Redux 寫了個 Proxy manager,趁最近期中考完,回頭寫一下 Redux 的核心概念。

READ MORE
在 Sublime Text 的 JSX 中使用 Emmet

Sublime Text 除了有內建的標籤自動補齊,最有名的 pakcage 就是 Emmet 了。Emmet 一直以來是寫 HTML 的神器,除了原本支援 HTML 外,其實已經支援了 JSX。但在 Sublime Text 的 JSX 中不額外設定的話是無法正常使用的,其實只要修改一下 Key Binding 就可以了。

READ MORE
在 Mac 上使用 Homebrew 安裝 Docker

更新於 2017/1/10:Docker 官方已推出 Docker for Mac,若有需求請前往該站參考,本安裝方式已不適用。

本文建議了解 unix-like 基礎指令及 Docker 基本操作者閱讀。

雖然 Docker 官方推薦使用 Docker Toolbox,不過我個人很不喜歡這種一鍵安裝包,連啟動還要用 GUI。可是動手搜尋 docker via homebrew 之類的關鍵字,出來的結果都是使用舊的 boot2docker(目前為 docker-machine),所以找不到只好自己做個紀錄了。

READ MORE
JSDC 2015 會後筆記(Day 2)

本文延續 Day 1

第一天結束之後,晚上我去淡水我朋友借住一天。淡水跟南港展覽館格有夠遠...來回要一個小時多,所以二天早上八點出發,到會場已經九點半了,導致我第一個 topic 完全沒聽到,虧大了!

READ MORE
JavaScript 的 Object.assign 陷阱

以下開發情境為 ES2015(ES6)

一般在寫 React 的時候,通常會希望資料是 immutable(不可變的),讓開發時對資料的流向即處理更容易,所以通常會使用 Object.assign 來複制 object。但今天在寫時遇到一個問題,我一直以為 Object.assign 會連同子項目都複製,結果兩個不同的資料改 A 竟然連 B 都跟著動,就做個紀錄。

READ MORE
JSDC 2015 會後筆記(Day 1)

JSDC 全名是 JavaScript Developer Conference,是台灣所有 JavaScript 開發者的年度盛會。

今年 JSDC 的 Build anything with JavaScript 包含了 iOS App、Android App、Arduino...等等,涵蓋了各式各樣的議題,不僅僅侷限於 Web,會後也有 Lighting talk 這種有趣的活動,讓會眾也能參與議題分享,還有吃(X)。整體來說 JSDC 是每年吸收 JavaScript 新知的好活動。

READ MORE
使用 Docker 建置 Gitlab CE 的 Source Control 及 CI 環境

更新於 2017/1/10:此文年久失修,可能有許多情形與現實不符,請斟酌參考。

本文建議了解 unix-like 基礎指令及 Docker 基本操作者閱讀。

這幾天在我們的 imaclab 試著建置 CI 環境,順便就學了 Docker,發現 Docker 這東西真的非常方便,直接把環境都放進 container 裡,也不怕把環境搞爛。對環境建置的苦手真的是一番福音,網路上也很多關於 Docker 的文章,在這邊也不贅述了。 原本在架設的時候想使用 Gitlab + Jenkins,不過因專案的需求沒有需要 Jenkins 這麼開放客製化的 CI 工具(其實是我覺得很囉唆一堆東西要設定),剛好 Gitlab 也有提供 CI,需求上也符合,所以就決定使用 Gitlab + Gitlab CI。

READ MORE
在 Laravel 5 使用 PJAX 加快網頁載入速度

本文適用於 Laravel 5.0 以上版本。

什麼是 PJAX ?

簡單來說,以往使用的 AJAX 可以不重新載入網頁,異步載入伺服器的資料,並更新畫面。而 PJAX 則是加入了 HTML5 的 PushState 技術,在取得資料的同時改變 Url,可以保留瀏覽器上一頁的功能,而且不會從伺服器重新載入 js 及 css 之類的靜態檔案,加快網頁的載入速度。

READ MORE