Carrie's Blog

Appearance

On this page

Oct. 2023 ​

1 st ​

工具 ​

  • unplugin

    統一的 plugin 系統，適用於 vite、rollup、webpack、esbuild、rspack 等等。
    這個組織用於託管和合作開發社群中的熱門 plugin，unplugin 的核心位於 unjs/unplugin 下。

套件 ​

  • Pinia ORM

    用於啟用對 Pinia Store 的物件關聯映射（Object-Relational Mapping）訪問。

3 rd ​

套件 ​

  • markdown-it-mdc

    markdown-it 的 MDC（Markdown Component）語法。

  • Vue Play

    Vue Play 是一個完整的 drag & drop 設計工具，用於構建 Vue 組件、網站和 Web 應用程序。

Git ​

  • submodule

    在 repo 中嵌入其他 git repo，相當於版本控制原本的 repo 之外，也把內嵌的 repo 也納入版本控制的範圍。
    在 main module 新增 submodule：

    sh
    git submodule add <repository> <path>

6 th ​

VueUse ​

  • usewebsocket

    響應式 WebSocket client。

    js
    import { useWebSocket } from '@vueuse/core'

const { status, data, send, open, close } = useWebSocket('ws://websocketurl')

HTML ​

  • <a ref="noreferrer">

    透過從 HTTP header 中刪除 referrer information（引薦資訊）來防止將referral info（引薦來源資訊）傳遞到目標網站。
    在 Google 分析中，來自具有 rel=”noreferrer” 屬性的連結的流量將顯示為 Direct Traffic（直接流量）而不是 Referral（推薦流量）。

  • <a ref="noopener">

    新增到外部連結的 HTML 屬性，可以防止開啟頁面獲得對原始頁面的任何訪問許可權。

    DANGER

    當瀏覽器使用 target="_blank" 來開啟新視窗時，新視窗所在的網頁是有辦法透過 window.opener 這個物件來操作原本的頁面。
    建議加上 rel="noreferrer noopener" 以確保使用者當前瀏覽的頁面，不會因為開新視窗後被另開的這個網站所影響。

⋯ Reference

7 th ​

工具 ​

  • Jenkins

    持續整合（CI）工具。
    透過 CI/CD 概念的實踐，可以針對每一次產品的修改，或是週期性地對產品進行各種單元（unit testing）或整合測試（integration testing）。
    提供相當多 plugin 來支援不同的專案開發（e.g. Gradle, Grails, Maven），在使用上相當容易上手。
    ⋯ Reference

套件 ​

  • mdit-vue

    Vue.js 的 markdown-it 插件。

9 th ​

套件 ​

  • node-fetch

    輕量級模組，將 Fetch API 引入 Node.js。

JS ​

  • Array.filter(Boolean)
    js
    arr.filter(Boolean) // arr.filter((x) => Boolean(x))

工具 ​

  • clack

    建立漂亮的命令列應用程式。

10 th ​

套件 ​

  • picocolors

    最小且速度最快的 Terminal 輸出格式化與 ANSI 顏色的函式庫。

    ANSI

    字元代碼，通常使用 0x00 ~ 0x7F 範圍的 1 byte 來表示 1 個英文字元。
    超出此範圍的使用 0x80 ~ 0xFFFF 來編碼，即擴充套件的 ASCII 編碼。

  • zod-i18n

    用於翻譯 Zod 的預設錯誤訊息。

  • eslint-plugin-jsdoc

    JSDoc 針對 ESLint 的特定 linting 規則。

13 rd ​

套件 ​

  • vite-plugin-pwa

    適用於 Vite 的零配置 PWA plugin。

  • jsonwebtoken

    JSON Web Tokens（JWT）的實現。
    針對 draft-ietf-oauth-json-web-token-08 開發，使用了 node-jws。

    JSON Web Token（JWT）

    用於表示要在兩個方之間傳輸的聲明。
    JWT 中的聲明被編碼為 JSON 物件，用作 JSON Web Signature（JWS）結構的有效載荷，或者用作 JSON Web Encryption（JWE）結構的純文字，使得這些聲明可以進行數字簽名或使用訊息驗證碼（MAC）進行完整性保護和／或加密。

UI ​

  • Naive UI

    自訂主題，使用 TypeScript 的 Vue 3 元件庫。

工具 ​

  • Vue TermUI

    基於 Vue.js 的 terminal UI 框架，輕鬆構建 terminal 應用程式。

14 th ​

CSS ​

  • 子層選擇器
    1. 選擇 <li> 底下的所有 <a>
    css
    li a { /* ... */ }
    1. 選擇 <li> 底下直接的 <a>
    css
    li > a { /* ... */ }
  • <a> 偽類
    css
    a:link { /* 還沒點擊過的連結 */}
a:visited { /* 已經訪問過的連結 */ }
  • 相鄰選擇器
    1. 選擇 <ul> 後的第一個 <p>（如果不是 <p> 就不會被選擇到）
    css
    ul + p { /* ... */ }
    1. 選擇 <ul> 後全部的 <p>（不需連續）
    css
    ul ~ p { /* ... */ }
  • 選擇 屬性 href 有包含 https 的 <a>
    css
    a[href*="https"] { /* ... */ }

17 th ​

HTML ​

  • <optgroup>

    為 <select> 元素中的 <option> 建立分組。

    html
    <select id="dino-select">
  <optgroup label="Theropods">
    <option>Velociraptor</option>
    <option>Deinonychus</option>
  </optgroup>
  <optgroup label="Sauropods">
    <option>Saltasaurus</option>
    <option>Apatosaurus</option>
  </optgroup>
</select>

    ⋯ mdn web docs

19 th ​

