筆記 - 一群棒子

筆記

Heroku 專案安裝字體

紀錄如何在 Heroku 上安裝字體檔。

筆記

MacOS 升級 missing xcrun

MacOS 升級使用 command line 工具都會碰到 xcrun: error 的錯誤訊息導致 git 無法使用，筆記如何解決這個錯誤訊息免得每次升級都要重新搜尋解決方法。

筆記

Yarn build fatal error: ineffective mark-compacts near heap limit allocation failed – javascript heap out of memory

筆記碰到 yarn build 時遇到 javascript heap out of memory 的處理方式。透過 terminal 調高 Node 記憶體使用上限處理。

JavaScript

設計模式 Mediator

當同一個物件，之間會有頻繁交互作用時，透過中間人與參與者來進行溝通是一個很適合使用情境。例如：多個玩家與計分板、聊天室與多名使用者。只要是需要中間一個協調者來參與都是中介者模式的好時機。

JavaScript

設計模式 Strategy

當面對很多不同境境時採取不同的策略，例如：根據距離決定使用何種交通工具、不同的運送快遞有不同的金額計算方式、甚至是複雜點的表單驗證器、回合制戰鬥設計等，這個時候可以使用策略模式來設計物件。

JavaScript

設計模式 Singleton

筆記設計模式 singleton 的實作方式，用 JavaScript 來撰寫範例 code 未來有機會用到時可以回來看。

筆記

Ruby on Rails 使用 draper gem 實現 decorator design pattern

Ruby on Rails 使用 draper gem 實現 decorator design pattern 的一些用法以及一些筆記，方便某天忘記時可以回過頭來看。

Ruby on Rails

Ruby on Rails delegate model

紀錄 Rails 開發，在 Model 上使用 delegate 的情境。

JavaScript

JavaScript 瀏覽器端產生 csv 檔案

撰寫一個簡單的物件，在瀏覽器端處理資料並且下載 csv 檔案的筆記。

筆記

CKEditor 4 預設 table responsive

筆記如何在 CKEditro 4 中處理 table 元素加上 html class 並且預設寬度 100% 解決 responsive 問題，使得版面不會破版。

筆記

Crontab Node.js 讀取不到 dotenv 路徑的解決辦法

最近在伺服器上遇到一個很奇怪的問題，不管怎麼寫就是沒辦法讀取到 .env 的環境設定，後來想到的解決辦法。

筆記

CSS 控制 SVG 顏色

在製作網站上面，很多時候 icon 都會使用 svg 檔案來顯示，好處就是就算是放大縮小也不需要擔心失真的問題。通常拿到 svg 檔案時，在前端使用之前都會先進行一陣加工，像是移除空白的 group 標籤不過最常用的就是，svg 檔案，顏色隨著 parent css 一起改變，這個時候可以將 fill 與 stroke 改為 currentColor 如此一來顏色就會隨著 css color 一起改變了。

Nuxt

Nuxt layout import 不同的 css

突然遇到了一個比較特殊的狀況，想要將兩包 vue 檔案整合進一個 nuxt 專案，各個 vue 檔案已經有了 css 樣式，如果全部都整合進 global css 內會有樣式互相覆蓋的問題。

jQuery

jQuery prop vs attr

最近因為寫了一個套件必須更改 HTML 的狀態，所以一直在跟 jQuery 的 prop() 跟 attr()`之間打轉，以往都是需要用到才去查用法，一時之間還真的不清楚的差別在哪裡。

筆記

WordPress 上傳圖片至 S3

WordPress 透過外掛 Offload Media Lite 將既有的圖片上傳至外連空間。簡單的外掛組合技，讓你不需要花錢買外掛功能。

筆記

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

筆記

禁止 Google 翻譯特定元素

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

筆記

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 插件開發技巧

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

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 過寬而造成捲動軸

相信在寫前端樣式時時常都會遇到一個問題，就是元素過寬造成出現捲動軸或是手機可以拖移至螢幕外諸如此類的問題，最土法煉鋼的除錯方式就是一層一層地慢慢下 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 非同步大亂鬥

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

筆記

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