視野修煉-技術週刊第92期 | 薅牛毛

粥里有勺糖發表於2024-07-14

歡迎來到第 92 期的【視野修煉 - 技術週刊】，下面是本期的精選內容簡介

🔥強烈推薦

  1. YakShaving - 薅牛毛
  2. CSS OneLiners

🔧開源工具&技術資訊

  1. Vue Vine - 單檔案編寫多 Vue 元件
  2. CDN 流量被盜刷經歷
  3. es-toolkit
  4. console.log 體驗最佳化

🤖AI工具&資訊

  1. 詩境 - 根據圖片匹配詩句

​也推薦大家關注一下最後的推薦內容（週刊的主要內容來源渠道）

下面開始本期內容的介紹，預計閱讀時間 7 分鐘。

🔥強烈推薦

1. YakShaving - 薅牛毛

antfu 在 Vue Conf 上的分享，講述了他的開源之路，以及在做的過程中容易陷入薅牛毛的過程。

下面就是一個例子，挺形象的，大部分做開發的同學或多或少經歷過。

利用“薅牛毛”：在解決問題的過程中，可能會引發一系列任務，這些任務可能會偏離原始目標。然而，這也可以看作是一個機會，透過集社群之力，完善解決方案，最終實現專案的成功。

影片的觀點還有很多，非常建議對開源感興趣的同學看看。

最後再看一下大佬的 耗牛地圖，🐂 已經不足以形容的超級個體。

VueConf 完整 PPT 可以去會議官網獲取

2. CSS OneLiners

一組簡單的單行 CSS 解決方案，可為任何網頁新增少量改進

挑2個來介紹一下。

① 限制視口中的內容寬度

body {
  max-width: clamp(320px, 90%, 1000px);
  margin: auto;
}

clamp 是一個 CSS 函式，用於建立一個範圍內的動態值。

clamp(MIN, VAL, MAX) 等價於 max(MIN, min(VAL, MAX))

② 表單控制元件顏色以匹配頁面樣式

body {
  accent-color: #080;
}

🔧開源工具&技術資訊

3. Vue Vine - 單檔案編寫多 Vue 元件

使用 .vine.ts 字尾，能夠使用完整的 TS 支援。

4. CDN 流量被盜刷經歷

虧了 70 RMB，本文記錄了一下這個過程，以及一些防治手段。

5. es-toolkit

現代的、高效能的 JavaScript 實用工具庫 - 類似於 Lodash，支援常見的 Node Bun Deno 等執行時。

一個例子

// import from '@es-toolkit/es-toolkit' in jsr.
import { chunk, debounce } from 'es-toolkit'

const debouncedLog = debounce((message) => {
  console.log(message)
}, 300)

// 這個呼叫將會被防抖處理
debouncedLog('Hello, world!')

const array = [1, 2, 3, 4, 5, 6]
const chunkedArray = chunk(array, 2)

console.log(chunkedArray)
// 輸出: [[1, 2], [3, 4], [5, 6]]

6. console.log 體驗最佳化

console 很容易上手，但輸出過多的上下文容易混亂不方便檢視。

有 3 個工具，能夠在IDE中的程式碼旁邊顯示 console.log 值和錯誤。

  • Wallaby.js
  • Quokka.js
  • Console Ninja

🤖AI工具&資訊

7. 詩境 - 根據圖片匹配詩句

挺有趣的！

😛趣圖

篇幅有限，如果你還沒看夠，可移步後面的推薦渠道，繼續遊覽，歷史週刊（<20）移步部落格

⭐️強力推薦關注

  • 阮一峰: 科技愛好者週刊 - 記錄每週值得分享的科技內容，週五釋出
  • 雲謙：MDH 前端週刊 - 前端資訊和分享
  • 童歐巴：前端食堂 - 你的前端食堂，吃好每一頓飯
  • 前端RSS - 根據 RSS 訂閱源抓取最新前端技術文章
  • 值得一讀技術部落格 - 每天進步一點點，每天分享有料的技術文章！
  • FRE123 技術週刊精選 - 前後端技術週刊精選推薦資訊流

相關文章