筆記

MacOS 升級 missing xcrun

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

Ruby on Rails

Rails 使用 Pundit 權限管理

使用 pundit gem 當作權限管理的物件，透過一些簡單範例來理解使用方法。

筆記

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 記憶體使用上限處理。

Ruby on Rails

Rails 使用 concern 幫 model 減肥

當我們一個專案開發久了，一定會遇到單一 model / controller 肥大的問題，某些情境才使用的 class / instance methods 如果全都放在單一檔案內看起來又有點礙眼，很想把相似的功能放在一起管理。這個時候我們就能使用 concern 來幫我們的 model / controller 減肥

JavaScript

設計模式 Mediator

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

Ruby on Rails

Rails Webpacker not detecting change

紀錄一次 Rails 6 Webpacker 沒有 watch 到 vue 檔案變動，導致 assets:precompile 沒有正確的編譯出檔案問題。

JavaScript

設計模式 Strategy

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

JavaScript

設計模式 Singleton

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

Ruby on Rails

Rails 安裝卡 pg -v 1.2.3

用 ruby 2.7.3 安裝 rails 時碰到卡 pg 這個 gem 安裝不起來的問題，筆記解決方法，如果未來碰到類似的問題，可以回來參考這篇筆記解決。

Ruby on Rails

Rialls 5 移植 CoffeeScript 到 Webpack

升級 Rails 5 之後接著處理要把 webpack 取代了原本的 sprocket ，紀錄遇到的問題。

JavaScript

Jest 如何 mock localStorage

在撰寫測試經常會需要 mock window class 的操作，例如預期呼叫 alert 啦，呼叫 localstorage 等，那麼為何只是說要呼叫呢？ 因為很多時候要測試的是有沒有預期的執行，而不是執行過後的結果是什麼，例如 alert 期望他被呼叫到，而結果是啥並不重要

JavaScript

JavaScript hoisting

重新複習一下 JavaScript 一些奇怪的機制，例如 hoisting，很多面試題目照著直覺下去寫答案往往都沒有跟想像中一樣簡單，所以就來重新了解一下 hoisting 機制。

JavaScript

JavaScript undefined 與 null 的區別

紀錄一下 JavaScript undefined 與 null 的區別

伺服器

Docker container random crash

記錄追蹤 docker container 隨機 crash 時碰到的一些狀況與紀錄。最後發信問題解決的辦法。

筆記

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 的情境。

Ghost CMS

Ghost CMS casper theme 開啟 dark mode

Ghost CMS casper theme 如何開啟 dark mode

JavaScript

運用 JavaScript ES6 的 Map Object 寫錯誤 mapping 表

如何潮到飛起的運用 JavaScript map object 製作一個錯誤訊息的 mapping 表，優雅的管理錯誤訊息。

JavaScript

JavaScript replace a file input with a Blob

JavaScript 使用 Blob 物件，取代 file input 檔案的實作方式。

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 一起改變了。

Vue

Vue 直接 call filter 的使用方法

使用 vue2 當中經常會用 filter 來處理資料顯示的格式，好處是不會動到原本的 data，通常都會將方法全域註冊在 vue 中，如果每個 component 都要定義一遍實在是不夠 dry 。

Nuxt

Nuxt layout import 不同的 css

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