2018/09/08

新手工程師練習實作參考

### 新手工程師練習實作參考
* 因為要學習WEB寫程式的範圍很廣泛,所以這裡提供一個快速的實作目標,讓你快速通過新手村。
* 詳細可以參考這篇:https://github.com/goodjack/developer-roadmap-chinese web developer 但是看完後,多數人會直接放棄。
* 底下提供比較簡單開始的新手村,讓開發者可以自己練習。
* 指說明需要完成的元素,內容請自行想像與設計。當成一個屬於自己的作品呈現空間。

### 使用純文字編輯器操作系統
* Sublime https://www.sublimetext.com/
* VSCODE https://code.visualstudio.com/
* ATOM https://atom.io/
* NotePAD++ https://notepad-plus-plus.org/zh/
* 熟悉上面至少 2 套文字編輯器,並且可以使用他的外掛。

### 使用 github 建立一個屬於自己的網站。
* 選一個 GIT 工具, https://git-scm.com/download/gui/windows , 可以選 SourceTree 或 https://git-scm.com/download/win
* 需要能夠透過 git 工具上傳及維護網站。
* 了解 git 的 pull , clone , merge, getch, commit, push, add 功能與用法
* 了解 branch, master, orign 使用上的意義
* 參考:https://gitbook.tw/chapters/github/using-github-pages.html

###  使用 bootstrap 4 規劃你的網站版面
* 參考:https://getbootstrap.com/docs/4.1/examples/
* 使用 Grid 排版,編排出一個可以放作品的網站版型。
* 可以善用 bootstrap 的各種元件,完成你的目標。
* 調整你的版面, 讓他在 Mobile 環境下,也可以不會太糟糕。
* 使用自訂的 CSS 讓你的 Bootstrap 4 看起來和別人不一樣。

### 使用 Jquery 的 API
* 使用 Jquery 的 fadein 及 fadeout 建立一個頁面的浮動視窗,並且可以透過 click button 開啟或關閉。
* 浮動視窗,需要有資訊內容的呈現。
* 參考: http://api.jquery.com/fadein/

### 透過 ES6 的 fetch 功能取得 json 文字檔
* 檔案: fetch.html 此檔案可以透過 button 點擊後取得 fetch.json 檔案的內容, 內容動態放在 fetch.html 頁面上。
* 檔案: fetch.json 產生一個可以展示用的 json 格式檔案
* 參考:https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

### 上面 getch 的動作,使用 Jquery 函式做一次
* 參考:https://www.w3schools.com/jquery/jquery_ajax_get_post.asp

### 使用 DataTables 元件
* 參考 https://datatables.net/examples/server_side/simple.html 使用 HTML (DOM) sourced data 方式顯示並控制表格內容。
* 參考 https://datatables.net/examples/server_side/simple.html 方法,使用 Server-side processing 方式呈現表格內容。

### 在 JSBIN、Codepen 及 JSFIDDLE 建立帳號,並測試程式
* https://jsbin.com/
* https://jsfiddle.net/
* https://codepen.io/

### 簡易PHP 程式編寫測試
* 沙箱測試網站 http://sandbox.onlinephpfunctions.com/
* 參考文件 https://www.w3schools.com/pHP/default.asp

#### 申請免費的空間來放PHP程式
* https://infinityfree.net/


----
update: 20180908 by mtchang

2018/06/25

保證瀏覽器連到 https 的功能 (HSTS)

因為最近遇到一個特殊的 TLD 最上層的網域, 「.app」 ,這個網域預設 HSTS Preload 功能。
這功能一旦被開啟後,歡樂的時光就來臨了......

網域的擁有者也可以自己設定,HSTS Preload 設定下去,所有連線都需要 SSL 的功能,於是它就有了
1. 無論是否有設定 HTTPS ,瀏覽器都會轉向 HTTPS
2. 可以抵禦SSL剝離攻擊,防網站劫持。
3. 不能隨意關掉 HTTPS,萬一憑證不見或過期,只好被 BROWSER 檔掉或警告。
4. HSTS會在一定時間後失效(有效期由max-age指定) ,但是沒有人會只設定一天過期。




* 你可以到這裡檢查,網址是否被 HSTS Preload 了....
  * https://hstspreload.org
 
 
* 如果設定了,但是時間還沒有過期你可以參考這裡暫時移除
  * https://www.thesslstore.com/blog/clear-hsts-settings-chrome-firefox/
  * https://ephrain.net/chrome-%E5%B0%87%E7%B6%B2%E7%AB%99%E5%BE%9E-hsts-%E6%B8%85%E5%96%AE%E4%B8%AD%E7%A7%BB%E9%99%A4/
  * https://blog.bennyling.cc/362/clear-google-chrome-hsts-setting

  * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security 目前已經支援的瀏覽器


2018/05/15

MQTT 的文件


https://swf.com.tw/?p=1002


幾個重點整理:

提供三種訊息傳送服務的QoS
QoS0:At most once 最多一次
QoS1:At least once 至少一次
QoS2:Exactly once 確保一次

減少封包傳送時的負擔,同時減少網路所需之頻寬

