npm i fail – 查不出原因的處理方式

經歷許多次的 npm 安裝問題，目前有幾種不同的解法。

npm cache issue

可能因為 npm 下載的時候，或者因為連線問題導致模組並沒有完整被安裝，但是 npm 的檢查機制就是只要存在就會跳過安裝步驟，因此當遇到安裝完成，但是執行卻無法的時候，可以嘗試著

rm -rf node_modules
# install again
npm i 

如果是在中間就遇到 fail 的狀態，有可能是因為之前連線問題，並沒有將模組安裝成功，但是資料已經存在 npm cache 資料夾裡面，以往都需要找出這個環境設定，環境路徑才能進行移除，不過現在透過 npm cache 可以簡單做到這件事情

npm cache clean
rm -rf node_modules
npm i

npm version issue

另外一種會再安裝的時候跳出錯誤，會顯示為 npm 版本不符合，或者是 node 版本不符合，這個時候就需要進行安裝更新，最簡單方式就是升級 npm.

npm i -g npm

缺少套件

通常最常見的就是有些模組需要透過 gcc, g++ 這是最常見的缺少模組問題，以 mac 環境來說直接透過 brew 就可以安裝完成。

brew install gcc
brew install g++
# install again
npm i 

記憶體不足

最後一種就是屬於記憶體不足的狀態，這通常會很難檢查，實際上 npm 也會跳出錯誤，現在的錯誤資訊都已經比較明顯，

npm ERR! node v4.4.1
npm ERR! npm  v3.8.6
npm ERR! code ENOMEM
npm ERR! errno ENOMEM
npm ERR! syscall spawn

npm ERR! spawn ENOMEM

如果遇到這種狀況，請重新調整記憶體分配，如果是採用 vps, 就看能不能夠 scale up ，讓機器的記憶體提升，就可以解決問題。

後記

以上都是踩過的雷，以及在嘗試許多 node.js 專案時會遇到的問題，我們也經常在摸索中，不過從摸索以及找到答案的過程都繞了許多遠路，希望透過分享可以讓大家更瞭解 npm 錯誤時可以怎麼處理。

JavaScript 物件中快速檢查屬性

在我們一般使用 function 或者呼叫某些 api 的時候特別需要去驗證，某些值是否已經存在，或者使用者有沒有忘記傳入哪些數值進來。

為了要做這件事情，通常我們會寫一堆 if 去判斷每個值有沒有出現問題。

if(!formData.name){
    return reject("Parameter 'name' is required");
}
if(!formData.size){
    return reject("Parameter 'size' is required");
}
if(!formData.sizeUnit){
    return reject("Parameter 'sizeUnit' is required");
}
if(!formData.width){
    return reject("Parameter 'width' is required");
}

實際上透過 lodash 可以讓這件事情非常快速完成。

let _ = import 'lodash';
let result = _.has(object, ['name', 'size', 'sizeUnit', 'width']);
if (result) 
  return reject("Parameter is not correct");

後記

雖然說並不是太困難的程式，但是透過套件真的可以讓程式碼短少一點，讓我們程式透過 import / require 將模組載入，讓程式碼更短。

short code is best code

Express.js 的黑歷史及 Express 未來

4/5 更新， 根據讀者回饋，目前 IBM 已將 Express 及相關所有權轉移到 Node.js 基金會手中，讓 Node.js 社群能夠投入資源。

https://nodejs.org/en/blog/announcements/foundation-express-news/

Express.js （以下簡稱為 Express）相信如果有在開發 node.js 程式的人肯定不陌生，幾乎是開發 Web 應用上手的第一堂課程，而 Express 至今已經四年左右的時間，幾乎是從 Node.js 0.4 版本時期就開始有（憑藉著印象，如果有錯請大家指正），當然這當中必定要讚嘆一下，神人 – TJ （拱手作揖）。

而在 Node.js 與 io.js 的戰爭時期， TJ 也宣布將 express 釋出，最後是轉換到 StrongLoop 公司底下，全權交給 StrongLoop （包含網域名稱， Express.js 以及 github reps 的所有權），當然這中間 TJ 肯定有協調些什麼，以及與其他 contributor 。

使用 Express 不可不知的人物， Douglas Wilson ，他是在 TJ　離開 Express 幾乎所有 reivew, issue, merge 都會經過 Doug 的手中

但是燃火線在於 Express.js 4 -> 5 的這段時間， StrongLoop 被 IBM 買走，但是也因為 Express 是一個很龐大的生態系統，以及對於 node.js web 開發是一個影響許多的 open source project ，而在這段時間中， Douglas Wilson 因為某些事情憤而離開 Express 組織中。

這才真正引爆了大家對於 StrongLoop, 及 IBM 的不滿。

黑歷史重點回顧

