一群棒子

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 內會有樣式互相覆蓋的問題。

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

Cloudflare

Cloudflare + Heroku 部署流程

簡單的筆記如何將 Domain Name Server 託管給 Cloudflare 將網址公開對外。 Cloudflare 先建立一個專案，並且將 Domain Name Server 給 Cloudflare 託管 Heroku 在 settings 頁面建立一個 SSL Certificate 在Domains區塊建立對外的 Domain Name 回到 Cloudflare DNS 分頁建立 CNAME Name 輸入剛剛在 Heroku 建立的對外 Domain Name名稱 Content 則輸入 Heroku 自己建立的專案名稱網址 ${project_name}.herokuapp.com 打開 HTTPS 如果你有需要的話

WordPress

WordPress 使用 add_rewrite_rule 方法建立一個新的 route

在許多的網頁框架當中要建立一個 route 並不是一件困難的事情，可是在 WordPress 當中並不是很直覺，這牽扯到了 WordPress 的運行機制。那麼你會說 permalink 不能夠滿足你的需求嗎？就程式面來說確實不夠彈性，對我來說。例如：一個 url 要顯示滿足條件的文章內容，條件來自於 acf 欄位的值，以permalink 確實沒法辦到，所以就自己寫程式解決。程式碼要自己開一個客製化外掛，還是寫在子版型內都可以，只要 hook 有被呼叫到就可以了。 function bonze_add_rewrite_rule() { $categories = ['classrooms', 'people', 'projects', 'reports', 'videos']; foreach ($categories as $category) { add_rewrite_rule("^({$category})/(\d+

Docker

.drone.yml 設定檔範例

將.drone.yml的檔案放在專案的根目錄下，這樣 drone 的伺服器接受到 GitHub、 Gitlab時，會去讀取專案底下的.drone.yml，才知道流程該怎麼走。 .drone.yml的設定範例： pipeline: build: image: node:latest commands: - npm install - npm run build deploy: image: tmaier/docker-compose:latest commands: - docker-compose up -d --build - docker rmi $(docker images --filter "dangling=true" -q --no-trunc)

Docker

Nginx 反向代理 drone 的設定檔

server { listen 80; listen [::]:80; server_name drone.a-wei.tw; location / { proxy_set_header X-Forwarded-For $remote_addr; # 這些設定要記得加，不然資料帶不到裡面的伺服器 proxy_set_header X-Forwarded-Proto $scheme; # 這些設定要記得加，不然資料帶不到裡面的伺服器 proxy_pass http://127.0.0.1:3000; # 看 drone 服務在哪 } }

Docker

GitHub 專案跑自動化測試與部署：drone

這邊直接使用 Docker 的方式建立 drone 的環境。下方的設定檔是 docker-compose.yml 的範例： version: '2' services: drone-server: image: drone/drone:latest ports: - 3000:8000 # 外層的port：drone server 的 port - 9000:9000 volumes: - ./data:/var/lib/drone # drone 的資料庫 restart: always environment: - DRONE_OPEN=true - DRONE_HOST= {{}} # 實際對外的 HOST（

ruby

Middleman How to Localization Data Files

Middleman 是 Ruby 語言撰寫的框架，用於快速地產生靜態網頁，記錄使用 middleman 用到 data files 功能如何搭配 i18n 實現多國語言。啟用 i18n 功能 Localization (i18n) 寫到 config.rb 內開啟 i18n 功能，個人的配置如下 activate :i18n, :path => "/:locale/",:mount_at_root => :en 意思就是主語言為 en 並將對應的語言放置於自己的資料夾內，輸出資料如圖：啟用 Data Files Data Files 照官方文件使用起來也沒有太大難度，資料夾放在專案根目錄，只要重新啟動 middleman

Language

Nuxt.js SSR記憶體溢出

最近公司的產品在伺服器經常遇到當有大量的請求時，伺服器記憶體的使用量會急遽的往上提升。以正常的GC運作方式，理論上經過一段時間後，這些資源應該要立即收回，但卻發現並不是這一回事，導致伺服器經常當機。這個問題困擾了我們對於整個產品的後續維護，因此我開始著手進行問題排除，經過排除後有幾點想將它記錄下來，以免在花同樣的時間除錯。禁止在伺服器寫下這些程式 setInterval and setTimeout 記住別在伺服器上寫下event loop，因為你沒有機會在任何地方可以取消它們，儘管你知道要取消，因為在Nuxt SSR的hook中，並沒有提供這樣的鉤子讓你解除。在beforeMount之前所有的鉤子都會在Nuxt SSR執行，但很可惜的是之後所以的hook(destroyed)這類的，都不會在伺服器端執行，這意味著你只能做一次性的程式碼執行。請確認插件是否必須在伺服器上運行請確認你想要裝的插件是真的必須在伺服器做完在交給客戶端嗎？有些套件其實是可以交給客戶端自行處理的，比如像是bootstrap-vue，如果你將它放在伺服器端處理，這意味著它會在伺服器中運行，並且常駐在記憶體中。必須確認arrow function是否有影響到global 請確保this不要指向到global，否則只要node的程式不關閉，你的程式碼將會常駐於記憶體中。