Zespia

May 20, 2020

試用 Tailwind CSS 重寫主題

上週試著用 Tailwind CSS 重新打造了網誌的主題,一開始使用的時候,覺得一直翻文件很煩,因為大部分的 CSS 規則大概都知道怎麼寫,卻得要翻文件才知道對應的 class;但寫了一段時間後,開始覺得還不錯,大部分的 class 都很容易預測,也很容易根據需求客製變數或外掛。

BootstrapSemantic UI 這類 UI library 相比,Tailwind CSS 不提供現成的元件(另有提供須付費的 Tailwind UI),而是把每個 CSS 規則都寫成單獨的 class,因此即便完全不寫 CSS,只要在 HTML 中設定 class,也很容易能夠拼湊出想要的樣式,但缺點就是還是需要有基本的 CSS 知識才能上手。

繼續閱讀
May 10, 2020

Yarn 2 和 Monorepo

今年初隨著公司的 repo 越來越多,我們決定把 web 前端部分轉為 monorepo 的形式,一開始花了一段時間研究各個 monorepo 方案的利弊,最後決定基於 Yarn 2 打造一套自用的工具。這篇文章會大概分析一些我試過的 monorepo 方案的優缺點,以及最後用 Yarn 2 的成果。

繼續閱讀
Aug 4, 2019

Pullup – 在 Kubernetes 上部署與測試 Pull Request

本篇接續上一篇文章,是我在 Dcard 開發的第二個 Kubernetes 工具。

開發流程

圖片來源

目前敝社的開發流程基於 GitHub flow,大致上如上圖所示。要開發新的功能時,會從主要分支 master 開出新的功能分支 feature,功能開發完成後會提出 pull request,審核通過後就會合併進 master,並部署到 staging 伺服器上。

通常在審核 pull request 時,我們僅會檢視程式碼和附帶的測試,如果一切順利而且 CI 測試通過的話,就會直接合併進 master。然而在某些情況下,特別是以前端極少測試的狀況來說,只看程式碼有時無法看出問題所在,必須實際執行才能確保程式能夠正常運作,有時也可能需要 PM 確認程式符合 spec,或是讓設計師確認程式符合設計稿。

對於工程師來說,要把程式執行起來並不困難,但對於其他人來說,光是設定環境可能就是件讓人頭痛的事了。我們常用的方法是直接讓他們透過區網或 ngrok 連到工程師的電腦上,有時甚至為了上 staging 伺服器就直接合併進 master 了。讓還沒審核通過的程式碼進入 master 不僅可能造成 staging 伺服器的異常,也有可能會影響其他工程師的開發進度。

繼續閱讀
Mar 2, 2019

Kosko – 用 JavaScript 管理 Kubernetes

敝社從 2016 年就開始 Kubernetes,應該能算是相當早期的使用者了,也因此我們累積了一堆的 Kubernetes YAML 設定檔,從某個時間開始 staging 和 production 環境的設定檔更開始分裂,自此以來一直無法合併。因此這次的目標就是:

  • 整合各環境的設定
  • 能夠重複利用
  • 能夠驗證設定是否正確
繼續閱讀
Feb 25, 2019

在 Monorepo 裡用 TypeScript

最近在開發公司內部使用的工具時,心血來潮想用 Lerna 來管理 monorepo,但是又想用 TypeScript,結果碰到了一些編譯上的問題,例如套件之間互相依賴時,TypeScript 不知道依賴關係而無法了解編譯順序,導致整個 monorepo 無法編譯成功。

之後發現了 Quramy/lerna-yarn-workspaces-example 這個範例,裡頭用了 Yarn、Lerna 和 TypeScript,在這之中 Yarn 並不是必須的可以忽視,重點是在 TypeScript 3.0 推出的 Project References,這個功能讓 TypeScript 能夠知道各個模組之間的依賴關係,因此自動解決了編譯順序的問題。

要使用 Project References 的話必須在 tsconfig.json 加上下列選項。

{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "rootDir": "src",
    "outDir": "dist"
  }
}
  • composite - 讓 TypeScript 能夠快速找到被引用專案的位置。
  • declaration - 編譯定義檔 (.d.ts)。
  • rootDir - 設定專案的根目錄,預設是 tsconfig.json 的所屬資料夾。
  • outDir - 編譯的輸出路徑。

並在要引用的地方加上 references

{
  "references": [
    { "path": "../x-core" }
  ]
}

然後在執行 tsc 時加上 -b 選項以及要編譯的專案路徑,就能順利編譯。

tsc -b packages/x-core packages/x-cli

因為專案比較多,所以我另外寫了一個 script 自動找出所有需要編譯的專案路徑。

"use strict";

const spawn = require("cross-spawn");
const globby = require("globby");
const { dirname } = require("path");

const TSC = "tsc";

const pkgs = globby.sync("packages/*/tsconfig.json").map(dirname);
const args = ["-b", ...pkgs, ...process.argv.slice(2)];

console.log(TSC, ...args);

spawn.sync(TSC, args, {
  stdio: "inherit"
});

執行 tsc 時加上 --watch 就能夠監看檔案變化並自動重新編譯。

tsc -b packages/x-core packages/x-cli --watch

執行 tsc 時加上 --clean 則是能夠自動根據 outDir 設定清除編譯後的檔案。

tsc -b packages/x-core packages/x-cli --clean

可以在 tommy351/kosko 看到實際運用的範例。

繼續閱讀