八克里

* 官方網站 https://www.jeasyui.com/documentation/tree.php  * 測試DEMO頁面 http://mtchang.github.io/code/easyui_tree.html  and source code

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

使用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"               # ...

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憑證使用 # 首先先看看網路上的教學安裝文章, 照著作把 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 Perfor...

執行： 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);

程式碼 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 的密碼編碼方式

把 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 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 '#' "whitel...

推力：決定你的健康、財富與快樂 此書的作者 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 傳統的文字激勵法 荷蘭機場的蒼蠅便斗

這個文章說明了系統個連接點的效能評估工具與方式。 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 看起來就是折磨研究生的工具，但是工程師的好朋友。(泣...) 其他就慢慢研究，遇到再來使用了。

很多 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

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 病毒 = 勒索病毒 + 網芳分享漏洞攻擊  也就是區網內有一台中毒就會全區網沒更新的都被勒索 + 中毒 (如果資訊正確的話) 這等級可比 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_e5918381cef63f171...

# 這是簽發的機構 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 程式碼的混肴密, 可以加上密碼 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 的框架後, 能夠做的很糟糕的還是不少. 不過通常已經大幅度改善了原本很糟糕的網站設計. 但寫了一陣子後, 衍伸出另一個問題, 開始有人說  你的網站長得很 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) 透過 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 廠廠了!! 這是我直接放在我網站的連...

* 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 的本機測試結果 ，可以點擊 這裡 測試。這個比較簡單...

有各做網站很麻煩的問題, 就是會遇到透過大量的 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/

這是以前管理很多主機的時候，寫的小工具. 雖然很簡單，但是很好用。 * 我是透過 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 檢查傳入的日期時間是否合法，不合法的話就以現在的日期為值。   // 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 年了還是映像深刻，讓我再來製作也還行的，每天的耳濡目覽，不是那麼容易的忘記。這機器有很多用途，主要是把物品打成更細小。可以把粗玉米類的原料物品打碎成為比較小的顆粒。也有商家買去把回收物打碎成為更小的顆粒，以利於環保回收。 差異只是在於設備的網子及刀片的規格不一樣。現在來看網子、刀片就是耗材，賣耗材及設備的維修才是後續可以長遠經營的方式。但那時候沒有這種觀念，也不知道如何經營與行銷。 所以我現在的職業是寫程式的工程師，最近因為有需要又把這些圖檔挖出來，想想這些設備應該還是會一直存在，只是角色、用途會有所轉變，至於是否能夠轉變成為一種獲利的方式，就要看經營者的智慧了。

昨天寫程式好像有進入了 zone ，也就是所謂的 神馳經驗 （flow experience） http://topic.parenting.com.tw/issue/2013/futurelearning/article2-3-1.aspx 但也不是每天寫程式都可以進入大概一週只能出現 1~2次 ，每次持續約 6-10 hr 。 感覺進入的方式是從身旁的小事件開始累積到一段時間(30min ~ 60min) 後， 整個頭腦的思考非常的清晰，開始進入寫程式有如神助的情境。 如果把頻率拉高的話，我程式早就寫完了。