---
tags: interview
---

## 要放在 104 上的簡介

雖然以往都是掛後端工程師，但我前後端都會。

「會」指的是：
### 一、在前端方面：

1. 按設計稿切出一模一樣的網頁（嗯…但如果缺字體或者圖層沒有分開，臣妾還是做不到的 🤣）。
2. 按照前端框架（現在是用 Nuxt 3）傳統，把每個元素擺在它應該擺的地方。
3. 使用應該還算主流、語意化的元件 — Vuetify（遵循 Material Design）。

另外，在前端方面，一些特別想堅持的點是：
1. 既然現代的框架致力於簡化開發所須要的編譯設定，會想儘量避開特別設置 gulp、webpack 之類的事情。
2. 同樣是 Vue，選用 Nuxt 3 而不是用 Vue CLI，因為它簡化了大部分設定的工作，甚至路由編排也能透過令檔案命名符應規則實現。
3. 生命苦短，不要再 jQuery、Bootstrap ，或是作一些沒有前後端分離的事情。

> 註：我覺得有一個指標能夠判斷你是不是真的有從 Nuxt 2 Migrate 到 Nuxt 3，就是 「Ref」。比起以往 Nuxt 2 搭配 Vuex 存狀態，透過 Composables 管理狀態自由很多，所以真的可以不用用上 Pinia，真的。還有就是 setup 的寫法讓 .vue 的 script 看起來清爽許多，支援 TypeScript 讓編譯氣能檢查，編輯器能自動完成等。

### 二、在後端方面：

過去工作經歷對外的 title 都是 PHP 工程師。PHP 接觸過 Codeigniter 2、Laravel、Magento（這個怪物級的 Framework 當時候只有入門一下下）、Fatfree、ThinkPHP、Phalcon，也曾基於 WordPress 作佈景主題和外掛開發。待過接案公司、行銷公司、電商、遊戲公司及影音平台。

在接案公司時基本了解了 Web 這個領域工作上的劃分，專案或產品的生命週期。

有短暫迷戀過 PSR-4 的 Vanilla PHP、Valnilla JavaScript，短暫地與 ES6 和 CSS3 保持距離。

在行銷公司做過的活動網站雖然生命週期短但流量可觀。特別注重 Transaction 和索引，在多主機之間共享 Session。除了快取，儘量把非同步處理的事件塞到 Queue 去（用 Redis 當 Queue）。做的事情又進一步延伸嘗試實現 Multi Tenancy 以及如何做出一個足夠彈性好客製化的公版及不同專案可以共用的模組上。

也做過彙整 GA 蒐集到的資料，將它們轉換為對行銷工作有意義的訊息（像是什麼 7 日活躍用戶、沉默用戶，或是觀察用戶所在的地區、使用的裝置）。當時整理 GA 資料取徑的是透過 MySQL Trigger，整理成時、日、週、月報表。現在有各式各樣的 CDC 了，相信會好做些，程式碼也比較能進版本控管。

後來有一陣子，著迷於設計出能夠擴展、可靠的基礎設施（k3d、Skaffold、Keel、Helm…），以及思考類似軟體設計本體論的東西（看很多 DDD 和設計模式的書）。也剛好那陣子待的公司想要嘗試這些技術，所以有在工作上用到。可是每個人一天都是 24 小時，對這類工作投入越多的時間，對其他方面就會變得沒那麼熟悉（新買的 Mac 連 k3d 都還沒裝過）。

### 三、其他：

對於 Python 上 async／await 相關的操作滿熟悉的，也在用 Python 做爬蟲的過程中實現 Consumer／Producer，並且用 ProcessPool 去消化 Task。爬蟲的話，從早期 jsdom、cheerio、phantom.js，到 Selenium、Puppeteer 等都接觸過，不過畢竟不是專精在這方面，再細一點的繞過反爬蟲的方式就沒特別研究。

早些年在大學念書的時候，還沒有像 docker、k8s 這些容器化技術，待的學校也沒有開設機器學習、深度學習的課程。但是基於技術狂熱（可能對別人也不算多），在工作之餘都有試著去接觸（k8s 上過工研院的課，用的是 Rancher，深度學習上的是公部門的職訓，但是學的不深）。

### 四、作品
作為後端工程師有一點很可惜的是我們在功能方面的努力很難直接有具體的畫面可以呈現給別人，又由於公司經手過的專案要為保護所以都不能與外人道，只能儘量擠出 Side Projects…。這裡，因為自己做專案，沒辦法維護很複雜的架構，或者租貴鬆鬆的服務，所以我是選用 Firebase 全家餐，搭配 Algolia 的免費額度，擺在 Netlify 上。

#### 羽球開團／報名網站

做的事情大概是：
1. 後台能夠開團，前台能夠報名。
2. 報名後，團員可能會被錄取，或從請球團管理員幫忙從後台取消，也可以自己取消報名。報名後球團管理員會收到通知。錄取後，團員會收到通知。
3. 錄取後，團員還是能自行取消，但這時候會通知管理員。
4. 錄取的結果，會即時顯示在前台（不用重新整理畫面），並且會顯示通知。
5. 出席情況會有人數、程度的統計。
6. 確定錄取的團員，可以在前台的頁面上點歌（串 Spotify，這個介面我自己覺得做得有點酷炫）。

