樹狀結構的 UI 界面

* 官方網站 https://www.jeasyui.com/documentation/tree.php

 * 測試DEMO頁面 http://mtchang.github.io/code/easyui_tree.html and source code

和人月神話一樣, 經過 10 年後來看還是一樣的貼切

和人月神話一樣, 經過 10 年後來看還是一樣的貼切。 「你進入狀況後, 要繼續維持並不算太難. 我的一天通常都是這樣子的: (1) 上班 (2) 看信看網頁等等 (3) 決定應該吃過午飯後再做事 (4) 吃完午飯回來 (5) 看信看網頁...

由巴克里貼上了 2017年9月14日

使用AWS EC2當OpenVPN Server

使用AWS EC2當OpenVPN Server

* 透過 AWS 設定 OpenVPN server
* 先看一下 EC2 價格 https://aws.amazon.com/tw/ec2/pricing/

* 首先去申請一台乾淨的 AWS EC2 server , 新使用者可以免費使用 750HR .

* 可以參考網路上的教學文章，把 OpenVPN 安裝設定好。
* How to Setup and Configure an OpenVPN Server on CentOS 6
https://www.digitalocean.com/community/tutorials/how-to-setup-and-configure-an-openvpn-server-on-centos-6

* 在 CentOS 6 架設 OpenVPN Server
http://jamyy.us.to/blog/2013/09/5220.html

* How To Set Up an OpenVPN Server on Ubuntu 16.04
https://www.digitalocean.com/community/tutorials/how-to-set-up-an-openvpn-server-on-ubuntu-16-04

* 本人推薦官方的說明, 比較準確
https://help.ubuntu.com/lts/serverguide/openvpn.html

* 將設定檔及憑證全部設定在設定檔內 , 因為手機 IPHONE 才可安裝
https://community.openvpn.net/openvpn/wiki/IOSinline

* 設定主機的 NAT 轉換 IP , 讓 IP 有可以出去。
root@ip-172-31-10-225:~# cat fire.sh
# --------------------------------------------------------------
#!/bin/bash
# linux firewall rule sample
EXTIF="eth0"               # 這個是可以連上 Public IP 的網路介面
INNET="192.168.20.0/24"
export EXTIF INNET

# cleaner rule and set default
iptables -F
iptables -X
iptables -Z
iptables -P INPUT   ACCEPT
iptables -P OUTPUT  ACCEPT
iptables -P FORWARD ACCEPT

iptables -A INPUT -i lo -j ACCEPT
iptables -A INPUT -m state --state RELATED,ESTABLISHED -j ACCEPT

# clean NAT table rule
iptables -F -t nat
iptables -X -t nat
iptables -Z -t nat
iptables -t nat -P PREROUTING  ACCEPT
iptables -t nat -P POSTROUTING ACCEPT
iptables -t nat -P OUTPUT      ACCEPT

# nat
iptables -t nat -A POSTROUTING -s $INNET -o $EXTIF -j MASQUERADE
iptables -A FORWARD -p tcp -m tcp --tcp-flags SYN,RST SYN -m tcpmss --mss 1300:1536 -j TCPMSS --clamp-mss-to-pmtu
# --------------------------------------------------------------

* 設定好的這台主機, 可以跟 AWS 租用固定IP ，也可以使用 IP2DNS 寫入成為 DNS
* awsopenvpn.jangmt.com 這個是我的例子用的 domain name
* AWS 的設定請參考網路上的教學文件, 無法在這裡簡單的說明。

# OpenVPN 設定檔 server.conf
# --------------------------------------------------------------
root@ip-172-31-10-225:/etc/openvpn# grep -v "#" server.conf | grep -v '^$'| grep -v ';'
port 443
proto tcp
dev tun
ca ca.crt
cert server.crt
dh dh2048.pem
server 192.168.20.0 255.255.255.0
ifconfig-pool-persist ipp.txt
push "redirect-gateway def1 bypass-dhcp"
push "dhcp-option DNS 8.8.8.8"
keepalive 10 120
tls-auth ta.key 0
comp-lzo
user nobody
group nogroup
persist-key
persist-tun
status openvpn-status.log
verb 3
mode server
tls-server
#Enable multiple client to connect with same key
duplicate-cn
# --------------------------------------------------------------



# OpenVPN Client 端的 inline 設定檔案, IPHONE 可以使用
# --------------------------------------------------------------
# 參考： https://community.openvpn.net/openvpn/wiki/IOSinline
client
dev tun
remote awsopenvpn.jangmt.com 443
proto tcp
resolv-retry infinite
nobind
comp-lzo
mute 3
persist-key
persist-tun
ns-cert-type server
verb 3
#tls-client
#tls-auth ta.key 1
key-direction 1

