ErrorBaker 技術共筆部落格

Hi，大家好！最近初次嘗試使用 svelte 開發一個新的專案，這篇文章會分享使用 firebase google login 以及搭配 xstate 的實作。

想要為 next.js 開發的網站做 SEO 嗎？或許你可以先考慮 next-seo

對 React 的 Functional Component 做渲染效能優化，不一定要使用 memo 來達成，也可以透過元件的重組或 useMemo 來達成。

# 前言工作一陣子之後發現其實大部分的工作時間都不是從 0 開始寫程式，而是在維護或整理之前的 code。這個時候遇到的困難常常不是這個 bug 該怎麼解，而花費很多的心力在看前人留下的 code。這時候就會發現其實每個人對 class 的命名都有些不一樣，常常有種雖然好像看的懂但卻沒有一個規則的感覺，所以今天就來探討一些 CSS 的命名慣例來讓我們的 class 更加淺顯易懂卻又不失實用性吧！

gRPC（Remote Procedure Calls）是 Google 發起的一個開源的 RPC 系統。目標是讓我們可以更輕鬆地創建分佈式應用程序和服務。這篇文章簡單介紹了 gRPC 和初步練習用 Go 寫出一個 gRPC 前後端。

新手上路的工程師，在使用公司專案的時候發覺專案中使用很多開發上很好用的套件，這是我原本在學習路上沒有見過或者有看過但沒用過的東西，於是乎我就開始研究這些東西要怎麼使用，而我覺得最好的方法，就是在我自己原本的 side project 中導入這些，讓我看看到底要怎麼使用。

網路上有很多寫文章教學，也有不少寫文章的好處，或許你就曾想過要寫文章？...

# 前言目前團隊在規劃建立一個元件庫，希望未來能在各個專案上快速套用自己所寫的元件。由於各項專案使用的框架可能有所不同，所以元件庫必須支援不同框架的使用情境。例如說 VueFormGenerator 當中的 custom field 是可以自由客製化表單中的元件，我們就能引用這個元件庫的元件，將其使用於 Vue 的表單之中。大部分元件在實作上沒有太大的困難，像是按鈕這個元件就很單純，開幾個欄位提供使用者改改顏色或改改樣式基本上就沒太大問題了。不過有幾項元件就不是那麼好實作了，例如本篇文章想要探討的 table 這個元件，它不光是改樣式這麼簡單而已，像是每個欄位需要如何抓取資料，各自的行為是什麼？還有表格所衍生出來的各項功能如何去實作？以及如何讓使用者自由客製化...等等。這些都需要提前設計好，才不會在使用的時候感到不方便。以往在 HTML 使用到 table 這個標籤時，每個頁面的表格都會是分開來做的，A 頁面的表格直接寫在 A 頁面的檔案底下，B 頁面的表格也直接寫在 B 頁面的檔案底下，所以每個頁面的表格需要幾個 column 都可以分別定義好的，有幾個功能也可以分別放上去。但是現在要達成的目標變成是，做出一個 table 元件，不管是 A 頁面還是 B 頁面，都可以直接使用這個元件，這也是第一次研究如何可以做出讓不同頁面一起使用的 table 元件。由於這邊的 table 元件是透過 Web Component 來實作的，所以上半部的篇幅會先提到關於 Web Component 最簡單的概念（已經了解的大大們可以跳過這部分），下半部才會是分享 table 元件的實作。