Tagged

筆記

A collection of 26 posts

WordPress 搬遷至 Ghost CMS
筆記

WordPress 搬遷至 Ghost CMS

沒錯,我們搬家了!拖了好久終於從 WordPress 搬家到 Ghost 上了,拖延了一年多沒有寫文章後終於有了新的動力。 簡短說明一下原因: 太多的技術債了,大部分是伺服器(都是我自己搞出來的🤡) Markdown 一直被轉存為 HTML(這個我超怒) 版型懶得重寫 速度有夠慢 我只想好好寫部落格 簡單來說,我很懶 要是有人需要從 WordPress 轉到 Ghost 上,可以參考我的筆記 事前準備 WordPress 安裝 Ghost 外掛 安裝 Categories to Tags Converter 將分類轉為 Tag 如果你有詳細看他的外掛說明 Tags will be migrated, but not categories. If needed you

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

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

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

禁止 Google 翻譯特定元素
筆記

禁止 Google 翻譯特定元素

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

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(

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

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

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

Chrome Resource Override 插件開發技巧
筆記

Chrome Resource Override 插件開發技巧

身為前端工程師通常都習慣在本地開發程式,大多的專案都是 HTML CSS JavaScript 三者成一組,所以在開發上本機還原也是相當簡單的,如果專案是因為環境上的因素無法在本機還原呢?像是程式必須在測試機才看得到效果、又或是使用 JSP 輸出 HTML 模板而你又無法安裝 JAVA 環境,這時在開發上就有點綁手綁腳了。 Resource Override 遇到這種情況我都會使用 chrome 的插件 Resource Override 使用起來也是非常的直觀,在你的開發面板會看到一個新的分頁,Overrides 他可以做到 URL 對 URL URL 對 程式碼 插入程式碼 修改請求 Headers 適用情境 本地端不想/無法還原,只能在線上端觀看結果 組合技 一開始覺得不段貼上程式碼很沒效率一直想有沒有更快的方式,其實 URL 對 URL 這個 Rules 可以接受本地端的路徑,

JavaScript 使用 Web Speech Recognition 語音辨識
JavaScript

JavaScript 使用 Web Speech Recognition 語音辨識

最近工作上有實作到語音辨識輸入這功能,不過在文件上並不是那麼清楚所以寫一篇筆記來紀錄事件觸發的順序。  瀏覽器支援度 可以用 Can I use 這個網站看看瀏覽器的支援度,恩..基本上只有 Chrome 有辦法使用。手機更不用說了 iOS 全滅只有 Android 手機有辦法使用。 判斷是否有支援語音辨識可以用以下程式碼 window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition if(!window.SpeechRecognition){ return } const recognition = new SpeechRecognition() 如果你直接 new SpeechRecognition() 就會 Uncaught ReferenceError: SpeechRecognition is not defined 事件觸發順序 礙於文件上的翻譯不完全,就字面上也不太清楚何時會觸發所幸自己直接全部都盤過一遍。 語音辨識正確的事件順序 onstart onaudiostart onsoundstart onspeechstart

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

JavaScript 非同步大亂鬥
JavaScript

JavaScript 非同步大亂鬥

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

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

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

在前面幾篇文章補足了一些基本知識之後,接著我們就可以進行一些基本的練習,本次做的是透過機器學習辨識顏色,下面將會附上程式碼以及 github page。如果你是 IOS 12 或是 Android 9 這些較新版本手機使用者,會有無法運算的 BUG 存在,只能靜待修復了。 資料 在寫程式之前,我們先談論關於資料來源這件事情,你可以自己收集資料、根據規則用程式產生資料(ex:衣服尺寸表)或是用 google 的 Dataset Search 本次的資料來源則用教學 CodingTrain 的顏色資料。 程式範例 先上 demo 以及 github 本次一起使用 P5.js 來實作,以下只貼出 js 的部分。 let data let colors = [] let xs,

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

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

看到 js 就知道肯定跟瀏覽器脫離不了關係,在 2018 TenrsorFlow Dev Summit Google 發表了 TenrsorFlow.js 這種黑科技實在是屌的飛起啊,瀏覽器都可以機器學習代表著有更多的應用,有興趣的可以看看以下影片。 Parcel.js 快速打包工具 Parcel.js 是一套快速的打包工具,至於有多快速看看他的官方簡介就知道了安裝也只要 npm install -g parcel-bundler 詳細可以觀看 快速开始 有了 Parcel.js 可以讓我們很方便的開發單一頁面的網站如果要開發大型網站還是使用其他工具會比較好。 TensorFlow.js 接著我們就可以安裝 TensorFlow.js 如果你是初始的專案你可以直接 yarn init -y 或是 npm init -y 初始化專案之後就可以直接 yarn add @tensorflow/tfjs

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

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

你是否會有個疑問到底機器學習 (Machine Learning) 到底是怎麼讓電腦學習的?如果籠統地跟你說就是一堆數學、演算法、統計學、向量、微積分諸如此類的東西,如果全都很陌生…沒關係我也不會XD我也不會跟你說一堆數學公式,如果有興趣可以去看 機器學習你也可以 – 文組帶你手把手實做機器學習聖經 悔恨當初沒學好數學啊。 機器學習的方式 必須要先知道兩個名詞 資料(features) 身高體重等這種餵給機器學習的資料集 標記(label) 資料的答案 到底機器怎麼學?機器學習的方式約能分為三大類 監督式學習(Supervised learning) 非監督式學習(Unsupervised learning) 強化式學習(Reinforcement learning) 監督式學習(Supervised learning) 顧名思義,你必須要一樣一樣的告訴他正確答案久了他才會知道這是什麼東西,就跟五歲小朋友一樣:那是什麼?那是車子那是什麼?那是房子…監督式學習的資料必須要有 標記 (年齡、性別、

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

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

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

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 整合 Laravel file manager 的部分,或是 File Manager Integration TL;DR 如果你有看過官方文檔 你可能會瞄到 fileUploadRequest 這個事件,那麼我必須告訴你這個事件他原生的上傳插件是不會觸發的。 你必須要額外安裝 Upload Image 才會觸發 fileUploadResponse 所以如果你是掛 CDN 要本地安裝插件 請看 CKEditor CDN 。 所以最後你的 code 可能會長這樣 this.instance.on('fileUploadResponse',

Laravel 假資料產生工廠
筆記

Laravel 假資料產生工廠

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

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 當作我的管理後台,所以安裝 CKEditor 你也可以去看他的教學,在這邊只提出一些重點。 在之前你要先在你 blade 引入 CKEditor 的 js 接著套用到我們的

Laravel Eloquent Date Restrictions 時間限制
筆記

Laravel Eloquent Date Restrictions 時間限制

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

[工具] 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['und'][0]; // 學校名稱 2 $sort_array['1']['school']=$profile->field_resume_

機房搬遷紀錄
筆記

機房搬遷紀錄

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