-----BEGIN CERTIFICATE-----
...
-----END CERTIFICATE-----


-----BEGIN CERTIFICATE-----
...
-----END CERTIFICATE-----


-----BEGIN RSA PRIVATE KEY-----
...
-----END RSA PRIVATE KEY-----


-----BEGIN OpenVPN Static key V1-----
...
-----END OpenVPN Static key V1-----

# --------------------------------------------------------------

* 使用 OpenVPN 最大的原因是 Iphone , MAC OS 新版的有支援, 且用了一陣子後，發現還滿好用的。

* OpenVPN 客戶端工具
https://openvpn.net/index.php/open-source/downloads.html

* Iphone OpenVPN
https://itunes.apple.com/tw/app/openvpn-connect/id590379981?mt=8

NGINX的status狀態

NGINX的status狀態

# 在 nginx config server 段加入

location /nginx_status {
# Turn on stats
stub_status on;
# only allow access from 192.168.1.5 #
allow 192.168.211.112;
deny all;
}

* Active connections 1:
目前連線數，包含 Waiting 量
* server accepts handled requests 20 20 12
第1個值是伺服器接受的連線數
第2個值是伺服器已經處理的連線數
第3個值則是伺服器已經處理的請求數
若將第3個數值除以第2個數值，就會得到平均每個連線的請求數
* Reading  正在讀取的請求數
* Writing  正在讀取主體、處理與回應的請求數
* Waiting  keep-alive 的連線數這個值跟 keepalive_timeout 有關


REF:
https://www.cyberciti.biz/faq/nginx-see-active-connections-connections-per-seconds/
https://blog.gtwang.org/linux/nginx-enable-stub_status-module-to-collect-metrics/

CENTOS7 安裝 NGINX 並請申請 Letsencrypt SSL憑證使用

CENTOS7 安裝 NGINX 並請申請 Letsencrypt SSL憑證使用

# 首先先看看網路上的教學安裝文章, 照著作把 nginx 安裝起來
https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-centos-7

# 然後安裝憑證, 這個 Letsencrypt 目前用程式安裝憑證
https://letsencrypt.org/

# 請依據制這裡的說明, 安裝程式及工具
https://certbot.eff.org/#centosrhel7-nginx

# 先把 domain FQDN 對應 IP 設定好
# 執行憑證申請及安裝, 因為 Letsencrypt 有縣市 IP 及 Domain 所以申請盡可能一次就成功。
# 依據說明執行
[root@dev letsencrypt]# certbot --nginx
Saving debug log to /var/log/letsencrypt/letsencrypt.log
Starting new HTTPS connection (1): acme-v01.api.letsencrypt.org

Which names would you like to activate HTTPS for?
-------------------------------------------------------------------------------
1: api.jangmt.com
2: dev.jangmt.com
-------------------------------------------------------------------------------
Select the appropriate numbers separated by commas and/or spaces, or leave input
blank to select all options shown (Enter 'c' to cancel):2
Obtaining a new certificate
Performing the following challenges:
tls-sni-01 challenge for dev.jangmt.com
Waiting for verification...
Cleaning up challenges
Cannot find a cert or key directive in /etc/nginx/conf.d/dev_jangmt_com.conf for set(['dev.jangmt.com']). VirtualHost was not modified.

IMPORTANT NOTES:
 - Unable to install the certificate
 - Congratulations! Your certificate and chain have been saved at
   /etc/letsencrypt/live/dev.jangmt.com/fullchain.pem. Your cert will
   expire on 2017-12-16. To obtain a new or tweaked version of this
   certificate in the future, simply run certbot again with the
   "certonly" option. To non-interactively renew *all* of your
   certificates, run "certbot renew"


