Nov. 2023 ​

1 st ​

函式庫 ​

• NueJS

  用於構建 Web 介面的 JavaScript 函式庫。
  類似於 Vue.js、React.js 或 Svelte，但沒有 hooks、effects、props、portals、watchers、provides、injects、suspension或其他不常見的抽象概念。
  只需學習 HTML、CSS 和JavaScript 的基礎知識，就可以開始使用它。

套件 ​

• Hookable

  Awaitable hooks 系統。

  js

  import { createHooks } from 'hookable'
  
  // 創建 hook 實例
  const hooks = createHooks()
  
  // 掛在 'hello' 上
  hooks.hook('hello', () => { console.log('Hello World' )})
  
  // 呼叫 'hello' hook
  hooks.callHook('hello')

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  

2 nd ​

元件庫 ​

• Surely Vue Table

  表格元件，使用虛擬滾動提升渲染速度，樹狀資料、展開內容、巢狀子表格、行列合併、自動行高、橫向、縱向、固定標題、固定列等等一切都支援虛擬滾動。

套件 ​

• Vike

  類似於 Next、Nuxt，可使用任何 UI 框架（React、Vue、Svelte、Solid .etc）和任何工具（前端程式庫、Web 技術、部署環境、Vite 插件 .etc）。

4 th ​

套件 ​

• vite-plugin-node-polyfills

  用於 polyfill Node 瀏覽器環境的核心模組。

  v0.15.0 使用經驗

  1. 只 include crypto 在此用 createHash 出現問題
  2. 如果有 include 到 util console 會報錯

  暫時解法：
  只 exclude util。

• local-pkg

  在程式碼中取得有關本地套件的資訊，適用於 CJS 和 ESM。

6 th ​

元件庫 ​

• Essential JS 2

  Vue UI 元件庫，輕量、響應式、模組化且觸控友善。
  包含對 Angular、React、ASP.NET MVC 和 ASP.NET Core 框架的完整支援。

工具 ​

• Scalar

  從 Swagger 文件產生互動式 API 文件。

9 th ​

套件 ​

• apexcharts.js

  JavaScript 圖表庫，使用簡單的 API 和 100 多個現成的示例構建互動式資料視覺化。

• p-timeout

  在指定的時間後設置 Promise 的超時。

工具 ​

• Rspack

  基於 Rust 的高效能 Web bundler。

11 st ​

JavaScript ​

• #private

  javascript

  class Foo {
    publicFieldName = 1
    #privateFieldName = 2
  }

  1
  2
  3
  4
  

套件 ​

• Bentocache

  用於 Node.js 應用程式的強大的多層快取庫。

12 nd ​

套件 ​

• vue-simple-props

  移除 Vue 中的 emits、slots 和 attrs 概念。

• OverVue

  prototyping 工具，允許開發人員動態建立並視覺化 Vue 應用程式，實現 real-time 直觀的元件層次樹顯示和 real-time 生成的程式碼預覽。
  易於使用的圖形使用者介面允許您新增 HTML 屬性和 CSS 屬性，以幫助開發人員想像他們的下一個項目。
  生成的樣板程式碼可以匯出為進一步在您選擇的整合開發環境中進行開發的模板。

15 th ​

套件 ​

• vue-final-modal

  Vue.js 的一個小型、無渲染、行動裝置友善、功能豐富的 modal 元件。

• vite-plugin-browser-sync

  在 Vite 專案中加入 BrowserSync。

  BrowserSync

  節省時間的同步瀏覽器測試。
  從使用者介面或命令列自定義一系列同步設定，以建立個性化的測試環境。
  可輕鬆與 Web 平臺、構建工具和其他 Node.js 專案整合。

套件 ​

• NuxtSEO

  對於 Nuxt 的 SEO 解決方案。

18 th ​

框架 ​

• ofa.js

  免建構 MVVM 前端框架。
  可以像 jQuery 一樣作為庫使用，也可以用於開發類似於 React、Vue 和 Angular 的大型 Web 應用程式。它的引入消除了對於與介面開發無關的工具（如 npm、Node.js 和 webpack）的需求，使 Web 介面開發更加輕鬆和高效。

工具 ​

• Master CSS

  具有增強語法的虛擬 CSS 語言，僅使用 HTML 即可高效建立您的 UI 和設計系統。

