ErrorBaker 技術共筆部落格

Hi,這是 ErrorBaker 技術共筆部落格,由一群希望藉由共筆部落格督促自己寫文章的人們組成。

部落格的主題以 web 前後端主題居多,但其實只要是跟技術有關的主題都有可能出現。

你可能不需要 React Memo

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

探討幾種常見的 CSS 命名慣例

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

使用 Golang 建立一個 gRPC 架構

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

優化舊有專案(一):加入 dotenv, nodemon, babel 優化開發

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


用 Web Component 製作客製化表格元件

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


從本地到雲端,淺談部署和各種部署姿勢

如果拿 Server 來舉例(本篇主要講的內容也是指 server), server 基本上就是一個程式,而這個程式運行之後其他人就可以透過網路連線到 Server 來拿資料。而 Deploy,也就是部署,可以視為將已經寫好的程式使其運行的過程。