# 失敗了, 因為還沒有設定好 cert or key directive  我們可以手動設定.
# 檢查一下 /etc/letsencrypt/ 應該有可以使用的憑證在 live 目錄內
[root@dev conf.d]# ls /etc/letsencrypt/ -la
total 20
drwxr-xr-x.   8 root root 4096 Sep 17 04:48 .
drwxr-xr-x. 143 root root 8192 Sep 17 05:03 ..
drwx------.   3 root root   49 Sep 17 04:03 accounts
drwx------.   4 root root   60 Sep 17 04:07 archive
drwxr-xr-x.   2 root root   72 Sep 17 04:07 csr
drwx------.   2 root root   72 Sep 17 04:07 keys
drwx------.   4 root root   60 Sep 17 04:07 live
-rw-r--r--.   1 root root  822 Sep 17 04:03 options-ssl-nginx.conf
drwxr-xr-x.   2 root root   70 Sep 17 04:07 renewal
 
 
# 然後設定一個初始的 NGINX 設定 /etc/nginx/conf.d/default.conf
# -----------------------------------------------------------
# http
server {
server_name _;
listen *:80 default_server deferred;
        # return 301 https://$server_name$request_uri;

        access_log  /var/log/nginx/access.log  main;
        error_log   /var/log/nginx/error.log warn;

        location / {
              root /usr/share/nginx/html;
              index  index.php index.html index.htm;
        }

        location ~ \.php$ {
                root           /usr/share/nginx/html;
                try_files $uri = 404;
                fastcgi_pass   127.0.0.1:9000;
                #fastcgi_pass unix:/var/opt/remi/php70/run/php-fpm/php-fpm.sock;
                fastcgi_index  index.php;
                fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
                include        /etc/nginx/fastcgi_params;
        }

        location ~ /\.ht {
                deny  all;
        }
}


# https
server {
       listen 443 ssl default_server;
       server_name _;

       ssl_certificate /etc/letsencrypt/live/dev.jangmt.com/cert.pem;
       ssl_certificate_key /etc/letsencrypt/live/dev.jangmt.com/privkey.pem;

       access_log  /var/log/nginx/access.log  main;
       error_log   /var/log/nginx/error.log warn;
       server_tokens off;

       location / {
             root /usr/share/nginx/html;
             index  index.php index.html index.htm;
       }

        location ~ \.php$ {
                root           /usr/share/nginx/html;
                try_files $uri = 404;
                fastcgi_pass   127.0.0.1:9000;
                #fastcgi_pass unix:/var/opt/remi/php70/run/php-fpm/php-fpm.sock;
                fastcgi_index  index.php;
                fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
                include        /etc/nginx/fastcgi_params;
        }

        location ~ /\.ht {
                deny  all;
        }

       #return 301 http://$server_name$request_uri;
}

# 然後, 就設定好了....XDXD
# 我知道跳過很多步驟, 因為我看得懂就好.
# 有錯誤隨時檢查 /var/log/nginx/error.log 紀錄檔
[root@dev conf.d]# tail /var/log/nginx/error.log
2017/09/17 05:06:08 [error] 4159#0: *11 no "ssl_certificate" is defined in server listening on SSL port while SSL handshaking, client: 59.127.16.209, server: 0.0.0.0:443
2017/09/17 05:06:09 [error] 4159#0: *12 no "ssl_certificate" is defined in server listening on SSL port while SSL handshaking, client: 59.127.16.209, server: 0.0.0.0:443

# 上面這個錯誤, 是我憑證沒有設定好造成的.
基本上如果有多個網站在同一個 NGINX 上的時候, default site conf 要先設定好, 才可以正常工作.
# Good Luck !!

PHP彷JWT打包產生需要的資料,把回傳回來的資料驗證解碼

執行：
http://sandbox.onlinephpfunctions.com/code/8349c158d68cdf644dd07d802f3782384fb4e7b7

使用範例：

加密的密碼
$salt = '11223344';
// 需要傳遞的陣列
$codevalue_array = array(
  'Amt' => '111',
  'MerchantOrderNo' => 'ertgyhujioiuytre'
);
// 打包產生需要的資料
$send_code = jwtenc($salt,$codevalue_array);
var_dump($send_code);

// 把回傳回來的資料驗證解碼
$codevalue = jwtdec($salt,$send_code);
var_dump($codevalue);

JS 產生亂數(前2碼英文小寫,後6碼數字)

程式碼

RUN test:
https://jsbin.com/moqusix/3/edit?html,js,output

ref:
https://www.w3schools.com/jsref/prop_html_innerhtml.asp
https://github.com/mtchang/code/blob/master/myrandomstring.html

OpenCart2 的密碼編碼方式

OpenCart2 的密碼編碼方式

Web App Manifest

把 WEB APP 圖示放到桌面, 啟動時候有各轉場的動作。

這篇寫得很清楚
https://developer.mozilla.org/en-US/Apps/Progressive

https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android

https://w3c.github.io/manifest/

最常見的應用
https://makeappicon.com/webclip

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Nginx Ip Whitelist (白名單快速轉成 nginx 使用的清單)

Nginx Ip Whitelist

by pass whitelist ref: http://www.kitploit.com/2016/11/fireaway-next-generation-firewall-audit.html

