Carrie's Blog

Appearance

On this page

Apr. 2024 ​

4 th ​

套件 ​

  • core-vapor

    Vue Vapor 是 Vue 的一個變體，提供無虛擬 DOM 的渲染功能。

  • DocuSeal

    開源的 DocuSign 替代品，創建、填寫和簽署數字文件。
    創建 PDF 表單，使其能夠在任何裝置上透過易於使用的、為移動裝置優化的網路工具進行在線填寫和簽署。

工具 ​

  • ShapeFactory

    簡單的設計工具。

    • Logo
    • Pigment
    • Gradient
    • Duotone

5 th ​

CSS ​

  • currentcolor

    設計的初衷是為了簡化文字顏色與其他屬性顏色之間的同步。
    允許我們使用元素目前的文字顏色值作為其他屬性（如 border-color、background-color、box-shadow）的值。

    css
    { 
  color: red; 
  border: 5px solid currentcolor;
  box-shadow: 0 0 5px solid currentcolor;
}

    ⋯ Reference

套件 ​

  • nuxt-typed-router

    為 Nuxt 提供一個類型安全的路由器，自動生成路由路徑、名稱和參數的型別定義。

6 th ​

套件 ​

  • tRPC

    輕鬆實現端到端的型別安全 API，體驗 TypeScript 推斷的力量。

框架 ​

  • fastify

    專注於提供最佳開發者體驗、最低運行開銷以及強大插件架構的 Node.js 網頁框架。

工具 ​

  • Commit Lint Generator

    用於檢查 Commit 的工具。
    以 commitlintrc.js 文件作為配置，其中定義了 hooks 和各種 rules，可以根據特定的 hook 指定所需的檢查規則。

10 th ​

IDE ​

  • Zed

    高性能的多人編輯 IDE。

工具 ​

  • twoslash

    針對 TypeScript 程式碼的標記格式，適用於創建自包含的程式碼範例，讓 TypeScript 編譯器完成額外的工作。
    用作顯示 TypeScript 網站內程式碼範例的預解析器，並為我們在編譯器問題追蹤器上創建錯誤範例提供標準方式。

  • request-indexing

    透過 Web Search Indexing API 實現請求頁面索引並查看 Google Search Console 資料。

13 rd ​

SVG ​

  • stroke-dasharray

    筆畫的長度，可以將 stroke 做成虛線的效果。

  • stroke-dashoffset

    將虛線做推移（dasharray 還是會保持循環）。

⋯ Reference
⋯ Reference

19 th ​

套件 ​

  • styled-components

    增強 CSS 以為 React 組件系統進行樣式設計的結果，透過像下方的寫法，styled-components 會追蹤頁面上渲染的元件，並自動注入它們的樣式。
    並且，styled-components 會自動生成唯一的 Class Name，不必擔心重複或錯字。

    jsx
    onst Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;
  • @emotion/css

    高效能且靈活的 CSS-in-JS Library。 基於許多其他 CSS-in-JS Library，允許使用字串或物件樣式快速設計樣式。

    jsx
    import { jsx } from '@emotion/react'

let SomeComponent = props => {
  return (
    <div
      css={{
        color: 'hotpink'
      }}
      { ...props }
    />
  )
}

22 nd ​

JS ​

  • Symbol.for(key)

    根據 key 回傳對應的 Symbol，如果找不到則新建一個回傳。

  • Symbol.keyFor(sym)

    在全域尋找 sym 這個 Symbol 的 key，若找不到則回傳 undefined。

套件 ​

  • vue-gtag

    適用於 Vue 的 Global Site Tag 插件。
    gtag.js 是一個 JavaScript tagging framework 和 API，允許將事件資料發送到 Google Analytics、Google Ads 和 Google Marketing Platform。

26 th ​

套件 ​

  • crossws

    用於實現平台無關的 WebSocket 伺服器。
    無縫整合 Bun、Deno、Cloudflare Workers 和 Node.js，且支援 ESM 和 CJS。

  • eslint-plugin-fix-later

    自動用 fix later 的註解來壓制 ESLint 的 Error，將它們轉換為 Warning 以供未來解決。

    用法:

    // eslint-disable-next-line no-console -- Fix later
console.log(data)

  • pangu.js

    用途為自動在網頁中所有的中文字和半形的英文、數字、符號之間插入空白。
    含有 Web Extension、Node.js、CLI 等方式可供選擇。

28 th ​

工具 ​

  • Knex.js

    SQL query builder，支援 PostgreSQL、CockroachDB、MSSQL、MySQL、MariaDB、SQLite3、Better-SQLite3、Oracle 和 Amazon Redshift。

套件 ​

  • diff-match-patch-es

    將 diff-match-patch 用 ESM 和 TypeScript 重寫。

    diff-match-patch

    高效能、多語言（C++、C#、Dart、Java、JavaScript、Lua、Objective C、Python）的函式庫，用於操作純文字。

    • Diff：比較兩個純文字，並回傳差異列表。
    • Match：給定一個搜索字符串，在一個純文字中找到其最佳模糊匹配（權重考慮了準確性和位置）。
    • Patch：將一個補丁列表應用到純文字上。即使基礎文字不匹配，也盡力應用補丁。

29 th ​

套件 ​

  • css-media-splitter

    此工具會將所有 @media 規則提取到專用文件中，並僅在使用者設備符合 media query 時下載它們。
    這種技術對於以 mobile 優先的應用程式最為有價值。它減少了下載的 CSS 大小並提高了覆蓋率，從而加快了頁面加載速度。

  • drag-and-drop

    drag-and-drop 是一個小型函式庫，用於在應用程式中添加資料優先的拖放排序和元素轉移。
    與框架無關，且壓縮後僅約 4Kb，功能適用於 React、Solid、Vue、Svelte 或任何 JavaScript 應用程式。