英文 | https://medium.com/geekculture/83-tools-for-web-developers-a54cfa7fa522
翻譯 | 楊小愛
今天，我們将分享82個用于 Web 開發和設計的實用工具和庫。希望這些工具可以提升的開發效率，同時，也可以幫助您更好的學習前端開發。
01、Day.js
位址：https://day.js.org/en/
Day.js 是一個極簡的 Javascript 庫，大小隻有大約 2Kb。 它可以在浏覽器和 NodeJs（伺服器端）上工作。
它和moment js非常相似，是以切換到這個庫時你可以放心。 此外，它還可以在當今最流行的浏覽器上運作，例如 Windows XP 上的 Chrome，Windows 7 上的 IE 8、9 和 10，Windows 10 上的 IE 11，Linux 上最新的 Firefox，以及新的 Safari。
02、Mono Icon
位址：https://icons.mono.company/
Mono Icon 是一個開源圖示，您可以輕松快速且完全免費地将其應用到您的網站。您還可以通過 CDN 将其直接嵌入到 HTML 頁面中，也可以通過 npm 為您的 Web 項目安裝。
03、Microsoft Edge的可視化擴充代碼插件
位址：https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools
随着 Edge 浏覽器的發展，VS Code 還釋出了一個新的擴充插件，用于在 VS Code 中測試和運作邊緣 Web 項目，而無需在計算機上安裝此浏覽器。
04、Blob generator
位址：https://blobs.app/
Blob 生成器是一個線上工具，可以通過 SVG 編輯為網頁建立複雜的形狀。您隻需要更改提供的屬性，代碼就會自動生成。
05、Library Detector
位址：https://chrome.google.com/webstore/detail/library-detector/cgaocdmhkmfnkdkbnckgmpopcbpaaejo
Library Detector 是一個 Google Chrome 擴充程式，它可以讓您輕松檢視網站使用的 Javascript 技術。
06、tsParticles — TypeScript Particles
位址：https://particles.matteobruni.it/
tsParticles — TypeScript Particles 是在particles.js 基礎上重寫的一個庫，目的是讓您更容易地建立更多的背景動畫，并提供更多的實用程式和支援功能。
我喜歡這個庫的地方在于它可以用于許多不同的架構，例如 reactjs、vuejs、angularjs、Jquery……
07、CSS Value
位址：https://cssvalues.com/
CSS Value 是一個帶有功能的網站，可以輕松确定某個 CSS 屬性的值。比如選擇text-decoration屬性，會自動顯示相關屬性：text-decoration, text-decoration-color, text-decoration-line, text-decoration-skip, text-decoration-style......
08、RunJS
位址：https://runjs.dev/
RunJS 是一個桌面應用程式，可幫助您編寫專門用于 Javascript 和 Typescript 的代碼。它的一些優勢在于您可以快速測試代碼，輕松地使用庫導入和測試代碼，并且能夠修改界面、主題和字型以滿足您的喜好。
09、Duet Date Picker
位址：https://duetds.github.io/date-picker/
Duet Date Picker 是由 Duet Design System 開發的開源代碼。它允許您輕松地為您的網站建構日期選擇器元件，而無需使用任何其他庫。我覺得這個庫中的一些功能有一個黑暗和光明的主題，能夠設定允許使用者選擇的時間間隔，按地區設定日期......
10、urlcat
位址：https://urlcat.dev/#/
urlcat 是一個小巧的 Javascript 庫，大小隻有 0.8kb 左右，沒有使用任何額外的庫。它可以快速輕松地建構對 URL 的查詢，也避免了我們為網站建構 url 時的常見錯誤。
11、ztext.js
位址：https://bennettfeely.com/ztext/
ztext.js 是一個 javascript 庫，可以輕松地為網頁建構 3D 文本，并且可以與所有類型的字型一起使用。此外，您還可以為 SVG、Image、emoji 等其他元素建立 3D 效果。
12、GitHub Profile README Generator
位址：https://rahuldkjain.github.io/gh-profile-readme-generator/
GitHub Profile README Generator 是一款線上網絡工具，可幫助您以最完整、最詳細的方式在 github 上建構您的個人資料頁面，包括标題、職位、程式設計語言技能、（前端）、後端、架構……）、社交網絡連結……
13、Wrap SVG Online
位址：https://pavellaptev.github.io/warp-svg/
Wrap SVG Online 是一個應用程式，通過拖放從您的計算機上傳的圖像，可以輕松編輯網頁的 SVG 圖像。
14、3D 書籍圖像 CSS 生成器
位址：https://3d-book-css.netlify.app/
3D 圖書圖像 CSS 生成器是一種線上工具，可讓您快速輕松地建立 3D 圖書封面并将其應用到您的網站。您隻需要提供書的圖像并編輯所提供的 CSS 屬性，例如 Width（書本寬度）、Height（書本高度）、Thickness（書本厚度）……随心所欲，代碼片段 HTML、CSS 将自動生成 分别。
15、Print.js
位址：https://printjs.crabbly.com/
Print.js 是一個緊湊的 Javascript 庫，允許您直接在網頁上列印檔案，而無需重定向或使用嵌入。它支援多種格式的列印，例如 PDF、HTML（例如表單……）、圖像、JSON……此外，它還可以在大多數流行的浏覽器上運作，例如 Chrome、Firefox、Safari、Edge 和 Opera。
16、Tabulator
位址：http://tabulator.info/
Tabulator 允許您像排序、添加、編輯或删除 HTML 表格一樣輕松地建立包含資料的互動式表格。我們可以從 Javascript Array 中擷取表的資料，從 AJAX 中擷取資料源，或者 JSON 格式。
此外，它還支援當今最流行的浏覽器，例如 Google Chrome、Firefox、Safari、Opera 和 Edege。
它也适用于當今流行的 javascript 前端架構，如 ReactJS、VueJS 和 AngularJS。
17、Textures JS
位址：https://riccardoscalco.it/textures/
Textures JS 庫可幫助您快速輕松地為網頁建立 SVG 圖案。它建立在 D3.js 之上，用于可視化您的資料。在我看來，它在使用相應的圖案劃分地圖中的區域時使用了很多。
18、DOCX
位址：https://docx.js.org/#/
DOCX 是一個庫，允許您使用 Javascript 或 Typescript 從網頁元素建立 .docx 檔案。它在浏覽器和伺服器端（使用 Nodejs）都能很好地工作。
據我所知，它對網站的每個元件都有很多詳細的示例，以及将其應用于 React、Vue 或 angularJS 時的具體教程。
19、Keen-Slider
位址：https://keen-slider.io/
Keen-Slider 是一個免費的 Javascript 庫，可以快速輕松地建立觸摸滑塊元件（通常在手機上）和許多其他有用的調整功能，例如垂直滑塊、多張幻燈片、幻燈片的延遲加載模式……就我而言 可以看到，這個庫還有一個很不錯的功能，可以根據IOS設計和網站背景過渡效果建立時間選擇器（選擇時間）。
20、Math JS
位址：https://mathjs.org/
Math JS 是一個開源數學庫，在 Github 上為 Javascript 和 NodeJS（伺服器端）擁有超過 10.5k star。它可以靈活地計算和處理許多不同的資料類型，例如數字、大數、複數、分數、機關和矩陣。
21、Rough Notation
位址：https://roughnotation.com/
Rough Notation 是一個緊湊的 Javascript 庫，可幫助您為網頁中的元素建立注釋，具有許多漂亮的效果，例如下劃線、框、圓圈、突出顯示、括号……
22、Flip
位址：https://pqina.nl/flip/
Flip 是一個插件，可讓您快速輕松地為您的網站建立具有翻轉效果的計數器。如果您需要建立事件計時器、促銷或籌款活動，我認為這是最适合您的庫。
23、Quotebacks
位址：https://quotebacks.net/
Quotebacks 是一種線上工具，可讓您快速将設計精美的報價嵌入您的網站。我們隻需要為程式提供 4 個基本參數：被引段落、作者姓名、标題和引文來源的 url。然後代碼會自動生成，你隻要把它複制到你要展示的網站上就可以使用了。
24、SVG Path Visualizer
位址：https://svg-path-visualizer.netlify.app/
SVG Path Visualizer 是一種工具，可幫助您通過輸入 SVG 路徑資料快速直覺地檢視 SVG 圖像。
此外，該工具還提供了詳細的說明，以便您了解如何建立基本的 SVG 形狀，例如直線、曲線、三角形……
25、Toast UI Editor
位址：https://ui.toast.com/tui-editor/
Toast UI Editor 是一個文本編輯器，可讓您編輯網頁中的文本或所見即所得的 Markdown 文檔。
通過将庫劃分為許多不同的插件，我們可以更輕松地進行優化，僅向我們的網站添加必要的功能。例如插件 editor-plugin-chart ：顯示編輯器的圖表， editor-plugin-code-syntax-highlight 突出顯示代碼片段， editor-plugin-color-syntax 編輯文本的顔色。.但現在它隻支援純 javascript、ReactJs、VueJs 和 Jquery！
26、Jexcel
位址：https://bossanova.uk/jspreadsheet/v4/
Jexcel 是一個緊湊的 Javascript 庫，可幫助您為網站建立高度互動的表格，其中的資料可以從 JS 數組、JSON、CSV 或 XSLX 檔案中提取。
在我看來，它具有一些非常有用的功能，例如使用者友好的界面，易于自定義并與其他插件和庫結合，通過簡單的操作處理複雜的資料。
27、Chocolat.js
位址：http://chocolat.insipi.de/
Chocolat.js 是一個 Javascript 庫，可以輕松地在網頁上顯示響應式燈箱。此外，您還有權在同一頁面上設定一個或多個圖像，全屏顯示圖像或将其限制為您想要的任何 div 标簽。
28、Image Compare Viewer
位址：https://image-compare-viewer.netlify.app/
Image Compare Viewer 是一個用 Javascript 建構的開源庫，它可以建立一個元件，直接在網頁上比較兩個圖像。
在我看來，它經常被用來比較編輯前後的圖像，以幫助使用者有一個更直覺和區分的視圖。
29、Trianglify
位址：http://qrohlf.com/trianglify/
Trianglify 庫，它允許您通過組合和建構三角形來為您的網站建立漂亮的背景圖案。您隻需要選擇庫提供的參數，例如寬度、高度、調色闆、單元格間距……要為背景圖案設定。
30、Notyf
位址：https://carlosroso.com/notyf/
Notyf 是一個 Javascript 庫，可幫助您為大小僅約 3Kb 的網站建立 Toast 消息。它響應式地顯示在許多不同的裝置螢幕上，并且易于與當今流行的 JS 架構一起使用，例如 React、Angular、Aurelia、Vue 和 Svelte。
31、Dinero.js
位址：https://dinerojs.com/
Dinero.js 是一個 javascript 庫，它提供了許多功能來幫助您工作和處理網絡中與貨币相關的問題。
32、BEM 備忘單
位址：https://9elements.com/bem-cheat-sheet/
BEM 備忘單是一個網站，它為您提供了一種更優化和更一緻的方式來命名網站元件的類。按照這個規則命名将有助于團隊中的開發人員輕松了解每個類的功能，并更有效地協同工作。
33、Rough.js
位址：https://roughjs.com/posts/release-4.0/
Rough.js 是一個圖形庫，用于在網頁中快速輕松地繪制線條、曲線、圓弧、多邊形、圓和橢圓。此外，它還支援SVG Path！
34、simpleParallax.js
位址：https://simpleparallax.com/
simpleParallax.js 是一個開源的 javascript 庫，體積小巧，它将幫助您簡單輕松地為網站圖像建立視差動畫效果。
35、Free Favicon Maker
位址：https://formito.com/tools/favicon
網站圖示是使用者通路您的網站時顯示在浏覽器頁籤上的小徽标。您也可以使用另一種格式，例如 svg……我想向您介紹一個工具，可以幫助您輕松建立網站圖示，設計精美且完全免費，免費的網站圖示制作工具。
36、The good line-height
位址：https://www.thegoodlineheight.com/
它可以讓您更直覺地檢視網頁中文本的屬性使用 line-height。它提供了 3 個主要屬性供您自定義編輯為
字型大小：字型大小。
乘數：行間距。
網格行高：定義網格中的行。
37、CSS 3D 變換
位址：https://polypane.app/css-3d-transform-examples/
這是一組使用透視屬性為網頁建立 3D 對象的方法。我最喜歡這裡的部分是每個代碼片段旁邊都有一個特定的示例。這将使您更輕松地可視化您的閱聽人并檢視哪些适合您的網站。
38、Good Web Design
位址：https://www.goodweb.design/
Good Web Design 是一個網站，它收集了許多用于着陸頁的精美設計，并分為許多部分，例如 CTA（号召性用語）、導航欄、頁腳、案例研究……
39、BGJar
位址：https://bgjar.com/
BGJar 是一種線上工具，可讓您輕松快速地為您的網站建立 SVG 背景。您隻需要編輯必要的資訊，Web 應用程式會自動導出圖像或代碼供您申請到網站。
40、Bootstrap Icons
位址：https://icons.getbootstrap.com/
以前，Bootstrap Icons 的誕生是為了滿足建構 Bootstrap 元件、文檔的需求。然而，今天它也可以通過以 SVG 樣式格式化的圖示用于許多其他項目。它将幫助您通過 CSS 輕松設定圖示樣式，而不必擔心損壞的圖像。
41、Squircley
位址：https://squircley.app/
Squircley 可幫助您為 Web 中的對象建立漂亮的形狀，例如，背景、圖示、徽标……
42、mailgo
位址：https://mailgo.dev/
通常，當您打開郵件連結時，浏覽器将使用預設應用程式打開電子郵件編輯器。至于mailgo，您可以設定選項來幫助使用者打開其他電子郵件編輯器，例如Gmail、Outlook……或預設打開。除了使用 a href="mailto:" 标簽外，它還可以與 href="tel:" 一起使用！
43、Forge Icon
位址：https://icons.theforgesmith.com/
Forge Icon 是一個為您的 Web 項目組合了許多不同類型圖示的地方，例如電子商務、旅遊、社交網絡、應用程式設計……
44、GooFonts
位址：https://goofonts.com/
對于字型，我最常使用 Google 字型。它既免費又有很多漂亮的字型。然而，面對如此龐大數量的字型，您真的很難為您的網站找到合适的字型。
是以，我想向大家介紹一個名為 GooFonts 的工具。它的任務是将 Google Font 的字型類型劃分為許多小數組，例如用于報紙、學校、卡通、徽标的字型……
45、CSS Spider
位址：https://cssspider.fresalabs.com/home
CSS Spider 是 Google Chrome、Firefox 的擴充插件，主要任務是幫助您檢視屬性并擷取網頁中任何對象的 CSS 代碼。
46、Bit
位址：https://bit.dev/
在程式設計中，我們通常會在使用它解決問題後存儲好的和有用的代碼。主要目的是如果以後遇到類似的情況，可以重複使用，不用浪費時間去搜尋和思考。
Bit 的誕生是為了讓您更輕松地完成上述工作。它将立即将代碼存儲在雲中，您可以在任何地方通路它而無需擔心安全性。有兩種儲存代碼片段的方法是私有的（隻有你可以看到）和公開的（每個人都可以看到）。
是以，Bit 工具也是您可以參考的來自其他程式員（如 public）的許多有用代碼的地方。
對于免費版本：
- 1個私人項目。
- 無限數量的公共項目。
- 無限數量的私有和公共元件。
- 有一個支援社群。
47、Hat.sh
位址：https://hat.sh/
Hat.sh 是一款免費工具，可幫助您快速、輕松、安全地加密檔案。
48、screen.guru
位址：https://screen.guru/
screen.guru 是一種線上工具，可讓您為您的網站截取螢幕截圖。
49、FontBase
位址：https://fontba.se/
FontBase 為網頁設計師提供友好的界面，可幫助您快速輕松地管理字型。它具有多項便利，例如一鍵式 Google 字型庫、随時更新新版本、輕松搜尋字型、無需安裝即可激活字型……
50、uiLogos
位址：https://uilogos.co/
uiLogos 是一個為網站聚合了超過 25 個專業設計檔案的網站。但是，它隻允許導出 PNG 檔案，如果要使用 SVG 檔案，則需要支付約 37 美元。
51、DevLorem
位址：https://devlorem.kovah.de/p
DevLorem 是一種幫助您在 Web 開發過程中建立插圖的工具。
52、CSSReference.io
位址：https://cssreference.io/
CSSReference 是 CSS 屬性指南的集合。我最喜歡它的是通過說明性示例将資訊可視化的能力。這也将使您更容易吸收和享受學習編碼。
53、Codeimg
位址：https://codeimg.io/
Codeimg 是一種工具，可幫助您通過具有許多支援功能的圖像顯示代碼，例如為背景選擇主題、指定顔色、字型大小、代碼語言……
54、HTMLReference.io
位址：https://htmlreference.io/
HTMLReference 是一個類似于 CSSReference 的網站，其目的是通過特定示例收集有關所有 HTML 屬性的說明。
55、Wavesnippets
位址：https://www.wavesnippets.com/
Wavesnippets 是一種工具，可讓您為要與他人共享的代碼部分設定動畫，作為視訊或 GIF。這種形式的講解例子，可以幫助其他人更容易了解并更好地了解您編寫的代碼的順序。
56、Hero Patterns
位址：https://heropatterns.com/
Hero Patterns 是一組用于網頁設計的 SVG 背景圖案。
57、Boxicons
位址：https://boxicons.com/
Boxicons 是一個簡單且免費的矢量圖示集合，供網頁設計師和開發人員使用。
58、Coaster
位址：https://heycoaster.com/
Coaster 是一款可讓您輕松在 Unsplash 上查找和下載下傳圖像的軟體。此外，它還支援 Windows 和 Mac 作業系統版本。
59、Pretty Snap
位址：https://prettysnap.app/
Pretty Snap 是一種工具，可幫助您為要在網頁中顯示的圖像建立漂亮的背景。
60、Link-to-qr
位址：https://link-to-qr.com/
Link-to-qr 是一個免費的網站二維碼生成器。
61、CSS 背景圖案
位址：https://www.magicpattern.design/tools/css-backgrounds
CSS 背景圖案是一組漂亮的網站背景圖案。我喜歡這個網站的地方在于，我們可以立即将您想要的背景應用到該工具的網站中。
62、SVG波浪生成器
位址：https://svgwave.in/
Generate SVG Waves 是一個線上工具，可幫助您為網站建立 SVG 背景波浪效果。
63、DEVICE SHOTS
位址：https://deviceshots.com/
DEVICE SHOTS 使您可以輕松地将網站照片應用到當今許多流行的裝置螢幕上，例如計算機、手機、平闆電腦……
64、CSS 網格布局生成器
位址：https://css-grid-layout-generator.pw/
這是一個工具，可幫助您使用 CSS 輕松快速地建構複雜的網格系統。
65、CSS雙色調發生器
位址：https://cssduotone.com/
此工具可幫助您設定圖像的 CSS 屬性，例如圖像的距離、不透明度、模糊度、顔色……
66、CSS3 生成器
位址：http://css3generator.com/
CSS3 Generator 可以幫助您快速建立複雜的屬性，例如 box-shadow、gradient、transition……此外，對于每個屬性，它将提供有關浏覽器對該屬性的支援的更多資訊。
67、Box Model
位址：https://codepen.io/carolineartz/full/ogVXZj
Box-model 是 Codepen 上的一個應用程式，它可以幫助您在為 Web 中的對象設定填充、邊距和邊框屬性時更直覺地檢視！
68、 CSS動畫背景生成器
位址：https://wweb.dev/resources/animated-css-background-generator/
CSS動畫背景生成器是一種工具，可讓您使用我們提供的顔色建立動畫背景。此外，它還為您提供了一些其他設定，例如計數、大小、平均速度。
69、Web Code Tools
位址：https://webcode.tools/generators/css
Web Code Tools 是一種工具，可通過輸入所需的屬性值來幫助您在 CSS 中設定通用屬性。此外，它還在預覽中提供了一個可視化示例，是以您可以根據您輸入的值輕松可視化結果。
70、Enjoy CSS
位址：https://enjoycss.com/
Enjoy CSS 是一個工具，可以幫助您為網頁中的許多對象設定樣式，例如輸入、按鈕、塊……您的工作是選擇要設定樣式的對象，然後選擇與該對象相關的 CSS 值，結果将立即可見。
71、CSS Portal
位址：https://www.cssportal.com/css-generators.php
CSS Portal 就像Enjoy CSS 頁面，它是多種類型的CSS 生成器工具的集合，用于網站對象，例如Flip Swith Generator、Text Gradient Generator、Ribbon Generator……
72、CSS3 生成器過度設計
位址：http://ds-overdesign.com/
CSS3 Generator 是一種工具，可幫助您設定網頁設計中的常見屬性，例如陰影、過濾器、變換……。
73、HTML 表格生成器
位址：https://www.quackit.com/html/html_table_generator.cfm
這是一個可以輕松編輯網站中表格元件的工具。
74、制作 CSS
位址：https://makingcss.com/
制作 CSS 是一個緻力于聚合工具以幫助您輕松生成 CSS 的網站。
75、CSS Matic
位址：https://www.cssmatic.com/
CSS Matic 是一個包含使網頁設計更容易的工具網站。
76、CSS Masonry Generator
位址：https://w3bits.com/tools/masonry-generator/
CSS Masonry Generator 是一種建構網格系統（如社交網絡 pinterest）的工具，有助于以更優化的方式顯示圖像。
77、CSS背景圖案生成器
位址：https://online-free-tools.com/en/css_pattern_generator_background
這是一個工具，可幫助您通過選擇該工具提供的可用資訊輕松地為您的網站建構背景圖案。
78、The Hero Generator
位址：https://hero-generator.netlify.app/
這是一個工具，可幫助您輕松地通過 CSS 屬性建構帶有圖像和内容的标題。
79、CSS Button Creator
位址：https://cssbuttoncreator.com/
CSS Button Creator 使使用 CSS 設計按鈕元件變得簡單快捷。
80、CSS Filter Generator
位址：https://www.cssfiltergenerator.com/
CSS Filter Generator 是一個工具，當在 CSS 中使用 filter 屬性來處理諸如亮度、模糊、灰階等圖像時，可以更輕松地進行可視化。
81、複選框和單選 CSS 生成器
位址：https://bun.js.org/
Checkboxes and Radios CSS Generator 是一個可以幫助您輕松自定義複選框和 HTML 單選框的工具。
82、Flexy Boxes
位址：https://the-echoplex.net/flexyboxes/
Flexy Boxes 是一種工具，可以讓您輕松快速地為您的網站建構 flexbox！
總結
我希望這篇文章能為您提供有用的工具和庫，用于 Web 開發和設計，如果您有任何問題，請在留言區給我留言，我會盡快回複。
感謝您的閱讀，祝您今天過得愉快！