[Soft & Share 會員服務] 開源報報 269 高效能、可維護的樣式表

Contents

這是 Soft & Share 為訂閱會員所推出的服務，小編週一到週五會每天整理一篇開源專案的摘要說明整理（早上 8 點前會發佈在 Soft & Share 網站 ) ，讓你可以利用上班前快速掌握目前開源專案的焦點。( 之前出版的開源報報 )。想體驗開源報報，可先參考開放閱讀。

🔥以主題方式整理出相關的開源專案 – 開源報報主題報導

為什麼需要 Soft & Share 開源報報？

每天快速瀏覽開源報報具備有什麼效益？

增加自己的學習動力，提升自己的視野
從開源專案中獲得 side project 靈感與想法
利用開源專案提升自己的生產力

每天使用 NT8.3 元，你可以使用 Soft & Share 開源報報省下掌握每天開源資訊焦點的時間，這是一個很划算的時間槓桿投資

訂閱網址

開源報報內容

工具

快速部分替換 codemod工具

https://github.com/facebookincubator/fastmod

fastmod 是 codemod 的快速部分替代。與codemod一樣，它是一個可協助你進行大規模程式碼庫重構的工具，並且它支援大多數codemod的選項。 fastmod與codemod的主要哲學差異在於，它專注於改進使用案例“我想使用互動模式來確保我的正規表示式正確，然後再將其應用到所有地方”。 對於此使用案例，它提供了比codemod更好的效能。因此，fastmod不支援codemod的–start，-end或–count選項，也不支援codemod的Python API。

範例

假設您不贊成使用標記。在命令列中，您可以通過執行以下命令取得進展：

fastmod -m -d /home/jrosenstein/www --extensions php,html \     
     '<font *color="?(.*?)"?>(.*?)</font>' \     
     '<span style="color: ${1};">${2}</span>'

對於 regex 的每一次匹配，你會看到一個彩色的差異，並詢問你是否要接受這個變化（用<span>標籤替換<font>標籤），拒絕它，或者在你選擇的 $EDITOR 中編輯這一行。

注意: codemod 使用 Python regexes，而 fastmod 使用 Rust regex crate，它支援稍有不同的 regex 語法，不支援環顧或回溯引用。特別是，使用 ${1} 而不是 \1 來獲取第一個捕獲組的內容，並使用 $$ 來在替換字串中寫一個字面 $。詳情請參見 regex crate 的文件。

這種語法的一個後果是在替換文字週圍使用單引號而不是雙引號是很重要的，因為bash shell本身就關心雙引號字串中的$字元。如果你必須給你的輸入文字加上雙引號, 請注意正確地 escape $字元!

fastmod 還提供了比 codemod 更好的可用性：它接受檔案或目錄作為 regex 和替換後的額外位置參數來處理。例如，上面的例子可以重寫為

fastmod -m --extensions php,html \     
     '<font *color="?(.*?)"?>(.*?)</font>' \     
     '<span style="color: ${1};">${2}</span>' \     
      /home/jrosenstein/www

這使得如果需要的話，可以使用fastmod從其他地方處理檔案列表。但是，請注意，fastmod 在內部進行自己的平行目錄走訪，所以使用 find … | xargs fastmod … 可能會比單獨使用 fastmod 慢得多。

Linux和FreeBSD上的OpenZFS

https://github.com/openzfs/zfs

OpenZFS是一個先進的檔案系統和 Volume 管理器，最初是為Solaris開發的，現在由OpenZFS社群維護。這個 repository 包含了在Linux和FreeBSD上執行OpenZFS的程式碼。

延伸閱讀 ZFS檔案系統儲存應用7大優勢

Web 應用程式開發

一個 Vue.js 3.0 UI 程式庫

https://github.com/element-plus/element-plus

特色

Vue 3.0 Composition API
🔥 使用 TypeScript 開發

高效能、可維護的樣式表。

https://github.com/linkedin/css-blocks

為你的設計系統和應用程式元件提供快速的CSS。

css-blocks是一個符合人機工程的、元件導向的CSS創作系統，可以編譯成高效能的樣式表。

css-blocks結合了一個意見性的創作系統、建構時間分析和樣板重寫，以及一種新型的 CSS 優化器，為樣式表開發者已經熟悉和喜愛的技術和最佳實踐注入了新的力量和易用性。

為何使用 CSS-Block

每個元件一個CSS檔案
範圍內的風格。
幾乎不存在的執行時間 (~500b)
超快速的樣式表
專案整體優化
建構時間的CSS錯誤。
沒有用的程式碼( dead code )消除。
物件導向的繼承

CSS-Block 靜態分析的威力

靜態分析意味著css-blocks可以檢視你的專案，並確定地知道任何給定的CSS宣告將、不會或在特定條件下可能會被用於樣板中的任何給定元素。

大多數樣式表架構必須在效能和可維護性之間走一條微妙的線。在任何一個方向上傾斜得太厲害，無論是你的使用者還是開發者都會最終付出代價。有了CSS Blocks，你可以專注於確保你的樣式表在應用變化時易於維護，而且有了新的CSS優化器OptiCSS，你的應用的生產樣式表在壓縮後的小尺寸會讓你吃驚。

你花了好幾分鐘除錯你的應用程式，卻發現一個微妙的排版錯誤導致選擇器不匹配的日子已經一去不復返了–CSS Blocks會給你一個建構錯誤，並建議可能的修復方法。通過IDE整合，使用CSS Blocks的專案將能夠快速瀏覽到與你當前樣板元素相匹配的選擇器定義，並找到哪些樣板元素與你當前的選擇器、自動完成類別名相匹配。有了CSS Blocks新的解決系統，cascade 衝突將在你還不知道它們的存在之前就為你抓住，你再也不用打特殊性戰爭了。