身為技術 er，特別是大齡程序員，在當前糟糕的社會大環境中生存，心中常存一絲焦慮，這樣的焦慮是由不穩定性、缺乏成就、同輩壓力催生的
讀書心得#
最近在讀《人生效率手冊》這本書，雖然我是不推薦的，內容夾雜個人私貨、廢話多且反復、吹牛逼、浮於表面不觸地面，但其中某些理念還是比較認可的，修煉硬本領
確實，投資自己，為自己的人生設定目標，對目標進行拆分實現步驟，真正落實到位，打怪升級一樣讓自己不斷成長，不斷修煉自己身邊優秀之人身上的優秀品質，甚至超越他們，讓其成為自己的硬本領，才能緩解以上的那些焦慮
上班#
從 b 站裸辭，來到大廠也 4 個月了，仿佛試用期的成長是最迅速的，頂著很高的 OKR、熟悉環境、和新同事打交道，那段最艱難的時間扛過來了。成為正式員工後，仿佛一切壓力都消失了，也沒有很好很新的技術可以學習，也沒有很複雜的項目可以接手，雀食，不能靠工作去成長哇！
我發現廠裡代碼托管平台還是有不少倉庫值得學習的，畢竟真實應用到了生產環境，且有這麼大體量的 UV/PV，好了，這下有方向了，把感興趣的庫 clone 下來自主學習，不僅能白嫖還能學到技術！😏
上班摸魚#
Tailwind#
廠裡一塊業務項目用到了 Tailwind，以前知道這個玩意兒，當時覺得要記很多類名，元素上寫一大串也挺不爽的，就沒深入去了解。但是進廠之後才發現，廠裡常態抓性能優化（這個後面也會出個系列拎出來細說），業務開發維護也都要用到，因此看了一天官網文檔，也清晰了
優勢#
那在我看來，Tailwind 明顯的優勢在於：
- css 經過了優化，據說多數項目打出的 css 不會超過 10KB，傳統手撸可能會有非常多重複的代碼，應用有更好的性能；
- 語義化轉原子化，且遵循一套設計規範，細粒度、支持自定義，相比
style內聯魔法值、類命名因人而異，更加受約束 - 不用單獨維護 css 文件，刪除元素時不用擔心相應類名如何刪除，而且不存在樣式衝突問題
- 開發體驗，不用在 css 與 html / 組件間來回切，給元素加上類名一套寫下來行雲流水；
相比它的劣勢，我是完全能接受的。因此在下個新項目或對已有項目做性能優化時，我可能也會將引入 Tailwind 原子化進一步縮減 css 體積作為一個手段
相關庫#
tailwind-merge
解決類名樣式合併的問題，將樣式正確進行覆寫
import { twMerge } from 'tailwind-merge'
twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'
class-variance-authority
根據組件各屬性，為組件生成不同類名組合。可結合 Tailwind 創建自己的組件
// components/button.ts
import { cva } from "class-variance-authority";
const button = cva(["font-semibold", "border", "rounded"], {
variants: {
intent: {
primary: [
"bg-blue-500",
"text-white",
"border-transparent",
"hover:bg-blue-600",
],
// **or**
// primary: "bg-blue-500 text-white border-transparent hover:bg-blue-600",
secondary: [
"bg-white",
"text-gray-800",
"border-gray-400",
"hover:bg-gray-100",
],
},
size: {
small: ["text-sm", "py-1", "px-2"],
medium: ["text-base", "py-2", "px-4"],
},
},
compoundVariants: [
{
intent: "primary",
size: "medium",
class: "uppercase",
// **or** if you're a React.js user, `className` may feel more consistent:
// className: "uppercase"
},
],
defaultVariants: {
intent: "primary",
size: "medium",
},
});
button();
// => "font-semibold border rounded bg-blue-500 text-white border-transparent hover:bg-blue-600 text-base py-2 px-4 uppercase"
button({ intent: "secondary", size: "small" });
// => "font-semibold border rounded bg-white text-gray-800 border-gray-400 hover:bg-gray-100 text-sm py-1 px-2"
clsx
一個 CSS-IN-JS 庫，這裡引用其官方非常精簡介紹：
A tiny (239B) utility for constructing className strings conditionally.
Also serves as a faster & smaller drop-in replacement for the classnames module.
條件判斷值 true/false 動態添加刪除 css 類，如：
import clsx from 'clsx';
// or
import { clsx } from 'clsx';
// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'
// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'
// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'
// Arrays
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'
// Arrays (variadic)
clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
//=> 'foo bar baz hello there'
// Kitchen sink (with nesting)
clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'
tailwindcss-animate、tailwindcss-animated
Tailwind 動畫插件
Preact#
優化廠裡的應用時，發現 INP 上報值 TOP10，其中大於 200 的多數 case，INP 元素都是html或html>body，INP 交互事件都是pointerdown/up或keydown/up
這種情況在本地瀏覽器模擬CPU x4 slowdown時是必現的，而且與網速無關。
經我推測，與該應用採用了同構 + 流式渲染方案有關，流式第一段讓用戶看到部分頁面內容後，這時用戶可能就與頁面發生了交互，而客戶端交互是依賴入口 js 文件執行的，hydration 注入交互後才會有響應。
點擊空白處，INP 被統計：
任意按鍵按下，INP 被統計：
Performance 跑了下性能：
特別是在設備性能差的情況下，js 下載不受影響，但解析、執行或許受到了點影響，造成很高Input delay的概率更高。
排查廠裡應用 INP 問題時發現，引入的react.production.min.js與react-dom.production.min.js在初始加載階段阻塞了用戶交互，因此不得不從框架選型的層面考慮是否有比
這不巧了麼，preact 據說可以作為react的平替，而且竟然生產版本體積只有 3.5KB，太牛逼了吧
能帶來性能優勢，這是否能優化 INP 呢？將來有機會試試
有趣的事#
- 查看包體積、下載時長在線工具 bundlephobia
- 一本有趣的插畫書籍《生活蒙太奇》，生活當中的一些小事，治愈、共情，此時此刻我所想的世界上某時某刻也一定有同樣的所想
- 博客封面取自 500px