一群棒子

一群棒子的技術部落格，紀錄在開發中的做法和踩過的坑。定位是工程師自己的技術筆記，如果你也有遇到相同的問題那麼你並不孤單。

Let's encrypt 使用 certbot 幫網站掛上 SSL
筆記

Let's encrypt 使用 certbot 幫網站掛上 SSL

Let\’s encrypt [https://letsencrypt.org/] 是一個非常有名的數位憑證認證機構，它提供了免費的 SSL 憑證服務，就是你網址左邊的綠色鎖頭 (HTTPS)，這件事情在許多的網域商或是主機商是需要付費購買憑證的。Let\’s encrypt 雖然免費可是每次憑證的有效期限是三個月所以每到時間我們就必須去更新憑證。 certbot 是一個非常好用的機器人，他可以簡單的幫我們網站掛上 SSL 憑證，唯一缺點就是如果使用者對指令介面不熟系，可能要花一點時間去研究它了;剛剛提到的三個月就必須更新憑證這件事，身為一名高端的工程師自動的事情當然要交給程式來解決囉。 安裝與放上憑證 直接在官網上 [https://certbot.eff.org/]https://certbot.eff.org/ 選擇你的系統跟你的 webserver 就會看到相對應的安裝方法，這個部分應該就不多贅述，網路上的教學也很完整。 ### 會遇到的問題 certbot 當然憑證不能亂簽他會去驗證網址是否歸你所有，所以他會去你的網址底下放驗證檔案來確保不被亂用，在這時候你可能會遇
2 min read
禁止 Google 翻譯特定元素
筆記

禁止 Google 翻譯特定元素

紀錄如何讓 google 翻譯不要翻譯特定的元素，起因很簡單：$1234 在瀏覽器語言第一順位為英文，使用者翻譯中文很有可能會被翻譯為1234 美金 ，當然你也不能限制使用者如何操作為了避免不必要的麻煩還是加上會比較好。 實作 <div class="notranslate" translate="no">hello</div> 恩對，就是這麼簡單，translate="no" 這個屬性未必會有作用，個人測試對 google 翻譯是沒有效果的，反倒是 class="notranslate" 效果很正常。 參考資料 HTML translate Attribute [https://www.w3schools.com/tags/
1 min read
JavaScript 陣列求交集、差集
筆記

JavaScript 陣列求交集、差集

在面試題目中常遇到的題目，陣列的交集、差集、補集等這類的題目，記錄一篇解法與自己的理解以便於加深自己的印象，不囉唆直接上 code 。 使用方法 Array.filter filter() 方法會建立一個經指定之函式運算後，由原陣列中通過該函式檢驗之元素所構成的新陣列。 Set Set 物件可讓你儲存任何類型的唯一值（unique），不論是基本型別（primitive）值或物件參考（references）。 jQuery 大家的好朋友就不用多說了 交集 求出兩個陣列的交集 Array.filter let arr1 = [1,2,3,4,5] let arr2 = [2,4,6,8,10] let result =arr1.filter((e) => { return arr2.indexOf(
3 min read
使用 Node.js 套件 Puppeteer 撰寫爬蟲
JavaScript

使用 Node.js 套件 Puppeteer 撰寫爬蟲

Puppeteer [https://github.com/GoogleChrome/puppeteer] 是 Google 開源的網路爬蟲工具，說明文黨一開始就提到 > Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. 主要是以 Chrome 當作核心個人使用起來感覺，就是使用程式去操作瀏覽器而已。 範例 const puppeteer = require("puppeteer") exports.getPageTitle = async url => { const browser = await puppeteer.
2 min read
JavaScript HTMLCollection / NodeList 轉 Array 的方法
JavaScript

JavaScript HTMLCollection / NodeList 轉 Array 的方法

如果習慣用 jQuery 的朋友某天改使用 Vanilla JS 選擇器一定會先矇一下，怎麼很多方法不能使用，錯誤訊息為.forEach is not a function 例如範例 document.getElementsByTagName('h3').forEach((el)=>{ console.log(el) }) 如果你看仔細一點其實會發現 document.getElementsByTagName 其實是 HTMLCollection 又或是 document.querySelectorAll('h3') 會給你 NodeList HTMLCollection 與 NodeList 差別 那你會問兩個差別在哪？簡單來說 HTMLCollection 會是隨著 DOM 改變而一起變動，NodeList 則不一定，
1 min read
這一年來我所看見的技術債
筆記

這一年來我所看見的技術債

到職到現在也快一年，一位前輩說過大約一年就可以看清楚一間公司的全貌，趁著放假的時間好好的整理一下一年間所看到的東西，這並不是抱怨文或什麼，只是想紀錄也以此為借鏡避免自己犯下同樣的錯誤。有一位前輩說過到哪邊都有技術債只是看你能不能接受，一個大型的專案有技術債也是很正常的事情時間上的壓力、上頭主管的決策、技術力上的不足都是導致技術債的原因，還債的也不一定是你，搞不好是後續接手專案的人。 歷史悠久的專案 我參與的專案算是很大型的電商平台系統，看程式碼上的註解時間沒 10 年有也有 5 年。既然這麼久的專案一定埋藏著許多技術債，經常你解決一個問題會延伸出兩個以上的問題。 沒有技術文件 恩對，整個專案都沒有技術文件，功能壞了要問誰？沒人知道他是幹嘛的這些事情很常發生，畢竟沒有技術文件留下來，全都是口頭的傳承或是當事人明瞭，隨著人員流動知識也消失了。 義大利麵程式碼 這個專案是：後端 Java 搭配 Oracle 資料庫、前端模板則是 jsp 可能當時這樣算是標配吧？ 一個 jsp 檔案內有許多程式碼存在 <head> <style> // css cdoe <
4 min read
Chrome Resource Override 插件開發技巧
筆記

Chrome Resource Override 插件開發技巧

身為前端工程師通常都習慣在本地開發程式，大多的專案都是 HTML CSS JavaScript 三者成一組，所以在開發上本機還原也是相當簡單的，如果專案是因為環境上的因素無法在本機還原呢？像是程式必須在測試機才看得到效果、又或是使用 JSP 輸出 HTML 模板而你又無法安裝 JAVA 環境，這時在開發上就有點綁手綁腳了。 Resource Override 遇到這種情況我都會使用 chrome 的插件 Resource Override [https://chrome.google.com/webstore/detail/resource-override/pkoacgokdfckfpndoffpifphamojphii] 使用起來也是非常的直觀，在你的開發面板會看到一個新的分頁，Overrides 他可以做到 * URL 對 URL * URL 對 程式碼 * 插入程式碼 * 修改請求 Headers 適用情境 本地端不想/無法還原，只能在線上端觀看結果 組合技
2 min read
JavaScript 使用 Web Speech Recognition 語音辨識
JavaScript

JavaScript 使用 Web Speech Recognition 語音辨識

最近工作上有實作到語音辨識輸入這功能，不過在文件上並不是那麼清楚所以寫一篇筆記來紀錄事件觸發的順序。  瀏覽器支援度 可以用 Can I use [https://caniuse.com/#search=Speech%20Recognition] 這個網站看看瀏覽器的支援度，恩..基本上只有 Chrome 有辦法使用。手機更不用說了 iOS 全滅只有 Android 手機有辦法使用。 判斷是否有支援語音辨識可以用以下程式碼 window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition if(!window.SpeechRecognition){ return } const recognition = new SpeechRecognition() 如果你直接 new SpeechRecognition() 就會 Uncaught ReferenceError: SpeechRecognition is not defi
1 min read
Microsoft Office Online Video攻擊概念

Microsoft Office Online Video攻擊概念

起因 最近在接觸一個要收錢的掃毒&檔案清洗的程式OPSWAT，要掃毒當然自己得要有毒才行，所以在網路上找了一個word的攻擊概念驗證的文章，來進行今天的介紹。 接下來就讓我們開始吧! 過程 首先打開一個word，切換到插入點擊線上視訊 * 我們這邊成功放入一個可撥放的影片。 * 接著我們存檔，並開始下一階段。 針對word檔做解壓縮。 * * 接著我們進入word資料夾內編寫document.xml檔 * 搜尋 embeddedHtml 關鍵字，並對內容作修改，這邊我就不把我修改內容貼上了。 * 修改完並存檔後，我們重新壓縮這個word並重新命名 * * 結果 接著打開檔案並點擊影片，會發現跳出一個下載提示!! * 使用掃毒進去查看，眾多軟體只有一家抓到… * 以上就是這個攻擊漏洞的原理，與掃毒結果。 資料來源:https://blog.cymulate.com/abusing-microsoft-office-online-video
2 min read
如何除錯元素 CSS 過寬而造成捲動軸
筆記

如何除錯元素 CSS 過寬而造成捲動軸

相信在寫前端樣式時時常都會遇到一個問題，就是元素過寬造成出現捲動軸或是手機可以拖移至螢幕外諸如此類的問題，最土法煉鋼的除錯方式就是一層一層地慢慢下 display:none 看是哪一個元素太寬造成破版，直到最近發現有一位大神寫了一段簡短的 js code 幫助 debug。 解決方案 [].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)}) 只要將上面這段 code 貼在你的 console 內就可以看到效果，馬上就可以知道是哪一個元素在搞鬼了。 參考資料 108 byte CSS Layout Debugger [https://gist.github.com/addyosmani/
1 min read
WordPress Gutenberg 編輯器撰寫 markdown
Gutenberg

WordPress Gutenberg 編輯器撰寫 markdown

身為一名高端的工程師一直追逐著最新的技術，這幾天默默的升級到了 5.0 直到剛剛才發現一件事情，欸我的 markdown 跑哪裡去了，新的編輯器怎麼寫 markdown ? 在網路上搜尋了一下才找到答案。 圖解 我一直都是使用 Jetpack 的 markdown 功能如果你不知道怎麼開啟的話請看下圖，他在 Jetpack 的設定內。 jetpack 啟用 markdown接著進到編輯器的畫面 gutenberg 使用 makrdown試著切換預覽模式看看 預覽切換gutenberg 編輯器算是一個很重大的改變，連我自己都還在習慣當中不過對我這種打打文章的人來說使用 markdown 格式還是最簡單的方式。
1 min read
JavaScript 非同步大亂鬥
JavaScript

JavaScript 非同步大亂鬥

大家都知道 js 的非同步特性，這是一把雙面刃有時一些奇怪的 bug 也是因為非同步的問題，現在 es6 的語法已經讓我們可以很簡單的去操作避免掉非同步的一些問題，回過頭來還是必須要去深入理解基本功這件事情。 同步與非同步 同步(Synchronous) 與 非同步(Asynchronous) 這兩個名詞大家一定不陌生，以下用自己的認知來闡述這兩件事情，我們以一個餐廳的服務生當做例子。 非同步：餐廳內的一個服務生可以點餐完將菜單交給廚房的廚師，並且接著服務下一桌客人等到廚房將餐點準備好可以出菜時再回來將餐點送到顧客的桌上。 同步：餐廳內的一個服務生點餐完之後將菜單交給廚房，就在廚房等待廚師將餐點準備完畢將菜送到顧客桌上，才會再繼續服務下一桌的客人。 看出來了嗎？兩著的差別在於服務生點餐完之後是否有繼續服務下一桌客人，以 Node 來講就是 Single Thread 可以一次處理多個 Request 不須等待第一個 Request 處理完再去處理下一個 Request。 常遇到的問題範例 再來看看下面這些範例，這些也是面試時很常見到的考古題。 console.log('Be
5 min read
Python 新手筆記(windows10)
Python

Python 新手筆記(windows10)

另外一篇有寫到for linux環境的安裝，這篇來說說在window的環境下如何使用。 window 10 安裝 python 3： 到https://www.python.org/downloads/下載 執行安裝程式 點擊下載的 python-3.x.x.exe 並記得勾選圖中的Add Python 3.7 to PATH 安裝完成後的確認 windows鍵+R，執行cmd 輸入python 到這邊恭喜安裝完成，輸入exit()可以離開 寫一段python script 在windows環進下，建議安裝Notepad++ (https://notepad-plus-plus.org/download/v7.5.9.html) 使用otepad++，可以選擇語言python，還算不錯用。 來是下script來計算一下加法八
2 min read
從零開始的機器學習生活 – TensorFlow.js 學習顏色分類
筆記

從零開始的機器學習生活 – TensorFlow.js 學習顏色分類

在前面幾篇文章補足了一些基本知識之後，接著我們就可以進行一些基本的練習，本次做的是透過機器學習辨識顏色，下面將會附上程式碼以及 github page。如果你是 IOS 12 或是 Android 9 這些較新版本手機使用者，會有無法運算的 BUG 存在，只能靜待修復了。 資料 在寫程式之前，我們先談論關於資料來源這件事情，你可以自己收集資料、根據規則用程式產生資料（ex:衣服尺寸表）或是用 google 的 Dataset Search [https://toolbox.google.com/datasetsearch] 本次的資料來源則用教學 CodingTrain [https://github.com/CodingTrain/website/tree/master/Courses/intelligence_learning/session7/07_12_color_
3 min read
從零開始的機器學習生活 - Parcel.js 與 TensorFlow.js
筆記

從零開始的機器學習生活 - Parcel.js 與 TensorFlow.js

看到 js 就知道肯定跟瀏覽器脫離不了關係，在 2018 TenrsorFlow Dev Summit Google 發表了 TenrsorFlow.js 這種黑科技實在是屌的飛起啊，瀏覽器都可以機器學習代表著有更多的應用，有興趣的可以看看以下影片。 Parcel.js 快速打包工具 Parcel.js [https://parceljs.org/] 是一套快速的打包工具，至於有多快速看看他的官方簡介就知道了安裝也只要 npm install -g parcel-bundler 詳細可以觀看 快速开始 [https://parceljs.org/getting_started.html] 有了 Parcel.js 可以讓我們很方便的開發單一頁面的網站如果要開發大型網站還是使用其他工具會比較好。 TensorFlow.js 接著我們就可以安裝 TensorFlow.js [https://js.tensorflow.org/
2 min read
從零開始的機器學習生活 - 機器學習的種類
筆記

從零開始的機器學習生活 - 機器學習的種類

你是否會有個疑問到底機器學習 (Machine Learning) 到底是怎麼讓電腦學習的？如果籠統地跟你說就是一堆數學、演算法、統計學、向量、微積分諸如此類的東西，如果全都很陌生…沒關係我也不會ＸＤ我也不會跟你說一堆數學公式，如果有興趣可以去看 機器學習你也可以 – 文組帶你手把手實做機器學習聖經 [https://ithelp.ithome.com.tw/users/20107850/ironman/1566] 悔恨當初沒學好數學啊。 機器學習的方式 必須要先知道兩個名詞 * 資料（features） > 身高體重等這種餵給機器學習的資料集 * 標記（label） > 資料的答案 到底機器怎麼學？機器學習的方式約能分為三大類 * 監督式學習(Supervised learning) * 非監督式學習(Unsupervised learning) * 強化式學習(Reinforcement learning) 監督式學習（Supervised learning） 顧名思義，你必須要一樣一樣的告訴他正確
5 min read
從零開始的機器學習生活 - Anaconda 與 Jupyter Notebook
筆記

從零開始的機器學習生活 - Anaconda 與 Jupyter Notebook

近來 Google 開源了 TensorFlow [https://www.tensorflow.org/] (今後簡稱 tf) 使得機器學習又邁向了另一個巔峰，儼然機器學習已經成為了時下最火紅的技術，身為一名工程師怎麼能不好好地跟上這波潮流呢？這次就先讓我們來處理開發環境。 開發環境 Anaconda tf 是使用 Python 語言所撰寫的，python 在函式庫的版本貌似很多地雷所以很多人都推薦使用 Anaconda [https://www.anaconda.com/download] 來作為環境平台以下是一個安裝的筆記，我個人會選用 Python 3 的版本來安裝 安裝過程就不詳細講解了安裝起來應該沒有太大的難度才對 當你安裝完如果你是 macOS 或 Linux 如果想要使用指令要記得在 .bash_profile 或是 .zshrc 加入 export PATH="/Users/USER_NAME/
2 min read
Ansible 部署工具 pull git 專案
筆記

Ansible 部署工具 pull git 專案

俗話說的好：只要有重複做兩次以上的事情，都有自動化的價值。如果你很懶得每次都要連進伺服器做相同的事情，可是你又不會自動化部署等工具那麼你可以試試看 Ansible 什麼是 Ansible？ 簡單的來說你可以把它當作你的腳本工具，只要寫好腳本讓 Ansible 幫我們照著腳本來跑就好。 優點： * 伺服器上不用額外安裝 agent 只需要 python 跟 ssh * 腳本使用 xml 格式 安裝步驟 以下以 Mac 為開發環境 # 安裝 pip 也可跳過 curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py python get-pip.py # pip 安裝 ansible pip install ansible ansible --version
2 min read
CKEditor 修改 upload request
JavaScript

CKEditor 修改 upload request

CKEditor 相信大家都已經耳熟能詳，功能強大而且插件也多對於所見即所得編輯器是一個很好的選擇，編輯器內可以直接上傳圖檔或檔案的功能也很常見，今天你要在上傳多帶額外的資訊就沒有那麼簡單了，官方文檔你懂的… 前置作業 在這之前你應該已經開啟了上傳功能，如果你還沒開啟可以參考本站文章 Laravel CKEditor 整合 Laravel file manager [https://bonze.tw/laravel-ckeditor-with-laravel-file-manager/] 整合 Laravel file manager 的部分，或是 File Manager Integration [https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_browse_upload.html] TL;DR 如果你有看過官方文檔 [https://ckeditor.com/docs/ckeditor4/latest/guide/
1 min read
telnet/ssh自動化腳本

telnet/ssh自動化腳本

起因 進入網路工程師這個領域快1年了，遇到了幾次需要大量並且重複的動作，接著發現有些東西是可以寫一些腳本來自動執行，所以就開始找相關資料來編寫了。 使用環境 基本上還是基於linux的執行，linux內請安裝expect。 apt-get install expect -y mac os 預設內建就有請查看/usr/bin/expect 目前我是使用在windows10內開啟ubuntu bash的方式，真的頗開心windows把這東西加進來。 文件介紹 這邊要介紹一些執行的文件 > -device-list.txt 連線的設備ip清單 -cisco.sh 主要執行，並且呼叫expect執行 -configure-cisco.exp 所有執行expect的設定 -file_process.sh 文件整理 -results.log 執行完後的資料 文件編寫 1.首先我們先建立一份需要連線的設備清單，並取名為device-list.txt。 2.建立cisco.sh的文件，並在裡面加入以下內容
4 min read
Shadowsocks+BBR VPN 架設筆記

Shadowsocks+BBR VPN 架設筆記

起因 因為最近有可能會使用到VPN所以自己租了一台VPS來玩玩，這邊筆記下架設過程。 > -Shadowsocks與ShadowsocksR是某長城進化後，經多人證實能有效使用的VPN，是一種基於Socks5代理方式的加密傳輸協定。 -BBR（Bottleneck Bandwidth and Round-trip propagation time）是Google的一種壅塞控制演算法，主要是估計寬帶和延遲狀況，則是不斷偵測封包傳輸的錯誤率，根據總傳輸量和錯誤量的比例來決定要以何種頻寬傳輸，降低緩衝區堵塞的狀況，進而提高傳輸速度。 買VPS這段就直接跳過，因為我也不知道自己買的算不算貴…總之這邊VPS這邊，買完後確認拿到的IP沒有被牆擋住，就算基本合格了(n雖說是基本合格但是應該只有40-50分XD)，網路速度與連線品質好，就更棒了。 首先選擇VPS的OS，以下這邊我OS是使用Centos6。 安裝Shadowsocks與BBR ssh進入VPS後，下載別人的Shadowsocks整合包。 wget --no-check-certificate -O shadowsock
4 min read
nginx反向port給docker容器使用
Nginx

nginx反向port給docker容器使用

使用nginx當作proxy的話，要指定port給docker container，讓容器可以正常運作。 讓我們回憶一下，docker container run的指令八 docker run -it --name bonze.test.tw -p 1019:80 其中1019就是我們分配給bonze.test.tw這個docker container的port。 那我們要如何設定呢，其實很簡單。 到nginx（路徑/etc/nginx/conf.d），建立一個bonze.test.tw.conf，並輸入以下內容。 server { listen 80; server_name bonze.test.tw; proxy_connect_timeout 300; proxy_send_timeout
1 min read
ES6 學習筆記（二） 箭頭函數的 this
JavaScript

ES6 學習筆記（二） 箭頭函數的 this

那麼在先前已經學習過了箭頭函數的寫法，有沒有又覺得自己又潮了一點，箭頭函數並不只是單純寫法上的改變，另一個好處是箭頭函數的 this 是綁定父級作用域的，這麼說不太清楚不如直接看程式碼比較快。 範例 先來一段常常會見到的錯誤範例 const person = { name: 'jimmy', skills: ['html', 'css', 'php', 'js', 'vue', 'drupal', 'wordpress', 'laravel'], getSkills: function () { this.skills.map(function (skill) { // console.log(this)
2 min read