替代役162梯新訓心得

眨眼間，從入伍到新訓結束已經過了快三週，在此紀錄新訓的心得。

https://github.com/sj82516/Blog/blob/master/Others/SMSlife162.md

Javascript & JQuery 的事件觸發流程

以前用JQuery很習慣把HTML elements 綁定事件，但之前在看一些JS面試考題才赫然發現自己完全不了解JS與DOM之間溝通的方式，尤其是最基本的事件觸發流程!!

當我們希望一個HTML element聆聽動作去觸發一個function時，當頁面有動作觸發後，總共會有三個狀態
1.Capture：JS會從HTML的根目錄 document 一路往下爬->HTML -> Body -> div......，一路到目標element
2.Target：抵達目標element
3.Bubble：一路又回去HTML根目錄 ...->div->Body->HTML...
一般綁定觸發是在Bubble狀態時觸發，詳見請看此連結

在實作方面，JQuery的on function 只有Bubble up 觸發時機，要在Capture階段觸發可以改用原生JS的attachEvent，綁定事件的方式可以參考此連結

最後附錄是我自己在Jsbin寫的範例，這種東西還是自己寫一次最實在。

閱讀HTTP2

Daniel Stenberg介紹HTTP2(繁中)
想要了解為什麼需要HTTP2就必須先知道HTTP現在的缺點與HTTP2如何嘗試修改
這本gitbook解釋了上述的問題以及現今瀏覽器廠商如何支援，HTTP2主要是從Google發展的SPDY延伸而來，修正了HTTP關於延遲與阻塞這些嚴重影響傳輸速度的問題、加入TLS(非強迫性)但也保留許多原本HTTP的協定(API不用改、相似的URI)
這裡有一篇中文的整理 / 另一篇比較

主要來說HTTP2透過延長TCP Connection達到pipeline的效能，例如說Server可以主動push資料給client、Server可以決定frame的優先順序或是reset frame等，這不免也讓我對於HTTP2與WebSocket兩者相存的必要性，stackoverflow也有類似的討論 。

圖解HTTP之網路安全篇

最近在學習NodeJs架設網站，發現自己對於HTTP了解的太少，又不想啃厚重的Spec所以就買了這本半科普的書籍，內容蠻輕鬆有趣但該提的觀念都講得蠻清楚，剛好自己對於網站安全部份不太熟悉，所以打算整理一下自己的思緒分享出來，有興趣可以上淘寶購買。

HTTP本身在安全性上有許多的疑慮，主要有三點

1.明文傳送，這樣大家都知道我在講什麼

2.驗證身份，我沒辦法確定這個Response真的是我信任的Server回覆的(Server也無法信任Client)

3.內文竄改，發回來的訊息被改過我也不知道

有了問題自然有人會想辦法解決，所以就出現了新的HTTPS，HTTP over SSL

HTTPS在不影響HTTP運作下，在HTTP層與TCP層中加入了SSL通訊協定，藉此達到加密/驗證身份的動作：

1.加密方式：

加密主要有兩種，對稱加密與非對稱加密，對稱加密是指雙方共用一把鑰匙，優點是加解密相對簡單與快速，缺點就是如果別人知道鑰匙後就完了；

非對稱加密則是每人都有公開與私密金鑰，A要傳訊息給B就用B的公開金鑰加密，B拿到後用自己的私密金鑰解開就可以，其他人解不開，優缺點跟對稱加密相反。

SSL使用了兩種加密方式，後續會提到。

2.驗證身份：

我該如何驗證Server到底值不值得信任呢？目前的方式是透過第三方驗證單位(CA)發送證書，原理大概就是Server向驗證單位申請，審核通過後發送證書，之後在Handshake階段Client就可以拿證書去問驗證單位這個Server正不正確，通過的話就可以安心連結。

至於證書會不會被偽造呢？書中就提說難度很大XD 而且Client在與驗證單位確認證書時傳送是透過非對稱加密，所以不會被偷看到內容，而且驗證單位的公開金鑰是直接放在瀏覽器裡頭，比較不會有外漏的疑慮(雖然還是發生過.....)

目前主流都是Server端做驗證，而Client端只有在高安全需求下才會申請驗證，畢竟驗證要錢啊！

至於實作方面，在Handshake階段

1.Client發出請求時會帶SSL版本與加密方式，Server會回傳證書和公開金鑰，此時Client可以去CA做驗證

2.Client隨機產生亂數密碼，使用Server公開金鑰加密後丟給Server，Server用自己的私鑰解開(非對稱加密階段)

3.剛才上一步Client隨機產生的亂數密碼就成了對稱加密的秘鑰!之後就走對稱加密了

