Carrie's Blog

Appearance

On this page

Mar. 2024 ​

2 nd ​

工具 ​

  • Oxc

    JavaScript Oxidation 編譯器（Oxc）是一系列用 Rust 編寫的高效能 JavaScript 語言工具。
    主要為構建 JavaScript 的基本編譯工具：

    • 解析器（Parser）
    • 檢查器（Linter）
    • 格式化器（Formatter）
    • 轉譯器（Transformer）
    • 壓縮器（Minifier）
    • 解析器（Resolver）

    同時也支援新興的 JavaScript 工具，如 Rspack、Rolldown 和 Ezno。

套件 ​

  • Vue Flow

    連結互動流程圖與圖表世界，賦予動態性和互動性，讓流程圖和圖形表示更加生動。
    輕鬆自定義和擴展基本功能，允許整合自行設計的 nodes 和 edges。
    其他元件包含背景（Background）、縮略圖（Minimap）和控制項（Controls）⋯⋯等等。

3 rd ​

套件 ​

  • v-onboarding

    適用於 Vue3，方便實現網頁導覽的套件。

    網頁導覽

    • User Tour
    • Onboarding
    • FRUX, First Run User Experience

函式庫 ​

  • LobeHub UI Kit

    開源的 UI 元件庫，用於構建 AIGC 網絡應用。

Template ​

6 th ​

套件 ​

  • twoslash

    用於 TypeScript 程式的標記格式。
    在 TypeScript 網站內顯示程式碼範例之前用作預解析器，並創建一種標準方式。

函式庫 ​

  • vue-goodshare

    在網站的頁面上分享連結至社群媒體的簡單方法，由 goodshare.js 提供支援。
    適用於 Vue.js，簡易安裝、完整文件、開發者支援、SEO 友好、多種自定義外觀選擇，不追蹤用戶在頁面上的活動。

9 th ​

套件 ​

  • uqr

    在任何運行環境中通用生成 QR Code，支援 ANSI、Unicode 或 SVG。
    ES module，零依賴，tree-shakable。

  • Gridstack.js

    適用於 dashboard layout 和 creation 的 mobile-friendly TypeScript 函式庫。
    簡單製作 drag-and-drop、多欄響應式 dashboard。
    支持多種綁定，並且與 Angular、React、Vue、Knockout.js、Ember 等框架配合。

10 th ​

套件 ​

非元件庫 ​

  • shadcn/ui

    這不是一個元件庫，這是一系列可重複使用的元件。
    可以複製貼上至個人的應用程式中，易於訪問、可自定義、開源。

    什麼是非元件庫？

    意指不需要將其作為依賴項安裝，也不透過 npm 提供或分發。
    選擇需要的元件，並將程式碼複製貼上到個人專案中，根據您的需求進行自定義，這段程式碼就是你的。

13 rd ​

套件 ​

  • Vue Apollo

    透過 declarative queries 將 apollo 整合到 Vue 元件中。

  • Apollo

    modern stack 的 API 平台，構建一個 GraphQL 平台，聚合（aggregates）和協調（orchestrates）來自任意數量客戶端和服務的 API。

15 th ​

套件 ​

元件庫 ​

  • Vueform

    為 Vue.js 提供的開源表單框架。

  • Vueform Builder

    開源的可整合表單建構器，針對任何需要建立表單的項目，提供 no-code、drag-and-drop 的表單建構器。

  • Vueform/toggle

    Vue3 的 Toggle 元件，含有 labels、客製化 slots、styling options（包含 Tailwind CSS 支援）。

    19 th ​

VSCode Extension ​

  • CSS Peek
    • 按住 Ctrl 鍵並將滑鼠 Hover 在 class 名稱或 ID 上，以預覽其定義。
    • 使用鍵盤快捷鍵開啟一個持久的定義視窗，顯示 class 名稱或 ID 的 CSS 定義。
    • 使用鍵盤快捷鍵導航到其 CSS 檔案中定義所在的位置。

    ⋯ Reference

CSS ​

  • 相對顏色
    css
    {
  --color: rgb(255, 0, 0); 
  color: rgb(from var(--color) calc(r - 255) calc(g + 255) b); 
  // r = 255, g = 0, b = 0
  // => rgb(255 - 255, 0 + 255, 0) 
  // => rgb(0, 255, 0)
}
  • color-contrast

    接受一個 color 值，並與其他的 color 值進行比較，從中選擇最高對比的顏色。

    css
    {
  --bg: #ffcc00;
  background: var(--bg);
  color: color-contrast(var(--bg) vs #fff, #000)  
}

⋯ Reference

21 st ​

SVG ​

  • <text>

    SVG 的 <text> 元素繪製由文本組成的圖形元素。
    可以像對待其他 SVG 圖形元素一樣，對 <text> 應用漸變、圖案、裁切路徑、遮罩或濾鏡。
    如果文本包含在 SVG 中但不在 <text> 元素內，則不會被渲染。

    ⋯ Reference

元件 ​

  • bryntum

    用於排程（Scheduling ）、甘特圖（Gantt Charts）、日曆（Calendars）、看板（Kanban Boards）。
    可與 Angular、React 和 Vue 或 JavaScript 應用程式整合。

24 th ​

套件 ​

  • Vue DevTools

    旨在提升 Vue 開發者體驗的工具，提供了一些功能來幫助更好理解 Vue 應用程式。

JavaScript ​

  • structuredClone
    javascript
    const obj = { ... }
const copied = structuredClone(obj)

    可以做到的功能：

    • 深拷貝無限嵌套的物件和陣列
    • 深拷貝循環引用
    • 深拷貝各種 JavaScript 型別
      如：Date、Set、Map、Error、RegExp、ArrayBuffer、Blob、File、ImageData 等等
    • 轉移任何可轉移物件（Transfer any transferable objects ）

    ⋯ Reference

27 th ​

套件 ​

  • Vue Scroll Picker

    適用於 Vue 3 的 iOS 風格捲動選擇器元件。
    支援所有滑鼠（包括捲動）和 Touch 的手勢。

  • unplugin-pure

    將 Rollup、Vite、esbuild 和 rspack 的函數註解為 pure。
    定義函數（例如，在 Vue 中使用 defineComponent）越來越常見，但它們與 tree-shaking 不太兼容。
    無法判斷接受物件的函數調用是否可以從構建中搖掉，因為可能存在副作用。
    Rollup 支援使用 /* #__PURE__ */ 註解來從函式庫作者的角度聲明這一點，但當我們知道函數呼叫的每次出現都是 pure 的，這可能會有點棘手。
    這個插件將自動在任何函數調用出現之前注入該註解。

30 th ​

套件 ​

  • vite-vue-md

    此 Vite 插件增加了將 Markdown 作為 Vue 元件引入的支援，且支援 Vue2 和 Vue3。

  • Vue Data UI

    支援使用者資料視覺化的 Vue3 元件庫，用於流暢的資料敘事。

31 st ​

套件 ​

  • NuxtSecurity

    透過使用 HTTP Headers 和 Middleware，自動配置應用程式以遵循 OWASP 安全模式和原則。

Web APIs ​

  • Fullscreen API

    Fullscreen API 提供一個簡單且便利的方式，使網頁可以使用佔用使用者的整個螢幕的方式來顯示內容。
    該 API 能夠容易地指示瀏覽器使某個元素及其子系佔用整個螢幕，並隱藏螢幕上所有瀏覽器使用者介面及其他應用程式。
    如果有一個元素打算以全螢幕模式展示（例如 <video>），可以呼叫該元素之 Element.requestFullscreen() 函式使之以全螢幕模式顯示。