<tbody id="5vw1z"></tbody>
<rp id="5vw1z"></rp>
  •  

    分享 63 個面向前端開發人員的開源項目工具

    接下來碼云筆記為大家分享 63 個面向前端開發人員的開源項目工具,內容雖有點長,但都是我們在做前端開發時需要的工具,整理不易,有需要的拿走不謝。

    01、Day.js

    Day.js是一個極簡的Javascript庫,大小只有2Kb左右。它可以在瀏覽器和NodeJs(服務器端)上運行。和moment js很像,切換到這個庫的時候可以放心使用。

    此外,它還可以在當今最流行的瀏覽器上運行,例如Windows XP上的Chrome,Windows 7上的IE 8、9和10,Windows 10上的IE 11,Linux上最新的Firefox,以及新的Safari。

    地址:day.js

    02、Mono Icon

    Mono Icon是一個開源圖標,我們可以輕松快速、完全免費地將其應用到我們的網站上。我們可以通過CDN將其直接嵌入到HTML頁面中,也可以通過npm為我們的Web項目安裝它。

    地址:icons mono

    03、視覺擴展代碼Cho Microsoft Edge

    隨著Edge瀏覽器的發展,VS Code還發布了一個新的擴展,用于直接在VS Code中測試和運行Edge Web項目,而無需在計算機上安裝此瀏覽器。

    地址:marketplace

    04、Blob生成器

    Blob生成器是一個在線工具,可以通過SVG編輯為網頁創建復雜的形狀。我們只需要更改提供的屬性,代碼就會自動生成。

    地址:blobs

    05、Library Detector

    Library Detector是一個Google Chrome擴展程序,可以輕松查看網站使用的Javascript技術。

    地址:library-detector

    06、tsParticles-TypeScript Particles

    tsParticles-TypeScript Particles是在particle.js基礎上重寫的庫,目的是讓我們更輕松地創建更多背景動畫,并提供更多實用程序和支持功能。

    我喜歡這個庫的地方在于它可以用于許多不同的框架,例如reactjs、vuejs、angularjs、Jquery…

    地址:particles

    07、CSS Value

    CSS Value是一個網站,其功能可以很容易地確定某個CSS屬性的值。例如選擇text-decoration屬性,會自動顯示相關屬性:text-decoration,text-decoration-color,text-decoration-line,text-decoration-skip,text-decoration-style,text-裝飾厚度…

    地址:cssvalues

    08、RunJS

    RunJS是一個桌面應用程序,可幫助我們編寫專門的Javascript和Typescript代碼。它的優勢是我們可以快速測試代碼,輕松導入和測試庫代碼,并且能夠修改界面、主題和字體以適應我們的偏好。

    地址:runjs

    09、Duet Date Picker

    Duet Date Picker是由Duet Design System開發的開源代碼。它允許我們輕松地為網站構建日期選擇器組件,而無需使用任何其他庫。

    我覺得在這個庫中的一些功能是有一個黑暗和光明的主題,能夠設置允許用戶選擇的時間間隔,按地區設置日期……

    地址:date-picker

    10、urlcat

    urlcat是一個緊湊的Javascript庫,大小僅為0.8kb左右,無需使用任何額外的庫。它可以快速輕松地在URL上構建查詢,也可以避免我們為網站構建url時的常見錯誤。

    地址:urlcat

    11、ztext.js

    ztext.js是一個javascript庫,可以輕松地為網頁構建3D文本,并且可以與所有類型的字體一起使用。

    此外,我們還可以為SVG、圖像、表情符號等其他元素創建3D效果。

    地址:ztext

    12、GitHub Profile README Generator

    GitHub Profile README Generator是一個在線網絡工具,可幫助我們以最完整和最詳細的方式在github上構建我們的個人資料頁面,包括標題、工作、編程語言技能、(前端)、后端、框架…)、社交網絡鏈接…

    地址:gh-profile-readme-generator

    13、Wrap SVG Online

    Wrap SVG Online是一個應用程序,通過拖放從我們的計算機上傳的圖像,可以輕松地編輯網頁的SVG圖像。

    地址:warp-svg

    14、3D Book Image CSS Generator

    3D書籍圖像CSS生成器是一個在線工具,可讓我們快速輕松地創建3D書籍封面并將其應用到您的網站。

    我們只需要提供書籍的圖像并編輯提供的CSS屬性,例如Width(書籍寬度)、Height(書籍高度)、Thickness(書籍厚度)…您喜歡的代碼片段HTML、CSS將是分別自動生成。

    地址:3dbook

    15、Print.js

    Print.js是一個緊湊的Javascript庫,它允許我們直接在網頁上打印文件,而無需重定向或使用嵌入。

    它支持多種格式的打印,例如PDF、HTML(例如表單…)、圖像、JSON…此外,它還可以在大多數流行的瀏覽器上運行,例如Chrome、Firefox、Safari、Edge和Opera。

    地址:printjs

    16、C?ng C?制表符

    制表器允許我們像排序、添加、編輯或刪除HTML表格一樣輕松地創建包含數據的交互式表格。

    我們可以從Javascript Array、AJAX或JSON格式的數據源中獲取表的數據。

    此外,它還支持當今最流行的瀏覽器,例如Google Chrome、Firefox、Safari、Opera和Edgege。

    它也適用于當今流行的javascript前端框架,如ReactJS、VueJS和AngularJS。

    地址:tabulator

    17、Textures JS

    Textures JS是一個庫,可幫助我們快速輕松地為網頁創建SVG模式。它建立在D3.js之上,用于可視化我們的數據。在我看來,它在使用相應的模式劃分地圖中的區域時使用得相當多。

    地址:textures

    18、DOCX

    DOCX是一個庫,允許我們使用Javascript或Typescript從網頁元素創建.docx文件。

    它在瀏覽器和服務器端(使用Nodejs)都運行良好。據我所知,它有很多關于網站每個組件的詳細示例,以及將它應用于React、Vue或angularJS時的具體教程。

    地址:docx.js

    19、Keen-Slider

    Keen-Slider是一個免費的Javascript庫,可以快速輕松地創建觸摸滑塊組件(通常在手機上)和許多其他有用的調整功能,例如垂直滑塊、多張幻燈片、幻燈片的延遲加載模式……正如我所看到的,這個庫還有一個非常好的功能,可以根據IOS設計和網站的背景過渡效果創建一個timepicker(選擇時間)。

    地址:keen-slider

    20、Math JS

    Math JS是一個開源數學庫,在Github上為Javascript和NodeJS(服務器端)擁有超過10.5k顆星。它使我們可以靈活地計算和處理許多不同的數據類型,例如數字、大數、復數、分數、單位和矩陣。

    地址:mathjs

    21、Rough Notation

    Rough Notation是一個緊湊的Javascript庫,可幫助我們為網頁中的元素創建注釋,具有許多漂亮的效果,例如下劃線、框、圓圈、突出顯示、括號…

    地址:roughnotation

    22、Flip

    Flip是一個插件,可讓我們快速輕松地為網站創建具有翻轉效果的計數器。如果我們需要創建活動計時器、促銷活動或籌款活動,我認為這是最適合的庫。

    地址:pqina

    23、Quotebacks

    Quotebacks是一種在線工具,可讓我們在網站上快速嵌入設計精美的報價單。我們只需要為程序提供4個基本參數:被引用的段落、作者姓名、標題和引用來源的url。然后代碼會自動生成,我們只要把它復制到我們想展示的網站上就可以使用了。

    地址:quotebacks

    24、SVG路徑可視化器

    SVG Path Visualizer是一種工具,可幫助我們通過輸入SVG路徑數據來快速直觀地查看SVG圖像。

    此外,該工具還提供了詳細的說明,以便我們了解如何創建基本的SVG形狀,如直線、曲線、三角形……

    地址:svg-path-visualizer

    25、Toast UI編輯器

    Toast UI Editor是一個文本編輯器,允許我們在網頁中編輯Markdown文檔的文本或所見即所得。

    通過將庫劃分為許多不同的插件,這將使我們更容易優化,只為我們的網站添加必要的功能。

    示例是插件editor-plugin-chart:顯示編輯器的圖表,editor-plugin-code-syntax-highlight突出顯示代碼片段,editor-plugin-color-syntax編輯文本的顏色。..但現在它只支持純javascript、ReactJs、VueJs和Jquery!

    地址:tui-editor

    26、Jexcel

    Jexcel是一個緊湊的Javascript庫,可幫助我們為網站創建高度交互的表格,其中包含可以從JS Array、JSON、CSV或XSLX文件中提取的數據。

    在我看來,它有一些非常有用的特性,比如用戶友好的界面,易于定制和與其他插件和庫結合,通過簡單的操作處理復雜的數據。

    地址:jspreadsheet

    27、Chocolat.js

    Chocolat.js是一個Javascript庫,可以輕松地在網頁上顯示響應式燈箱。此外,我們還可以在同一頁面上設置一張或多張圖片,全屏顯示圖片或將其限制為我們想要的任何div標簽。

    地址:chocolat

    28、Image Compare Viewer

    Image Compare Viewer是一個使用Javascript構建的開源庫,可以創建一個直接在網頁上比較兩個圖像的組件。在我看來,它通常用于比較編輯前后的圖像,以幫助用戶獲得更直觀和有區別的視圖。

    地址:image-compare-viewer

    29、Trianglify

    Trianglify是一個庫,它允許我們通過組合和構建三角形來為網站創建漂亮的背景圖案。我們只需選擇要為背景圖案設置的庫提供的參數,例如寬度、高度、調色板、單元格間距……。

    地址:trianglify

    30、Notyf

    Notyf是一個Javascript庫,可幫助我們為大小僅為3Kb,它可以為網站創建toast消息。它以響應方式顯示在許多不同的設備屏幕上,并且易于與當今流行的JS框架(如React、Angular、Aurelia、Vue和Svelte)一起使用。

    地址:notyf

    31、Dinero.js

    Dinero.js是一個javascript庫,它提供了許多功能來幫助我們工作和處理網絡中與貨幣相關的問題。

    地址:dinerojs

    32、BEM CEAT SHEET

    BEM CEAT SHEET是一個網站,它為我們提供了一種更優化、更一致的方式來使用網站組件命名類。根據這個規則命名將有助于團隊中的開發人員輕松了解每個類的功能,并更有效地協同工作。

    地址:bem-cheat-sheet

    33、Rough.js

    Rough.js是一個圖形庫,用于在網頁中快速輕松地繪制直線、曲線、圓弧、多邊形、圓形和橢圓形。此外,它還支持SVG Path!

    地址:roughjs

    34、simpleParallax.js

    simpleParallax.js是一個體積小巧的開源javascript庫,它將幫助我們簡單輕松地為網站圖像創建視差動畫效果。

    地址:simpleparallax

    35、免費網站圖標制作工具

    網站圖標是用戶訪問我們的網站時顯示在瀏覽器選項卡上的小徽標。我們也可以使用另一種格式,如svg…

    我想向您介紹一種工具,可以幫助您輕松創建網站圖標,設計精美且完全免費,免費的網站圖標制作工具。

    地址:favicon

    36、The good line-height

    The good line-height讓我們可以更直觀地查看網頁中文本的屬性使用line-height。它提供了3個主要屬性供我們自定義編輯。

    地址:the-good-line-height

    37、CSS 3D變換

    這是使用透視屬性為網頁創建3D對象的方法的集合。我最喜歡這里的部分是每個代碼片段旁邊都有一個特定的示例。這將使我們更容易可視化受眾,并查看哪些適合我們的網站。

    地址:css-3d-transform

    38、Good Web Design

    Good Web Design是一個網站,收集了許多漂亮的登陸頁面設計,分為CTA(號召性用語)、導航欄、頁腳、案例研究等多個部分。

    地址:good-web-design

    39、BGJar

    BGJar是一個在線工具,可以輕松快速地為我們的網站創建SVG背景。我們只需編輯必要的信息,網絡應用程序將自動導出圖像或代碼供您應用到網站。

    地址:bgjar

    40、Bootstrap Icons

    以前,Bootstrap Icons的誕生是為了滿足構建Bootstrap組件、文檔的需求。但是,今天它也可以通過以SVG樣式格式化的圖標用于許多其他項目。它將幫助我們通過CSS輕松設置圖標樣式,而不必擔心損壞的圖像。

    地址:icons-getbootstrap

    41、Squircley

    Squircley幫助我們為Web中的對象創建漂亮的形狀,例如背景、圖標、徽標……

    地址:squircley

    42、mailgo

    通常,當我們打開郵件鏈接時,瀏覽器將使用默認應用程序打開電子郵件編輯器。至于mailgo,我們可以設置選項來幫助用戶打開其他電子郵件編輯器,例如Gmail、Outlook……或默認打開。除了使用a href=”mailto:”標簽外,它還可以與href=”tel:”一起使用!

    地址:mailgo

    43、Forge Icon

    Forge Icon是一個為我們的Web項目(例如電子商務、旅游、社交網絡、應用程序設計…)組合許多不同類型圖標的地方。

    地址:icons-forgesmith

    44、GooFonts

    對于字體,我最常使用Google字體。它是免費的,并且有很多漂亮的字體。但是,字體數量如此之多,我們很難為我們的網站找到合適的字體。

    因此,我想介紹一個名為GooFonts的工具。它將負責將Google Font的字體類型劃分為許多小數組,例如用于報紙、學校、卡通、徽標的字體……

    地址:goofonts

    45、CSS Spider

    CSS Spider是Google Chrome、Firefox的擴展,主要任務是幫助我們查看屬性并獲取網頁中任何對象的CSS代碼。

    地址:cssspider

    46、Bit

    在編程中,我們通常會在使用它來解決問題后存儲好的和有用的代碼。主要目的是以后如果遇到類似的情況,可以重復使用,不用浪費時間去尋找和思考。

    Bit的誕生是為了讓我們更輕松地完成上述工作。它將立即將代碼存儲在云中,我們可以在任何地方訪問它而無需擔心安全性。

    有兩種保存代碼片段的方法是私有的(只有你可以看到)和公開的(每個人都可以看到)。

    因此,Bit工具也是您可以參考的其他程序員(如公共)的許多有用代碼的地方。

    地址:bit

    47、Hat sh

    Hat sh是一款免費工具,可幫助我們快速、輕松、安全地加密文件。

    地址:hat-sh

    48、screen guru

    screen guru是一個在線工具,可讓我們為網站截取屏幕截圖。

    地址:screen guru

    49、FontBase

    FontBase為網頁設計師提供友好的界面,幫助我們快速輕松地管理字體。它具有許多便利,例如一鍵式加載谷歌字體庫,始終更新新版本,輕松搜索字體,無需安裝即可激活字體…

    地址:fontbase

    50、uiLogos

    uiLogos是一個為網站聚合了超過25個專業設計文件的網站。但是,它只允許導出PNG文件,如果要使用SVG文件,則需要支付大約37美元。

    地址:uilogos

    51、DevLorem

    DevLorem是一個幫助我們在Web開發過程中創建插圖的工具。

    地址:devlorem

    52、CSSReference.io

    CSSReference是CSS屬性指南的集合。我最喜歡它的是通過說明性示例將信息可視化的能力。這也將使我們更容易吸收和享受學習編碼。

    地址:cssreference

    53、Codeimg

    Codeimg是一種工具,可幫助我們通過具有許多支持功能的圖像顯示代碼,例如選擇背景主題、指定顏色、字體大小、代碼語言…

    地址:codeimg

    54、HTMLReference

    HTMLReference是一個類似CSSReference的網站,其目的是通過特定示例收集所有HTML屬性的說明。

    地址:htmlreference

    55、Wavesnippets

    Wavesnippets是一種工具,可讓我們將要與他人共享的代碼部分設置為動畫或視頻或GIF。這種形式的一個很好的例子是它使其他人更容易理解和更好地理解你編寫的代碼的順序。

    地址:wavesnippets

    56、Hero Patterns

    Hero Patterns是用于網頁設計的SVG背景圖案的集合。

    地址:heropatterns

    57、Boxicons

    Boxicons是一個簡單且免費的矢量圖標集合,適用于網頁設計師和開發人員。

    地址:boxicons

    58、Coaster

    Coaster是一款讓我們在Unsplash上輕松查找和下載圖像的軟件。此外,它還支持Windows和Mac操作系統版本。

    地址:heycoaster

    59、Pretty Snap

    Pretty Snap是一種工具,可幫助我們為要在網頁中顯示的圖像創建漂亮的背景。

    地址:prettysnap

    60、Link-to-qr

    Link-to-qr是一個免費的網站二維碼生成器。

    地址:link-to-qr

    61、CSS背景圖案

    CSS Background Patterns是一組漂亮的網站背景圖案。我喜歡這個網站的地方是我們可以立即在該工具的網站中應用我們想要的背景。

    地址:css-backgrounds

    62、生成SVG波形

    Generate SVG Waves是一個在線工具,可幫助我們的網站創建SVG背景波。

    地址:svgwave

    63、DEVICE SHOTS

    DEVICE SHOTS 可以輕松地將網站的照片應用到當今許多流行的設備屏幕上,例如計算機、手機、平板電腦……,非常方便。

    地址:deviceshots

    「點點贊賞,手留余香」

    0

    給作者打賞,鼓勵TA抓緊創作!

    微信微信 支付寶支付寶

    還沒有人贊賞,快來當第一個贊賞的人吧!

    聲明:
    1. 本站所有文章教程及資源素材均來源于網絡與用戶分享或為本站原創,僅限用于學習和研究。
    2. 如果內容損害你的權益請聯系客服QQ:1642748312給予處理。
    碼云筆記 » 分享 63 個面向前端開發人員的開源項目工具

    發表回復

    IT互聯網行業相關廣告投放 更專業 更精準

    立即查看 聯系我們
    亚洲 自拍 另类小说综合图区