[NPM] 更新套件或單一套件版本

#更新所有套件(這樣跑很可怕XD)

npm update 

#更新單一套件

npm install express-validator@5.3.1 --save-dev

解決無法bitbucket.org連線的問題

記錄無法bitbucket連線的問題

Q: Could not resolve hostname bitbucket.org: Temporary failure in name resolution
A:
sudo vim /etc/resolv.conf
nameserver 8.8.8.8
search bitbucket.org
測試連線
nslookup bitbucket.org

Server: 10.211.55.1

Address: 10.211.55.1#53

Non-authoritative answer:

Name: bitbucket.org

Address: 18.205.93.2

Name: bitbucket.org

Address: 18.205.93.1

Name: bitbucket.org

Address: 18.205.93.0

[AWS] NODEJS SES (Simple Email Services)寄信

第一次設定ses的流程，有需要的朋友可以試試。
寄送信件有發信跟寄信需要設定。SES的操作介面都有

開始設定

1.進入SES設定
https://console.aws.amazon.com/ses/home

2. 設定domain發信


接續上步之後，就可以看到一堆ｄｎｓ相關資訊，這裡我是設定到cloudflare上。填完設定後就會通過ｄｏｍａｉｎ認證


有通過認證後，就可以看到verified的綠字了


2. 測試發信

新增一個測試的信件，再去這個信箱發信，點擊驗證link。之後email才能測試寄件


接著你可以用Domain/Email Address來寄信。

Domain寄信
則可以自定要發信的email名稱，這樣就可以依不同服務寄送信件給用戶。EX:註冊信



Email Address寄信
可以用驗證過的信箱寄信給指定信箱


3.設定S3收信

可以寄信就要設定收信了，大多都會將信件存到s3上，

請至Email Receiving做規則設定

4.設定IM

沒有開就不能跟SES API整合，參考錯誤處理2

5.移出沙盒模式

沒有開就不能寄沒驗證過的信箱，參考錯誤處理3

之後就要填寫一些相關的資訊，之後就等support team回覆開通就可以串接了。

查看進度可以點以下連結

https://console.aws.amazon.com/support/home

nodejs aws-sdk錯誤處理

