瞭解網路開發的最新工具和技術非常重要。在本期 “網頁設計師和開發人員的資源清單” 中，我們將介紹一些最有前途的資源，幫助網路開發人員保持領先。
從圖片資源、新的設計系統指南和配色設計資源到各種前後端框架，再到各種 CSS 教學、免費課程，我們為每個級別的開發人員都準備了相應的資源，幫助他們提升技能，開啟網路開發之旅。
設計資源
圖示資源
Iconify
Iconify 這是一個多功能圖示框架，包含 100 多個圖示集的 100,000 多個圖示。通過它，您可以使用統一的應用程式介面將圖示嵌入到純 HTML 和 SVG 中，也可以嵌入到 Vue.js 或 React.js 等前端框架中。
通過 Figma、Sketch 和 Adobe XD 的外掛，您還可以在設計應用程式中使用圖示。這最終有助於避免供應商鎖定，同時還能訪問成千上萬的高質量圖示。它以 NPM 軟體包和 Composer for PHP 的形式提供。
AtalsIcons
AtalsIcons 是一個免費的開源圖示庫，可用於各種設計專案。該庫包含 2,701 個 SVG 格式的圖示，還提供網頁字型、Figma、React、Vue 和 Flutter 包。
有了 Atlas 圖示，設計人員和開發人員就可以輕鬆獲取各種風格一致、可用於各種平臺的圖示。
Icones
Icones 是一款提供流行圖示集的網路工具，包括 Tabler、Bootstrap Icons、Ionicons、Octicons 等。它旨在通過提供友好的使用者介面和工作流程，簡化在專案中查詢和使用圖示的過程。Icones 還可作為 VS Code 擴充套件使用，並計劃在不久的將來推出桌面應用程式。
IconHunt
IconHunt 擁有大量免費和開源圖示，介面簡單友好，便於搜尋和瀏覽。您可以輕鬆下載圖示或將其匯入 Notion 和 Figma。對於尋找免費和高質量圖示的設計師和開發人員來說，這是一個非常有用的資源。
設計系統資源
The Design System Guide
The Design System Guide 網站提供了學習設計系統的綜合指南。它涵蓋了基礎、設計代幣和其他資源等重要主題。
設計系統旨在通過為團隊工作提供一種通用語言和一套原則來提高設計和開發的一致性和效率。如果你有興趣瞭解設計系統，這個網站可以作為一個很好的起點。
UK Gov Design System
UK Gov Design System 是英國政府可以說擁有最好的官方網站之一。他們的開發團隊提供了大量可重複使用的使用者介面元素，旨在支援多種應用程式。雖然您可能不會在自己的網站上直接使用這種設計系統，但您可以從中汲取豐富的知識 – 尤其是在可訪問性和使用者介面一致性方面。
Design System Checklist
Design System Checklist 網站為設計和實施設計系統提供了一份詳盡的核對錶。它涵蓋了排版、顏色、間距、元件、可訪問性、文件和版本等各個方面。該資源可幫助設計人員和開發人員建立使用者友好型體驗和簡化開發流程。
配色設計資源
Dark Mode Design
Dark Mode Design 是一個展示設計精美網站的資源庫，這些網站要麼完全採用暗色模式，要麼可以切換到暗色模式。這可以為您在自己的網站上建立暗模式功能提供靈感。
本網站上的所有網站都是由 Cai Cardenas 精心挑選和策劃的，以確保所選網站都是高質量和精心設計的。
Alphredo
Alphredo 是一款配色生成應用程式，可建立半透明版本的色彩，當將其置於相同背景下時，會顯示出與不透明版本相同的色彩。
使用該軟體，您可以指定背景，並在調色盤的連續步驟中調整飽和度，這可以幫助您建立一個連貫的調色盤，供整個專案使用。
OKLCH
OKLCH 是一款幫助設計師使用 LCH 和 OKLCH 色彩空間挑選和轉換色彩的工具。OKLCH 是一種較新的色彩空間，與 RGB 和 HSL 一樣，是 CSS Color 4 規範的一部分。
它能更好地支援現代螢幕，並且在色彩轉換後始終具有可預測的對比度。如果您想深入瞭解這種新的色彩空間，請檢視這篇文章，瞭解它為何優於 RGB 和 HSL。
設計相關
Freefaces Gallery
Freefaces Gallery 網站展示了從網際網路上收集的具有免費許可證的字型。該網站提供多種字型樣式，包括草書字型、顯示字型、單空格字型、襯線字型、無襯線體和板塊字型。這些字型可以美化您網站的外觀，也可以為您提供靈感。
Intel One Mono
Intel One Mono 是專為開發人員設計的單空間字型系列。該字型系列包括四種重量，即淺色、普通、中等和粗體，每種重量都有相應的斜體。它支援 200 多種使用拉丁字母的語言。
Landing Love
Landing Love 是一個經過精心策劃的網站最佳動畫展示平臺。它展示了著陸頁的頂級範例，為建立美觀有效的著陸頁設計提供了設計靈感。
LottieFiles Figma
LottieFiles Figma 外掛可讓設計師輕鬆地將 Figma 設計匯出為 Lottie 動畫。它通過直接連線 Figma 和 LottieFiles 來增強工作流程。在處理動畫時，這款實用的外掛可提高設計人員和開發人員的工作效率。
Notion Avatar
如果您有興趣製作一個獨特的線上角色，Notion Avatar 是一款線上工具，可以讓您建立與 Notion 中類似的頭像。它提供多種自定義選項，如不同的臉型、鼻子、嘴巴、眼睛、眉毛、眼鏡、髮型、鬍鬚、面部細節和配飾。
前端開發
前端開發工具集
Precedent
Precedent – Next.js 專案的元件、鉤子和實用程式集合。它採用了所有最新的庫和框架，如用於基本使用者介面的 Radix UI、用於處理谷歌、Twitter 和 GitHub 等提供商的使用者身份驗證的 Auth.js、用於元件動畫的 Framer Motion，以及通過一組預定義的 CSS 實用工具類為元件設計樣式的 TailwindCSS。
Mafs
Mafs 是一套有主見的 React 元件，可讓您輕鬆為使用者建立精美、引人入勝的數學內容。無論您是要建立數學學習平臺、資料視覺化工具，還是其他什麼，Mafs 都是建立互動式數學體驗的完美工具。
Web Components Guide
Web Components Guide 允許開發人員建立具有自己行為的自定義可重用元素，並將其呈現在瀏覽器中，就像標準的 HTML 元素一樣。它速度很快，而且可以與一些框架整合。
如果您想了解更多有關 Web 元件的資訊，本網站提供了一些建立自己的 Web 元件的介紹和教學。您將學習到封裝、陰影 DOM、事件、插槽等概念。
HTML with Super Powers
要進一步瞭解網路元件，可以訪問 HTML with Super Powers。它涵蓋了網路元件的基礎知識，如 template 標籤、 slot 籤和樣式的使用，幷包含了從簡單到複雜的各種實用示例。
Mitt
Mitt 是一個小型、快速的 JavaScript 事件發射器庫，既可在瀏覽器中使用，也可在 Node.js 中使用。它提供了一個簡單的 API，用於為事件新增監聽器和發射帶有資料的事件。它沒有依賴性，支援 IE9+。如果您的應用程式需要自定義事件監聽器，這是一個非常適合安裝的庫。
Arktype
ArkType 是一個執行時驗證庫，可自動推導 TypeScript 定義。當你在程式碼編輯器中輸入時，它會在編輯器中提供即時反饋，顯示完全推導的型別或特定的解析錯誤。這些反饋反映了執行時會發生的情況。
如果您希望在開發過程中和應用程式執行時都能確保型別安全，那麼它就是一個非常有用的庫。
magic-regex
magic-regex 是一個讓 RegEx 更簡單的 NPM 庫。你可以使用函式和自然語言語法，而不必編寫難以理解的奇怪 RegEx 語法。該庫會將函式編譯並轉換為純粹有效的 RegEx。
Magicast
Magicast 是一個 JavaScript 和 TypeScript 程式碼修改庫，允許使用者使用簡單易用、熟悉的語法對原始碼進行程式設計修改。它使用由 recast 和 babel 解析的 AST，並提供匯出/匯入操作、函式引數操作、智慧格式化和改進程式碼可讀性等功能。
它可能不是你使用的庫，但如果你需要進行涉及程式碼修改的底層程式設計，這可能是一個非常方便的庫。
Variant Vault
Variant Vault 是一個資源庫，其中收集了使用 Framer Motion 製作的設計精美、免費且易於訪問的動畫和變體。對於希望使用預先設計的、美觀的動畫來豐富專案的開發人員來說，它是一個方便的工具。
Taxonomy
Taxonomy 是 Next.js 13 的一個示例專案，具有多種現代功能，如身份驗證、訂閱、API 路由和靜態頁面。此外，它還包含一個部落格和使用 Contentlayer 和 MDX 建立的詳盡文件。它是建立全棧 Next.js 應用程式的絕佳靈感來源。
Next SEO
Next SEO 可讓 Next.js 應用程式中的 SEO 後設資料管理變得輕而易舉。通過它，您可以輕鬆新增標題標籤、元描述等內容。這將增強網站的搜尋引擎優化，並簡化每個頁面上的後設資料定製。
ESLint Stylistic
ESLint Stylistic 為 ESLint 和 TypeScript-ESLint 提供特定於樣式的規則。啟動該專案是為了將格式和樣式規則與 ESLint 區分開來，尤其是在 ESLint 核心團隊決定棄用此類功能之後。看看這個專案如何發展會很有趣。
UI元件庫
Semi Design
Semi 是一個使用者介面設計框架，可幫助設計人員和開發人員建立高質量的數字介面。它遵循 W3C 標準，支援多種語言、時區和從右到左的語言。
此外，它還相容伺服器端渲染場景，可用於 Next.js 和 Gatsby 等流行框架。此外，它還提供全面的設計標記和元件變體，這些標記和變體由 Figma 同步和提供。
WindmillUI
Windmill UI 是一個現代、免費的網路使用者介面庫，用於構建儀表盤、管理區和其他網路應用程式。它包含一系列預建元件和樣式，如表格、表單、模態和警報，可完全響應和自定義。
它採用 Tailwind CSS（一個實用優先的 CSS 框架）構建，並可與 React 輕鬆整合。Windmill UI 還為儀表盤提供了現成可用的模板，讓您更輕鬆地開始構建網路應用程式。
NaiveUI
NaiveUI 是 Vue 3 的使用者介面庫，它提供了大量高度可定製的使用者介面元件，如按鈕、表單、選單和模型，以及佈局和樣式設計工具。
它支援國際化（提供 10 多種語言的翻譯）、暗模式和可訪問性（元件設計符合 WCAG 2.0 標準）。如果您想使用 Vue 構建應用程式，它可能是構建使用者介面的完美庫。
NuxtLabs UI
NuxtLabs UI 為 Nuxt 應用程式提供全面的使用者介面解決方案。它包括元件、圖示、顏色、暗模式支援和鍵盤快捷鍵。它採用 Headless UI 和 Tailwind CSS 構建，提供 HMR 支援、捆綁圖示和全鍵入功能，從而改善開發體驗。
Radix Vue
Radix Vue 是 Radix UI Primitives 的 Vue.js 版本，這是一個開源 UI 元件庫。該庫的設計側重於可訪問性、自定義和增強開發人員體驗。它是構建高質量設計系統和網路應用程式的堅實基礎，尤其注重解決現有網路平臺實施的侷限性。
Draft UI
Draft UI 是一組 React 元件，它們優先考慮了網頁的可訪問性，並可輕鬆複製和貼上到您的專案中。這些元件從 shadcn/ui 中汲取靈感，提供了對程式碼的完全控制，便於自定義和調整。Draft UI 相容任何 React 框架。
Marigold UI
Marigold 是基於 react-aria 和 Tailwind CSS 的使用者介面框架和元件庫。其主要目標是提供一系列可訪問的預設計使用者介面元件，可無縫整合到任何網路應用程式中。Marigold 可幫助開發具有一致性和視覺衝擊力的使用者介面。
v0
v0 是由 Vercel 開發的人工智慧生成使用者介面系統。在您輸入提示後，您將收到三個由 Shadcn UI 和 Tailwind CSS 製作的人工智慧使用者介面選項。您可以選擇其中一個，複製其程式碼，或通過調整單個使用者介面元件進行自定義。v0 的目標是簡化您的開發工作流程，讓您能夠毫不費力地建立和整合漂亮的使用者介面。
FloatUI
FloatUI 是一個免費、開源的現代 UI 元件和模板集合，採用 Tailwind CSS 構建，適用於 React 和 Vue。它提供精心設計的元件和即用型模板，可加快任何規模專案的開發速度。
Kitchen
Kitchen 在 React 或 React Native 中提供可定製的樣式化元件。它包含遵循 WAI-ARIA 標準的可訪問元件，可根據設計需求調整主題，並支援所有平臺。
它還包含一個簡單的響應式系統和可重複使用的鉤子，確保在開發過程中提高您的工作效率。
Vant
Vant 提供各種可定製和可重用的使用者介面元件，如為 Vue.js 構建的按鈕、表單和導航元素。它旨在通過提供具有一致風格和行為的即用元件來簡化開發流程。
Semi Design
“Semi Design” 是一個使用者介面庫，擁有 60 多個元件。它與 Figma 整合，實現了從設計到程式碼的無縫過渡。該庫強調可訪問性，支援國際化，並通過詳盡的測試流程（單元測試、e2e 測試和視覺化測試）確保嚴格的質量保證。此外，它還相容 SSR，可與 Next.js、Astro 等現代工具相容。
Vanilla Components
Vanilla Components 是一個為 Vue 3 量身定製的輕量級、適應性強的使用者介面庫。它使用 Vue 3、TypeScript 和 Tailwind CSS 作為基礎樣式，簡化了所有複雜的細節，使開發人員能夠專注於開發，實現更高的生產力。
React相關資源
React.js Email
React.js Email 是一個可幫助您使用 React 和 TypeScript 建立精美電子郵件的庫。它帶有非樣式化元件，可讓您更輕鬆地編寫響應式電子郵件。它能為你處理 Gmail、Outlook 和其他電子郵件客戶端之間的不一致性，所以你不必擔心。它甚至還支援暗模式。
React Aria Components
React Aria Components 是構建在 React Aria hooks 之上的非樣式化元件集合。它簡化了自定義風格元件的構建，並抽象出了將鉤子連線在一起所需的膠水程式碼。它目前處於 alpha 階段，正在積極開發和維護中。
React Dev
這是 React.js 的官方網站，由 Facebook 開發和維護。它提供 React 的全面使用指南，包括文件、教學和示例。
對於想要開始使用 React 並瞭解 React 開發的最新更新和最佳實踐的人來說，該網站是必不可少的資源。
React Email
ReactEmail 是一組高質量、無樣式的 React 元件，用於建立視覺效果吸引人的電子郵件。它採用 React 和 TypeScript 開發，旨在簡化建立響應式電子郵件的過程，並解決與 Gmail 和 Outlook 等電子郵件客戶端不一致的問題。
React TypeScript 指南
該開源專案為將 TypeScript 與 React 結合使用提供了全面的指南和最佳實踐。它涵蓋了 React 開發的各個方面，包括元件、鉤子和其他關鍵概念。該專案旨在幫助開發人員在使用 TypeScript 和 React 時編寫更可靠、更可維護的程式碼。
Reactime
Reactime 是一款 Chrome 瀏覽器擴充套件，旨在增強現代 React 應用程式的除錯功能。它具有時間旅行除錯、狀態元件顯示、效能視覺化等功能，甚至允許你以 JSON 檔案的形式下載狀態歷史。
前端框架/庫
Next.js Drupal
適用於 Drupal 的 Next.js 可讓您為自己的 Drupal 網站建立高階前端。它支援各種頁面渲染方法，包括 SSG、SSR 和增量靜態再生（ISR）。它還支援 Drupal 的內建功能，如多站點功能、身份驗證、網路表格、搜尋 API、國際化（i18n）和預覽模式。它可與 JSON:API 和 GraphQL 無縫協作，為 Drupal 使用者提供強大而靈活的開發體驗。
Nuxt Studio
Nuxy Studio 是一款網路應用程式，為 Nuxt 提供了基於 Git 的內容管理系統。通過它，您可以像在開發過程中一樣通過 Github 處理內容檔案。您可以根據模板建立新專案，或從 GitHub 匯入現有專案，並輕鬆共享實時預覽連結。
對於那些協作開發內容並使用 GitHub 進行版本控制的人來說，這是一款很棒的應用程式。
Astro Starlight
Starlight 是使用 Astro 框架建立文件的工具。它提供網站導航、搜尋、國際化、搜尋引擎優化、排版、程式碼高亮、暗模式等基本功能。它還支援各種標記語言，允許你使用 React、Vue、Svelte、Solid 等框架。
UnoCSS
UnoCSS 是一個實用優先的 CSS 框架，旨在提供一種直觀靈活的樣式編寫方式。它允許開發人員直接在標記中編寫 CSS，而無需擔心底層結構或特殊性，從而更易於維護和重構樣式。
它還包含一個靈活的主題系統，並支援多種開箱即用的 CSS 功能，如偽類、媒體查詢和動畫。
Next Sitemap
Next Sitemap 是一款專門為 Next.js 專案生成搜尋引擎友好型網站地圖的工具。它能與 Next.js 平滑整合，支援所有型別的頁面渲染，包括靜態、預渲染、動態和伺服器端頁面。該工具提供多種自定義選項，用於定製網站地圖結構和內容。
Docus
Docus 是一個允許您使用 Markdown 和 Vue 元件編寫文件的框架。它建立在 Nuxt 架構之上，擁有 50 多個用於構建頁面、導航和目錄的元件。
Docus 具有高度可擴充套件性，允許您自定義設計或使用 slots 新增元件，使其成為您自己的文件。
Nodl
Nodl 是一個框架，可讓您為基於 Node 的應用程式建立計算節點圖。通過該庫，您可以輕鬆設計、操作和執行這些圖。
如果您需要在應用程式中實現複雜資料的視覺化，同時還需要為使用者提供某種形式的介面來與資料進行互動，那麼 Nodl 就是一個很好的庫。
Unlazy
Unlazy 是一個 JavaScript 庫，它提供了一種使用本機瀏覽器 API 輕鬆載入圖片的方法。它可與 loading="lazy" 屬性一起使用，並使用 BlurHash 演算法支援（模糊）佔位符影象。
該庫包括自動大小計算、使用 <picture> 支援多個圖片標籤和搜尋引擎友好等功能。該庫專為現代瀏覽器而構建，與框架無關，允許您在有框架或無框架的情況下使用。
Nitro
Nitro 是執行網路伺服器的開源 TypeScript 框架。它可通過零配置設定和 HMR 實現快速開發。您可以在任何地方進行部署，包括 AWS、Deno、DigitalOcean，甚至 Github 頁面，而無需額外配置。
Panda CSS
Panda CSS 是一個 CSS-in-JS 框架，它為網頁開發人員提供了一個型別安全、可擴充套件的 CSS-in-JS 解決方案。它允許你直接在 JS 檔案中編寫樣式，然後在構建時提取出來。它還支援為主題建立設定高階設計標記，並提供型別安全的自動完成功能，以幫助避免常見錯誤並提高工作效率。
Nue.js
Nue.js 是一個輕量級 JavaScript 庫，旨在簡化網路開發。它是 React 和 Vue 等流行框架的替代品。通過消除鉤子和道具等複雜性，Nue.js 使那些對 HTML、CSS 和 JavaScript 有基本瞭解的人更容易進行網路開發。儘管 Nue.js 仍在開發中，但它顯示了未來的發展前景。
Stacks.js
Stacks.js 是一個快速全棧開發框架，採用 “約定重於配置 “的方法。它簡化了網頁和桌面應用程式、無伺服器 API、雲基礎設施的開發，並附帶一套使用者介面元件。它採用 Bun, Tauri, UnoCSS, Vite, 和 Vue 等現代網路開發堆疊構建。
TresJS
TresJS 是一個在 Vue 中引入 ThreeJS 的 JavaScript 庫。它簡化了使用 Vue 元件建立 3D 物件的過程。因此，如果您沒有三維建模方面的經驗，現在也可以輕鬆建立帶有燈光、材質和特效的令人驚歎的三維場景，給網站訪客留下深刻印象。
BlockNote
Blocknote 是一個開源 JavaScript 庫，用於建立所見即所得的編輯器。除了粗體、斜體和下劃線等基本文字編輯功能外，它還具有一些高階功能，如實時協作、拖放塊和可定製的/選單。
它具有靈活性和可定製性，如果你想為自己的網路應用程式新增一個現代化的編輯器，它將是一個不錯的選擇。
UA Parser JS
UA Parser JS 是一個 JavaScript 庫，用於解析使用者代理字串以提取瀏覽器、作業系統和裝置詳細資訊等有價值的資訊。它支援多種使用者代理，併為開發人員訪問解析資訊提供了簡單、使用者友好的 API，既可在瀏覽器中使用，也可在 Node.js 應用程式中使用。
Ziggy
Ziggy 是專為 Laravel 設計的開源 JavaScript 庫。它簡化了路由處理，提供了一種從前端與後臺路由無縫互動的方式。總之，它是一個使用 Laravel 構建單頁面應用程式 (SPA) 的便捷庫。
Shikiji
Shikiji 是一個開源 JavaScript 庫，其靈感來源於流行的語法高亮庫 Shiki。它側重於對 ESM 的支援，並引入了一些變化，以增強在各種 JavaScript 引擎（包括普通瀏覽器、Deno、Node.js 和 Bun）中的可移植性。
SweetAlert2
SweetAlert2 是一個 JavaScript 庫，用於在網路應用程式中製作具有視覺吸引力和響應性的模式對話方塊。它允許自定義標題、內容、圖示、按鈕和動畫，從而增強網站的使用者體驗和使用者介面，而不是受限於瀏覽器內建的警報使用者介面。
Plotly
Plotly.js 是一個開源 JavaScript 庫，用於建立基於網路的互動式資料視覺化。它允許您建立各種圖表、圖形和儀表盤。它支援多種圖表型別，尤其適合科學、統計和金融應用。
KaTeX
KaTeX 是一個 JavaScript 庫，用於在網路上快速、高質量地渲染數學表示式。它輕便、高效，非常適合在網路應用程式中加入 LaTeX 表示式，而無需進行繁重的處理。
Tremor
Tremor 是專為構建儀表盤而設計的 React 庫。通過它，您可以毫不費力地建立從簡單到高階的各種複雜儀表盤。它完全開源，由資料科學家和具有敏銳設計眼光的軟體工程師團隊開發。
useCannon
useCannon 是一個 React.js 鉤子，可讓您輕鬆地將物理模擬整合到您的 React.js 應用程式中。您可以建立具有質量、力和速度的物件，應用重力和其他力，甚至檢測物件之間的碰撞。它是使用 React.js 建立逼真 3D 模擬和遊戲的絕佳工具。
Million
Million.js 是一個輕量級庫，可顯著增強 React 元件的效能。該庫只需封裝元件即可與 React 無縫整合。它能優化虛擬 DOM，從而提高渲染和載入效率，最高可提高 70%。對於那些希望優化 React.js 應用程式的人來說，使用 Million.js 可以讓他們輕鬆獲勝。
useHooks
useHooks 是一個用 TypeScript 編寫的自定義 React 鉤子庫。它為常見的 React 開發任務提供了實用工具。您會發現像 useEffectOnce （只執行一次程式碼）、 useScript （指令碼載入）等更多鉤子。
Superplate
Superplate 是 React 和 Next.js 的即用前端模板，支援 TypeScript。它包含一系列流行的庫，如 React Testing Library、styled-components、React Query、Axios 和 Prettier。CLI 介面簡化了專案設定，無需額外配置。真正的極品
Drei
Drei 是一系列用於 react-three-fiber 的實用程式和元件。它簡化了 React 環境中的常見模式，提供了元件和輔助工具來簡化 3D 應用程式的建立。
CSS相關資源
CSS clamp() Calculator
CSS clamp() 是 CSS 中的一項功能，可根據視口大小在最小值和最大值之間設定一個值。不過，設定這些值有時會令人困惑。CSS clamp() Calculator 工具可幫助您更輕鬆地計算和生成網站所需的箝位值。
Native CSS Masonry Layout
CSS masonry 佈局在使用者介面和使用者體驗設計師中越來越受歡迎。
Native CSS Masonry Layout 由 Pinterest 推廣而來，在 Pinterest 中，元素的排列是為了填補垂直間隙，而不是與行軸對齊。
有許多 JavaScript 庫可以在網站上新增磚石佈局。但很快您就可以只使用 CSS 來實現它。無需 JavaScript。
Windstatic
Windstatic 是用 Tailwind CSS 和 Alpine.js 製作的 161 個元素和佈局的集合，具有視覺吸引力的設計，是您下一個專案的良好基礎。在該合集中，你可以找到一些常見的設計模式或佈局，如英雄部分、網格佈局、CTA、推薦等。
AlmondCSS
無類 CSS 樣式集，旨在改善簡單網站的外觀。AlmondCSS 將 CSS 樣式規範化，以實現跨瀏覽器相容性，並新增了可個性化的自定義樣式。
該專案的目標是隻使用標籤，實現跨瀏覽器相容，易於設計主題，響應迅速，易於訪問和使用，輕量級，並保持設計簡潔而優雅。
Gradient Style
Gradient.style 是一個使用者友好型網站，用於生成 CSS 漸變。它支援各種漸變型別、實時預覽，並能生成相應的 CSS 程式碼，方便新增到網站中。此外，它還支援最新的 CSS Color 4 規範，包括 oklch, lch, 和 hsl。
後端開發
API相關資源
OpenAPI Generator
OpenAPI Specification 是一個被廣泛採用的 RESTful API 文件標準，它促成了一個可互操作工具和庫的生態系統。
通過 OpenAPI Generator 工具，您可以根據規範（第 2 版或第 3 版）自動生成 API 客戶端庫、伺服器存根、文件和配置。它有助於加快開發速度並保持一致性。
EnvShare
EnvShare 是一款用於共享環境變數的安全工具。通過 EnvShare，你可以傳送連結並限制連結的讀取次數，從而安全地共享環境變數。
連結可以設定為在一定時間後自動失效，確保資料在不再需要時被刪除。在向伺服器傳送資料前，它使用 AES-GCM 加密技術對資料進行加密，確保資料安全傳輸。
AsyncAPI
AsyncAPI 是一項開源計劃，致力於為事件驅動的應用程式介面建立一個標準。它為非同步應用程式介面的結構定義提供了一個規範，其格式易於不同工具和平臺共享、理解和實施。
通過推廣設計、記錄和測試 API 的標準化方法，它有助於改善構建系統的團隊之間的溝通與協作。
HTTPie App
HTTPie 釋出了一款用於與 API 互動的網路應用程式。該應用程式提供終端版本的功能，但使用者介面更加時尚。使用者可以通過網路應用程式實現以下功能：
- 輕鬆使用 API
- 利用人工智慧輔助，使工作更加順暢
- 用空間和集合組織應用程式介面
- 新增引數化請求
- 實現多裝置無縫同步
此外，即使在離線或沒有賬戶的情況下，該應用程式也能讓使用者構建和預覽請求。
OFetch
OFetch 是 Fetch API 的增強庫，旨在與 Node.js、瀏覽器和 Worker 相容。它通過促進自動 JSON 解析、有效的錯誤管理和提供 “重試 “選項來簡化 HTTP 請求和響應管理。鑑於其輕量級特性，OFetch 是通過 API 獲取資料的最佳選擇。
Next Intl
Next Intl 簡化了為 Next.js 應用程式新增國際化的任務。它提供了一個強大而簡單的 API 來處理多種語言，幷包含富文字 ICU 訊息語法以及日期、時間和數字格式化等功能。由於只使用鉤子 API，它既型別安全又高效。
JSON Server
JSON Server 是一款 REST API 模擬工具，用於快速製作和測試前端應用程式的原型。它基於 JSON 檔案生成一個模擬伺服器，允許開發人員模擬 CRUD（建立、讀取、更新、刪除）操作，併為測試和開發定義路由和資源。它支援過濾、排序和分頁等功能。
PHP相關資源
PXP
PXP 是 PHP 程式語言的一個功能強大的超集，旨在改善開發人員的使用體驗。它提供了一套擴充套件的語法規則和語言特性，使編碼更具表現力和效率。
PXP 的關鍵功能之一是其擴充套件的型別系統，它可以進行更強大的靜態分析。在撰寫本文時，PXP 正在積極開發中，我熱切地期待著看到它將如何影響未來的 PHP 開發。
Skeleton PHP
Skeleton PHP 是一個 PHP 軟體包，為構建現代 PHP 應用程式提供了一個簡單而現代的模板程式碼庫。它遵循 PSR-4 命名約定，幷包含用於 PHPStan 和 PHPUnit 等開發工具的基本配置。
它還包括示例檔案和測試用例，幫助開發人員快速入門。該軟體包可幫助您快速構建 PHP 應用程式，而無需花費大量時間進行設定和配置。
Laravel Pennant
Laravel Pennant 是 Laravel 團隊隨 Laravel 10 一起釋出的一個官方軟體包，它為 Laravel 開發人員在其應用程式中使用功能標誌（Feature Flags）提供了一種簡便的方法。
Feature Flags 是一種釋出機制，允許開發人員根據特定的使用者條件啟用功能，逐步分階段釋出，並在向所有使用者全面推出之前進行 A/B 測試。
Docker Image PHP
來自 ServerSiderUp 的 Docker 映象（Docker Image PHP）可讓您執行 PHP 應用程式。它已為生產做好準備，並預置了許多功能，包括 Nginx、PHP-FPM 和自動健康檢查。
它還針對 Laravel 進行了高度優化，包括並處理佇列、任務、儲存連結和開箱即用的遷移。它是 PHP 官方 Docker 映象的最佳替代品之一，而且執行速度更快。
Plugin PHP
Plugin PHP 是 Prettier.io 的功能擴充套件，可實現 PHP 程式碼的自動格式化。您可以利用該工具確保您的 PHP 程式碼和您的團隊遵循標準化、易讀的格式。請在其 Online Playground 上試用，看看它是如何執行的。
JSON Parser
JSON Parser 是一個零依賴的 PHP 庫，設計用於從各種來源高效讀取大型 JSON 資料。它支援字串、陣列、檔案路徑、流、API 端點 URL 等。該庫甚至允許實現預設不支援的自定義來源。
Castor
Castor 是一款基於 PHP 的任務執行程式或命令工具，可增強開發人員的使用體驗。它能簡化輸入處理、支援自動完成、順利執行程序、實現並行處理、在檔案修改時觸發操作、提供可定製的通知並提供日誌記錄。Castor 可以替代 Makefile 和 Shell 指令碼等工具。
NativePHP
在 Laracon 2023 大會上亮相的 NativePHP 是一個專為使用 PHP 快速建立本地桌面應用程式而設計的框架。它對使用者友好，既適合經驗豐富的 PHP 開發人員，也適合初學者，便於使用 HTML、CSS、JavaScript 和 PHP 進行跨平臺應用程式開發。NativePHP 為應用程式開發領域帶來了新的可能性，尤其是對那些有 PHP 背景的人來說。
Lighthouse PHP
Lighthouse PHP 能完美地將GraphQL整合到PHP應用程式中。它採用模式優先（schema-first）方法，可與Laravel Eloquent輕鬆整合。Lighthouse PHP提供GraphQL指令、身份驗證、分頁、排序和強大的錯誤處理功能。
Brick DateTime
Brick DateTime 提供了一系列不可變類，用於在 PHP 中輕鬆處理日期和時間。它建立在 PHP 的本地日期時間類之上，並通過額外的概念和 API 擴充套件了這些類的功能。其中包括 LocalDate, LocalTime, YearMonth, 和 MonthDay。這些類符合 ISO 8601 標準，確保開箱即能準確地表示日期和時間。
Hyperf
Hyperf 是一個高效能、靈活、可擴充套件的框架，用於使用 PHP 製作現代化、可擴充套件的網路應用程式和微服務。它的速度、使用者友好性和管理併發連線的能力尤其受到認可。此外，Hyperf 還提供了一整套開箱即用的功能，包括路由器、資料庫介面卡、中介軟體等。
LaRecipe
LaRecipe 是一個 PHP 庫，用於簡化基於 Laravel 的專案中產品或應用程式的文件建立。它使開發人員能夠直接在程式碼中使用 markdown 格式生成和管理文件，便於隨著專案的發展進行維護和更新。
PHP ECMA Intl
PHP ECMA Intl -該 PHP 擴充套件程式遵循 ECMA-402 國際化標準。它提供了用於管理本地敏感資料（如日期、時間、貨幣和數字）的函式和類。有了這個擴充套件，您就可以確保使用 PHP 的網路應用程式具有一致和安全的國際化內容。
Laravel相關資源
LemonSqueezy Laravel
LemonSqueezy Laravel 軟體包簡化了將你的Laravel應用程式與Lemon Squeezy整合的過程。通過該軟體包，你可以為你的產品設定付款方式，並使客戶能夠訂閱你的產品計劃。它還可以管理寬限期、訂閱暫停和免費試用等功能，使設定過程毫不費力。
Laravel Herd
Herd 是 Laracon 2023 上介紹的另一個工具，是 Laravel 開發的新成員。它提供了一個無需依賴的一鍵式 PHP 開發環境。Herd 專為 macOS 打造，是一個速度極快的原生環境，包含啟動 Laravel 專案所需的一切，從 PHP 到 nginx。
Orchid Software
Orchid 是一個開源平臺，專為使用 Laravel 構建管理面板而設計。它具有視覺化生成器、可定製主題和訪問控制功能。它還提供資料視覺化和可擴充套件功能，允許開發人員在其基礎上新增新功能。
Wave
Wave 是基於 Laravel 框架開發的終極軟體即服務（SaaS）入門套件。它提供了一個強大的基礎，具有身份驗證、訂閱、發票、公告和使用者配置檔案等功能。這使它成為構建 SaaS 專案的理想基礎。
Canvas
Canvas 是一個開源軟體包，可在幾分鐘內建立一個部落格，從而增強您的 Laravel 應用程式。它提供了一個無干擾的寫作環境，並能提供每月趨勢、流量和其他統計資料等有價值的見解。這些見解提供了寶貴的資料，豐富了您的部落格體驗。
TastyIgniter
TastyIgniter 是在 Laravel 基礎上開發的具有線上訂餐功能的開源餐廳管理系統。它通過使用者友好的介面處理線上訂餐、管理選單、處理訂單和處理餐桌預訂，從而簡化了餐廳運營。它還提供多語言支援，並允許通過擴充套件和主題進行定製。
Laravel Compass
Laravel Compass 是一個開源的 Laravel 軟體包，可用於測試 API 呼叫或根據定義的路由生成互動式 RESTful API 文件。它支援所有標準 HTTP 方法和各種身份驗證機制，並與 OpenAPI 規範相容。如果你正在尋找一個簡單的工具來開發與 Laravel 完美整合的 API，那麼這個軟體包值得你安裝。
TypiCMS
TypiCMS 是使用 Laravel 構建的開源內容管理系統。它提供內容管理、使用者管理、多語言支援和可定製主題等基本功能。它的模組化架構允許與現有的 Laravel 安裝輕鬆整合，並使開發人員能夠根據需要擴充套件或包含特定功能。
Jigsaw
Jigsaw 是一款開源的靜態網站生成器，利用 Laravel 的刀片模板和 Markdown 進行內容建立。它可以管理資產編譯，提供本地開發伺服器，幷包含網站的基本功能，如 Markdown 支援、分頁、可定製主題等。如果你喜歡使用 Laravel 或 PHP，那麼這個庫是構建靜態網站的絕佳選擇。
Laravel Folio
Laravel Folio 引入了基於頁面的路由器，減少了 Laravel 應用程式中路由的複雜性。通過與應用程式 resources/views/pages 目錄中的 Blade 模板無縫整合，路由變得更加簡單。不過，您仍然可以使用 Laravel 在傳統路由器中提供的所有強大功能，包括中介軟體、快取、模型繫結等。
教學資源
使用 React 和 TypeScript 構建動態頭像元件
這是一門免費的 TypeScript 課程，旨在教授該語言的實際用法。它展示了使用 TypeScript 的好處，特別是在提高型別安全性和避免錯誤方面。
它將通過使用 React 和 TypeScript 構建動態頭像元件來介紹 TypeScript 在現實世界中的使用，這是大多數具有登入系統的應用程式中的常見功能。如果你想學習 TypeScript，本文將是一個良好的開端。
Next.js 13 速成班
由 Traversy Media 製作的免費 Next.js 課程。它介紹了 Next.js 13 並涵蓋了其中的一系列主題，包括瀏覽新功能、設定 Next.js 專案、使用頁面和元件、使用 CSS 模組設計樣式以及部署。
如果您已經熟悉 React，並希望學習如何使用 Next.js 構建可擴充套件的網路應用程式，那麼這將是一本非常棒的教學。
Styling a “pre” that Contains a “code”
在 Styling a “pre” that Contains a “code” 一文中，meyerweb 的建立者 Eric A. Meyer 分享了他使用 CSS :has() 選擇器為包含 code 元素的 pre 元素設計樣式的經驗。他深入淺出地介紹瞭如何使用現代 CSS 語法在保持網站語義的同時，實現具有視覺吸引力的設計。
New to the web platform
Chrome DevRel 團隊推出的 “New to the web platform” 系列介紹了穩定版和測試版網路瀏覽器新增的有趣功能。這是一個非常好的系列，可以幫助您走在時代前沿，創造最先進的網路體驗。
Node.js 全棧開發人員
另一個免費課程將教您如何使用 MEEN 協議棧（MariaDB、Nginx、Express 和 Node.js）構建一個正常執行的照片共享應用程式。您將學習如何設定和使用 Node.js、NPM 和 MariaDB，以及路由和中介軟體等技術概念。
對於想要學習全棧 Node.js 和 JavaScript 開發技能的任何技能水平的開發人員來說，這都是一門很好的課程。
用 Git 學習版本控制
這是一門適合初學者的免費視訊課程，教授 Git 的基礎知識，涵蓋從安裝 Git 和版本控制基礎到高階主題的所有內容。
課程分為簡短、循序漸進的視訊，每課只關注一個主題，平均時長僅 5 分鐘。這樣，即使每天只有一個短視訊，您也可以按照自己的節奏學習。
與傑克一起學習 Statamic
Laracasts 上的免費課程，教授如何使用使用 Laravel 的內容管理系統 Statamic。課程涵蓋的主題包括構建附加元件和入門套件，以及瞭解 Statamic 如何在引擎蓋下工作。更棒的是，本課程由 Statamic 的建立者 Jack 講授。
PHP速成課程
由 @TraversyMedia 提供的 PHP 入門課程是一個 3 個多小時的速成課程，是學習 PHP 的第一步。
它涵蓋了 PHP 的所有基礎知識，包括使用 XAMPP 設定開發環境、配置 VS Code 和自動重新載入、學習構造和函式、瞭解資料型別和變數、使用陣列以及使用條件。
多年來，PHP 一直在穩步發展和不斷改進。如果您想入門 PHP，這是一個很好的視訊課程。
React.js 紀錄片
這段來自 Honeypot 的 YouTube 視訊將帶您回顧 React 早期的故事，其中包括對在其開發過程中發揮關鍵作用的不同開發人員的採訪。看到 React.js 如何從零起步到現在成為一個被廣泛使用的庫，感覺非常酷。
AI 驅動的 Laravel 錯誤解決方案
這篇來自 Marcel Pociot 的博文深入探討了如何使用人工智慧來解決 Laravel 應用程式中的錯誤。他分享了自己對建立有效提示的見解，並提供了詳細的技術解釋。
此外，他還就開發人員如何將這項技術整合到自己的應用程式中提供了指導。如果您有興趣在您的開發工作流程中利用人工智慧，這是一個寶貴的資源。
基於動態元件架構的現代 CSS
隨著越來越多的網站採用基於元件的架構，本文將探討 CSS 的最新功能和改進，重點關注主題化、響應式佈局和元件設計。其中包括程式碼組織示例、網格和容器查詢等佈局技術以及其他實際示例。
HTML5 Canvas 速成班
本 YouTube 教學涵蓋 HTML5 畫布的基本要素，包括設定畫布專案、繪製圓圈、新增滑鼠互動性和製作粒子系統，所有這些都從頭開始，無需使用庫。如果您希望掌握創造性的前端網路開發，本教學將是您的不二之選。
Naming Things
本視訊探討了程式碼中元素命名的常見問題，並就最佳實踐提出了寶貴建議。它探討了命名規範的各個方面，包括變數名中單字母變數、縮寫、型別和單位的使用。它充滿了有價值的見解，我相信這些見解能幫助你成為一名更好的開發人員。
Bite-Sized Accessibility
本網站提供簡短易懂的網路可訪問性課程。每節課都以 “一口大小 “的形式呈現，並配有清晰的解釋和示例，便於理解和應用所涵蓋的概念。
它涵蓋了一系列主題，包括色彩對比、鍵盤無障礙性、螢幕閱讀器相容性等。對於任何希望提高無障礙知識的人來說，這都是一個很好的資源。
WordPress Developer News
WordPress 開發者部落格是 WordPress 為開發者提供的新的官方資源，讓開發者瞭解與開源專案相關的最新軟體功能、教學和學習材料。
它涵蓋的主題包括主題和區塊開發教學、WordPress API、最佳實踐和學習資源，無論您是 WordPress 開發人員的初學者還是經驗豐富的開發人員。
Build a MERN React Admin Dashboard
在本視訊中，您將學習如何使用 MERN（MongoDB、Express、React、Node）堆疊開發和部署堆疊管理儀表板。在前端開發過程中需要使用大量庫和工具，包括 Material UI、Material UI Data Grid、Nivo Charts、Redux Toolkit 和 Redux Toolkit Query。
而在後端，則需要使用 Node.js、Express、Mongoose 和 MongoDB。該教學長達 7 小時！對於想要學習成為全棧開發人員的人來說，這是一個很好的資源。
ChatGPT 速成班
Traversy Media 提供的又一精彩免費課程。本課程將向您展示作為開發人員有效利用 ChatGPT 的 10 種方法，例如如何使用它生成文件、示例資料、解釋錯誤等。這些方法不僅能提高您的工作效率，還能提高您作為開發人員的技能。
Patterns Resources
Patterns Resources 網站收集了為 React.js、Vue.js 和 Angular 等各種框架構建網路應用程式的設計模式和最佳實踐。其中包括文章、資源庫和程式碼片段等資源，涵蓋架構、測試和安全等各種主題。
對於希望提高對一些流行開發模式的理解的架構師或技術負責人來說，這是一個完美的資源庫。
TotalTypeScript Tips
本視訊集提供了有用的提示，可幫助您更好地理解 TypeScript 並有效解決常見問題。每條提示都以簡明、帶註釋的視訊形式呈現，時長在 2-5 分鐘之間，是尋求快速、實用的 TypeScript 故障排除技巧的使用者的首選資源。
TypeScript 挑戰視訊
本視訊集包含 100 多個解決各種 TypeScript 挑戰及其解決方案的視訊。每個視訊的長度因主題而異；有些簡明扼要，有些則可能超過 1 小時。對於希望提高 TypeScript 技能的人來說，這是一個值得收藏的綜合視訊集。
其他工具和資源
開發工具
VSCode Settings
VSCode Settings 是一個資源庫，其中包含 Visual Studio Code（VS Code）中的各種意見設定和擴充套件，如主題、字型、縮排和鍵盤快捷鍵。
不過，您仍然可以挑選最適合自己需要的設定和擴充套件。如果你想改善開發體驗，Visual Studio Code 是一個很好的靈感來源。
VSCode Blade Formatter
VSCode Blade Formatter 是一個 Visual Studio Code (VSCode) 擴充套件，用於在 Laravel 專案中自動格式化 Blade 模板。它提供可定製的規則和無縫整合，確保你的程式碼保持一致和井井有條。如果你是一位使用 VSCode 的 Laravel 開發者，那麼這個擴充套件是你的必備之選。
TotalTypeScript VS Code
此 VSCode 擴充套件可幫助您在 VSCode 編輯器環境中無縫學習 TypeScript。它提供語法方面的有用提示，並針對複雜的錯誤提供直接的文件連結。對於經驗豐富的開發人員，尤其是初學者來說，這是一款全面的工具。
Noctis
Noctis 是 VSCode 的明暗主題集，旨在減輕眼睛疲勞。它有 11 個版本，包括 8 個深色主題和 3 個淺色主題，每個主題都有不同的調色盤，從非常深的冷藍綠色到非常淺的暖橙色。
Vesper
Vesper 是一款免費的 VS Code 主題，它提供了簡潔明瞭的檢視，讓你在編碼時倍感舒適。它的深色背景搭配薄荷和橙色語法高亮顏色，有助於減輕長時間編碼時的眼睛疲勞。
它在 VS Code Marketplace 上提供，只需點選幾下即可安裝。如果你想更新你的程式碼編輯器，這可能是一個不錯的選擇。
Clack
Clack 是一個 NPM 軟體包，能讓你在 Node.js 中輕鬆構建命令列介面（CLI）。它的體積比同類軟體小 80%，並提供了簡單的 API，如 text, confirm, select, 和 spinner 功能。
該軟體包已經配備了漂亮的使用者介面，開發人員使用它可以毫不費力地在幾分鐘內建立出漂亮的互動式 CLI。
Slic
Slic 是一款 CLI 命令工具，可為執行自動化測試提供一個容器化環境。它專為 WordPress 和 Codeception 而設計，可簡化測試的設定過程，並確保測試執行的一致性。
此外，它還提供了有用的開發工具和實用程式，供專案開發或 CI 構建時使用。
cSpell
cSpell 是一種命令列工具和庫，用於對程式碼進行拼寫檢查。它旨在幫助捕捉程式設計和技術文件中常見的拼寫錯誤和錯別字，並可通過編輯器擴充套件、構建工具和其他整合整合到開發人員的工作流程中，還可通過使用者自定義字典和配置檔案進行定製。它支援多種語言，包括英語、德語、法語和西班牙語。
它是開發人員和技術撰稿人避免錯別字的有用資源。
trurl
trurl 是一種命令列工具，用於簡化 shell 指令碼的 URL 解析和操作。它與 curl 命令列工具使用相同的 URL 解析器，因此無需重新發明輪子。它還能解決安全問題，讓 URL 處理變得更簡單，是在指令碼和命令列介面中處理 URL 的完美輔助工具。
EnvPane
EnvPane 是一款用於管理 macOS 環境變數的便捷應用程式。它允許你通過友好的使用者介面輕鬆檢視、新增、編輯和刪除環境變數，而無需命令列操作或手動編輯配置檔案。
QNM
QNM 是一款命令列工具，用於查詢 node_modules 目錄。它提供了一種快速檢查模組版本的方法，而不受 npm list 等類似解決方案的限制。QNM 只提供相關模組資訊，同時支援 npm 和 yarn。
Devpod
Devpod 是一款旨在簡化開發環境的工具。它支援 devcontainer.json 設定，並能分析專案以確定最佳環境。作為一款採用宣告式檔案標準的開源工具，它提供了功能強大的桌面應用程式和命令列介面（CLI），無需鎖定供應商或進行伺服器端設定。DevPod 可為任何基礎架構、整合開發環境或程式語言建立可重複的開發環境。
Dprint
Dprint 是一款強大的自動化程式碼格式化命令列工具。它使用 Rust 開發，為各種程式碼格式化任務提供了一個靈活的平臺。它的獨特功能之一是利用 WebAssembly 的外掛架構。你可以從 URL 或本地檔案系統匯入這些外掛。包括官方外掛在內的這些外掛都具有很強的可定製性，讓你可以根據自己的特殊需要調整程式碼格式。
CodeEdit
CodeEdit 是一款專為 macOS 設計和開發的開源輕量級工具。它採用 Swift 構建，執行效率更高，在 macOS 上的編輯更流暢、更快速。儘管它尚未準備好投入生產，但在撰寫本文時，它有可能成為最受 macOS 使用者歡迎的程式碼編輯器之一。
TypeTrials
TypeTrials 是一款免費的網路工具，允許使用者試驗和測試各種字型（包括可變字型和靜態字型），並建立快速設計與他人分享。該工具專為想要充分挖掘不同字型潛力的人設計。
Spaghettify
Spaghettify 是一款 VS Code 擴充套件工具，旨在使用人工智慧將您的程式碼庫重寫為義大利麵條程式碼。它旨在成為一款寓教於樂的工具，讓開發人員體驗編寫糟糕程式碼的負面影響。請不要在您的生產網站中使用真正的義大利麵條程式碼！
Houston
HoustonAI 是一個實驗性的支援機器人，旨在幫助使用者使用 Astro – 一種適用於現代網路應用的靜態網站構建工具。該機器人由 GPT-3 和 LangChain 提供支援，並在 Astro 文件網站上接受培訓。目前它還處於實驗階段，可能會返回錯誤的答案。但看到人工智慧將如何改變我們的學習方式，還是令人興奮的。
TS-REST
TS-REST 是一種為網路應用程式介面提供端到端型別安全的合約定義方法的工具。可以使用 Zod schema 或 TypeScript 型別輕鬆定義合約。
它經過了良好的測試，可隨時投入生產，並且與框架無關，因此可以與 Express、Nest、Next 和 react-query 等多種框架一起使用。
Stark Accessibility Checker
Stark Accessibility Checker 是 Google Chrome 瀏覽器的一個擴充套件，它提供了一套用於測試網站可訪問性的整合工具。其功能包括對比度檢查器、視覺模擬器、Alt-Text 註釋和排版分析，可幫助您發現並修復網站的可訪問性問題。
Transforms
Transforms 為開發人員提供各種資料轉換工具。例如，您可以將 SVG 轉換為 React.js 或 React Native，將 HTML 轉換為 JSX，將 JSON 轉換為多種資料型別，包括 TOML、YAML、JSDoc、GraphQL 等。它超級方便，我認為所有開發人員都應該把它加入書籤。
Zed
Zed 是一款程式碼編輯器，可與電腦硬體配合使用，提供即時反饋，讓您始終處於編碼流程中。它能讓你快速高效地編寫程式碼。
它有很多功能，包括自動完成、程式碼導航、診斷和重構。此外，Zed 還包含整合終端、Vim 模式和各種主題。
Fleet
JetBrains Fleet 是一款快速易用的文字編輯器和整合開發環境。它支援多種程式語言，並能從原始碼中自動檢測專案配置。這使它更易於使用，並節省您的時間。
Fleet 還能為不同型別的專案提供一致的使用者體驗，因此你只需使用一個整合開發環境即可滿足所有程式設計需求。
Zap
Zap 是 Zsh 的外掛管理器，可簡化外掛、主題和配置的安裝、更新和管理。它提供了大量社羣貢獻的外掛，包括語法高亮、Git 整合、NVM 等選項，讓你增強電腦的終端體驗。
Pasteboard-Viewer
Pasteboard-Viewer 是一款 macOS 應用程式，它為檢查系統剪貼簿的內容提供了一種便捷的方式。通過它，你可以檢視和分析剪貼簿中儲存的資料，這對於排除故障、除錯或簡單瞭解複製的資料非常有用。
Lucia Auth
Lucia 是一個使用者和會話管理庫，為身份驗證提供了一種直接而靈活的方法。它充當應用程式與資料庫之間的中介，提供簡化且易於理解的解決方案。Lucia 採用簡約設計，注重簡潔性和使用者友好性。
Plane
Plane 是提供資料庫介面卡，可與流行的資料庫和 ORM 無縫整合，並支援 SvelteKit、Next.js、Express 和 Astro 等框架。它還包括用於處理 OAuth 等身份驗證策略的軟體包，為開發人員提供了靈活的解決方案。
Unhead
Unhead 是一款與平臺無關的通用文件 <head> 標籤管理器。它提供一個直觀的 API，具有自動重複資料刪除和排序功能。它還包括用於優化標籤和推斷搜尋引擎優化元標籤的強大外掛。Unhead 與執行時構建相容，可將客戶端開銷降至最低，並提供全面的可擴充套件性。
Twolash
Twolash 是 Shiki 的擴充套件，可簡化 JavaScript 和 TypeScript 語言的程式碼嵌入。它通過文字編輯器編譯器 API 提供型別驅動的洞察力和錯誤檢測。程式碼示例在伺服器端生成，以減少對客戶端 JavaScript 的依賴。對於那些希望向受眾展示詳細程式碼片段的人來說，這是一個極好的庫。
Lerna
Lerna 是一款著名的開源工具，可在單個資源庫中管理多個軟體包。最近，它被 NX 背後的團隊收購，並重新確定了方向和重點。有了 Lerna，升級多個軟體包的版本並隨後將它們釋出到 NPM 登錄檔變得輕而易舉。對於包含多個需要同時進行開發和版本控制的相關軟體包或庫的專案來說，這是一個非常寶貴的工具。
Valibot
Valibot 是一個一體化資料驗證庫，可無縫整合來自伺服器、表單和配置檔案的資料。令人印象深刻的是，它不依賴於任何外部元件，並且相容各種 JavaScript 環境，包括瀏覽器、Node.js 和 Deno。該庫對於確保資料輸入和輸出的準確性至關重要。
Consola
Consola 是一款現代的、可高度配置的日誌記錄器，適用於 Node.js 和瀏覽器環境。它旨在為開發人員提供一種高效、可定製的方法，用於在開發和除錯階段管理日誌和輸出資訊。使用者可以配置日誌顯示，引入自定義格式、時間戳和顏色編碼，並應用各種樣式和主題。
Untun
Untun 提供了一個有用的工具，可讓您使用 Cloudflare Quick Tunnels 建立從本地 HTTP（s）伺服器到全球網際網路的 “隧道”。該工具對於在各種裝置（包括移動裝置）上測試網路應用程式非常有價值，而且無需部署在公共伺服器上。
Git 相關
Grep
Grep.app 是一款面向開發人員的搜尋引擎，允許您在 GitHub、GitLab 和 NPM 等軟體倉庫和軟體包管理器中搜尋數十億行程式碼。
它通過上下文高亮顯示搜尋結果，並可按語言、檔案型別、專案和日期進一步過濾和排序。如果你想搜尋特定程式碼用於研究、除錯或僅僅是尋找靈感，那麼它就是一個非常有用的搜尋引擎。
Ripgrep
Ripgrep 是一款面向行的開源快速搜尋工具，可在當前目錄下執行遞迴 regex 模式搜尋。它能自動遵守 gitignore 規則，跳過隱藏/二進位制檔案，並可高度配置以排除特定檔案或目錄。它可跨平臺執行，並與 Git 無縫整合。
Drift
Drift 是 GitHub Gist 的克隆版，允許你自行託管程式碼和文字片段。它支援 GitHub Extended Markdown、使用者認證以及私人和公開發布。其他功能還包括語法高亮和檔案上傳功能。
Google Github Actions
Release Please Action 是 Google 推出的一款 GitHub 工具，可自動為 GitHub 專案進行版本管理並生成釋出版本。它會分析你的提交歷史，根據語義版本規則確定下一個版本，建立一個新的釋出分支，並生成必要的拉取請求和釋出。
Gogs
Gogs 是一個用 Go 程式語言編寫的自託管 Git 服務。它旨在成為 GitLab 和 GitHub 等其他 Git 託管系統的易用、輕量級替代品。Gogs 支援建立倉庫、使用者身份驗證、協作功能等，為在基礎架構內管理 Git 倉庫提供了一個全面的解決方案。
開源專案
Automatisch
Automatisch 是一款自動化工具，可連線 Twitter 和 Slack 等不同服務，無需程式設計技能即可實現工作流程自動化。它與 Zapier 相似，只是它是一個開源工具。
由於可以將資料儲存在自己的伺服器上，因此靈活性更高，如果企業要處理敏感資訊，這一點尤為重要。
Frontend Learning Kit
Frontend Learning Kit 是一個開源專案，提供了一個相當全面的前端學習資源列表，包括視訊教學、線上課程和書籍，涵蓋 HTML、CSS、JavaScript、React、Redux 等廣泛主題。
這些資料都經過精心挑選並定期更新，無論你是剛剛入門還是正在提高前端技能，它都是一個非常有價值的工具。
MRSK
MRSK 是 Basecamp 公司推出的一款新工具。它可以使用 Docker 將網路應用程式部署到從裸機到雲虛擬機器的任何環境中，而無需停機。它使用 Traefik 作為動態反向代理，在容器切換過程中管理請求。雖然最初是為 Rails 應用程式構建的，但它可以與任何網路應用程式配合使用。
Bearclaw
Bearclaw 是一款簡化從 Markdown 生成網站的工具，無需模板語言知識。您只需在 Markdown 檔案中新增內容，然後執行該工具將其轉換為 HTML，即可部署到 Github Pages 或任何伺服器上。它不需要框架、NPM 或任何複雜的配置。它只需執行即可。
SaasKit
SaasKit 是一款免費、開源、現代的模板，專為滿足典型的 Saas 需求而設計。它具有一系列功能，包括登陸頁面、通過 Stripe 進行訂閱計費、客戶門戶、使用者認證、搜尋引擎優化友好和移動友好。
它建立在 Fresh 和 Deno 這兩種快速可靠的技術之上，使網路應用程式開發變得簡單，併為開發人員提供了良好的體驗。
Infisical
Infisical 是一個開源的端到端加密祕密管理平臺。它集中管理 API 金鑰、資料庫憑證和配置等祕密，提供使用者友好的儀表板，便於跨團隊、跨專案和跨環境管理。它還通過 SDK 和 CLI 提供無縫整合，包括簡單的 AWS 或 Digital Ocean 部署。
Leantime
Leantime 是一個開源的精益專案管理系統。它提供任務跟蹤、里程碑管理、團隊協作和時間跟蹤等一系列功能。作為 ClickUp、Notion、Asana 等 SaaS 平臺的絕佳替代品，它適用於從初創公司到企業級業務的各種需求。
Katana
Katana 是一個開源的爬行和網路蜘蛛框架。它具有強大的功能，如可定製的蜘蛛搜尋規則、併發控制、動態目標發現以及對各種輸出格式的支援。
Lychee
Lychee 是一個基於網路的照片管理系統，可在數秒內安裝到您的伺服器上。您可以像使用本地應用程式一樣輕鬆上傳、組織和共享照片。它提供所有必要的功能，確保您珍貴照片的安全儲存。
Alf
Alf 是一個門票預訂系統，專為會議、貿易展、研討會和聚會等活動設計。它是一個免費、開源和自託管的平臺，對於尋求隱私、安全和與會者公平定價政策的組織者來說，它是一個理想的平臺。
Clear
Clear 是一款獨特的影象搜尋引擎，完全在客戶端執行，無需後臺伺服器。它不儲存影象，也不建立搜尋索引，為影象搜尋提供了一種全新的方法，同時確保了隱私並消除了資料儲存需求。
Automatisch
Automatisch 是一款業務自動化工具，整合了 Twitter 和 Slack 等服務，可簡化工作流程。它可以在您自己的伺服器上執行，以加強隱私保護和 GDPR 合規性。Automatisch 可簡化自動化，無需程式設計知識或高成本，也不會鎖定供應商。
Coolify
Coolify 是 Heroku 和 Netlify 的開源替代品，可以自行託管。通過它，您可以在自己的機器或硬體上託管應用程式、資料庫和開源服務。對於喜歡內部託管並希望保持獨立於大型雲提供商的公司、團隊、業餘愛好者和個人來說，它是一個理想的解決方案。
Cachet
Cachet 是一個開源狀態頁面系統，可讓您隨時向使用者通報服務事故、維護和正常執行時間。它提供簡便的定製、事件跟蹤、API 支援和使用者通知功能。
Plane
Plane 是 JIRA 或 Linear 的開源替代產品。它為問題跟蹤、史詩管理和產品路線圖提供瞭解決方案。它還具有富文字編輯器、檔案附件、自定義佈局、週期規劃、模組細分、自定義過濾器等基本功能，甚至還能與 GitHub 同步，以加強跟蹤和協作。
Astro Portofolio
這款 Astro 模板專為建立作品集網站而設計。它由 Astro 設計團隊精心打造，展示了一個突出您的技能和近期專案的登陸頁面。其他功能還包括使用者友好的明暗模式切換、所有頁面上醒目的 “聯絡請求”、字型安全的前臺以及精心挑選的圖示集。
Siyuan
Siyuan 是一款開源、自託管的筆記和知識管理應用程式。它擁有大量用於製作和組織筆記、文件和其他內容型別的功能。例如，你可以使用 Markdown 來設定筆記格式，按層次排列筆記，為不同的筆記型別設計自定義模板，等等。
Medusa
Medusa 提供一套開源模組和工具，用於簡化電子商務應用程式（包括線上商店和市場）的開發。這些模組涵蓋了庫存、購物車、結賬、訂單和產品等基本功能。最棒的是什麼？您可以輕鬆定製它們，以滿足您的特定需求。
Dub
Dub 是一個開源連結管理解決方案，基於 Vercel Edge Functions、Upstash Redis 和 PlanetScale MySQL 等技術構建。它為建立、共享和跟蹤短連結提供了一種簡化的方法。Dub 具有內建分析、自定義域支援、二維碼生成和 OG 影象代理等功能，可簡化短連結管理。
OpenStatus
OpenStatus 是一個使用 Next.js、TailwindCSS 和 shadcn/ui 構建的自託管開源狀態頁面系統。它提供實時服務健康狀況更新和定製功能，並可與其他監控工具整合。這使它成為希望透明傳達服務狀態的企業的絕佳選擇。
Outstatic
Outstatic 是專為 Next.js 定製的靜態網站內容管理系統（CMS）。它擁有友好的使用者介面，不需要外部資料庫。設定簡單快捷，支援自定義欄位。您可以自由選擇將其託管在任何伺服器上。
Peppermint
Peppermint 是 Zendesk 的自託管替代產品，具有基於 Markdown 的票單建立、客戶歷史跟蹤和響應式設計。它包括一個同樣使用 Markdown 的筆記本功能。您可以使用 Docker 和 pm2 將其輕鬆部署到自己的伺服器上。
Formbricks
Formbricks 是一款開源調查和體驗管理解決方案。它具有無程式碼編輯器、模板、目標調查、可共享連結、團隊協作以及與 Slack 和 Zapier 等工具整合等多種功能。您可以自行託管，因此可以完全控制應用程式和資料。
Orama
Orama 是一款完全由 TypeScript 編寫的輕量級全文和向量搜尋引擎。它的最小佔用空間不到 2kb，旨在為您的網站提供快速、記憶體和容錯的搜尋功能。它相容任何 JS 環境，包括瀏覽器、Node.js 和 Deno。
WordPress 相關
wp-now
wp-now 是 WordPress.com 提供的開發環境，與 WordPress Playground 的開發環境相同。它提供更無縫的設定，是目前建立本地 WordPress 網站最快的方法。相信這一工具將在未來改變開發人員使用 WordPress 的方式。
Falcon
Falcon 是一款 WordPress 外掛，可為 WordPress 提供一系列效能和使用者體驗優化。它包含禁用某些功能的選項，包括禁用 Gutenberg、REST API、心跳、XML-RPC、表情符號、嵌入、修訂和自定等。
它還可以刪除網站上不必要的資產和程式碼，並對網站的標題和管理區域進行各種調整。如果你想提高 WordPress 網站的效能，這是一款非常棒的外掛。
Full Site Editing
WordPress 中的 Full Site Editing 為主題開發引入了一種新方法。它引入了用於自定義模板的站點編輯器、用於調整顏色和排版的全域性樣式、用於使用塊建立完整頁面的塊主題，以及用於開發人員定義預設設定的 theme.json。本網站旨在通過提供一個易於使用的表單，簡化在這種新模式下生成主題模板的過程。
UnderscoreTW
UnderscoreTW 是一款使用 Tailwind CSS 和 Tailwind Typography 生成 WordPress 初始主題的工具，該主題已針對現代開發進行了優化。它帶有預配置的 Tailwind 設定，並允許通過 theme.json 檔案進行自定義。該主題與 Tailwind 3 的 JIT 編譯器相容，包括使用 esbuild 進行 JavaScript 捆綁，以提高開發效率。
其他資源
產品設計路線圖
在這個網站（Product Design Roadmap）上，你可以找到一個互動式圖表，它可以幫助你學習產品設計的一些概念和技能。該圖表條理清晰，涵蓋了所有必要的主題。
它分為五個主要部分，每個部分都有自己的分支，可以通向有用的資源。無論你是有興趣從事產品設計工作，還是想創造自己的產品，這個網站都能為你提供一些有價值的知識。
Google Chrome Samples
此 Git 程式碼庫收集了由 Google Chrome 瀏覽器團隊維護的程式碼示例和演示。這些示例涵蓋了一系列 Web 開發主題，是使用 Google Chrome 瀏覽器最新功能構建 Web 應用程式的最佳實踐的實用示例。每當 Google Chrome 瀏覽器釋出新功能時，它都會更新。
Microsoft Wallpapers
在最近舉行的微軟 Build 2023 大會上，微軟設計團隊釋出了一組 16 款免費 4K 桌布。這些桌布非常適合使用高解析度顯示器的使用者，尤其是軟體開發人員，可提供引人入勝、身臨其境的視覺體驗。
Homepage
Homepage 是一個現代化、可定製和安全的應用程式儀表板，整合了超過 25 種服務和超過 15 種語言的翻譯。它支援所有 Raspberry Pi、大多數 SBC 和 Apple Silicon，並在構建時靜態生成，因此載入時間極短。它提供全面的 i18n 支援和多語言翻譯。
此外，它還包括服務和網路書籤、容器狀態和統計資料以及系統統計小部件等功能。
Day Progress
Day Progress 是一款 macOS 應用程式，可通過選單欄圖示直觀地顯示一天的剩餘時間。它允許你自定義一天的開始和結束時間，並在進度餅、進度條或百分比顯示之間進行選擇。它能有效提醒你保持動力，有效管理時間。
Omnivore
Omnivore 專為簡化文章、通訊和文件的收集、組織和管理而設計，以備將來閱讀之用。它擁有記筆記和高亮顯示等實用功能，豐富了閱讀之旅。此外，Omnivore 還允許使用者根據個人喜好自由組織閱讀列表，並確保在各種裝置之間實現無縫同步。
Kinoweb
Kino 是一款漸進式 Web 應用程式 (PWA)，可作為視訊點播 (VOD) 應用程式的示例。它展示了媒體功能，允許您下載視訊進行離線觀看。它包括來自 Google Chrome 瀏覽器開發人員 YouTube 頻道的內容和視訊，介紹了 PWA 的功能及其若干用例。
Open Domains
Open Domains 是一個為個人網站、開源專案等提供免費子域的平臺。您可以註冊 *.is-cool.dev 或 *.is-not-a.dev 等子域，並支援r A, AAAA, CNAME, MX, NS, 和 TXT 記錄。這對尋求免費子域註冊的個人和專案非常有用。
小結
這份資源列表提供了一個精選的網頁開發工具和技術集合，包括設計資源、圖示庫、設計系統指南、配色設計資源、前端開發工具、與WordPress相關的工具以及其他有用的資源。
- 資源列表包括各種設計資源，如Iconify、AtalsIcons、Icones和IconHunt，為設計師和開發者提供了各種高質量的圖示。
- 設計系統資源，如The Design System Guide和UK Gov Design System，提供了全面的指南和可重複使用的UI元素，以提高設計的一致性和效率。
- 配色設計資源，如Dark Mode Design、Alphredo和OKLCH，提供了創作吸引人且一致的配色方案的靈感和工具。
- 前端開發工具，如Precedent、Mafs和Web Components Guide，提供了元件、實用工具和框架，以簡化前端開發。
- 與WordPress相關的工具和資源，如wp-now、Falcon和Full Site Editing，提供了WordPress開發、優化和自定義的解決方案。
- 其他資源包括產品設計路線圖、Google Chrome示例、Microsoft桌布以及諸如Homepage、Day Progress、Omnivore和Kinoweb等各種應用程式，滿足網頁開發和生產力的不同需求。
- Open Domains是一個提供免費子域名（subdomain）註冊的平臺，為個人網站和專案提供了有用的資源。
評論留言