63 个面向前端开发人员的开源项目工具

英文 | https://us.niemvuilaptrinh.com/article/63-open-source-web-development-tools

翻译 | 杨小爱

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、视觉扩展代码 Cho Microsoft Edge

地址：https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools

随着 Edge 浏览器的发展，VS Code 还发布了一个新的扩展，用于直接在 VS Code 中测试和运行 Edge Web 项目，而无需在计算机上安装此浏览器。

04、Blob 生成器

地址：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 是在particle.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, text-装饰厚度...

08、RunJS

地址：https://runjs.app/

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、图像、表情符号等其他元素创建 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 Book Image CSS Generator

地址：https://3dbook.xyz/

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、Công Cụ 制表符

地址：http://tabulator.info/

制表器允许我们像排序、添加、编辑或删除 HTML 表格一样轻松地创建包含数据的交互式表格。

我们可以从 Javascript Array、AJAX 或 JSON 格式的数据源中获取表的数据。

此外，它还支持当今最流行的浏览器，例如 Google Chrome、Firefox、Safari、Opera 和 Edgege。

它也适用于当今流行的 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 设计和网站的背景过渡效果创建一个 timepicker（选择时间）。

20、Math JS 

地址：https://mathjs.org/

Math JS 是一个开源数学库，在 Github 上为 Javascript 和 NodeJS（服务器端）拥有超过 10.5k 颗星。它使我们可以灵活地计算和处理许多不同的数据类型，例如数字、大数、复数、分数、单位和矩阵。

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 路径可视化器

地址：https://svg-path-visualizer.netlify.app/

SVG Path Visualizer 是一种工具，可帮助我们通过输入 SVG 路径数据来快速直观地查看 SVG 图像。

此外，该工具还提供了详细的说明，以便我们了解如何创建基本的 SVG 形状，如直线、曲线、三角形......

25、Toast UI 编辑器

地址：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 Array、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 CEAT SHEET

地址：https://9elements.com/bem-cheat-sheet/

BEM CEAT SHEET 是一个网站，它为我们提供了一种更优化、更一致的方式来使用网站组件命名类。根据这个规则命名将有助于团队中的开发人员轻松了解每个类的功能，并更有效地协同工作。

33、Rough.js

地址：https://roughjs.com/posts/release-4.0/

Rough.js 是一个图形库，用于在网页中快速轻松地绘制直线、曲线、圆弧、多边形、圆形和椭圆形。此外，它还支持 SVG Path！

34、simpleParallax.js

地址：https://simpleparallax.com/

simpleParallax.js 是一个体积小巧的开源 javascript 库，它将帮助我们简单轻松地为网站图像创建视差动画效果。

35、免费网站图标制作工具

地址：https://formito.com/tools/favicon

网站图标是用户访问我们的网站时显示在浏览器选项卡上的小徽标。我们也可以使用另一种格式，如 svg...

我想向您介绍一种工具，可以帮助您轻松创建网站图标，设计精美且完全免费，免费的网站图标制作工具。

36、The good line-height

地址：https://www.thegoodlineheight.com/

The good line-height 让我们可以更直观地查看网页中文本的属性使用 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 背景。我们只需编辑必要的信息，网络应用程序将自动导出图像或代码供您应用到网站。

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 工具也是您可以参考的其他程序员（如公共）的许多有用代码的地方。

47、Hat.sh 

地址：https://hat.sh/

Hat.sh 是一款免费工具，可帮助我们快速、轻松、安全地加密文件。

48、screen.guru

地址：https://screen.guru/

screen.guru 是一个在线工具，可让我们为网站截取屏幕截图。

49、FontBase

地址：https://fontba.se/

FontBase 为网页设计师提供友好的界面，帮助我们快速轻松地管理字体。它具有许多便利，例如一键式加载谷歌字体库，始终更新新版本，轻松搜索字体，无需安装即可激活字体...

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 Background Patterns 是一组漂亮的网站背景图案。我喜欢这个网站的地方是我们可以立即在该工具的网站中应用我们想要的背景。

62、生成 SVG 波形

地址：https://svgwave.in/

Generate SVG Waves 是一个在线工具，可帮助我们的网站创建 SVG 背景波。

63、DEVICE SHOTS

地址：https://deviceshots.com/

DEVICE SHOTS 可以轻松地将网站的照片应用到当今许多流行的设备屏幕上，例如计算机、手机、平板电脑......，非常方便。

总结

以上就是我跟大家分享的63个前端开发工具，我希望它对你有用，如果你有任何问题，请在留言区给我留言，我会尽快回复。 

感谢你的阅读，我写出更多好文章，祝你今天过得愉快！

学习更多技能

请点击下方公众号