視野修煉-技術週刊第80期 | Bundows

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

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

🔥強烈推薦

  1. Bun 1.1 釋出 - Bundows
  2. Signals 的標準化提案
  3. 免費的AI咒語聚合網站

🔧開源工具&技術資訊

  1. 前端框架新勢力大盤點
  2. dashpress - 資料庫管理
  3. node.js 截相簿
  4. autospec - API 規範描述檔案生成
  5. Journey.js - 互動式引導
  6. barbajs - 頁面切換的平滑過渡

📚 教程&文章

  1. CSS 容器查詢互動式教程

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

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

🔥強烈推薦

1. Bun 1.1 釋出 - Bundows

4月1日釋出，完美支援 Windows 平臺（>= Win 10）。

所有功能都可以在 Windows 上使用了，再也不是閹割版本了。

特別推薦 Bun install 和 Bun Shell

// test.ts
import { $ } from 'bun'

// pipe to stdout:
await $`ls *.js`

bun run test.ts

執行 TS 指令碼，可以直接 bun filename

bun hello.ts

速度極快，完全替代了 ts-node, tsx 這些庫，成為了我日常執行 TS 指令碼的首選。

2. Signals 的標準化提案

去年的很火的一個東西，可以一起回顧一下這張趣圖。

現在有人弄成 ES 提案了，用法如下。

常規寫法 signals寫法

GitHub signals polyfill 程式碼

最終效果是不是和現在的前端框架大差不差了 👍🏻？

3. 免費的AI咒語聚合網站

可以收藏起來，有空的時候翻一翻 CV CV 本地使用。

🔧開源工具&技術資訊

4. 前端框架新勢力大盤點

簡單介紹了一下Astro, Qwik, Remix, Refine, Nue, VanJS, Waku 這些框架的釋出時間和特色。

輪子非常多，每個都有合適的使用場景，對這些新興框架感興趣的可以深入學習瞭解一下。

5. dashpress - 資料庫管理

只需執行一個命令，就會自動分析資料庫結構，生成管理後臺，號稱不用寫程式碼。

① 終端執行指令

npx dashpress

② 訪問皮膚

http://localhost:3000

③ 錄入資料庫賬號即可

看上去像一個常規資料庫管理軟體，暫沒體驗到特別的功能。
只能說啟動非常方便 👍🏻，有 Node 即可。

6. node.js 截相簿

原生的 node.js 截相簿，支援 Mac、Windows 和 Linux 系統，且無需任何依賴。

使用示例

const fs = require('fs')
const { Screenshots } = require('node-screenshots')

const capturer = Screenshots.fromPoint(100, 100)

console.log(capturer, capturer.id)

// 同步截圖
const image = capturer.captureSync()
fs.writeFileSync('./a.png', image)

// 非同步截圖
capturer.capture().then((data) => {
  console.log(data)
  fs.writeFileSync(`${capturer.id}.png`, data)
})

7. autospec - API 規範描述檔案生成

自動記錄請求介面的格式，生成符合 OpenAPI 3.0 規範 的描述檔案。

① 錄製介面

# ① 安裝依賴
npm i openapi-autospec
# ② 啟動錄製服務
npx autospec --portTo 3000  --filePath api.json

這裡的 3000 是你的本地後端服務的埠，啟動後效果如下

Proxy server listening on port 8687
Configure your client to use proxy at
127.0.0.1:8687
All traffic will be forwarded to 127.0.0.1:3000

你可以在前端應用中將 proxy 指向 8687 埠，服務會自動將其轉發到 3000 埠

// proxy 配置
proxy: {
  '/api/': {
    target: 'http://127.0.0.1:8687',
    changeOrigin: true,
    rewrite: (p) => p.replace(/^\/api/, '')
  },
}

② 生成文件

所有的請求都會被記錄並自動生成對應的描述檔案，下面是請求列印的日誌。

[POST] received for http://127.0.0.1:8687/public/report/pv
[GET] received for http://127.0.0.1:8687/super/user/message
[GET] received for http://127.0.0.1:8687/category
[GET] received for http://127.0.0.1:8687/task
[GET] received for http://127.0.0.1:8687/user/power/super

接著可以使用 Redoc 生成文件。

npx @redocly/cli build-docs api.json

最終文件效果如下。

非常適合需要對外給到部分API文件時，進行自動生成。

下週準備深度使用一下，看看 awesome-api-devtools 提到的一些文件工具，弄個API文件生成最佳實踐。

8. Journey.js - 互動式引導

零依賴庫，用於建立互動式和可訪問的引導。

可直接透過 Dom 屬性繫結步驟。

<button data-journey-js="{ 'title': 'Get Version', 'description': 'Logs the current version of Journey.js to the developers console.', 'order': 6 }" onclick="console.log( $journey.getVersion() );">Get Version</button>

<script> 
  // 啟動
  $journey.start();
</script>

9. barbajs - 頁面切換的平滑過渡

可用於製作平滑的頁面過渡效果，效果可訪問 https://barba.js.org/ 體驗。

📚 教程&文章

10. CSS 容器查詢互動式教程

非常詳細，有興趣&時間的可以細品一下。

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

⭐️強力推薦關注

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

相關文章