WatchMeCode

最近終於忙到一個段落，一部分的心力在研究 tauri，在看 rust 及摸一下 swift，另一部分的心力在整理以前寫的一些專案，那這次來寫 React Chrome 套件 v3 版本的建置。

相信有在前端處理過聲音想看振幅應該都有使用過 waveSurfer.js，他算是目前畫聲音振幅最全面的套件，但是該套件目前在手機上的效能其實老實說不太好，假設你要使用手機進行錄音的話，這陣子有在處理類似的案子，那這篇是我的一些經驗。

距離上次寫文章，又過了一陣子，主要是公司最近一兩個月實在是滿忙的，一坐起來，不是去廁所的路上就是下班，這次想說來寫一下 zustand，一個管理狀態的 lib，現在在 React 群裡，是真心滿夯的，畢竟就真的很簡單可以做使用，相較於 react-redux。

最近這幾個月又是處在很忙的一個狀態，除了日常運維之外，一部分是在忙著把公司核心的前端頁面從 Vue 改成 React，所以這篇文章來打一下，我的一些想法。

這篇主要是想記錄一下自己對 blocking (阻塞) 及 non-blocking (非阻塞) 的一些知識，畢竟如果忘掉，還可以快速的回來瞧一下不是挺棒的嗎？

此篇主要是介紹如何將 Strapi 部署到 AWS Elastic Beanstalk 上面的流程，快速地打造 Strapi 的後台，影片是我之前錄的，主要是我想自己留存，也希望能教導公司後續的工程師如何去實作這部分有所幫助。

目前公司使用 js 的專案，除非比較早期的，後期大部分我經手過的專案我都已經慢慢將其轉往 ts 了，看重的是他配合 vscode 之類的 coding editor 的提示，儘管目前有另一派工程師再說使用 ts 會讓 js 喪失很多彈性，坦白說也的確如此，我自己認為可以根據不同的專案需求來做考慮是否使用，今天來寫一下我對 interface 及 type 使用上的差異。

有點久沒有更新我的程式 blog 了，最近專案比較多，稍微有點忙，最近在寫 Chrome Extension 公司的套件，也踩到了一些坑，前端真的越來越廣，meta 最近也推出滿不錯的 css-in-js 的工具 stylex，也可以觀察及研究一下看是不是能取代 tailwind，那今天其實想寫些比較簡單的概念，同時也是前端工程師幾乎都會使用到來優化程式進程的方案，算是加深印象？🧐

會寫這篇文章在於我在撰寫公司功能，運行後台功能時遇到 nodejs cpu 使用率超過 100% 的情況，這篇文章會介紹如何解決這問題。

最近專案在開發跟聲音有關的功能，要將聲音傳到後台讓 AI 做解析，但在聲音處理方面上出了點問題，產出來的音檔一直會有 dadada 的聲音，第一次遇到，CTO 是認為資料尾巴的封包有少，所以我就開始找原因，使用 audacity 的的確確能看到有一個固定頻率的斷點，且用 ffmpeg 去解析 header 也能正常解析，這邊記錄一下解決的過程。

因為一些原因，最近再將公司已經用 Vue 寫好的專案及工具，改用 React 重寫，React 跟 Vue 在更新上有比較大差異，這就是為什麼我會寫這篇文章的原因，闡述一些自己的想法。

最近做公司專案時，遇到需要使用 wasm ffmpeg, ffprobe 的情況，那我自己認為這種情況會越來越多，所以我想來探討一下 wasm 的使用情境，及如何使用 wasm，外加其實我最近也在花時間學習 rust 這語言。

此篇文章是之前自己紀錄並收錄在自己的 Notion 筆記內，一些關於 React 較困難部分的東西，初衷是希望自己能更快速的進入專案狀態，畢竟也有段時間沒使用 React 來開發前端了，所以比較偏向自己複習及學習用，內容大多使用英文撰寫及敘述。

今天來寫一下自己對 Web Component 跟 React Functional Component 的比較，並且將自己的想法寫下來，希望能幫助到大家。

過完年後，公司有新的系統需要我進行開發，以往打包我都是使用 webpack 來進行，而這次的專案我選擇使用 vite 來進行開發，一切都很順利，但是打包好，扔給後端 host 後，卻跑出了 Failed to load module script Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec。

