Tagged

筆記

A collection of 42 posts

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
如何除錯元素 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/
JavaScript 非同步大亂鬥
JavaScript

JavaScript 非同步大亂鬥

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

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

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

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
筆記

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 你也可以去看他的教學，在這邊只提出一些重點。 在之前你要先在你 blade
Laravel Eloquent Date Restrictions 時間限制
筆記

Laravel Eloquent Date Restrictions 時間限制

當我在們撰寫 Laravel Eloquent 經常會遇到一個情境，就是時間 上的對比這件事情，例如：這篇活動公告是否在活動時間內，那麼我們可以預想的到，這個活動可能會有個 起始時間 與 結束時間 剩下就是時間運算的程式撰寫。 實際案例 我有一個活動的首頁輪播，使用者在上架時必須要填寫這張圖片的 起始時間 與 結束時間 如果 現在時間 還未到 起始時間 或是超過 結束時間 就不會顯示出來。 那麼為何有這樣的需求呢？~~因為懶~~ 因為未必會有人想在半夜進到網站後台發表資料，一定會想先一次上好，再來等時間到程式幫我們發佈出來就好。 程式碼撰寫 時間限制 邏輯 在此之前要先 感恩 Eloquent 讚嘆 Eloquent 讓我可以不用寫 SQL 語法就可以搞定事情。 app/Http/Controllers/HomeController.php namespace App\
[工具] MAMP Apache 如何開啟 Virtual Host
筆記

[工具] 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-vhosts.conf
[PHP7] 陣列排序
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[
機房搬遷紀錄
筆記

機房搬遷紀錄

前一陣子，因為工作的因素，有幸加入了一個機房搬遷的案子， 在這邊順手紀錄一下，一個伺服器機房要搬遷需要準備些甚麼。 談判&討論 是的，你沒看錯第一件事就是談判，要先跟負責人喬定，哪些設備要搬到新機房，哪些設備又要下架或者移去別的地方。 接著要討論新機房的配置，並且確定哪些設備要上架到哪個地方，要不要建立新機房…等等問題。 這一步驟，就佔了整體搬遷時間的大多數時間，也是搬遷時順利不順利的關鍵， 很不幸的我是後期才加入近來，只參加到後面2.3場討論，但也足以讓我看清這部分的重要性。 清點設備&查線 接著就是清點舊機房的所有設備了，這邊要注意的有以下幾點: * 設備有無滑軌 * 設備的名稱 * 確認該設備的ip * 設備的U數 確認好以上幾點，舊機房的清點也就宣告完結，當然以上就短短幾字，執行起來還真的差距頗大， 光是要跟客戶確認該設備=該ip就花了不少時間，有時候還有可能遇上忘記帳號密碼等等的囧事。 > U是一種表示伺服器外部尺寸的單位，是unit的縮略語，詳細尺寸由作為業界團體的美國電子工業協會（EIA）決定。 機櫃的高度通常以”U”作為單位，”U”
bug

表單送出無回應?

今天實際上又碰到個案例，其實這個問題幾個月前碰過一次，可是當時沒有時間去好好研究問題，這次終於知道原因了，藉此快點筆記起來 情境 我有一個很多選項的表單，當我按下送出，程式運作是正常的，可是系統並沒有收到任何資料。恩..當下畫面也沒有顯示出任何錯誤訊息。那麼我是怎麼知道原因的呢，萬變不離其宗…查 log 。 PHP Warning: Unknown: Input variables exceeded 1000. To increase the limit change max_input_vars in php.ini. in Unknown on line 0 這個參數的意思就是，表單可以送出 GET 或 POST 給 PHP 的最大上限量。 解法 看到這裡，解法在