套件 ​

  • vue-surf

    高度客製化的動畫 SVG 波浪 Vue 組件。

工具 ​

  • electron-vite

    旨在為 Electron 提供更快速簡潔的開發體驗的構建工具。

21 st ​

工具 ​

  • transform

    多語言線上轉換器。

  • TOML

    易閱讀的配置文件格式。
    TOML 被設計成可以對照到 hash table，易於解析成各種語言中的資料結構。

    toml
    [database]
enabled = true
ports = [ 8000, 8001, 8002 ]
data = [ ["delta", "phi"], [3.14] ]
temp_targets = { cpu = 79.5, case = 72.0 }
  • HOCON

    Human-Optimized Config Object Notation
    一種易於使用的設定格式，被用於 Sponge 以及使用了 Sponge API 的獨立插件以儲存重要資料，檔案中常以 .conf 作為結尾。

    conf
    player: {
  name: "Steve",
  level: 30
}

player {
  name = "Steve"
  level = 30
}

    ⋯ Reference

22 nd ​

套件 ​

  • ufo

    URL utils。

  • unctx

    純 JavaScript 的 composable，輕鬆實現像 Vue 的 Composition API 模式。

VSCode Extension ​

24 th ​

套件 ​

  • NextAuth.js

    針對 Next.js 應用程式的完整開源身份驗證解決方案，支援 Next.js 和 Serverless。

HTML ​

  • <kbd>

    在 tag 語意上強調「鍵盤輸入按鍵」，也會在沒有 CSS 樣式的狀態下套用等寬字體。
    Ctrl + C

    html
    <kbd>Ctrl</kbd> + <kbd>C</kbd>

    ⋯ Reference

  • <fieldset>、<legend>

    <legend> 標記定義 <fieldset> 元素的標題。
    ⋯ Reference

  • <map>

    用於定義圖片對映，圖片對映是一個具有可點選區域的圖片。
    必備 name 屬性與 <img> 的 usemap 屬性關聯，建立了圖片與對映之間的關係，且包含多個 <area> 元素，用於定義圖片對映中的可點選區域。
    ⋯ Reference

  • <meter>

    定義一個已知範圍內的標量測量，或者是一個分數值，這也被稱為 gauge。

    WARNING

    <meter> 標籤不應用於指示進度（如進度條）。
    對於進度條，應使用 <progress> 標籤。

    ⋯ Reference

26 th ​

HTML ​

  • <picture>

    提供了更靈活的方式來指定圖片資源，元素內含兩個標籤：一個或多個 <source> 和一個 <img>。
    瀏覽器會尋找第一個 <source>，Media query 會根據當前 viewport 寬度，然後顯示適當的圖片，而 <img> 必須作為 <picture> 的最後一個子元素，作為後備選項，如果沒有匹配的 <source> 則使用它。
    ⋯ Reference

  • <sup>

    上標文字，像是這樣。

  • <sub>

    下標文字，像是這樣。

  • <wbr>

    指定在文字中的哪些位置可以新增斷行。

27 th ​

套件 ​

  • MJML

    markup language（標記語言），旨在減少編寫響應式電子郵件的痛苦。
    MJML 的開源引擎負責將編寫的 MJML 轉換為響應式 HTML。

  • Marked

    Markdown 解析器和編譯器。

  • Import Cost

    在編輯器中內嵌顯示 imported package 的大小，主要是利用 webpack 來檢測 imported 的大小。

29 th ​

JS ​

  • 建立一維陣列
    js
    const arr = new Array(10).fill('foo')
    js
    const arr = new Array(10)
const filledArr = [...arr].map(() => 'foo')
    js
    const arr = Array.from({ length: 10 }, () => 'foo')

    WARNING

    建立二維陣列時儘量不要使用 Array.fill() 的方式。
    透過這種方式填充建立的陣列，裡面每一項是完全相同的（如果是物件類型就會都指向同一個）。
    ⋯ Reference

問題 ​

  • 不要將 async-await 與 forEach 配合使用

    應該使用 for...of，而不是 forEach。

    1. iterator 函數回傳的 Promise 未被處理，因此，如果其中一個 Promise 引發錯誤，該錯誤將無法被 catch。
    2. 由於 forEach 不等待每個 Promise 解析，他們都是並行的，而不是按順序。
      因此，在任何 Promise 完成之前，迴圈實際上已完成迭代！

    ⋯ Reference

  • Array() vs new Array()

    當 Array 被當做一個函數而不是一個建構函式來呼叫時，它會建立並初始化一個新的 Array 物件。
    因此，函數呼叫 Array() 等同於使用相同參數的物件建立表示式 new Array()。
    ⋯ Reference

31 st ​

框架 ​

  • Redwood

    full stack JavaScript/TypeScript Web 應用程式框架。
    是一個 React 前端應用程式，與自訂的 GraphQL API 進行通訊，API 使用 Prisma 操作資料庫。
    開箱即用，可以使用 Jest 進行緊密整合的測試，使用 Pino 進行日誌記錄，並使用 Storybook 建立 UI 元件目錄、設定身份驗證（e.g. Auth0）或 CSS 框架（e.g. Tailwind CSS），僅需一條命令列呼叫。
    並且，Redwood 的架構可以部署到無服務提供商（e.g. Netlify、Vercel）或傳統的伺服器和容器提供商（e.g. AWS、Render）。

工具 ​

  • Grammarly

    使用 Grammarly 的 SDK 提供高品質的寫作協助。
    只需新增幾行程式碼，就可以將實時寫作支援引入應用程式中。

套件 ​

  • Vue Collapsed

    從 any 到 auto height 以及反之的動態 CSS height transition，例如 Accordion（手風琴）。