前言

延續上一篇「幫 QR Code 加上背景圖，別只留下黑白！」，因為只需要一個輸入框輸入網址、以及上傳一張圖片，想了想感覺就很適合透過 LINE Bot 來幫忙產生，以下就來跟大家介紹一下這次開發時的一些註解～

NodeJS repository: https://github.com/louis70109/qrcode-background-generator

來自 chatGPT 的說明：它可以生成一個帶有背景圖片的 QR code。這個 QR code 產生器可以通過 GitHub 上的項目連結 https://github.com/louis70109/qrcode-background-generator 來使用。特點是，它可以讓使用者自行選擇背景圖片，並在其上生成一個具有特殊圖案的 QR code，使 QR code 看起來更具吸引力和美感。這個 QR code 產生器可以給您的商業或個人項目帶來更多的創意和更佳的用戶體驗。

前言

前幾天在 FB 社群中意外的點到貝克菜 FB 中分享的內容(範例如下)，其中寫到：「讓你的 QR Code 更符合品牌形象，而不是停留在黑白」。

它可以讓你自行選擇背景圖片，使 QR code 看起來更有設計感和美觀。這對於您的商業或個人項目來說，可以提高曝光率和吸引力，並提高用戶體驗。

前言

有時我們在開發一些前端頁面，串接一些平台服務並需要是 https 在瀏覽器上顯示，不過這對一些前端開發者，或是像我這種還沒有 Server 的人來說就很困擾，以下就介紹一下如何在 Mac 本地端使用，最後再使用 vite(Vue) 做範例。

前言

因為放在 bucket 上的檔案預設是用 utf-8 上傳，但如果是中文字變成亂碼。因此想說好看一點，在後端上傳前把東西都先用 big5 encode 完後再傳到 bucket，檔案看起來就正常了

• video.js 前端若用 localhost 會拉不到影片
  • 至少要用 IP 的方式開啟才能讀到影片跟字幕
• 如果 字幕檔 是抓遠端 bucket，會遇到 CORS 的問題
  • 本篇使用 blob 的方式建立一個暫時的網址給字幕使用

前言

這幾天很流行一個點擊迷因貓的網站 - popcat，用戶可以透過點擊的方式來讓自己國家加分數，而昨天台灣本來還在第五名的位置，在寫文章的同時已經在第二名了(此時下方的名次好像卡住)。

近期也剛好在研究 headless browser 的內容，可以模擬用戶點選瀏覽器畫面，常見是使用在模擬測試等等，但既然現在是要搶金牌，那當然是直接拿來幫忙搶金牌啦！

• popcat Twitter: https://twitter.com/PopCatClick
• GitHub: https://github.com/louis70109/popcat-automation

前言

近期在想活動時想到之前有做個彈幕機器人，異想天開下想說在上面加個投票系統，不過為求方便想快速完成，因此想說用 Docker 啟動一個 Redis 來做個 PoC，因為當初為求前後端方便彈幕機器人就使用全 js 的方式撰寫，在很直觀找到最多星星的 Redis 套件 - node-redis，以下就分享我被 callback 雷到的經驗ＸＤ

前言

在 Vue 3 出來之後我有嘗試了一下新的功能，結合 LIFF 做了一個 side project - Announcer-Vue，當然也有寫了一篇相關使用的文章 在 Vue3 中引入 LIFF 的 ShareTargetPicker 分享 FlexMessage 訊息給 LINE 好友，那既然會用了，當然也要來了解一下一些 Composition API 的介紹，那以下就是我去參加 Kuro 的簽書會所聽到的內容。

前言

過年前收到了預購的 Vue.js 3 書，除了支持以外也希望透過紀錄把看過的東西在寫下來加深印象，以下就分享一些我看的過程中覺得有學習到的部分。

前言

最近在各個地方學到到一些 JavaScript 的小技巧，練習過後快速寫一篇小文章記錄下來 📖，也把一些實際上有用到的小技巧一併記錄下來分享給大家。

前言

在寫 Javascript 時一定會看到有套件或是範例有使用到 callback function，在過往的 coding 過程中最擔心的問題就是遇到 Callback Hell(也就是俗稱的波動拳)，最常見的範例為：

doSomething(function(result) {
  doSomethingElse(result, function(newResult) {
    doThirdThing(newResult, function(finalResult) {
      console.log('Got the final result: ' + finalResult);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

Sample from MDN

為了降低波動拳的出現機率，因此就就誕生了 Promise 來幫忙處理 Hell world 的問題，至於如何處理就透過接下來就說明並介紹用法。

前言

有一次在網路上閒逛的時候看到了這篇部落格，裡頭透過一些簡單的敘述來展示 Typescript 跟別人不太一樣的地方，也說到一些需要注意的眉角，這次文章則含有些許的文章翻譯以及個人評述在裡面，以下就開始吧！

三個項目

前言

我對這錯誤的印象是某次在練習寫測試時裝 jest 後出現的，檢查了package-lock.json後看起來jest-haste-map這個套件有用到 fsevents，而之後使用npm install或者yarn install皆會出現以下這個訊息：

環境為 Mac OS Catalina version 10.15.2

看起來是在執行階段時node-gyp出了問題，接著它自己重新執行了node-gyp rebuild後出錯，起初我認為是套件的問題並找到了這個回答並執行:

sudo npm uninstall node-gyp -g
sudo npm uninstall node-gyp

但從來沒有全域安裝node-gyp過，也有些網友執行node-gyp configure是可以的，而我執行後還是失敗，狀態跟這個 issue 差不多。

後來看到 fsevents 在套件說明裡有寫到:

The FSEvents API in MacOS allows applications to register for notifications of changes to a given directory tree. It is a very fast and lightweight alternative to kqueue.

並且注意到剛剛圖裡面有訊息是跟 xcode 以及 apple 相關，最後找到了這個 issue

我的解決方案

有些人可能是有重灌或環境重設導致沒有安裝 xcode，此時只要執行 xcode-select --install 即可(參考說明)。

這邊我使用的解決方案為這個 issue，執行以下兩個指令來重新安裝 xcode:

sudo rm -rf $(xcode-select -print-path)
xcode-select --install

原因可能是因為我重舊版本向上更新之後 xcode 沒有相容當前版本，所以我使用以上指令來刪除重新安裝。

不過這個指令很暴力的使用 rm -rf，使用它相對危險，使用前請詳閱公開說明書 😆。

結論

為了練習測試安裝了 jest 卻讓我看著一堆 warning 實在是恨得牙癢癢，所幸目前這樣解決完後是可以用的，就看接下來些新的 side project 後會不會有其他問題再來更新，

另一方面也可能因為我在寫 side project 時安裝了一堆有的沒的東西導致這個結果，看來也得找時間來整理一下環境了～

參考

清除 npm 快取