# 白名單設定方式可以參考 stackoverflow 這一篇
https://stackoverflow.com/questions/13917866/nginx-ip-whitelist

# 中文可以參考這一篇
https://www.centos.bz/question/nginx-ip-whitelist/


想把白名單快速轉成 nginx 使用的清單, 但是又不想寫太多程式。
所以直接用 google spreadsheets 轉成 csv 功能
透過 linux shell script 轉換成為 nginx 可以使用的清單

在實際工作動作：
客服人員：編輯 spreadsheets 檔案
系統人員：白名單轉成檔案驗證，並 reload nginx 生效.

## ----------------------------------------------------
## linux script
## ----------------------------------------------------
#!/bin/bash
# 編輯網址 , google doc 權限設定控制
# 將 google doc 白名單取出成為 csv
URL="https://docs.google.com/spreadsheets/d/{請改成你的網址}/pub?gid=0&single=true&output=csv"
echo "w3m -dump '${URL}' > whitelist.csv" | sh

# 備份原本的白名單
mv -f customer_ip customer_ip.bak
echo "# $(date -R) update." > customer_ip
# 去除註解
grep -v '#' "whitelist.csv" > tmp_file
# 取行數
max=$(wc -l tmp_file  | cut -f1 -d" ")
for i in `seq 1 $max`
do
    line=$(awk "NR==${i}" tmp_file)
    action=$(echo $line | cut -d, -f1)
    cidr=$(echo $line | cut -d, -f2)
    echo "${action} ${cidr};" >> customer_ip
done
rm -f tmp_file
#rm -f whitelist.csv

# nginx 重新啟動
# run in /etc/nginx/conf.d
echo "restart NGINX service"
systemctl reload nginx
# return
echo "OK! Done. csv URL in ${URL} ";
## ----------------------------------------------------

推力(Nudge)：決定你的健康、財富與快樂

推力：決定你的健康、財富與快樂

此書的作者
http://www.books.com.tw/exep/prod/booksfile.php?item=0010445555

推力：決定你的健康、財富與快樂
Nudge: Improving Decisions About Health, Wealth, and Happiness

演講內容： 作者:Richard Thaler 在Google的演講
http://www.youtube.com/watch?v=Dz9K25ECIpU

泛科學有一篇寫得很清楚, 可以快速的了解這本書要傳達的概念。
http://pansci.asia/archives/69875

傳統的文字激勵法

荷蘭機場的蒼蠅便斗

Linux Performance 效能評估工具

這個文章說明了系統個連接點的效能評估工具與方式。
http://www.brendangregg.com/linuxperf.html

netflix 工程師先透過 10 個工具在 60 秒告訴你，系統的效能摘要狀況...
http://techblog.netflix.com/2015/11/linux-performance-analysis-in-60s.html

接下來要仔細的分析效能上面的問題，透過 Brendan’s Linux Performance Tools tutorial 的這一篇文章來解釋。

每個指令都是獨有專精的效能評估工具
例如 : perf
https://perf.wiki.kernel.org/index.php/Main_Page
他是可以顯示CPU 上面資訊的計數器 及分析軟體、硬體的性能。
http://wiki.csie.ncku.edu.tw/embedded/perf-tutorial   成大資工WIKI

看起來就是折磨研究生的工具，但是工程師的好朋友。(泣...)

其他就慢慢研究，遇到再來使用了。

HTML5 OpenSource Code Game 免費開放原始碼遊戲

很多 Opensource Game code IN GITHUB
https://github.com/leereilly/games 這份 README 推薦很多遊戲連結


簡易角子機 Opensource html5 game
https://github.com/clintbellanger/Karma-Slots

免費的 HTML5 GAME 原始碼
http://www.java2s.com/Open-Source/Javascript_Free_Code/Game_HTML5/List_of_Free_code_Game_HTML5.htm


W3C 上面的HTML5遊戲教學
https://www.w3cschool.cn/html5/html5-game2.html

捕魚機 HTML5原始碼
http://www.htmleaf.com/html5/html5youxi/2014100552.html

Bitnami 的預設安裝 VM 及容器服務

https://bitnami.com/   是一個提供預先安裝基礎建設及應用程式的服務網站，可以讓開發人員「初期」不用花太多心思再基礎建設上面，就可以用預先安裝好的服務。

所以先選你要的機器影像檔 VM
https://bitnami.com/stack/nginx/virtual-machine

因為我用的是 Linux KVM 但上面只提供 .OVA 格式，所以需要轉換一下格式。
https://wiki.hackzine.org/sysadmin/kvm-import-ova.html  KVM: Importing an OVA appliance