詳細的步驟可以參考此網站

SSL解決了兩個問題，至於如何確定內文沒有遭到竄改則需要靠訊息鑑定碼(MAC)，簡單來說就是把傳送的訊息透過某種加密方式加密，對方收到後解密比對內文，如果解密後內容與內容一致表示正確。

這大概就是HTTP封包傳輸時會遇到的危險，另外HTTP1.1這個協議已經用了超過十年，面臨現今大量的網路傳輸有點老態龍鍾，在2015年已經通過了HTTP2的修正，下一篇來研究HTTP2的內容。

在AWS建立Git Server

目的：在AWS 上架設Git Server,讓使用者透過ssh協作
步驟：
我辦了四個AWS Server running on ubuntu
棕色表示User1~3 ,藍色的是git server
1.進入local machine 的.ssh forlder
>> cd ~/.ssh
2.產生public Key
>>ssh-keygen -f [username] //我取名為git
3.複製public Key
>>cat [username].pub

4.登入git server
5.另外生成git user
>>sudo adduser git --disabled-password
>>sudo su -- git

7.在/home/git下產生.ssh，用來設置public key
>>mkdir .ssh
8.設定public key
>>echo "貼上第三步產生的一大串密碼" >> ~/.ssh/authorized_keys

 9.產生git repo
>>mkdir git.git 
10進入git.git並初始化
>>cd git.git
>>git init --bare --shared

這樣就初步完成囉～

接著就可以在local machine pull & push
11.為了方便，可以在local machine設定 ssh config
>>cd ~/.ssh
>>nano config
12.開啟config後，加入以下文字
>>

Host [Git]  #取自己要的名字

Hostname [Server ip]

User git #使用者名稱，剛剛設定為git (第五步)

IdentityFile ~/.ssh/[username] #你的key(第三步)

13.上述步驟主要是為了要簡化ssh指令
也可以直接使用git 登入 AWS Server
>>ssh Git //第12步的Host name

14.成功使用git指令
>>git clone Git:/home/git/git.git 

備註：
1.記得在git server要用adduser建立新的系統使用者 git，adduser會在/home下建立/home/git，這樣可以把系統用戶與git用戶分離，比較安全
2.git server要記得切換用戶到git，接著才在/home/git下建立/home/git/.ssh(User的public key放在/home/git/.ssh/authorized_keys中)，因為這樣其餘User要透過ssh連線時系統才會在正確地方比對Key，放錯地方會有登入權限不足的問題喔
3.git的repo有兩種，要仔細確認喔～
What is a bare git repository?
基本Git架設教學參考網址：Linux 架設使用 SSH 共享存取的 Git Server
較為完整的教學：Setting up an AWS EC2 Instance with LAMP and GIT

我當初想用git的主要原因只是要上傳server code :P，後續還會一些設定要做，繼續學習囉OTZ

NodeJs - express routing & Ajax參數傳遞

一. Ajax 參數傳遞

我用Psuedo code整理了GET/POST/PUT/DELETE三種方法，包含從jade檔表單欄位的設置->AJAX如何發送->Node Js Server如何接收資料，有什麼問題再回覆給我吧

Gist分享

二.Routing

目前在練習一個簡單的部落格網站(萬年教材)，其中很容易發生重複的routing，ex "/:account/profile" 、 "/:account/articles"....，account是用來向DB索取資料的依據，所以反覆地重複DB.find(account)，這時候可以用 router.param("account")方式一次性處理

網路教材

Chartist JS - 使用心得與教學分享-製作Pie Chart

最近想要弄個資料視覺化的網站，開始碰JS，覺得這門語言太有趣了XD

前提結束，那就來看看Chartist Js可以做什麼吧！這裏有大量範例介紹

Chartist Js 透過Svg繪製，最大特點是所有的元素都會繪製到DOM，所以要對各個label、line、path操作就十分的容易。

我整理了最近學習的心得：製作一個Pie Chart

1.自訂class name -> css輕鬆配色

2.slice的event listener 

3.checkbox動態操作pie chart

4.動態產生Label

JSbin連結

完成圖：

＊入坑注意，仔細一看Chartist.js還在0.X版，所以很多資料與Bug還在修，當初沒注意到就跳進來，很多問題都要到github發issue，好在開發者回覆都很快，如果要求不多，還是考慮較為成熟的chart js吧 (慘痛經驗OTZ

＊chart.js用canvas繪製，chartist.js用svg，兩者差異頗大，可以參考連結資料Canvas vs Svg，私心認為chart.js預設的顏色與排版都比較美，相對chartist.js自由度較高、容易客製