• TJ 將 Express 名字及所有內容轉移到 StrongLoop
• StrongLoop 並沒有指定或者對於 Express 有任何大量持續性維護
• 只有 Douglas Wilson 及其他志願者持續維持整個 Express 專案的進度
• StrongLoop 在這之後宣稱自己有所有權管理 Express ，但實際上沒有任何作為
• StrongLoop 被 IBM 收購
• 收購後， IBM 連同 StrongLoop 持續沒有任何作為

後續推測是在整個 issue 中，IBM 的人們開始介入流程中，並且對於前期貢獻許多得開發者，及開發流程開始進行干涉，但是實際上對於 Express 的整體發展都是無效益的。

當然這嚴重的影響到 Express5 的發展，也的確開始走向當時的 io.js & node.js 的分裂狀況，為了避免這狀況再度發生，幾乎很多 node.js web 開發的大大都進入到 express issue 當和事佬（？）當然這當中還是要讚揚一下 Doug 的持續支持才有辦法成就 Express 到現在。

後續發展

進度還是持續中，不過很緩慢，但是在 issue 裡面，看的出來 IBM　也知道事情的嚴重性，稍微派了一些開發者進入到　Express 中開始投入資源進行開發。

目前 IBM 已經將 express.js 整個專案及相關所有權轉移到 node foundation，全權由 Node 基金會投入人力，資源進行維護，開發的工作。

但是身為一個旁觀者，我必須說，這就是『自我願意』，和『不願意』的差別。

後記

軟體開發就是人為的藝術。我們雖然口口聲聲都說自己是在對著電腦進行溝通，但只要產品牽扯到團隊，營運，推廣，勢必就會有人的問題發生。

對於開發技術來說真的是有趣的一件事情，不論今天是 inhouse 或者是 open source 的專案，只要扯到人，就會開始有許多問題。

IBM 到底後續會如何看待 Express, 雖然 Express 是 open source 專案，實際上目前的所有權的確就是在 IBM 手中，雖然他是 MIT license ，但是 IBM 本來就不是吃素的。



文中省略了 TJ　將 Express 整包轉讓的議題，畢竟很多人是認為 open source 是神聖不可侵犯的，但實際上 open source 專案要持續營運下去，都是靠著小部分的人持續努力貢獻著，最後如果要專心將這個模組做完整還是要靠錢與資源下去運轉，勢必後期的長期維運，需要仰賴公司支撐，或者是金援才有辦法持續茁壯，這是一件很現實的事情，這蠻值得思考的。

帶出幾個有趣的議題？

• Express 的未來到底會如何？ 是否有潛在的商業技術問題？
• 身為 node.js 開發者，我們是否該轉向，捨棄 Express, 朝向 hapi / Koa2 的懷抱？
• open source 到底是不是一個好的 business ?

這幾個問題就丟給大家仔細品味思考。

Ref

• Release 5.0
• https://nodejs.org/en/blog/announcements/foundation-express-news/
• The Unbelievable History of the Express JavaScript Framework
• is express dying?
• “I’m closing down Express 5.0″

[fixed] Sequelize: warning: "a promise was created in a handler but was not returned from it"

Sequelize: warning: “a promise was created in a handler but was not returned from it"

problem:

when running sequelize, and console display error message below, accroding to sequelize issues, the information dose not effect anything about process.

Warning: a promise was created in a handler but was not returned from it
  at [object Object].Instance.save (/home/tremby/myproject/node_modules/sequelize/lib/instance.js:567:18)
  at [object Object].Model.create (/home/tremby/myproject/node_modules/sequelize/lib/model.js:1824:6)
  at [object Object].HasMany.create (/home/tremby/myproject/node_modules/sequelize/lib/associations/has-many.js:533:29)
  at [object Object].obj.(anonymous function) [as createGameSession] (/home/tremby/myproject/node_modules/sequelize/lib/associations/has-many.js:259:24)
  at done (/home/tremby/myproject/src/app/routes/myroute.coffee:43:10)
  at [object Object]. (/home/tremby/myproject/src/app/routes/myroute.coffee:58:7)
  at processImmediate [as _immediateCallback] (timers.js:383:17)
From previous event:
...

but it is still buggy,

solution

it is simple, if you are running code as development, please setup NODE_ENV for yourself.
then it works.

export NODE_ENV=development

Ref,

https://github.com/sequelize/sequelize/issues/4883

nginx config path for mac envorinment

nginx for mac envorinment

if you are a mac user and have to process nginx config for your local env, there is path and url for you

there is a note for myself.

/usr/local/etc/nginx/nginx.conf

nginx cli

start server sudo nginx
restart server

sudo nginx -s reload

stop server

sudo nginx stop

solve ubuntu can not find temporaily apt-get update

solve ubuntu can not find temporaily

cli,
update dns to google dns server.

echo "nameserver 8.8.8.8" | sudo tee /etc/resolv.conf > /dev/null