Last Will and Testament(最後遺囑) 機制
主題萬用字元(Topic Wildcard Characters)
 

CONNECT
當Client(客戶端)對Broker建立起TCP/IP socket連線時,需傳送Message Type為CONNECT的訊息,Broker端會回傳Message Type為CONNACK的確認訊息。
 
DISCONNECT
DISCONNECT訊息被傳送至Broker,表示需要關閉TCP/IP連線,若在連線時設置Clean Session,Broker清除此Client連線時所有的設定,包括訂閱的主題。

PUBLISH
Publish訊息會因為所使用的QoS有不同的工作流程。若QoS設置為0,訊息會透過底層的TCP/IP連線傳輸訊息,並不預期有任何的回應,也不會重新傳送,故訊息可能傳送至Broker 一次,或是沒有傳送成功。

PING
在TCP/IP的連線中會在一固定時間傳送一心跳值確保其連線的暢通,MQTT通訊協議中以PINGREQ訊息傳送至Broker確保連線狀態,Broker回傳PINGRESP訊息回覆Client此連線是否正常。



ref:
https://zh.wikipedia.org/wiki/MQTT
https://swf.com.tw/?p=1002
http://designer.mech.yzu.edu.tw/articlesystem/article/compressedfile/(2016-07-15)%20%E7%AC%AC%E4%B8%89%E7%AB%A0%20MQTT%E9%80%9A%E8%A8%8A%E5%8D%94%E8%AD%B0.aspx?ArchID=2621

2018/04/29

VPN 目前還可以用的翻牆技術及歷史技術手段



* VPN部份可用
AnyConnect
OpenVPN

* CDN方式 Lantern、FireFly、Tor Browser – Meek

* 新的主流
https://toutyrater.github.io/prep/install.html  V2Ray
Shadowsocks、V2Ray、ShadowsocksR、ShadowsocksRR

* 之前翻牆的歷史技術篇
https://blog.yandere.moe/moe/gfw-vs-proxy/97.html  墙与梯的较量——那些年我们一起用过的翻墙手段


2018/04/24

[案例]BUG經過時間的演化,它就成為了功能


講一個程序員在1970年左右犯的錯誤 ,
它把 Unix 的 system call 拼成 creat() 以至於
到現在只要用的 file 的 creat 都會用到這個函式
然後有人問它, 如果有機會重新系統你想要有哪些不一樣,它回答「I'd spell creat with an e.」
然後2009.11.10 的時候 Ken Thompson 在 go-lang 的上面, 修正了這個錯誤. 足足經過了約 40 年

#標準美東時間是UTC -05 夏令美東時間是UTC -04
#系統使用 UTC -04 那冬天的時候帳務就會出錯了呀!!!
#我其實是要講美東時間當算帳基準這個ISSUE,所以這個 ISSUE 就成為了功能的一環

ref:
https://en.wikiquote.org/wiki/Ken_Thompson wiki 有記載
http://www.di.uevora.pt/~lmr/syscalls.html unix system call
https://coolshell.cn/articles/1761.html  故事完整的始末
kevinwatt.net 參考來源(人還在,blog已消失因為老闆太忙沒更新)



2018/03/01

memcached UDP 放大攻擊之亂--Centos7 關閉UDP及只綁定127.0.0.1


昨晚機器流量異常....爆增流量




* 十小時前的新聞
https://www.ithome.com.tw/news/121543
"Majkowski建議不使用UDP的Memcached用戶應直接關閉該通訊埠,或確保自己的Memcached伺服器受到防火牆的保護,也提醒開發人員最好不要使用UDP,就算不得不用,也不應預設為啟用狀態,並應嚴格限制回應封包的大小,以免成為駭客執行DDoS攻擊的幫兇。"

* 七小時前的新聞
https://www.networkworld.com/article/3258772/security/memcached-servers-can-be-hijacked-for-massive-ddos-attacks.html

* memcached 伺服器參數 ConfiguringServer
https://github.com/memcached/memcached/wiki/ConfiguringServer#commandline-arguments

* 看一下啟動程序怎麼寫的
[root@dev ~]# more /usr/lib/systemd/system/memcached.service
...SKIP 略...
[Service]
Type=simple
EnvironmentFile=-/etc/sysconfig/memcached
ExecStart=/usr/bin/memcached -u $USER -p $PORT -m $CACHESIZE -c $MAXCONN $OPTIONS
...SKIP 略...

* 看來改一下 memcached 的 OPTIONS 就可以
* -l 參數可以指定接收的 interface
* -U 可以關閉 UDP port
[root@dev ~]# cat /etc/sysconfig/memcached
PORT="11211"
USER="memcached"
MAXCONN="1024"
CACHESIZE="64"
OPTIONS="-l 127.0.0.1 -U 0"

* 重新啟動
[root@dev ~]# systemctl restart memcached.service

* 檢查 netstat 看看是否只剩下 127.0.0.1:11211 的
[root@dev ~]# netstat -tnulp | grep mem
tcp        0      0 127.0.0.1:11211         0.0.0.0:*               LISTEN      12810/memcached