• ESLint Stylistic

  用於 ESLint 的風格格式設定。
  一次性的格式設定和程式碼檢查，具有完全可自定義的規則。

19 th ​

套件 ​

• kolorist

  將顏色放入 stdin / stdout 的小型庫。

• localForage

  更為優化的離線儲存，透過簡單而強大的 API 包裝了 IndexedDB、WebSQL 或 localStorage。

22 nd ​

套件 ​

• @intlify/unplugin-vue-i18n

  i18n 相關套件。

• Pixijs

  HTML5 建立引擎：使用最快、最靈活的 2D WebGL 渲染器建立精美的數位內容。

• Vue Signature Pad

  Vue 簽名板元件。

• Anu

  基於 DX 實用程式的 Vue 元件庫。
  使用 UnoCSS 和 VueUse 構建的 Vue 框架，提供了具有出色開發體驗和靈活性的即用型組件。
  組件是完全未經風格化的，允許按照自己的喜好創建 UI。

24 th ​

元件庫 ​

• daisyUI

  免費、開源的 Tailwind CSS 元件庫。

套件 ​

• httpxy

  適用於 Node.js 的全功能 HTTP 和 WebSocket proxy。

25 th ​

工具 ​

• Nginx

  開源的高效能 HTTP 和反向代理伺服器，用於處理靜態資源、負載均衡、反向代理和快取等任務。
  被廣泛用於構建高可用性、高效能的 Web 應用程式和網站，具有低記憶體消耗、高併發能力和良好的穩定性。

Proxy ​

• 正向代理（Forward Proxy）

  是指客戶端通過代理伺服器傳送請求到目標伺服器。
  客戶端向代理伺服器傳送請求，代理伺服器再將請求轉發給目標伺服器，並將伺服器的響應回傳給客戶端。
  正向代理可以隱藏客戶端的真實 IP 地址，提供匿名訪問和訪問控制等功能。
  它常用於跨越防火牆訪問網際網路、訪問被封禁的網站等情況。

• 反向代理（Reverse Proxy）

  是指客戶端傳送請求到代理伺服器，代理伺服器再將請求轉發給後端的多個伺服器中的一個或多個，並將後端伺服器的響應回傳給客戶端。
  客戶端並不直接訪問後端伺服器，而是通過反向代理伺服器來獲取服務。
  反向代理可以實現負載均衡、高可用性和安全性等功能。
  它常用於網站的高併發訪問、保護後端伺服器、提供快取和 SSL 終止等功能。

28 th ​

元件庫 ​

• NuxtUI

  以其豐富的完全樣式化和可自定義的 UI 元件集合，簡化了建立引人注目且響應式的 Web 應用程式的過程，特別為 Nuxt 設計。

套件 ​

• Babylonjs

  美觀、簡單且開放的遊戲和渲染引擎，打包在 JavaScript 框架中。

• driver.js

  輕量級、無依賴的普通 JavaScript 引擎，可驅動使用者在整個頁面上的注意力。

29 th ​

HTML popover ​

• popover

  • auto：（預設）可透過點擊外部或 ESC 關閉。
  • manual：僅能透過開發者設置的方式來進行關閉。

  html

  <div popover id="ex-popover"></div>

  1
  

• popovertarget

  指定 popover 的 id。

  html

  <button popovertarget="ex-popover"></button>

  1
  

• popovertargetaction

  • show：開啟 popover。
  • hide：關閉 popover。
  • toggle：切換開關 popover。

  html

  <button popovertarget="ex-popover" popovertargetaction="toggle"></button>

  1
  

• 也可以使用 JavaScript 控制

  javascript

  // 如果 popover 已經開啟，再次呼叫會報錯
  popoverEl.showPopover()
  popoverEl.hidePopover()
  
  // 可以藉由傳入 boolan 參數設定強制開啟或關閉
  popoverEl.togglePopover(force)

  1
  2
  3
  4
  5
  6
  

• 可以透過 toggle 事件監聽 popover 的狀態

  javascript

  popoverEl.addEventListener('toggle', (event) => {
    if (event.newState === "open")
      console.log('開啟')
    else
      console.log('關閉')
  })

  1
  2
  3
  4
  5
  6
  

⋯ Reference