歡迎來到第 73 期的【視野修煉 - 技術週刊】,下面是本期的精選內容簡介
🔥強烈推薦
- AI 春聯
- Vue 10週年啦!
🔧開源工具&技術資訊
- 2024 你應該知道的幾個CSS特性
- Vite 5.1 發佈
- Baklava:基於web component實現的設計系統
- Heat.js - 熱力圖生成
- React Native 2023調查結果出爐
- Capacitor - 跨平臺應用開發框架
也推薦大家關注一下最後的推薦內容(週刊的主要內容來源渠道)
下面開始本期內容的介紹,預計閱讀時間 7 分鐘。
🔥強烈推薦
1. AI 春聯
效果馬馬虎虎,出內容很快,項目代碼開源。
2. Vue 10週年啦!
🔧開源工具&技術資訊
3. 2024 你應該知道的幾個CSS特性
:has
用於設置目標子元素存在時,容器元素的樣式
<style>
.box:has(p) {
background-color: red;
padding: 20px;
}
</style>
<div class="box">
<p>Red</p>
</div>
比如上面的例子,將會得到一個紅色的塊
nesting
CSS 嵌套語法
<style>
p {
span {
color: red;
}
}
</style>
<p><span>red</span></p>
<p>default</p>
上面的例子中,給 p span
字體顏色設置爲了了紅色。
balance&pretty
設置換行的樣式規則,text-wrap: balance;
效果還是挺不錯的。
<style>
p.balance {
text-wrap: balance;
color: red;
}
p.pretty {
text-wrap: pretty;
color: brown;
}
</style>
<p class="balance">
。。。
</p>
<p class="pretty">
。。。
</p>
<p>
。。。
</p>
4. Vite 5.1 發佈
幾個值得關注的點:
- Vite 運行時API:SSR 期間支持 HMR,不依賴JS運行時(node/bun/deno)API;
- 更快的速度:10k 模塊
6.63s => 10.35s
; - 獨立線程中運行 CSS 預處理器
css.preprocessorMaxWorkers: true
。
5. Baklava:基於web component實現的設計系統
更像是一個 Web Components 組件庫,同時提供了 Vue 和 React 接入使用的版本。
文檔站使用 storybook 構建。
還是比較簡潔漂亮的。
6. Heat.js - 熱力圖生成
使用這個庫可以輕鬆的創建下面這樣的熱力圖。
7. React Native 2023調查結果出爐
挑幾個統計結果:
- 使用頻率高的API:Camera,Permissions,Notifications
- 狀態管理:React Hooks,React Query,Zustand
- 數據請求:React Query,tRPC,Axios
- 導航:react-navigation,expo-router
- 樣式:react-native-unistyles,StyleSheet API,NativeWind
8. Capacitor - 跨平臺應用開發框架
Capacitor 允許你使用 JavaScript 開發跨 iOS,Android,Web 平臺應用。
貌似是基於 Webview 的,因此你還可以嘗試使用 Tauri Mobile。
😛趣圖
篇幅有限,如果你還沒看夠,可移步後面的推薦渠道,繼續遊覽,歷史週刊(<20)移步博客
⭐️強力推薦關注
- 阮一峯: 科技愛好者週刊 - 記錄每週值得分享的科技內容,週五發佈
- 雲謙:MDH 前端週刊 - 前端資訊和分享
- 童歐巴:前端食堂 - 你的前端食堂,喫好每一頓飯
- 前端RSS - 根據 RSS 訂閱源抓取最新前端技術文章
- 值得一讀技術博客 - 每天進步一點點,每天分享有料的技術文章!
- FRE123 技術週刊精選 - 前後端技術週刊精選推薦信息流