」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 前端 UI 元件

前端 UI 元件

發佈於2024-11-07
瀏覽:972

 Frontend UI Components

iHateReading 自訂儲存庫

在過去的一個月裡,我製作了許多 UI 元件,這些元件是真實世界的 Web 元件,例如按鈕、輸入、表單、橫幅、圖庫

為多種目的而製造的組件

  • 學習前端並在我所做的事情上變得更好
  • 提高前端開發中編寫更好程式碼的能力(稍後我會解釋這意味著什麼)

我目前的技術堆疊或技術是reactjs和next.js作為框架,我使用Tailwind CSS進行樣式設計,使用GSAP進行動畫

我可以使用任何技術堆疊,這不是問題,所以我從最新的框架開始,語言是reactjs和next.js

接下來,我必須選擇我應該開發的所有元件,這些元件是我個人可以在即將到來的實際專案中使用的,例如付款表單、訂閱表單、圖片庫、按鈕、許多其他UI 元件,標頭組件等等。

iHateReading 是一個開發者為開發者提供的平台,在過去的兩年裡,我一直在 ihatereading.in 上分享部落格和時事通訊。

現在是引入一些新更改或新功能的正確時機,這些新更改或新功能是自訂儲存庫或自訂程式碼或任何您想稱呼的內容,以恢復該平台的全部內容。

現在來看看這些組件是由什麼組成的,所有組件都是使用以下模組製成的

  1. Reactjs
  2. Tailwind CSS
  3. 動畫 GSAP
  4. Mantine.dev UI 庫(如果需要)

我正在嘗試使用無頭 UI 元件,這意味著僅添加功能,而無需任何樣式或框架依賴性,這樣許多開發人員可以輕鬆複製貼上程式碼並直接使用它來快速開發。

在開發這些組件時,如果您看到我在 https://ihatereading.in/customrepo 上共享的第一個組件並將其與新的或最新的組件進行比較,您可以輕鬆找到差異。

更少的依賴、更少的 JavaScript 以及更優化和可重複使用的程式碼元件。

所有功勞都歸功於我去年所做的研究和博客,為什麼 JavaScript 會降低網站效能?因為與 CSS 相比,瀏覽器需要花費大量時間來解析 JS。從而減少 JS 也會提高網站效能。

此外,現在的CSS 變得如此強大,以至於只需要很少的JS 就可以為網站帶來很酷的動畫,而很多開發人員並沒有太關注它,這是“多用CSS > 少用JS」的另一個座右銘。

到目前為止,已經添加了 40 個組件,我正在研究更多組件,如果您知道我可以製作什麼樣的組件、表單或工具,請在評論部分中添加它們,我一定會跟隨。

我正在 Twitter 和 LinkedIn 上積極分享組件開發新聞,並在 ihatereading.in/customrepo 上推送程式碼

請隨意查看它們,並讓我知道還需要添加和創建哪些內容。

乾杯
施瑞