跨完年後，又忙了一陣子，再弄一些雜七雜八的專案，今天來寫一下前端上傳檔案的文章，畢竟這幾乎是每個工程師都會遇到的，且大多數的情境，這都是簡單的，但是當今天上傳的檔案數是1000個呢？事情就可能稍微有點複雜了。

年末了，最近忙完了墨雨的兩個專案，一個是用 Nestjs Typescript 寫 API 並搭配 Vue 寫後台管理系統，總之就是活動報名、會員、寄信、檔期...一堆雜七雜八的功能，另一個則相對簡單，是用 Strapi CMS 弄的後台，最後包成 docker deploy 到 aws eb 的服務上面，由於都完成了，總算輕鬆一點了...。所以就花點時間來寫這篇文章，今天主要是要來介紹為何 unit test 很重要，會用我實際遇到的一個問題來說明。

相信很多人都有透過程式寄信，我們公司有早期使用 CodeIgniter PHP 框架的寄信系統，某天我同事發現一直都沒有收到信件，但是查看版本控制，又沒人進來修改程式碼，所以我就開始來幫忙排除問題。

這篇文章主要在介紹在各個服務容器化得當下，該如何使用 nginx 並且添加自簽的 ssl 認證來部署 react app，使用 docker 及 docker compose。

我目前寫程式習慣使用 vim 搭配 vscode，除了寫 Java 會使用到 intellij，坦白說這些都是很好用的工具，但是假如你今天僅僅是想在機器上，寫一些簡單的程式，並不需要額外其他的功能，那 tmux 搭配 vim 在 terminal 操作其實是滿常見的一種開發方式，又或著你今天是一個 AI 工程師，你需要駐存終端機上顯示的各項 training 資訊，但你又害怕手賤不小心關掉 terminal，tmux 有所謂 session 的功能相較於 iTerm2 之類的 terminal 能更勝任該角色...等，這篇文章就來介紹一下最基本 tmux。

當工程師也幾年了，在過程中，碰到越來越多複雜程式問題，也越來越常遇到無法透過第三方套件來進行實踐，畢竟功能較為獨特，大部分都必須一步一腳印地把功能刻出來，像是該如何實踐網頁的上一步，下一步(redo, undo)動作，如何搜尋文字並將其標註起來，文字編輯器(contenteditable)...等，今天文章想來講一下，搜尋文字並將其框選起來的功能。

在操作網頁時，我們常常需要儲存使用者的資訊，像是使用者的登入狀態、使用者的偏好設定...等，而這些資訊我們會將其儲存在 Cookie，LocalStorage 或是 SessionStorage 中，那麼這些功能究竟有什麼差別呢？

延續上次語音辨識的主題，此次遇到的問題是即使我們有使用之前製作的 Volume Meter 讓客戶自己能檢測麥克風聲音是否有輸入至後台，但我們從客戶後台拿到的數據仍是錯誤的，所以我的主管希望能透過前端產生一個 wav 檔案，來與後台的數據做比對，看看錯誤的原因在哪裡，接著我們就來實作吧。

會想寫這篇，主要是想記錄一下，自己對於這些技術的概念，以及它們的作用；畢竟自己在公司比較偏向做後台管理介面及工具，基本上就是 CSR 用一用就好，也不太用去管網站 SEO 方面的優化，WebAssembly，Meta...等，但如果之後想要做 2c 方面的網站，可能就要使用到 SSR 和 SSG 的概念。

延續上次語音辨識 32bits 轉 16bits 的 AI 的專案，這次我必須把麥克風音量測量功能也加到專案內，原因在於說假設客戶麥克風音源是錯誤的，我們也可以提供一個可視化的方式讓對方知道你現在麥克風是靜音的一個狀態，沒有輸入到我們後台的語音辨識系統裡面，這次我們就透過 AudioWorklet 來實踐這項功能吧。

在影像物件辨識的領域中，使用 opencv 將物件框起來是很常見的，但是仔細想想，假設客戶今天想過濾掉某個物件，又或著是想將物件融合起來，像是背著包包的人時，該怎麼辦呢？其實簡單講就是畫出來的框框不能直接輸出到影片中，而是要透過 json 的方式輸出給前端，這樣才能讓客戶可以透過前端的管理頁面自行操作，此篇文章教你如何使用 p5.js 搭配 videojs 繪製框框。