##### 核心功能
https://gitlab.com/z411392/new-boyholic-badminton-api

核心功能是用 Apollo Server 做，清楚分出「命令」和「查詢」，並且保持每個參數都有明確的型態定義，並且有用到什麼宣告什麼（節省傳輸量）。透過劃分模組切分出不同領域，不同模組間不直接呼叫，而是透過 ApolloServer 執行 GraphQL，確保之後模組可以自主的佈署在不同的物理環境。

> 比較特別的是：
> 1. 譬如通知這件事情，是透過 pubsub 切出去，不用擠在同一個 Request／Response 回應。
> 2. 透過 Firestore 的對資料異動監聽功能，把 Projection／Event Handler 切出去，使它成為一個在語意上獨立的單元。

##### 後台




https://gitlab.com/z411392/new-boyholic-badminton-cms

##### 前台



[點歌功能](https://res.cloudinary.com/boyholic/video/upload/v1709801381/demo/Screen_Recording_2024-03-07_at_16.46.17.mov)

https://gitlab.com/z411392/new-boyholic-badminton-www

前台和後台的介面都是用 Nuxt 3 + Vuetify + Tailwind （還有 SCSS…但我後來覺得 SCSS 寫完看起來很阿雜）。

> 比較特別的是：
> 1. 花了一點時間研究怎麼在 Firebase Auth 透過 Open ID Connect 串 LINE 登入。
> 2. 持久化用的 ID 是以 uuid.v5 的方式生成。
> 3. 透過 Firestore 的監聽，即時更新頁面上的資料，並顯示通知。
> 4. 因為譬如 Safari 要用 Web Notification API 的話，要把網頁包成 PWA，所以通知是串另外的 LINE Notify。
> 5. 用 KSQL 以外的方式實現了一種 Event Sourcing。

#### Flutter 練習

2023 年中，因為同事的關係接觸到 Flutter，覺得前景可期（可以同時寫完 Web、Android、iOS、Mac！如果沒有底層要特別銜接的話）。狀態管理方面，同事用的是 GetX（其實應該說 GetX 不只是狀態管理，而是一個在 Flutter 之上的框架）。

我自己實驗了 flutter_hook、riverpod、bloc 等。繞了一圈，心得是，其實用原生的 Notifier、ListenableBuilder 也能實現局部重新渲染。bloc 則是使一連串的操作和狀態變得可測試（有點像狀態機）。

這裡有一個我用 Flutter 練習寫出的作品：
https://gitlab.com/z411392/fake_ec

（其實編譯完的 Web 檔案，作為靜態檔案，直接丟到 Netlify 上就能運作了。）

#### Infinite Scroll
這裡有一個其他家面試者的前端小 quiz：
https://hackmd.io/@di-gochisou/ByupzRu_p

這邊是我作答的內容：
https://github.com/z411392/mewney-quiz

> 對方回覆說，其實他們想看的處理 Scoll 時額外作 Debouncing 的那個過程。
>
> 但，因為我用的是 Vuetify 的 Infinite Scroll 元件，這邊是不會有他們想看的那個關於捲動的 Debouncing 的。不過應他們要求，我還是在發載入的方法上硬是多套了一層 😅。
>
> 雖然沒有 offer，但在這個作業裡我學習到，如果更新關鍵字後沒有特別去取消前一次關鍵字的資料載入，我們會有很高的機率在新的搜尋結果看到也前一個關鍵字的搜尋結果。有針對這點特別用到了 AbortController。

### 感觸
其實現在 ChatGPT、Copilot 等基於語言模型的服務，讓我們能很方便能找到感興趣的問題和答案。那到底什麼算「專業」、什麼叫「內行」呢…？每次聽到討論的最後，好像都是逼得大家都要去刷 Code 面對那些離生活或工作很遠的題目，使大家被科技理性奴役。

（我前同事甚至還覺得，工作中一天沒有用上這些服務表示，你工作流程可能有問題。我想說，蛤？不是通常關鍵字打一打就會在 Stackoverflow 上找到答案嗎？而且看過好幾個然後比較一下不是比較妥當嗎？）

嗯…我不是那種，一路走著最正確道路，最快跑到終點的人。我當然還是會努力的先快速瀏覽記住有哪些可能很重要之後會用上的東西（而不是每次遇到了才被迫了解他是什麼），但我不是每個算法、結構都一下子鑽研得很細節的人。

譬如前一陣子因為前同事間討論才去翻到怎麼在諸多座標間找到一個最鄰近目前位置座標的算法。又譬如用 trie 快速比對出某些前綴開頭的字串。我能辦到的就是…想跟著需求，緩步前進，把人照顧得服服貼貼。

總之，希望接下來能夠一起共事的，是溫柔圓融的你們。

### 其他可以參考的資料
#### 怎麼實現捲動動畫
https://codepen.io/z411392/pen/yLryyyb

#### 在爬蟲方面的經驗
https://hackmd.io/oeH89T61RQOsUZiT-tUYtw

#### 簡單自我介紹
https://docs.google.com/presentation/d/1Ijoca_fdEa2Cap5Dkq_LpVmOy1cRS9Uy0hjAneqGE2o/edit#slide=id.g2ae14e47cf5_0_79

#### 工作態度調查
https://hackmd.io/s22klOFKSfiEABboM4L5JQ