然後就是設定 KVM 的 Machine 了!!
(略)

設定好後，把 SSH 打開最重要的。
https://docs.bitnami.com/virtual-machine/faq/

至於服務該如何使用，可以參考他的文件說明

https://docs.bitnami.com/virtual-machine/infrastructure/nginx/

其他的操作，就和一般使用 Linux 是一樣的。很快速的你就可以有一個可靠的開發環境了。

最後，bitnami 會自動回傳統計資訊回他的網站，記得把他關閉。

WanaCrypt0r 2.0 病毒 = 勒索病毒 + 網芳分享漏洞攻擊

從症狀來簡單說明一下這病毒可怕的地方,

WanaCrypt0r 2.0 病毒 = 勒索病毒 + 網芳分享漏洞攻擊 
也就是區網內有一台中毒就會全區網沒更新的都被勒索 + 中毒 (如果資訊正確的話)

這等級可比 2001 的 Troj_Nimda.a 型態, 當時幾乎辦公室內的 Windows 都中了
連重新安裝 Windows 後, 還沒修補漏洞插上網路線也會中。
最該害怕的是區域網路有很多 Windows PC 的地方, ex: 學校, 辦公室
因為年代久遠, 剛入行十年內的 MIS 可能都還沒遇過這種等級的病毒 , 所以請各位 MIS 特別注意了。

* 重點直接講：它透過漏洞入侵 ,電腦只要能上網被掃到 TCP 445 PORT 就中毒了。和 2001 年的 Troj_Nimda.a 病毒一樣的感染方式。所以最快的方式是把 TCP 445 鎖住或關閉就暫時安全。 你可以用 netstat -ant  觀看本機是否有開啟 TCP port 45 。

*  http://roger6.blogspot.tw/2017/05/wanacrypt0r-20-eternalblue-ms-17-010.html 這篇有教學關閉 SMBv1

* 漏洞應該是這個 MS17-010  ,    2017-3月份的更新
https://technet.microsoft.com/zh-tw/library/security/ms17-010.aspx#KBArticle

1.目前這已知最新版w10(1703版)沒有這個Bug，所以不會中該隻病毒2. 去「控制台\系統及安全性\Windows Update\檢視更新記錄」
　找有沒有 KB4012215 or KB4012216，如果有就不用擔心
3. XP, Win8, server 2003 也有這個Bug, 微軟特別再 5.12 釋出更新程式。

Win7 32bit ↓
http://download.windowsupdate.com/d/msdownload/update/software/secu/2017/03/windows6.1-kb4012215-x86_e5918381cef63f171a74418f12143dabe5561a66.msu
Win7 64bit ↓
http://download.windowsupdate.com/c/msdownload/update/software/secu/2017/03/windows6.1-kb4012215-x64_a777b8c251dcd8378ecdafa81aefbe7f9009c72b.msu

Win8.1 32bit
http://download.windowsupdate.com/c/msdownload/update/software/secu/2017/03/windows8.1-kb4012216-x86_d4facfdaf4b1791efbc3612fe299e41515569443.msu
Win8.1 64bit
http://download.windowsupdate.com/d/msdownload/update/software/secu/2017/03/windows8.1-kb4012216-x64_cd5e0a62e602176f0078778548796e2d47cfa15b.msu

* 當年 2001 年的 娜坦（Troj_Nimda.a） 病毒的災情
https://pttweb.tw/thread/m-1000901707-a
「娜坦（Troj_Nimda.a）」，正透過相當罕見的三重感染管道在網路上大量散
播，包括「電子郵件」、「網路資源分享」及「微軟 IIS伺服器」等三種感染

* 這篇是講攻擊即防禦的重點
https://www.facebook.com/groups/www.businesscity/permalink/377711095957498/
簡單說，W7(KB4012215 )、W8.1(KB4012216)還沒中毒的用戶趕快去載

* 這篇是講災情
https://www.facebook.com/DDHS.TW/posts/415720288808975?pnref=story

* 這篇講解法技術即防禦細節
http://roger6.blogspot.tw/2017/05/wanacrypt0r-20-eternalblue-ms-17-010.html

其實重點在於, 只要有更新上面得 windows update 應該都會沒事. Windows 8 , Windows XP , Windows Vista, windows server 2003 以前, 那就等死巴!!!

* 更新 2017.5.12 微軟釋出更新檔 XP, Win8 , Server 2003 更新檔
* https://www.cool3c.com/article/124186  隱科技報導
https://blogs.technet.microsoft.com/msrc/2017/05/12/customer-guidance-for-wannacrypt-attacks/