因為目前公司主要產品在做 AI 影像辨識及語音辨識部分的應用，那在語音辨識這塊，需要透過使用者操作網站透過麥克風及時將資料的 Sample rate 轉換成 16000 16bits 或 8000 8bits 的音頻資料，並將其提供給公司的語音辨識系統，這篇文章就來講解如何透過 AudioWorklet 將音頻資料轉換成 16bits 的音頻資料。

當網站越來越龐大，元件之間的耦合也會越來越多，測試也會越來越難複雜及難寫；今天我想來探討一下 Vue3 的 provide、inject 功能，及如何使他們能 reactivity，因為這是前端時常會遇到的問題。

目前公司有許多後台管理的頁面，大部分都由小弟我使用 vue 來進行建置；而說到後台管理頁面，今天想來聊聊這部分，以及我在撰寫時遇到的眉眉角角。

這一兩年跟墨雨合作接案以及運維自家公司的產品及網站，把自己搞得有點忙，平時雖然也有與公司同事討論程式甚至是教導他們，但處理到 JavaScript 比較精細的部分，還是稍嫌較少的，大多數都在討論如何完成專案，比較困難的部分也大多圍繞著演算法之類的東西，所以覺得自己 JavaScript 相對較深或容易搞混的部分有點荒廢了，畢竟實際用到的機會真的很少，那這篇文章主要敘述 Bind, Apply 及 Call 之間的差異，以及我對他們使用時機的理解；由於這篇因為也是從我的 Notion 筆記裡面整理出來的，會是以英文敘述。

2021年末到2022年初的幾個月，被主管要求要在 NUC 上面開發前端及後端的系統，因為後台需要跟硬體去做溝通，對我來講算是一次滿有趣的開發體驗，那這邊主要會講及紀錄一些在我開發時所遇到的眉眉角角。

去年墨雨設計的主管請我幫忙寫一個 AWS 合作推廣的文章，於是我就開始撰寫一些我平時時常使用的功能，像是 IAM, S3, Route53, Lambda, CloudFront, Lightsail, EC2, RDS...等的功能，那也於近期正式上架到 Creative Coding TW 的站台上面了，雖然因為潤筆的關係及我認為有些內容對於沒接觸過 AWS 的會稍微較難，所以很多內容都刪除了，畢竟是推廣的文章，但能讓自己的東西擺出去給人看到，對於我來說還是感到很開心的一件事，畢竟我也不是什麼 AWS 特別厲害的人，大多數我都必須上網搜尋或詢問較專業的人來獲得解答；那這篇文章我會著重在“前端”工程師如何能踏進 AWS 領域的這部分來進行講述。

手把手解釋及使用 AWS lambda serverless with swagger js document 來處理你在使用 aws serverless 時，同時可以透過 jsDoc 來產生API文件。

當網頁工程師也幾年了，後端寫到前端，前端寫到後端，不算菜也不算老的一個階段，除了自己公司網頁例行的維護及新案子，我也用下班時間兼做接案的工作，算是一種斜槓吧，所以我今天想跟大家聊聊如何增加自己的工作效率這議題，這篇會著重在我使用 vim 與 VSCode，雖然我本身是比較常使用 Jetbrains 的 IDE 啦😅，畢竟我有時需要寫到後端的 database，這時 VSCode 就顯得比較不方便一點，但是不得不說 VSCode 是一個很棒的 editor，我小案子還是滿喜歡使用它的️🙃。，目前已全改用 VSCode 來進行開發，資料庫 GUI 使用 tableplus（需付費，若不想付費可以使用 Sequel Pro），專案上近期都是需要在遠端主機開發居多，VSCode 在這方面實在是做得很好。

NodeJs 後端套件五花八門，前端有 Vue 及 React 可以做統一，但 NodeJs 的後端呢？如果引入一個統一的架構會不會比較好管理團隊及維護呢？這是前鎮子，墨雨設計的安凱及哲宇所提及的問題，畢竟每個工程師對程式碼也都有各自的想法及理解；而我自己私心的想法是認為，不論在好的框架都要試過了才知道是否能好好地契合整個團隊，於是近期最終宣布使用 NestJs 這個框架來進行專案上的開發，那今天就來介紹我認為這框架的魅力之處。

手把手解釋及使用 AWS lambda serverless function to generate image from HTML by using nodejs，並簡單介紹原理，讓你可以優雅的在 AWS 伺服器上產出圖片；此篇可能需對 AWS lambda 有初步的認知才能比較好理解。