一群棒子 (Page 3)

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

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 則不一定，

筆記

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

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

筆記

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 適用情境本地端不想/無法還原，只能在線上端觀看結果組合技

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

Microsoft Office Online Video攻擊概念

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

筆記

如何除錯元素 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/

Gutenberg

WordPress Gutenberg 編輯器撰寫 markdown

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

平台

線上測試正則表達式網站

有時候我們需要使用正則表達式來進行一些驗證，這個時候在線上端直接測試就會有效率許多，於是乎就找到了這個網站 regex101 [https://regex101.com/] 藉此分享一下

JavaScript

JavaScript 非同步大亂鬥

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

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來計算一下加法八

筆記

從零開始的機器學習生活 – 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_

筆記

從零開始的機器學習生活 - 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/

筆記

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

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

筆記

從零開始的機器學習生活 - 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/

筆記

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

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/

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的文件，並在裡面加入以下內容

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

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

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)

JavaScript

ES6 學習筆記（一）箭頭函數

寫碼容易讀碼難，在 JavaScript ES6 中有一個語法叫做箭頭函數（arrow function）他的語法讓程式碼更加的簡短，以下是一段簡單的程式碼範例。範例 const arr = [1,3,5,7,9] const double = arr.map(function(arr){ return arr*2 }) console.log(double) // [2, 6, 10, 14, 18] //箭頭函數 const arr = [1,3,5,7,9] const double = arr.map((arr) => { return

Cisco switch 使用wireshark抓封包

今天想用wireshark抓經過switch的封包，就要在switch裡面給一些設定假設要在第21port空port抓第22port的封包。 switch# conf t config# monitor session 1 source interface Fa0/22 config# monitor session 1 destination interface Fa0/21 這樣只要把自己筆電的網路線插在21port上，再開啟wireshark就能抓取經過22port的封包了。 ps:interface不一定都是fa0/xx，請注意自己的設備上的interface。

CISCO QOS 限速簡易設定

QOS 簡介 QOS（Quality of Service）即服務質量，對於網絡業務，服務質量包括傳輸的頻寬、傳送的延遲、數據的丟包率等。在網絡中可以通過保證傳輸的頻寬、降低傳送的延遲、降低數據的丟包率以及延遲抖動等措施來提高服務質量。設定步驟 Set.1 設定ACL Router(config)# access-list 100 permit ip host 192.168.1.1 any or Router(config)# ip access-list extended SSLVPN Router(config-ext-nacl)# permit ip host 192.168.1.1 any Set.2 設定class，

筆記

Laravel 假資料產生工廠

你知道 Faker [https://github.com/fzaninotto/Faker] 嗎？我知道我知道！！打 LOL 的那個 Faker 是 PHP 產生假資料的 library 他的功能非常強大，幾乎可以應付你所有的需求，不管是文字、數字、圖片、人名只要你想得到的都可以產生出來，那麼就來看看 Laravel 怎麼產生假資料吧。資料庫結構在開始之前，先讓我們來產生一張 Articles 這張表來當作範例。 php artisan make:migration create_articles_table Schema::create('articles', function (Blueprint $table) { $table->increments('