* 整理 WanaCrypt0r 2.0 大規模攻擊漏洞系統相關資訊整理與現階段預防方式(2017.05.13更新)

檢查 https 的 SSL 憑證何時過期？

# 這是簽發的機構 root 憑證過期日
[root@ssl]# openssl x509 -enddate -noout -in ca_bundle.crt 
notAfter=Mar 17 16:40:46 2021 GMT

# 這是你的 https 憑證過期日
[root@v1 ssl]# openssl x509 -enddate -noout -in certificate.crt 
notAfter=Jun 15 02:53:00 2017 GMT

2017 年 6 月 15 日會過期
憑證申請 https://www.sslforfree.com/ 

ref: http://www.esate.com/tc/images/page_ssl_works.png

ref: http://www.esate.com/tc/images/page_ssl_works.png 

關於PHP, HTML and Javascript 程式碼的混肴與壓縮

把 php 程式碼的混肴密, 可以加上密碼
Free Online PHP Obfuscator
http://www.fopo.com.ar/

把 php 加密
jjencode demo
http://utf-8.jp/public/jjencode.html

美化你的 html code
Format, Beautify, Maxify, Unpack or Deobfuscate JavaScript/jQuery/HTML/JSON/CSS Codes
http://jenson.in/codeformatter/

壓縮你的 html code
Speed up your web pages
https://htmlcompressor.com

壓縮 html

# 原始檔案內容
[mtchang@jangmt]$ cat phpobs.php
echo sha1('12345678');
?>

# 加密過後的內容-執行結果
[mtchang@jangmt]$ php phpobs_code.php
7c222fb2927d828af22f592134e8932480637c0d

# 沒有加密-執行結果
[mtchang@jangmt]$ php phpobs.php
7c222fb2927d828af22f592134e8932480637c0d

# 檔案大小差很多
[mtchang@jangmt]$ ls -la phpobs*
-rw-rw-r--. 1 mtchang mtchang 6634 Apr  3 01:17 phpobs_code.php
-rw-rw-r--. 1 mtchang mtchang   32 Apr  3 01:16 phpobs.php

原始碼貼上去

立即混淆看不懂程式碼

以 Bootstrap 3 為基礎的扁平化設計 UI Kit

以 Bootstrap 3 為基礎的扁平化設計 UI Kit

沒有美感的工程師, 寫網站最大的問題就是畫面很糟糕. 即使引進了 Bootstrap 的框架後, 能夠做的很糟糕的還是不少. 不過通常已經大幅度改善了原本很糟糕的網站設計.

但寫了一陣子後, 衍伸出另一個問題, 開始有人說 你的網站長得很 Bootstrap  , 這時 Bootstrap 它成為了一個形容詞.

自從 IOS 7 後大家跟風的似的回到扁平化設計  ,  以前曾經研究過相關的扁平化 Framework 有何特點. 但是最後還是選擇了 Bootstrap 的套件. 就因為他真的很好用.

最近發現了好東西  , 就是原本用 Bootstrap 開發的網站  , 只要加上別人家開發好的 UI KIT 就可以變更原本很 Bootstrap 的設計風格, 成為簡潔的扁平化風格.

很 Bootstrap 的 UI

Bootflat 是一個開放原始碼的 bootstrap flat 專案 , 有提供現成的 css 設計及 free PSD 可以提供你自行修改 UI 元件. 使用最簡單的方式就是把 CSS 放在網站的 bootstrap css 後面就可以了.

CDN 版本的 sample code:

Bootswatch 也是一個可以改變 Bootstrap 的設計, 用法和上面雷同 . 他現有 18 種不同的設計可以讓你切換. https://bootswatch.com/

FLAT UI 也是
http://designmodo.github.io/Flat-UI/

看完  , 趕快去改巴,

網站追蹤技術--音頻指紋追蹤(audio fingerprinting web-tracking)

網站追蹤技術--音頻指紋追蹤(audio fingerprinting web-tracking)


透過 HTML AudioContext 的函式，來追蹤使用者。這功能本來是設計來在 web browser
上面處理聲音分析、過濾的，但用在追蹤及網站使用者識別，更是令人驚豔。(這是根本是 HTML5 版本的程式奇淫技巧呀!!)

Audio Fingerprinting測試DEMO頁面：
https://audiofingerprint.openwpm.com/