1. Signature時間逾期
{"message":"Signature expired: 20190129T112038Z is now earlier than 20190129T131757Z

要校正機器的時間設定，因為是裝ubuntu可參考下面的
sudo apt-get install ntp ntpdate
sudo ntpdate ntp.ubuntu.com

2. 權限不足

{"message":"User `arn:aws:iam::161004446739:user/<你的帳號>' is not authorized to perform `ses:SendEmail' on resource `arn:aws:ses:us-east-1:<你的awsid>:identity/tester1@gmail.com'"

要去im設定ses的群組，才能使用

3.信箱沒有驗證

{"message":"Email address is not verified. The following identities failed the check in region US-EAST-1: bigdstut@gmail.com","stack":"MessageRejected: Email address is not verified. 

寄信的對像沒有通過驗證，預設是在沙盒模式中
https://docs.aws.amazon.com/zh_tw/ses/latest/DeveloperGuide/request-production-access.html?icmpid=docs_ses_console

參考

https://docs.aws.amazon.com/zh_tw/ses/latest/DeveloperGuide/verify-domain-procedure.html

https://docs.aws.amazon.com/zh_tw/ses/latest/DeveloperGuide/dns-txt-records.html?icmpid=docs_ses_console

https://docs.aws.amazon.com/zh_tw/ses/latest/DeveloperGuide/dkim.html

網域dkim
https://docs.aws.amazon.com/zh_tw/ses/latest/DeveloperGuide/easy-dkim-setup-domain.html

如何設定寫入s3權限
https://docs.aws.amazon.com/zh_tw/ses/latest/DeveloperGuide/receiving-email-permissions.html

寫code
https://github.com/nodemailer/nodemailer-ses-transport
https://medium.com/@yashoda.charith10/sending-emails-using-aws-ses-nodejs-460b8cc6d0d5

http://jsnwork.kiiuo.com/archives/2539/amazon-ses-%E8%A8%AD%E5%AE%9A-email%EF%BC%8C%E8%AE%93%E4%BD%BF%E7%94%A8%E8%80%85%E5%AF%84%E4%BF%A1%E4%BC%BA%E6%9C%8D%E5%99%A8%E6%94%B6%E4%BF%A1%E8%BD%89%E5%AF%84%E7%B5%A6%E7%AE%A1%E7%90%86/

[nodejs] 好用的nodejs 驗證middleware :express-validator

api一定要驗證欄位格式，可以參考此express-validator插件。
可以自定驗證規則，也可以在路由就hook欄位的驗證項目。
非常好使用。

https://express-validator.github.io/docs/index.html

[AngularJS] 1.x 動態產生表單ng-form的筆記

常常需要寫到在一個ｆｏｒｍ裡面再透過ng-repeat產生多個ng-form，
可以參考以下範例
http://embed.plnkr.co/Zu8CPGymfHVKt83S4SzA/preview

簡單記錄一下完成的做法，不然每次用都會忘記...

ng-form的name不需要額外透過ng-repeat的$index動態產生不一樣的流水號也可以做，
先前還有故意產生ticket.formId但其實也不需要！！

React.js 異常錯誤大小事

1. 確認Ref的寫法是不是沒有更新，更新就會正常了
uikit.min.js?r=0.2995152529685583:51 Uncaught Error: Minified React error #119; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=119 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at r (uikit.min.js?r=0.2995152529685583:51)
 Object.addComponentAsRefTo 

[three.js] 南北極模糊問題

一行指令解決南北極模糊

var maxAnisotropy = this.renderer.getMaxAnisotropy();

texture.anisotropy = maxAnisotropy;


https://www.jianshu.com/p/9b2702987dd2

[FCM] firebase admin 初探筆記: 從backend丟訊息

記錄一下nodejs使用FCM Admin的相關筆記，
主要要透過自已的backend與fcm做溝通，
跟web notification無關。

1. 安裝

npm install firebase-admin --save

2. Firebase開專案

3. 設定金鑰

專案設定頁->點擊服務帳戶的Tab->產生新的私密金鑰

4. 初始化SDK

var admin = require('firebase-admin');
var serviceAccount = require('path/to/serviceAccountKey.json');

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: 'https://.firebaseio.com'
});

當然如果不要透過下載.json，也是可以用變數的方式做初始化。

5. 發送訊息 send()

接著就可以透過admin.messaging()內的send方法發送訊息

// The topic name can be optionally prefixed with "/topics/".
var topic = 'highScores';
// See documentation on defining a message payload.
var message = {
  data: {
    score: '850',
    time: '2:45'
  },
  topic: topic};
// Send a message to devices subscribed to the provided topic.
admin.messaging().send(message)
  .then((response) => {
    // Response is a message ID string.
    console.log('Successfully sent message:', response);
  })
  .catch((error) => {
    console.log('Error sending message:', error);
  });

也可以在send方法內使用測試模式

admin.messaging().send(message, dryRun)

指定條件的訊息

在message也可以加condition

// Define a condition which will send to devices which are subscribed
// to either the Google stock or the tech industry topics.
var condition = "'stock-GOOG' in topics || 'industry-tech' in topics";
// See documentation on defining a message payload.
var message = {
  notification: {
    title: '$GOOG up 1.43% on the day',
    body: '$GOOG gained 11.80 points to close at 835.67, up 1.43% on the day.'
  },
  condition: condition};
// Send a message to devices subscribed to the combination of topics
// specified by the provided condition.
admin.messaging().send(message)
  .then((response) => {
    // Response is a message ID string.
    console.log('Successfully sent message:', response);
  })
  .catch((error) => {
    console.log('Error sending message:', error);
  });

定義訊息

透過fcm可以推播包含webpush/apns(iOS)/android等消息。

一個封裝訊息的欄位參數

参数	说明
data	键值对映射，其中所有键和值都是字符串。
notification	一个包含 title 和 body 字段的对象。
android	一个由 Android 消息专用字段组成的对象。要了解详情，请参阅 Android 专用字段。
apns	一个由 Apple 推送通知服务 (APNS) 专用字段组成的对象。要了解详情，请参阅 APNS 专用字段。
webpush	一个由 WebPush 协议专用字段组成的对象。要了解详情，请参阅 WebPush 专用字段。
token	一个用于标识消息的收件人设备的注册令牌。
topic	要将消息发送至的主题名称。该主题名称不能包含 /topics/ 前缀。
condition	发送消息时所依据的条件，例如 "foo" in topics && "bar" in topics

綜合的訊息

以下是一個主題的推播，並推發到andriod/apns

var message = {
  notification: {
    title: '$GOOG up 1.43% on the day',
    body: '$GOOG gained 11.80 points to close at 835.67, up 1.43% on the day.',
  },
  android: {
    ttl: 3600 * 1000,
    notification: {
      icon: 'stock_ticker_update',
      color: '#f45342',
    },
  },
  apns: {
    payload: {
      aps: {
        badge: 42,
      },
    },
  },
  topic: 'industry-tech'
};




常見授權錯誤

如果你在send訊息出現以下錯誤，

Credential implementation provided to initializeApp() via the \"credential\" property failed to fetch a valid Google OAuth2 access token with the following error

通常都是你目前環境的時間跟FCM的不一致，

只要同步時間就好了，

$>sudo service ntp restart

官方文件

https://firebase.google.com/docs/admin/setup?authuser=2
https://firebase.google.com/docs/cloud-messaging/admin/send-messages?authuser=1

[Bootstrap3] Bs3各種垂置置中

記錄每次寫一次忘一次的bs3垂直置中

http://jasonlung.logdown.com/posts/2016/07/23/how-to-bootstrap-content
https://codepen.io/hashem/pen/zwJaE
https://blog.iphpo.com/bootstrap-3-%E8%AE%93%E7%89%A9%E4%BB%B6%E5%9E%82%E7%9B%B4%E7%BD%AE%E4%B8%AD%E7%9A%84%E6%96%B0%E6%96%B9%E6%B3%95/

[react.js] react-redux 使用流程

實作大多採用react-redux來整合原本的redux，
對於第一次入手的人感覺就是要懂一堆第三方套件後才能好好寫。
自已久久寫一下也會忘記大部份的邏輯，所以記錄一下。

目錄結構

actions =>放觸發的action定義
   -index.js =>負責匯出各redux的動作

constants => app state，
  -models 把各別的state 分類
      -index.js 匯出每個個別的app state
  -ActionTypes.js 匯出action要用的變數

reducers =>定義所有reducers
  -ui
    -UIReducer.js => Layout的reducer
  -index.js =>匯出所有reducers並combine所有reducer

store
  - index.js => 匯入所有app reducers與產生一個app store

產生一個新的redux動作

1. 到constants/models定義新的redux state
2. 到constants/index.js 匯出剛剛定義的 reduxstate
3. 到ActionType.js加新的redux事件
4. 到actions新增一個對應的 <你的新redux命名>Actions.js 檔案
5. 到reducers新增一個對應的reducer，<你的新redux命名>Reducer.js 檔案
6. 到reducers/index.js 匯入剛剛新加的reducer
7. 到containers下找對應的container元件呼叫要使用的actions並匯入


1. 登入元件範例    
2. 
   

[CSS] css置中大法大全

找到一篇講述各種方法滿足你元素各種置中需求
https://css-tricks.com/centering-css-complete-guide/

[Git] 讓merge不用再輸入訊息

最近在處理shell使用git merge都會跳出上圖所示的的訊息互動視窗，

會讓整個想透過sh自動化無法完成，還好可以加上--no-edit參數就可以避過啦。

以下是最完整的語法：

git merge --no-ff develop --no-edit

[Git] 從https 的clone變更為ssh

由於先前使用https來clone repo，如果要變動的可以透過以下指令變更回ssh

git remote set-url origin git@github.com:username/your-repository.git

[Bootstrap 3] 在行動裝置重新排序Column

剛好做客戶有遇到，要在手機layout的改變column的位置，
簡單來說就左右調換，其實bootstrap裡面就有支援行 re-ordering了。
可以參考以下範例

https://codepen.io/Schmalzy/pen/iJdgD

[Git] 移除已經commit的資料

由於目前專案有需要移除先前commit的資料夾，
查到了以下指令，有用到就筆記一下。

git rm -r -n --cached "bin/" //-n：加上这个参数，执行命令时，是不会删除任何文件，而是展示此命令要删除的文件列表预览。 git rm -r --cached "bin/" //最终执行命令. git commit -m" remove bin folder all file out of control" //提交 git push origin master //提交到远程服务器

http://blog.csdn.net/chenxu6/article/details/50542295

[bootstrap 3] 如何簡單快速覆寫bootstrap的樣式

如果懶的用less來重build bootstrap的樣式的話，
通常你會在link下面多引用一個你要覆寫bootstrap.min.css的客製化樣式。
但你會發現有可能覆寫失敗，
有些人會建議使用大絕招!important 屬性，
找到stackoverflow另一篇建議:
https://stackoverflow.com/questions/8084964/how-to-overwrite-styling-in-twitter-bootstrap/20542297#20542297
因為css選擇器有權重的特性，
可以加上id的名稱去覆寫，這樣就不失彈性啦!

例如自訂一個nav-customer來覆寫nav的相關設定
header #nav-customer{
background-color: rgba(0, 0, 0, 0.6);
}