then solve,

sudo apt-get update

ref, * apt-get update fails to fetch files, “Temporary failure resolving …” error

redux 可以使用多個不同 store 嗎？

原本很直覺的回答這個問題是，可以的！
但是透過 google 一段時間之後，才深入去找問題的本身，發現 redux 作者希望，除非必要性的需求，否則盡量使用『單一 reduxer 對應到單一 store』 ，本持的精簡的精神處理物件。

處理範例方式，GitHub

可以採用以下的方式，用多個不同 reducer 包裝起來

// reducers.js
export step1 from './step1'
export step2 from './step2'

// constants.js
export const STEP1_COMPLETED = 'STEP1_COMPLETED'
export const STEP2_COMPLETED = 'STEP2_COMPLETED'

// step1.js
import { STEP1_COMPLETED } from './constants'

const initialStep1State = {
  email: '',
  password: '',
}

export function step1(state = initialStep1State, action) {
  switch (action.type) {
    case STEP1_COMPLETED:
      return { ...state, email: action.email }

    default:
      return state
  }
}

// step2.js
import { STEP2_COMPLETED } from './constants'

const initialStep2State = {
  firstname: '',
  lastname: '',
}

export function step2(state = initialStep2State, action) {
  switch (action.type) {
    case STEP2_COMPLETED:
      return { ...state, firstname: action.firstname, lastname: action.lastname }

    default:
      return state
  }
}

// actions.js
import post from 'some-networking-lib'
import { STEP1_COMPLETED, STEP2_COMPLETED } from './constants'

export function saveStep1(data) {
  return (dispatch) => {
    post('/step1', data).then(({ email }) => {
      dispatch({ type: STEP1_COMPLETED, email })
    })
  }
}

export function saveStep1(data) {
  return (dispatch) => {
    post('/step2', data).then(({ firstname, lastname }) => {
      dispatch({ type: STEP2_COMPLETED, firstname, lastname })
    })
  }
}

// App.js
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'redux/react';
import * as reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);
const store = createStoreWithMiddleware(reducers);

export default class App {
  render() {
    return (
      
        { () =>  }
      
    );
  }
}

ref, You don’t need multiple stores to achieve that but multiple reducers. …

原作者的回答

資料中指出 redux , 建議採用 one store.

There are edge cases when you might use multiple stores (e.g. if you have performance problems with updating lists of thousands of items that are on screen at the same time many times per second). That said it's an exception, and in most apps you never need more than a single store.

Why do we stress this in the docs? Because most people coming from Flux will assume multiple stores is the solution to making update code modular. However Redux has a different solution for this: reducer composition.

• http://stackoverflow.com/questions/33619775/redux-multiple-stores-why-not

nginx call php and node.js by route forward

sudo apt-get install php5-fpm sudo vim /etc/php5/fpm/php.ini

cgi.fix_pathinfo=0
safe_mode = Off

restart php fpm

sudo service php5-fpm restart

generate php file path

mkdir /usr/share/nginx/www

vim $CKFINDER/config.php
修改檔案位置，以及網址設定

$baseUrl = 'http://domain.com/path/';
$baseDir = '/PATH/FOLDER/IMAGES';

i have no idea, why there is images floder more.
but, it works

chmod 777 $FOLDER_PATH

edit nginx

server {
  listen 80;
  root /usr/share/nginx/www;
  location ~ \.php$ {
    try_files $uri =404;
    fastcgi_pass unix:/var/run/php5-fpm.sock;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
  }
  
  location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_pass http://127.0.0.1:1337;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
  }

}

• ref, https://www.digitalocean.com/community/tutorials/how-to-install-linux-nginx-mysql-php-lemp-stack-on-ubuntu-12-04

[教學] 快快樂樂申請 ssl 憑證 certificate signed by a CA for your domain

certificate signed by a CA for your domain

mac

brew install openssl

ubuntu

apt-get install opensll

當 opensll 安裝好之後，就可以開始建立 key, csr 簽署檔案。

mkdir /etc/ssl/localcerts
cd /etc/ssl/localcerts
openssl req -new -newkey rsa:2048 -nodes -sha256 -days 365 -keyout www.mydomain.com.key -out www.mydomain.com.csr

注意： 要特別注意檔案名稱，通常會建議命名為 domain name 之後會比較容易識別，但不是一定要。 e.g. http://www.caesarchi.com -> http://www.caesarchi.com.csr
「重要」，在輸入 Common Name (CN) 的時候，記得輸入 domain name。
e.g. Common Name (e.g. server FQDN or YOUR name) []:www.caesarchi.com

chmod 400 /etc/ssl/localcerts/www.mydomain.com.key

