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
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
筆記 如何除錯元素 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
筆記 從零開始的機器學習生活 – 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.
筆記 從零開始的機器學習生活 - 機器學習的種類 你是否會有個疑問到底機器學習 (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
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.
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
筆記 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('
筆記 Laravel CKEditor 整合 Laravel file manager CKEditor 一直是我很愛用的編輯器，功能強大擴充套件也很多，設定也很詳細，在之前我使用的 CMS 內都已經有整合好 CKEditor 現在到了 Laravel 要接上這個功能還真是花了不少時間。 那麼終於處理好 CKEditor 之後有另一個需求，我該怎麼上傳檔案？不可能寫文章內容都不會有圖片吧，也不可能叫使用者自己去上傳檔案再貼網址到內容，這操作流程對使用者一點也不友善。 流程 * 安裝 CKEditor * 將 CKEditor 套用到我們的 textarea * 設定 CKEditor 上傳使用 Laravel file manager 安裝 CKEditor 如何安裝 CKEditor 網路上已經有很多教學了，我個人是使用 laravel-admin [https://github.com/z-song/laravel-admin] 當作我的管理後台，所以安裝 CKEditor 你也可以去看他的教學，
筆記 Laravel Eloquent Date Restrictions 時間限制 當我在們撰寫 Laravel Eloquent 經常會遇到一個情境，就是時間 上的對比這件事情，例如：這篇活動公告是否在活動時間內，那麼我們可以預想的到，這個活動可能會有個 起始時間 與 結束時間 剩下就是時間運算的程式撰寫。 實際案例 我有一個活動的首頁輪播，使用者在上架時必須要填寫這張圖片的 起始時間 與 結束時間 如果 現在時間 還未到 起始時間 或是超過 結束時間 就不會顯示出來。 那麼為何有這樣的需求呢？~~因為懶~~ 因為未必會有人想在半夜進到網站後台發表資料，一定會想先一次上好，再來等時間到程式幫我們發佈出來就好。 程式碼撰寫 時間限制 邏輯 在此之前要先 感恩 Eloquent 讚嘆 Eloquent 讓我可以不用寫 SQL 語法就可以搞定事情。 app/Http/Controllers/HomeController.php namespace App\
筆記 [工具] MAMP Apache 如何開啟 Virtual Host MAMP 在 Windows 以及 Mac 上是一個非常好用的網頁架站懶人包，既然在本機開發你應該不會一次只有一個網站，可以使用 Virtual Host 建立多個假的網址在本地端開發，是相當實用的一個功能。 設定 以下為Mac為例 在開始之前我們必須先將 MAMP 的 port 號設定為我們常用的 port 如下 如果你沒有更改過安裝目錄的話設定檔路徑為 /Applications/MAMP/conf/apache/httpd.conf 找到設定 # Virtual hosts # Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf 我們將註解拿掉讀取設定 # Virtual hosts Include /Applications/MAMP/conf/apache/extra/httpd-
PHP [PHP7] 陣列排序 輸出資料給前端前有時必須要資料處理，舉個例子：一份履歷表須列出公司名稱、到職時間、離職時間，必須要照到職時間的先後順序排列，此時就可以使用陣列排序。 範例 $sort_array=array(); // 學校名稱 1 $sort_array['0']['school']=$profile->field_resume_school_name1['und'][0]['value']; // 入學日期與畢業日期 1 $sort_array['0']['time']=$profile->field_school_time_1[
Drupal [Drupal 8] 實作上下一篇連結區塊功能 在部落格的文章當中，時常會看到上一篇、下一篇的連結功能，這個需求其實也算是很常見，在 Drupal 7 中，常常使用 Flippy [https://www.drupal.org/project/flippy] 這個老牌的模組，可是到了 Drupal 8 這個模組根本就還沒有 8 的版本可以使用，這個時候只能尋找替代方案或是，自己動手作一個來吧。 模組的選擇？ * Entity Pager [https://www.drupal.org/project/entity_pager] 確實很多老模組還沒有升上 8 是讓人很頭疼的事情，可是也因此會找到很多很酷炫的模組，目前找到了一款可以替代 Flippy 的模組，Entity Pager 正是可以完全實現 Flippy 功能的一個模組，這個模組顧名思義，就是使用 views
css CSS 選擇器 與 正則表示法 當我們在撰寫 CSS 樣式時，通常都是使用 id 或是 class 來當作選擇的選項，些時候以上兩種方式並沒有辦法滿足我們的需求，所以我們可以抓取 HTML attribute，或是使用正則表示法來抓取 HTML 元素。 範例 HTML 架構 <div class="wrap"> <a href='/more'>read more</a> <div id="im-item1" class="item">item1&
Drupal Drupal 8 麵包屑爬坑紀錄 Drupal 8 正式版到現在已經快兩年了，7 常用的模組很多都已經有 8 的版本，甚至是已經直接納入核心之內，到現在就還是沒有 Path Breadcrumbs 8 的版本，實在是讓人很頭大，所以只能尋找其他替代的模組來實做這個功能。 代替模組的選擇 * Easy Breadcrumb [https://www.drupal.org/project/easy_breadcrumb] * Menu Breadcrumb [https://www.drupal.org/project/menu_breadcrumb] * Current Page Crumb [https://www.drupal.org/project/current_page_crumb] * Views breadcrumb [https://www.drupal.
![[工具] MAMP Apache 如何開啟 Virtual Host](https://bonze-blog.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2018/03/25004222/ffffff.png)
![[PHP7] 陣列排序](https://bonze-blog.s3.ap-northeast-1.amazonaws.com/wp-content/uploads/2018/02/25004209/usort.png)