研究機構：
普林斯頓大學的研究室，關於音頻指紋（AudioContext Fingerprinting）、WebRTC Local IP Discovery 及帆布指紋(Canvas Fingerprinting)的說明
https://webtransparency.cs.princeton.edu/webcensus/index.html#fp-results
其中關於 AudioContext Fingerprinting 但需要進一步的研究，指紋的穩定性及唯一性。

這研究室開發的 OpenWPM 看起來很強大呀！！
https://github.com/citp/OpenWPM


另一個研究機構，大量收集，並探討 fingerprinting 的有效性。
https://amiunique.org/
還發了一篇 IEEE http://ieeexplore.ieee.org/document/7546540/?reload=true


實作的GITHUB專案：
這個專案，不相容於前一個專案版本 Fingerprintjs ，這個版本但使用多個不同的偵測技術。

線上測試：
http://valve.github.io/fingerprintjs2/

原始碼：
https://github.com/Valve/fingerprintjs2
作者的裡面有一段寫到：「I'm also paying special attention to IE plugins, popular in China, such as QQ, Baidu and others.」 , 幫 china user 廠廠了!!

這是我直接放在我網站的連結 http://jangmt.com/fingerprintjs2/ 
他可以分辨到不同的 chrome 使用者以及更細微的差異.

我寫了一個簡單的測試的頁面，可以讓使用這測試一下他的 展示閱覽的狀態歷史
http://jangmt.com/fingerprintjs/

網站使用者識別機制-帆布指紋( canvas fingerprinting )

* Canvas fingerprinting 可以透過HTML5  BROWSER 的 CANVAS ，依據不同軟體及硬體裝置上對於 Canvas 的實作，得到不同的指紋，得到一個唯一 HASH 值，用這個值來判斷使用者的唯一性。且它無法被無痕視窗封鎖阻擋，也沒有防毒軟體可以阻止它洩漏你的機器識別資訊，AdBlock 要檔是可以，但要自己加入規則鎖 Canvas JS。

* 這讓我想到上一篇，我用 IP清單來抵擋大量的暱名 IP，現在換成這個機制，加上 IP 管制，就可以更精準的阻止匿名攻擊的註冊！！

* 至於哪些沒有 CANVAS 的 browser 就直接把它拋棄了，根本不讓他連網。目前大概只有機器人會用沒有 CANVAS 的 BROWSER 巴。

WIKI: https://en.wikipedia.org/wiki/Canvas_fingerprinting

誰提出的想法：https://cseweb.ucsd.edu/~hovav/dist/canvas.pdf

解釋：https://securehomes.esat.kuleuven.be/~gacar/persistent/the_web_never_forgets.pdf
開始解釋這種追蹤工具的難以抵擋性, 2014年的調查已經有 5% 以上的網站使用這種技術。

猜測正確率論文：https://panopticlick.eff.org/static/browser-uniqueness.pdf  ‎被引用 535 次
「在我們的樣本中，帆布指紋變化相當快速，但即使一個簡單的試探通常能夠猜到是
什麼時候的指紋，是以前觀察過的 '升級版' 瀏覽器指紋，
有 99.1% 的猜測正確 和只有 0.86% 是未命中(false positive rate)。」


* 線上立即可以測試的網站：

(1) 線上測試網站
https://fingerprint.pet-portal.eu/  更詳細的 fingerprint 還可以猜你安裝哪些軟體，且有不錯的識別率。

(2)
我下載 https://github.com/Valve/fingerprintjs 的本機測試結果 ，可以點擊這裡測試。這個比較簡單，直接分析得到一組code ，在同一個機器同 browser 開啟會是唯一值。 v2 版本比較進階，甚至可以識別你的 chrome 帳號登入的不同。

GITHUB 已經有人寫成 framework 可以直接用的 code：
https://github.com/Valve/fingerprintjs  第一版
https://github.com/Valve/fingerprintjs2  第二版


more...
http://valve.github.io/blog/2013/07/14/anonymous-browser-fingerprinting/
http://www.ghacks.net/2014/07/21/companies-use-canvas-fingerprinting-track-online/

另一個研究機構，大量收集，並探討 fingerprinting 的有效性。
https://amiunique.org/
還發了一篇 IEEE http://ieeexplore.ieee.org/document/7546540/?reload=true

我寫了一個簡單的測試的頁面，可以讓使用這測試一下他的展示閱覽的狀態歷史
http://jangmt.com/fingerprintjs/

TOR 匿名網路的抵擋

有各做網站很麻煩的問題, 就是會遇到透過大量的 ip 重複註冊. 然後 client 可以大量使用匿名網路 ex. TOR , open proxy 等方式大量註冊，且一定是透過機器人來大量註冊，通常會搭配圖檔認證機器人,如果可以雙管齊下, 先擋住機器人，再來擋住 tor or open proxy 就可以防堵匿名的大量註冊。