如果是透過線上申請 RapidSSL ， 將 csr 的資料填入，填寫完畢後，會將 crt 所需要的檔案透過 email 送到信箱中。
需要將 xxx.xxx.csr 檔案內容複製，貼上到申請表格中，讓服務商可以產生出來憑證。

將 Intermediate 和 SSL 合成

當取得 crt 檔案之後，會發現有兩筆 crt 分別為

• server.crt
• Intermediate.crt

請將 server.crt 複製到 server 上，並且透過指令將 intermedia.crt 檔案兩者合併。

cat intermediate.crt >> SSL.crt

組合之後，目前簽證也算是告一個段落。但是 crt 檔案，記得將權限修改一下

chmod 400 SSL.crt

將 ssl 設定到 nginx

在原有的 nginx 設定裡面，將剛才 ssl 的 crt, key 的位置設定到 nginx, 設定方式如下，

server {
listen 443;

ssl on;
ssl_certificate /etc/ssl/your_SSL.crt;
ssl_certificate_key /etc/ssl/your_domain_name.key;

server_name your.domain.com;
// ...

}

重新啟動 nginx ，如果設定正確的話，就會發現目前你得 https 開頭的網址可以正確啟動了。

設定 nginx 80 forward 443

因為透過 nginx 設定，網址都可以開始使用 https 開頭，也會開始使用 443 port, 所以在伺服器上如果希望捨棄掉原本的 http ，就需要進行 nginx 的設定，讓使用者都可以直接導向到 https protocal.
設定如下，設定完成後，記得重新啟動 nginx

server {
       listen         80;
       server_name    my.domain.com;
       return         301 https://$server_name$request_uri;
}

參考資料

• In Nginx, how can I rewrite all http requests to https while maintaining sub-domain?
• RapidSSL – Install SSL Certificate
• Installation Instructions for Nginx Server

快快樂樂，上手 sketch [外掛，教學彙整]

sketch 快速簡短筆記

sketch 是一個用來製作 ui, mockup 好用的工具，他的強項在於 ui, mockup 的使用上，所以跟 photoshop 的比較，大概就是 JavaScript 之於 Java, 熱狗跟狗之間的關係。
這邊做個簡短筆記，將自己搜尋到的東西推薦給大家。

plugin 管理工具

目前已經推出 ui 介面，可以讓使用者方便透過視窗介面查找，安裝，移除套件（記得安裝移除之後要重新啟動 sketch)

• sketch toolbox

推薦 plugin

• Content-generator-sketch-plugin – 自動產生內文，圖片，假資料等假假的東西
• Dynamic Button Symbol Detacher – 動態調整 button 的寬度以及 padding 的自動化工具
• marketch – 用來自動生成標記工具，如果你沒有用 zeplin, 還蠻推薦這套的
• Sketch Measure – 設計完工之後，自動標上間距，色碼
• Sketch mirro – 將製作完成的 app mockup 透過 iphone 進行預覽

推薦外掛服務

特別增開一個外掛服務專區，上面的 plugin 主要都是針對單機，或者將資料產出，但是線上有許多好用的服務已經與 sketch app 整合在一起，讓開發流程變的更為順暢，推薦大家可以試用一下這些好服務。

PS. 如果大家有推薦的，歡迎也在底下留言給我。

• zeplin – 可以免開啟 sketch, 讓開發者直接看道色碼，間距，同時也可以在上面討論的好工具
• invision – 透過 sketch 製作完成的 mockup, 產出到線上，讓多方可以互動討論

快速入門資料

族繁不及備載，許多入門及快速教學在網路上其實都很多，這邊是自己一開始的時候，查到的資料，覺得還不錯，提供給大家。

• https://designcode.io/sketch
• sketch 教學系列影片
• SKETCH设计教室！从零开始学APP设计利器SKETCH（一）
• 來用 Sketch 畫你的 UI 吧

奇特招數 paparazzi 擷取資料

因為 Sketch 是一個向量圖形工具，資料是向量圖基本上皆可以匯入進行調整，所以可以透過 mac 上一套工具，『paparazzi』開啟網頁之後，將擷取到的向量網頁圖檔，匯入到 sketch （用拖拉的方式即可），超級方便。

• paparazzi
• 使用方式詳細說明
• 使用方式，影片說明

後記

Sketch 其實是一個很棒的工具，透過向量物件，加上 grouping 的概念，讓以往透過 photoshop 要用來建構 mockup, wireframe 的問題都被解決了，透過 sketch 提供了許多解決方案給網頁設計師，如果你還在觀望，記得下載 30 天試用版本看看，相信會解決你許多疑惑。

但是，Sketch 還是無法取代 photoshop ，許多修圖，細緻度展現上，工具的使用上，兩者是沒辦法進行比較的，所以請不要再叫我 『XXX』

如果各位有任何推薦的資料，外掛，教學等，歡迎在底下留言給我，將會持續將資料補足，透過分享，讓這個社會更美好！