Justin Chien

軟體工程師，幫助 indie hacker 更快打造產品

[Justin Chien @justinchiency]

介紹我今年最後一個 side project - Build UI Fast 🔥

https://t.co/hX0YOkjCNW

長久以來，我總是在煩惱著如何更快的做出 UI 🤔

Web UI 並不簡單，它需要 RWD、需要美觀、需要動畫，甚至更困難的 UI 需要你懂一些奇怪的 CSS 屬性或 hack

對只想快速實現想法的 indie hacker 或一般 builder 來說，這無疑拖慢了開發速度，甚至影響實現核心 idea 的興致

Build UI Fast 想解決的，就是這個問題

Build UI Fast 提供一組 component collection，這組 components 的特點在於 implement 掉你需要花時間想的部分，例如 RWD 怎樣好看、滑順的動畫、第三方 library 整合等，預設就是立即可用且精緻的 UI，如果有更多客製化需求，你也可以輕易的用 tailwindcss 更改

希望能在縮短開發時間的同時，依舊呈現不輸人的 UI

現在這組 components 仍在製作中，如果對這個感興趣，可以加入 waitlist

這組 components 是我自己的 toolbox，跟現在常見的 component library 會很不一樣 😋

[Justin Chien @justinchiency]

@MediaMonad 81

[Justin Chien @justinchiency]

@Jerry10240 Welcome ❤️ - G1112aBXKDBB

[Justin Chien @justinchiency]

height: 0 -> height: auto transition 🌵

有 2 種方式可以在不使用 JS 的情況下實現 height:0 -> height: auto transition

1. 在 flex layout 下從 max-height: 0 -> max-height: 100% + transition: max-height

2. 在 grid layout 下從 grid-template-rows: 0fr -> grid-template-rows: 1fr + transition: grid-template-rows

底下是一個範例
code 👉 https://t.co/sNlhrrlKcc

[Justin Chien @justinchiency]

如何實作 stagger effect 🚠

以前以為 stagger effect 需要什麼高深的技術，需要 JS，但最近發現純 CSS 用 animation-delay 就可以實現了

附上一個很簡單的範例
code 👉 https://t.co/PHvNjjEpmP

[Justin Chien @justinchiency]

Sliding tabs 小技巧 🏂

今天學到了如何只讓 tab 覆蓋的字變色，並且 tab 可以用任意顏色，相比於之前 mix-blend-mode 的方法好多了

code 👉 https://t.co/dgPhgyzG8U

[Justin Chien @justinchiency]

怎麼做 SEO 🌱

最近聽到一集關於 SEO 的 podcast，摘錄幾個重點：

- SEO 的努力方向分為 3 塊：加速你的網站、讓你的網站充滿解決搜尋者「意圖」的內容、增加具權威性的外鏈

- Google 搜尋的第一原則是呈現最能解決搜尋者「意圖」的內容，因此具體做法是：描繪受眾 ▶️ 找尋他們常問的問題 ▶️ 專注提供這些問題的解法

- 外鏈，指的是權威性網站 (ex. Product Hunt) 是否有連結連到你的網站，一旦有，你的網站就會被視為更相關更可靠。選擇權威性網站首要看重「相關性」與「權威度」

- SEO 是一個 3 ~ 6 個月才會發酵的東西，我們應該在做產品第一天就持續優化

[Justin Chien @justinchiency]

介紹幾個讓 tailwindcss 更好用的 library 💃

1. clsx
clsx 讓你可以條件式的 toggle class，例如：clsx("default", { foo:true, bar:false });

2. cva & tailwind-variants
這 2 個都是用來管理 component variants 的，讓你可以集中管理 styles (如圖 1)

3. tailwind-merge
tailwind-merge 用來解決 class 衝突，例如：<div class="bg-blue bg-green" />，遇衝突時以後面的 class 為主，不再依靠不可控的 tailwind stylesheet 裡的 class order

4. twc
twc 將重複的 component boilerplate code 包裝 (ex. forwardRef, TypeScript definition) 成一行程式碼 (如圖 2)

這些 library 可以互相搭配使用

連結：
clsx: https://t.co/qSTrYDGjA5
cva: https://t.co/4WiVPdTSto
tailwind-variants: https://t.co/sPuHuc7p2I
tailwind-merge: https://t.co/qAKpm09iU0
twc: https://t.co/pjik7fUC4F

[Justin Chien @justinchiency]

你知道怎麼做 responsive background image 嗎 🖼

我寫了一份 background image css，讓 background image 能參考當前瀏覽裝置的 DPR (device pixel ratio)、支援格式 (web, avif) 以及螢幕寬度，載入不同尺寸的圖片

同時也有 fallback，舊瀏覽器也沒問題

code 👉 https://t.co/X1HTn28gn5

[Justin Chien @justinchiency]

WTH so coool
跨時代產品

https://t.co/s755XaaZko

[Apple Vision Report @spatialreport]

Apple has released a 10 minute guided tour of Apple Vision Pro

[Justin Chien @justinchiency]

分享一個最近讓我很驚艷的 app：Podwise🎙️

https://t.co/2mbBlLZvvE

它是一個用 AI 幫助你吸收 podcast 內容的工具，其中 2 項 features 對我幫助最大：

- 讀取 podcast 內容，生成 mind map 及 summary：透過這個 feature，我可以快速找到我感興趣的內容，節省需要聽完整個 podcast 的時間
- 翻譯 podcast 內容成逐字稿，並顯示當前播放的句子：這讓我可以邊聽邊讀，完全搞懂我想懂的 podcast 內容

透過這些幫助，我現在開始能從英文 podcast 汲取資訊 😌

另外，這個 product 的製作者是中國人，想想也覺得合理，這完全是中國人才會發現的題目，對於外國人，可以直接暴力 2 倍速聽 😂

[Justin Chien @justinchiency]

Clerk 新出爐的這些 UI 實在太扯了😵‍💫

打開 Animation panel 看了一下，這些幾乎都不是 GIF，而是純正的 CSS Animation + JS 辦到的，真的太震驚了

👉 https://t.co/MKCBerCWx2

[Justin Chien @justinchiency]

今天認識到 AWS Personalize 服務！💘

它可以讓你在幾乎不用懂演算法的情況下，快速實現推薦系統，為 product 加值

想到一些相關的 side project idea，看看我們能做出什麼 😋