可以檢查你的網路IP是否為 tor 網路 https://torstatus.blutmagie.de/ 
這個提供 tor db list https://www.dan.me.uk/tornodes 提供ip-list DB and client
這是另一個付費的匿名網路的名單 https://udger.com/resources/ip-list/web_proxy
但能夠完全阻擋嗎？
我猜檔個 80%~90% 應該可以巴 , 要全檔太難了, 畢竟連手機都有 tor browser 了, 無處不再呀！

至於機器人那段, 加強文字驗證碼應該可以解決. 但要搞到很難辨識又失去方便性,
這是可以取捨的點.
google reCAPTCHA  https://www.google.com/recaptcha/intro/

快速的 ping 很多主機, 並且使用網頁呈現結果.

這是以前管理很多主機的時候，寫的小工具. 雖然很簡單，但是很好用。

* 我是透過 fping 來快速的 ping 很多主機 , fping 可以執行一個列表 .txt 的清單，並且使用多執行緒的方式顯示 ping 的結果。每次 ping 大約只要 5~6 秒左右，再多的主機也是大約這樣的時間。

* 安裝 fping 程式 ,  這個工具可以快速的平行 ping 很多的主機. 可以協助快速偵測主機服務是否存在。
* http://fping.org/

* 安裝 memcached sevice and php 的 mod
http://php.net/manual/en/book.memcached.php

* 接下來我使用 php + bootstrap 顯示執行後的結果, 並且為了讓使用者不要一直 reload ，透過了 php memcached 來加速再 60 sec 內不小心的 reload page 行為。

程式連結：https://github.com/mtchang/code/blob/master/fping.php
顯示結果：

程式碼：

PHP 檢查傳入的 DATE 日期是否合法，不合法的話就以現在的日期為值。

PHP 檢查傳入的日期時間是否合法，不合法的話就以現在的日期為值。


  // get example: ?current_datepicker=2017-02-03
  // ref: http://php.net/manual/en/function.checkdate.php

  function validateDate($date, $format = 'Y-m-d H:i:s')
  {
      $d = DateTime::createFromFormat($format, $date);
      return $d && $d->format($format) == $date;
  }

  // 取得 get 傳來的變數，如果有的話就是就是指定的 yy-mm-dd 沒有的話就是今天的日期
  if(isset($_GET['current_datepicker'])) {
    // 判斷格式資料是否正確
    if(validateDate($_GET['current_datepicker'], 'Y-m-d')) {
      $current_datepicker = $_GET['current_datepicker'];
    }else{
      $current_datepicker = date('Y-m-d');
    }
  }else{
    // php 格式的 2017-02-24
    $current_datepicker = date('Y-m-d');
  }
  // var_dump($current_datepicker);

粉粒體設備--粉碎機

這是一台粉碎機的設備，以前每天都在做這些事，從事產業設備輸送、粉碎設備的製造。從設計、製造、組裝、採購全部都有參與整個過程，因為這些經驗讓我加速了社會化的過程。

經過了 1x 年了還是映像深刻，讓我再來製作也還行的，每天的耳濡目覽，不是那麼容易的忘記。這機器有很多用途，主要是把物品打成更細小。可以把粗玉米類的原料物品打碎成為比較小的顆粒。也有商家買去把回收物打碎成為更小的顆粒，以利於環保回收。 差異只是在於設備的網子及刀片的規格不一樣。現在來看網子、刀片就是耗材，賣耗材及設備的維修才是後續可以長遠經營的方式。但那時候沒有這種觀念，也不知道如何經營與行銷。

所以我現在的職業是寫程式的工程師，最近因為有需要又把這些圖檔挖出來，想想這些設備應該還是會一直存在，只是角色、用途會有所轉變，至於是否能夠轉變成為一種獲利的方式，就要看經營者的智慧了。

神馳經驗（flow experience）

昨天寫程式好像有進入了 zone ，也就是所謂的神馳經驗（flow experience）

http://topic.parenting.com.tw/issue/2013/futurelearning/article2-3-1.aspx

但也不是每天寫程式都可以進入大概一週只能出現 1~2次 ，每次持續約 6-10 hr 。

感覺進入的方式是從身旁的小事件開始累積到一段時間(30min ~ 60min) 後，

整個頭腦的思考非常的清晰，開始進入寫程式有如神助的情境。

如果把頻率拉高的話，我程式早就寫完了。