網頁設計師和開發人員資源#4:WordPress和前端工具集

網頁設計師和開發人員資源#4:WordPress和前端工具集

我們為網路開發者朋友們準備了一套全新的資源。

這一次我們提供了各類工具,包括一個檢查 WordPress 外掛開發的外掛、一個用於 WordPress 管理應用程式的 React 元件庫、一個 Laravel Blade 元件集、一個用 Rust 編寫的靜態網站生成器,以及一些你可能會發現有用的有趣東西。

Plugin Check

Plugin Check 是一款 WordPress 工具,可幫助您確保您的外掛符合 WordPress.org 外掛目錄所要求的標準。它檢查是否符合最佳實踐,涵蓋效能、安全性、i18nA11y 等領域,並標記任何違規或問題,以幫助改進您的外掛。

Plugin Check

Kubrick UI

Kubrick UI 是一個開源的 React 元件庫,構建於 react-aria 之上,專為建立自定義 WordPress 管理應用程式而設計。它可以幫助開發人員確保 WordPress 管理應用程式的一致性、可訪問性,並與熟悉的 WordPress 管理介面無縫融合。

Kubrick UI

React Symbols

react-symbols 是一個輕量級的 React 庫,提供 100 多個檔案和資料夾圖示。它採用 TypeScript 構建,支援 React Server Components (RSC),並提供經過優化和精簡的 SVGs。這些圖示最初是為 VSCode 主題“Symbols”設計和建立的,但我認為它完全適用於任何專案。

React Symbols

Zola

Zola 是一個用 Rust 編寫的靜態網站生成器(SSG),類似於 HugoJekyll,它使用 Tera 模板引擎。它支援 CommonMark,並提供 GitHub 風格表格和任務列表等功能。對於希望構建快速、安全、靈活網站的開發人員來說,這是一款非常棒的工具。

Zola

MaryUI

MaryUI 是適用於 Livewire 3 的 Laravel Blade 元件集。它提供了預先設計好的 UI 元素,幫助 Laravel 開發人員快速、輕鬆地構建應用程式的 UI 和頁面。它使用 daisyUI 和 Tailwind CSS 進行樣式設計,讓您可以使用自己熟悉的工具進行靈活定製。

MaryUI

Expressive Code

Expressive Code 可讓你在內容或頁面上輕鬆顯示程式碼塊。它支援 VS Code 主題,具有準確的語法高亮顯示,幷包含編輯器框架、複製到剪貼簿按鈕、文字標記和可摺疊部分等功能。最重要的是,它不依賴 React 或 Vue 等任何前端框架,可與 Astro 和 Next.js 等流行的網站生成器以及普通 Markdown 和 MDX 配合使用。

Expressive Code

Shoelace

Shoelace 是一個開源的、與框架無關的可定製網路元件庫。它提供按鈕和對話方塊等可訪問的現代使用者介面元素,易於主題化和整合到任何專案中,是構建響應性強、靈活的網路介面的理想之選。

Shoelace

GitHub Copilot Extensions

GitHub 釋出的 GitHub Copilot Extensions,使開發人員能夠在 VS Code 和 GitHub 中使用自然語言進行開發和部署。它允許你使用特定的工具,如 Docker、Azure、Stripe 和 MongoDB,為你提供更好的工具和上下文,在一個簡化的過程中修復或解決應用程式中的問題。

GitHub Copilot Extensions

Dioxus

Dioxus 是一個 Rust 庫,可讓您從單一程式碼庫中構建桌面、網路、移動等應用。它受到 React 的啟發,致力於讓跨平臺應用的開發更快、更簡單。如果您想為多個平臺構建應用程式,它將是您的理想工具。

Dioxus

Motion Primitives

Motion Primitives 是一組使用 Framer Motion 和 Tailwind CSS 構建的 React 元件。它能讓您輕鬆為網站新增流暢的動畫效果。對於希望讓網站更具活力的開發人員和設計師來說,這是一個完美的庫。

Motion Primitives

Rclone

Rclone 是一款命令列工具,可幫助你輕鬆管理雲端儲存上的檔案。它可以替代雲供應商提供的網路介面。它支援 70 多種不同的雲端儲存服務,包括 S3 物件儲存和各種檔案儲存選項。它能讓你更輕鬆地在多個平臺上傳輸和整理檔案。

Rclone

Notion Helper

Notion Helper 是一個 Node.js 庫,可簡化 Notion API 的工作。它易於使用,沒有依賴關係,併為 IntelliSense 提供完整的 JSDoc 支援。對於希望將Notion整合到其專案中的開發人員來說,這是一款非常棒的工具。

Notion Helper

Wagtail

Wagtail 是一個基於 Django 的開源內容管理系統(CMS),其設計注重使用者體驗。它為設計人員和開發人員提供了對內容和設計的精細控制。它使建立網站變得簡單而靈活。如果您的 Python 專案正在尋找一個易於使用和定製的內容管理系統,我認為 Wagtail 是一個不錯的選擇。

Wagtail

UIKit

UIKit 是一個工具包,用於使用 react-three-fiber 構建快速、反應靈敏的 3D 使用者介面。它提供預設風格的可定製元件,讓您更輕鬆地建立互動式佈局和介面。它是在基於網路的 3D 應用程式(如遊戲或虛擬/增強現實(VR/AR)專案)中開發使用者介面的絕佳庫。

UIKit

SN Pro

SN Pro 是一款基於 Nunito 的免費開源字型。它細化了每個字元,使其具有更好的可讀性,改進了字距和對連字元的支援,同時對 Q 和 t 等特定字母進行了調整。它看起來乾淨整潔,感覺更有質感。

SN Pro

Image Placeholders

Image Placeholders 是一個 WordPress 外掛,是 WordPress 為提高效能所做努力的一部分。它的工作原理是確定並儲存媒體庫中新上傳圖片的主色調,並利用它在前端建立一個該顏色的背景佔位符,該佔位符在相關圖片載入之前是可見的。

Image Placeholders

Atomico

Atomico是一個輕量級庫,用於使用函式、鉤子和虛擬 DOM(類似於 React)構建 Web 元件。它還與框架無關,這意味著您的元件可以與 React、Vue、Svelte 或 Angular 等庫一起使用。我認為,對於希望構建快速、易用的 Web 元件的開發人員來說,這是一個很棒的庫。

Atomico

Gutenberg Comment Highlight

Gutenberg Comment Highlight 是一個 VSCode 擴充套件,可提高 WordPress 古騰堡塊後設資料的可讀性。它將以 wp: 開頭的區塊名稱作為變數高亮顯示,並對任何 JSON 字串應用基本的 JSON 語法高亮顯示,從而使註釋比標準 HTML 註釋的預設灰色外觀更易於閱讀。

Gutenberg Comment Highlight

SST

SST 是一個可簡化在自己的 AWS 基礎架構上構建全棧應用程式的框架。只需一次配置,您就可以部署應用程式所需的一切。它支援廣泛的 AWS 服務,包括 Lambda、API Gateway 和 S3,並支援 Next.js、Nuxt、Solid、Astro 等流行框架。這是一款非常方便的應用程式部署工具。

SST

Rspack

Rspack 是用 Rust 編寫的高效能 JavaScript 捆綁程式,旨在成為 Webpack 的更快替代品。它提供快速構建效能、熱模組替換(HMR)以及與 Webpack 外掛和載入器的完全相容性。Rspack 還支援樹抖動等內建優化,並且與框架無關,讓開發人員可以靈活地處理大型專案。對於希望提高專案和應用程式構建效能的開發人員來說,Rspack 是一款出色的工具。

Rspack

評論留言