版本聲明 本文轉載於:https://dev.to/shreyvijayvargiya/40-code-components-339e?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何使用 mysqli_pconnect() 在 PHP 中實作 MySQL 連線池?
    如何使用 mysqli_pconnect() 在 PHP 中實作 MySQL 連線池?
    MySQL 的 PHP 連線池在 PHP 中,維護資料庫連線會影響效能。為了優化這一點,開發人員經常考慮使用連接池技術。 MySQL 的連線池MySQL 沒有內建的連線池機制。然而,MySQLi 擴充功能提供了mysqli_pconnect() 函數,其作用與mysqli_connect() 類似,...
    程式設計 發佈於2024-11-07
  • 將 HTMX 加入 GO
    將 HTMX 加入 GO
    HTMX 是 intercooler.js 的後繼者,用於使用 HTTP 指令擴充 HTML,而無需編寫 API。現在,我知道一開始我說我要刪除抽象層,但是我更多的是系統/工具程式設計師,所以我仍然需要一些抽象,直到我掌握了底層實際發生的情況。 基本概念 HTMX 部署 AJAX ...
    程式設計 發佈於2024-11-07
  • 發現 itertools
    發現 itertools
    Itertools 是最有趣的 Python 函式庫之一。它包含一系列受函數式語言啟發的函數,用於與迭代器一起使用。 在這篇文章中,我將提到一些最引起我注意並且值得牢記的內容,以免每次都重新發明輪子。 數數 好幾次我都實現了無限數(好吧,結束了 明確地在某一點用中斷)使用 whi...
    程式設計 發佈於2024-11-07
  • 為什麼每個人都應該學習 Go(即使您認為生活中不需要另一種語言)
    為什麼每個人都應該學習 Go(即使您認為生活中不需要另一種語言)
    啊,Go,编程语言。您可能听说过,也许是从办公室里一位过于热情的开发人员那里听说过的,他总是不停地谈论他们的 API 现在有多“快得惊人”。当然,您已经涉足过其他语言,也许您会想:“我真的需要另一种语言吗?”剧透警报:是的,是的,你知道。 Go 就是那种语言。让我以最讽刺、最真诚的方式为你解释一下。...
    程式設計 發佈於2024-11-07
  • 如何計算 Pandas 中多列的最大值?
    如何計算 Pandas 中多列的最大值?
    在Pandas 中尋找多列的最大值假設您有一個包含多列的資料框,並且希望建立一個包含兩個或多個列中的最大值的新列現有的列。例如,給定A 列和B 列,您需要建立C 列,其中:C = max(A, B)要完成此任務:使用max 函數和axis=1 計算指定列中每行的最大值:df[["A&quo...
    程式設計 發佈於2024-11-07
  • 如何在 PHP 中從目錄中檢索檔案名稱?
    如何在 PHP 中從目錄中檢索檔案名稱?
    從 PHP 中的目錄中擷取檔案如何在 PHP 中存取目錄中的檔案名稱?事實證明,確定正確的命令具有挑戰性。這個問題旨在為尋求類似解決方案的個人提供幫助。 PHP提供了幾種從目錄獲取文件清單的方法:DirectoryIterator(建議)此類允許對目錄中的文件進行迭代:foreach (new Di...
    程式設計 發佈於2024-11-07
  • 使用 Linq、Criteria API 和 Query Over 擴充 NHibernate 的 Ardalis.Specification
    使用 Linq、Criteria API 和 Query Over 擴充 NHibernate 的 Ardalis.Specification
    Ardalis.Specification is a powerful library that enables the specification pattern for querying databases, primarily designed for Entity Framework Cor...
    程式設計 發佈於2024-11-07
  • PYTHON:OOP {初學者版}
    PYTHON:OOP {初學者版}
    Python:物件導向程式設計[OOP]:是一種程式設計範式(模型),使用物件和類別來建立軟體一種模擬現實世界實體和關係的方法。這是基於物件可以包含資料和操作該資料的程式碼的想法。 關於物件導向編程,您需要了解一些關鍵概念: 班級 目的 屬性 方法 遺產 封裝 多態性 抽象 下面的範例是一個幫助您...
    程式設計 發佈於2024-11-07
  • Neo.mjs:一個高效能開源 JavaScript 框架。
    Neo.mjs:一個高效能開源 JavaScript 框架。
    在瀏覽 GitHub 並尋找可協作的開源專案時,我發現了 Neo.mjs。我對這個計畫產生了興趣,並開始更多地研究這個新框架。我想在這篇文章中分享我發現的所有內容。 什麼是 Neo.mjs? Neo.mjs 旨在建立高效能、資料驅動的 Web 應用程序,重點在於利用 Web Wor...
    程式設計 發佈於2024-11-07
  • 將 Azure Functions 部署到 Azure 容器應用程式的兩種方法的比較
    將 Azure Functions 部署到 Azure 容器應用程式的兩種方法的比較
    昨天,我寫了一篇題為「在 Azure 容器應用程式上部署 Java Azure Function」的文章。 在那篇文章中,我提到使用 Azure 的整合管理功能,我想澄清這意味著什麼以及它與本文中先前的方法有何不同。 舊方法:使用 az containerapp create 創...
    程式設計 發佈於2024-11-07
  • 如何使用 MinGW 在 Windows 上建置 GLEW?逐步指南。
    如何使用 MinGW 在 Windows 上建置 GLEW?逐步指南。
    使用MinGW 在Windows 上建立GLEW:綜合指南使用GLEW,這是一個無縫整合OpenGL 和WGL 函數的純頭文件庫,使用MinGW 增強Windows 上OpenGL 應用程式的開發。為了使用 MinGW 有效建置 GLEW,需要一組特定的命令和步驟。 首先,建立兩個名為 lib 和 ...
    程式設計 發佈於2024-11-07
  • 如何使用 CSS 創建帶有對角線的雙色調背景?
    如何使用 CSS 創建帶有對角線的雙色調背景?
    使用對角線創建雙色調背景要使用CSS 實現由對角線分為兩部分的背景,請執行以下操作這些步驟:1。建立兩個 Div:建立兩個單獨的 div 來表示兩個背景部分。 2.設定 Div 樣式:將下列 CSS 套用至 div:.solid-div { background-color: [solid co...
    程式設計 發佈於2024-11-07
  • 文件的力量:閱讀如何改變我在 JamSphere 上使用 Redux 的體驗
    文件的力量:閱讀如何改變我在 JamSphere 上使用 Redux 的體驗
    作為開發人員,我們經常發現自己一頭扎進新的庫或框架,渴望將我們的想法變為現實。跳過文件並直接跳到編碼的誘惑很強烈——畢竟,這有多難呢?但正如我透過建立音樂管理平台 JamSphere 的經驗所了解到的那樣,跳過這一關鍵步驟可能會將順利的旅程變成充滿挑戰的艱苦戰鬥。 跳過文檔的魅力 ...
    程式設計 發佈於2024-11-07
  • 如何在PHP多子網域應用中精準控制Cookie域?
    如何在PHP多子網域應用中精準控制Cookie域?
    在PHP 中控制Cookie 域和子域在PHP 中控制Cookie 域和子域建立多子網域網站時,必須控制會話cookie 的網域確保每個子網域的正確會話管理。然而,手動設定網域時,PHP 的 cookie 處理似乎存在差異。 header("Set-Cookie: cookiename=c...
    程式設計 發佈於2024-11-07
  • 如何取得已安裝的 Go 軟體包的完整清單?
    如何取得已安裝的 Go 軟體包的完整清單?
    檢索Go 中已安裝軟體包的綜合清單在多台電腦上傳輸Go 軟體包安裝時,有必要取得詳細的清單所有已安裝的軟體包。本文概述了此任務的簡單且最新的解決方案。 解決方案:利用“go list”與過時的答案相反,當前的建議列出Go 中已安裝的軟體包是使用“go list”命令。透過指定三個文字句點 ('...
    程式設計 發佈於2024-11-07

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3