參考
https://stackoverflow.com/questions/8084964/how-to-overwrite-styling-in-twitter-bootstrap/20542297#20542297

[AngularJS] 如何覆寫舊的路由狀態state

由於有客戶客製化的需求，
需要改寫原本路由的介面，
但為了共用核心不變，
找到了可以在run的時候覆寫舊的路由的方法:D

angular.module('module2', ['ui.router'])
.run(['$state', function($state){
  var state = $state.get('先前的路由命名');
  state.templateUrl = '新的樣版';

}]);

[react.js] 初學筆記

記錄一下react.js學習上要懂的ecosystem，
做一下自已要速查的note

npm套件管理工具

node.js用來裝需求的套件的工具，安裝完的套件可以給node.js後端用或透過webpack ES6方法來載入套件

webpack build tool (可以用Gulp+browserify)

因為早期都用gulp，但webpack出到v3了，這次就換試webpack這個工具

[react.js] 雷雷小伙伴之坑

記錄一下菜B巴react.js之旅的error

Warning: Invalid DOM property `class`. Did you mean `className`?

就是JSX裡面用了html的保留字class啦，要用className

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

//死亡的原因是import加了{}

// import { App}  from './components/App';

import  App  from './components/App';

[node.js] 如何切換development與production模式

有關node.js處理NODE_ENV來切換developer/production的方法種類

export NODE_ENV=production

Or if you are in windows you could try this:

SET NODE_ENV=production

or you can run your app like this:

NODE_ENV=production node app.js

You can also set it in your js file:

process.env.NODE_ENV = 'production';

https://stackoverflow.com/questions/9198310/how-to-set-node-env-to-production-development-in-os-x