前端工具

1、Day.js

地址:https://day.js.org/en/
63 个面向前端开发人员的开源项目工具 - 图1
Day.js 是一个极简的 Javascript 库,大小只有 2Kb 左右。它可以在浏览器和 NodeJs(服务器端)上运行。和moment js很像,切换到这个库的时候可以放心使用。
此外,它还可以在当今最流行的浏览器上运行,例如 Windows XP 上的 Chrome,Windows 7 上的 IE 8、9 和 10,Windows 10 上的 IE 11,Linux 上最新的 Firefox,以及新的 Safari。

2、Mono Icon

地址:https://icons.mono.company/
63 个面向前端开发人员的开源项目工具 - 图2
Mono Icon 是一个开源图标,可以轻松快速、完全免费地将其应用到自己的网站上。可以通过 CDN 将其直接嵌入到 HTML 页面中,也可以通过 npm 为 Web 项目安装它。

3、视觉扩展代码 Cho Microsoft Edge

地址:https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools
63 个面向前端开发人员的开源项目工具 - 图3
随着 Edge 浏览器的发展,VS Code 还发布了一个新的扩展,用于直接在 VS Code 中测试和运行 Edge Web 项目,而无需在计算机上安装此浏览器。

4、Blob 生成器

地址:https://blobs.app/
63 个面向前端开发人员的开源项目工具 - 图4
Blob 生成器是一个在线工具,可以通过 SVG 编辑为网页创建复杂的形状。只需要更改提供的属性,代码就会自动生成。

5、Library Detector

地址:https://chrome.google.com/webstore/detail/library-detector/cgaocdmhkmfnkdkbnckgmpopcbpaaejo
63 个面向前端开发人员的开源项目工具 - 图5
Library Detector 是一个 Google Chrome 扩展程序,可以轻松查看网站使用的 Javascript 技术。

6、tsParticles - TypeScript Particles

地址:https://particles.matteobruni.it/
63 个面向前端开发人员的开源项目工具 - 图6
tsParticles -TypeScript Particles 是在particle.js 基础上重写的库,目的是更轻松地创建更多背景动画,并提供更多实用程序和支持功能。
它可以用于许多不同的框架,例如 reactjs、vuejs、angularjs、Jquery…

7、CSS Value

地址:https://cssvalues.com/
63 个面向前端开发人员的开源项目工具 - 图7
CSS Value 是一个网站,其功能可以很容易地确定某个 CSS 属性的值。例如选择text-decoration属性,会自动显示相关属性:text-decoration, text-decoration-color, text-decoration-line, text-decoration-skip, text-decoration-style, text-装饰厚度…

8、RunJS

地址:https://runjs.app/
63 个面向前端开发人员的开源项目工具 - 图8
RunJS 是一个桌面应用程序,编写专门的 Javascript 和 Typescript 代码。它的优势是可以快速测试代码,轻松导入和测试库代码,并且能够修改界面、主题和字体以适应偏好。

9、Duet Date Picker

地址:https://duetds.github.io/date-picker/
63 个面向前端开发人员的开源项目工具 - 图9
Duet Date Picker 是由 Duet Design System 开发的开源代码。它允许轻松地为网站构建日期选择器组件,而无需使用任何其他库。
在这个库中的一些功能是有一个黑暗和光明的主题,能够设置允许用户选择的时间间隔,按地区设置日期……

10、urlcat

地址:https://urlcat.dev/#/
63 个面向前端开发人员的开源项目工具 - 图10
urlcat 是一个紧凑的 Javascript 库,大小仅为 0.8kb 左右,无需使用任何额外的库。它可以快速轻松地在 URL 上构建查询,也可以避免为网站构建 url 时的常见错误。

11、ztext.js

地址:https://bennettfeely.com/ztext/
63 个面向前端开发人员的开源项目工具 - 图11
ztext.js 是一个 javascript 库,可以轻松地为网页构建 3D 文本,并且可以与所有类型的字体一起使用。
此外,还可以为 SVG、图像、表情符号等其他元素创建 3D 效果。

12、GitHub Profile README Generator

地址:https://rahuldkjain.github.io/gh-profile-readme-generator/
63 个面向前端开发人员的开源项目工具 - 图12
GitHub Profile README Generator 是一个在线网络工具,以最完整和最详细的方式在 github 上构建个人资料页面,包括标题、工作、编程语言技能、(前端)、后端、框架…)、社交网络链接…

13、Wrap SVG Online

地址:https://pavellaptev.github.io/warp-svg/
63 个面向前端开发人员的开源项目工具 - 图13
Wrap SVG Online 是一个应用程序,通过拖放从计算机上传的图像,可以轻松地编辑网页的 SVG 图像。

14、3D Book Image CSS Generator

地址:https://3dbook.xyz/
63 个面向前端开发人员的开源项目工具 - 图14
3D 书籍图像 CSS 生成器是一个在线工具,快速轻松地创建 3D 书籍封面并将其应用到网站。
只需要提供书籍的图像并编辑提供的 CSS 属性,例如 Width(书籍宽度)、Height(书籍高度)、Thickness(书籍厚度)…喜欢的代码片段 HTML、CSS 将是分别自动生成。

15、Print.js

地址:https://printjs.crabbly.com/
63 个面向前端开发人员的开源项目工具 - 图15
Print.js 是一个紧凑的 Javascript 库,它允许直接在网页上打印文件,而无需重定向或使用嵌入。
它支持多种格式的打印,例如 PDF、HTML(例如表单…)、图像、JSON… 此外,它还可以在大多数流行的浏览器上运行,例如 Chrome、Firefox、Safari、Edge 和 Opera。

16、Công Cụ 制表符

地址:http://tabulator.info/
63 个面向前端开发人员的开源项目工具 - 图16
制表器允许像排序、添加、编辑或删除 HTML 表格一样轻松地创建包含数据的交互式表格。
可以从 Javascript Array、AJAX 或 JSON 格式的数据源中获取表的数据。
此外,它还支持当今最流行的浏览器,例如 Google Chrome、Firefox、Safari、Opera 和 Edgege。
它也适用于当今流行的 javascript 前端框架,如 ReactJS、VueJS 和 AngularJS。

17、Textures JS

地址:https://riccardoscalco.it/textures/
63 个面向前端开发人员的开源项目工具 - 图17
Textures JS 是一个库,可快速轻松地为网页创建 SVG 模式。它建立在 D3.js 之上,用于可视化数据。它在使用相应的模式划分地图中的区域时使用得相当多。

18、DOCX

地址:https://docx.js.org/#/
63 个面向前端开发人员的开源项目工具 - 图18
DOCX 是一个库,允许使用 Javascript 或 Typescript 从网页元素创建 .docx 文件。
它在浏览器和服务器端(使用 Nodejs)都运行良好。它有很多关于网站每个组件的详细示例,以及将它应用于 React、Vue 或 angularJS 时的具体教程。

19、Keen-Slider

地址:https://keen-slider.io/
63 个面向前端开发人员的开源项目工具 - 图19
Keen-Slider 是一个免费的 Javascript 库,可以快速轻松地创建触摸滑块组件(通常在手机上)和许多其他有用的调整功能,例如垂直滑块、多张幻灯片、幻灯片的延迟加载模式……正如看到的,这个库还有一个非常好的功能,可以根据 IOS 设计和网站的背景过渡效果创建一个 timepicker(选择时间)。

20、Math JS

地址:https://mathjs.org/
63 个面向前端开发人员的开源项目工具 - 图20
Math JS 是一个开源数学库,在 Github 上为 Javascript 和 NodeJS(服务器端)拥有超过 10.5k 颗星。它可以灵活地计算和处理许多不同的数据类型,例如数字、大数、复数、分数、单位和矩阵。

21、Rough Notation

地址:https://roughnotation.com/
63 个面向前端开发人员的开源项目工具 - 图21
Rough Notation 是一个紧凑的 Javascript 库,为网页中的元素创建注释,具有许多漂亮的效果,例如下划线、框、圆圈、突出显示、括号…

22、Flip

地址:https://pqina.nl/flip/
63 个面向前端开发人员的开源项目工具 - 图22
Flip 是一个插件,可快速轻松地为网站创建具有翻转效果的计数器。如果需要创建活动计时器、促销活动或筹款活动,这是最适合的库。

23、Quotebacks

地址:https://quotebacks.net/
63 个面向前端开发人员的开源项目工具 - 图23
Quotebacks 是一种在线工具,可在网站上快速嵌入设计精美的报价单。只需要为程序提供4个基本参数:被引用的段落、作者姓名、标题和引用来源的url。然后代码会自动生成,只要把它复制到想展示的网站上就可以使用了。

24、SVG 路径可视化器

地址:https://svg-path-visualizer.netlify.app/
63 个面向前端开发人员的开源项目工具 - 图24
SVG Path Visualizer 是一种工具,可通过输入 SVG 路径数据来快速直观地查看 SVG 图像。
此外,该工具还提供了详细的说明,以便了解如何创建基本的 SVG 形状,如直线、曲线、三角形……

25、Toast UI 编辑器

地址:https://ui.toast.com/tui-editor/
63 个面向前端开发人员的开源项目工具 - 图25
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/
63 个面向前端开发人员的开源项目工具 - 图26
Jexcel 是一个紧凑的 Javascript 库,为网站创建高度交互的表格,其中包含可以从 JS Array、JSON、CSV 或 XSLX 文件中提取的数据。
它有一些非常有用的特性,比如用户友好的界面,易于定制和与其他插件和库结合,通过简单的操作处理复杂的数据。

27、Chocolat.js

地址:http://chocolat.insipi.de/
63 个面向前端开发人员的开源项目工具 - 图27
Chocolat.js 是一个 Javascript 库,可以轻松地在网页上显示响应式灯箱。此外,还可以在同一页面上设置一张或多张图片,全屏显示图片或将其限制为想要的任何 div 标签。

28、Image Compare Viewer

地址:https://image-compare-viewer.netlify.app/
63 个面向前端开发人员的开源项目工具 - 图28
Image Compare Viewer 是一个使用 Javascript 构建的开源库,可以创建一个直接在网页上比较两个图像的组件。它通常用于比较编辑前后的图像,以帮助用户获得更直观和有区别的视图。

29、Trianglify

地址:http://qrohlf.com/trianglify/
63 个面向前端开发人员的开源项目工具 - 图29
Trianglify 是一个库,它允许通过组合和构建三角形来为网站创建漂亮的背景图案。只需选择要为背景图案设置的库提供的参数,例如宽度、高度、调色板、单元格间距……。

30、Notyf

地址:https://carlosroso.com/notyf/
63 个面向前端开发人员的开源项目工具 - 图30
Notyf 是一个 Javascript 库,大小仅为 3Kb ,它可以为网站创建 toast 消息。它以响应方式显示在许多不同的设备屏幕上,并且易于与当今流行的 JS 框架(如 React、Angular、Aurelia、Vue 和 Svelte)一起使用。

31、Dinero.js

地址:https://dinerojs.com/
63 个面向前端开发人员的开源项目工具 - 图31
Dinero.js 是一个 javascript 库,它提供了许多功能来帮助工作和处理网络中与货币相关的问题。

32、BEM CEAT SHEET

地址:https://9elements.com/bem-cheat-sheet/
63 个面向前端开发人员的开源项目工具 - 图32
BEM CEAT SHEET 是一个网站,它提供了一种更优化、更一致的方式来使用网站组件命名类。根据这个规则命名将有助于团队中的开发人员轻松了解每个类的功能,并更有效地协同工作。

33、Rough.js

地址:https://roughjs.com/posts/release-4.0/
63 个面向前端开发人员的开源项目工具 - 图33
Rough.js 是一个图形库,用于在网页中快速轻松地绘制直线、曲线、圆弧、多边形、圆形和椭圆形。此外,它还支持 SVG Path!

34、simpleParallax.js

地址:https://simpleparallax.com/
63 个面向前端开发人员的开源项目工具 - 图34
simpleParallax.js 是一个体积小巧的开源 javascript 库,简单轻松地为网站图像创建视差动画效果。

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

地址:https://formito.com/tools/favicon
63 个面向前端开发人员的开源项目工具 - 图35
网站图标是用户访问网站时显示在浏览器选项卡上的小徽标。也可以使用另一种格式,如 svg…
介绍一种工具,可以轻松创建网站图标,设计精美且完全免费,免费的网站图标制作工具。

36、The good line-height

地址:https://www.thegoodlineheight.com/
63 个面向前端开发人员的开源项目工具 - 图36
The good line-height 可以更直观地查看网页中文本的属性使用 line-height。它提供了 3 个主要属性供自定义编辑。

37、CSS 3D 变换

地址:https://polypane.app/css-3d-transform-examples/
63 个面向前端开发人员的开源项目工具 - 图37
这是使用透视属性为网页创建 3D 对象的方法的集合。每个代码片段旁边都有一个特定的示例。这将更容易可视化受众,并查看哪些适合的网站。

38、Good Web Design

地址:https://www.goodweb.design/
63 个面向前端开发人员的开源项目工具 - 图38
Good Web Design是一个网站,收集了许多漂亮的登陆页面设计,分为CTA(号召性用语)、导航栏、页脚、案例研究等多个部分。

39、BGJar

地址:https://bgjar.com/
63 个面向前端开发人员的开源项目工具 - 图39
BGJar 是一个在线工具,可以轻松快速地为网站创建 SVG 背景。只需编辑必要的信息,网络应用程序将自动导出图像或代码供应用到网站。

40、Bootstrap Icons

地址:https://icons.getbootstrap.com/
63 个面向前端开发人员的开源项目工具 - 图40
以前,Bootstrap Icons 的诞生是为了满足构建 Bootstrap 组件、文档的需求。但是,今天它也可以通过以 SVG 样式格式化的图标用于许多其他项目。通过 CSS 轻松设置图标样式,而不必担心损坏的图像。

41、Squircley

地址:https://squircley.app/
63 个面向前端开发人员的开源项目工具 - 图41
Squircley 为 Web 中的对象创建漂亮的形状,例如背景、图标、徽标……

42、mailgo

地址:https://mailgo.dev/
63 个面向前端开发人员的开源项目工具 - 图42
通常,当打开邮件链接时,浏览器将使用默认应用程序打开电子邮件编辑器。至于mailgo,可以设置选项来帮助用户打开其他电子邮件编辑器,例如Gmail、Outlook……或默认打开。除了使用 a href="mailto:" 标签外,它还可以与 href="tel:" 一起使用!

43、Forge Icon

地址:https://icons.theforgesmith.com/
63 个面向前端开发人员的开源项目工具 - 图43
Forge Icon 是一个为 Web 项目(例如电子商务、旅游、社交网络、应用程序设计…)组合许多不同类型图标的地方。

44、GooFonts

地址:https://goofonts.com/
63 个面向前端开发人员的开源项目工具 - 图44
对于字体,最常使用 Google 字体。它是免费的,并且有很多漂亮的字体。但是,字体数量如此之多,很难为网站找到合适的字体。
因此,介绍一个名为 GooFonts 的工具。它将负责将 Google Font 的字体类型划分为许多小数组,例如用于报纸、学校、卡通、徽标的字体……

45、CSS Spider

地址:https://cssspider.fresalabs.com/home
63 个面向前端开发人员的开源项目工具 - 图45
CSS Spider 是 Google Chrome、Firefox 的扩展,主要任务是查看属性并获取网页中任何对象的 CSS 代码。

46、Bit

地址:https://bit.dev/
63 个面向前端开发人员的开源项目工具 - 图46
在编程中,通常会在使用它来解决问题后存储好的和有用的代码。主要目的是以后如果遇到类似的情况,可以重复使用,不用浪费时间去寻找和思考。
Bit 的诞生是为了更轻松地完成上述工作。它将立即将代码存储在云中,可以在任何地方访问它而无需担心安全性。
有两种保存代码片段的方法是私有的(只有可以看到)和公开的(每个人都可以看到)。
因此,Bit 工具也是可以参考的其他程序员(如公共)的许多有用代码的地方。

47、Hat.sh

地址:https://hat.sh/
63 个面向前端开发人员的开源项目工具 - 图47
Hat.sh 是一款免费工具,可快速、轻松、安全地加密文件。

48、screen.guru

地址:https://screen.guru/
63 个面向前端开发人员的开源项目工具 - 图48
screen.guru 是一个在线工具,可为网站截取屏幕截图。

49、FontBase

地址:https://fontba.se/
63 个面向前端开发人员的开源项目工具 - 图49
FontBase 为网页设计师提供友好的界面,快速轻松地管理字体。它具有许多便利,例如一键式加载谷歌字体库,始终更新新版本,轻松搜索字体,无需安装即可激活字体…

50、uiLogos

地址:https://uilogos.co/
63 个面向前端开发人员的开源项目工具 - 图50
uiLogos 是一个为网站聚合了超过 25 个专业设计文件的网站。但是,它只允许导出 PNG 文件,如果要使用 SVG 文件,则需要支付大约 37 美元。

51、DevLorem

地址:https://devlorem.kovah.de/p
63 个面向前端开发人员的开源项目工具 - 图51
DevLorem 是一个在 Web 开发过程中创建插图的工具。

52、CSSReference.io

地址:https://cssreference.io/
63 个面向前端开发人员的开源项目工具 - 图52
CSSReference 是 CSS 属性指南的集合。通过说明性示例将信息可视化的能力。这也将更容易吸收和享受学习编码。

53、Codeimg

地址:https://codeimg.io/
63 个面向前端开发人员的开源项目工具 - 图53
Codeimg 是一种工具,可通过具有许多支持功能的图像显示代码,例如选择背景主题、指定颜色、字体大小、代码语言…

54、HTMLReference.io

地址:https://htmlreference.io/
63 个面向前端开发人员的开源项目工具 - 图54
HTMLReference 是一个类似 CSSReference 的网站,其目的是通过特定示例收集所有 HTML 属性的说明。

55、Wavesnippets

地址:https://www.wavesnippets.com/
image.png
Wavesnippets 是一种工具,将要与他人共享的代码部分设置为动画或视频或 GIF。这种形式的一个很好的例子是它使其他人更容易理解和更好地理解编写的代码的顺序。

56、Hero Patterns

地址:https://heropatterns.com/
63 个面向前端开发人员的开源项目工具 - 图56
Hero Patterns 是用于网页设计的 SVG 背景图案的集合。

57、Boxicons

地址:https://boxicons.com/
63 个面向前端开发人员的开源项目工具 - 图57
Boxicons 是一个简单且免费的矢量图标集合,适用于网页设计师和开发人员。

58、Coaster

地址:https://heycoaster.com/
63 个面向前端开发人员的开源项目工具 - 图58
Coaster 是一款在 Unsplash 上轻松查找和下载图像的软件。此外,它还支持 Windows 和 Mac 操作系统版本。

59、Pretty Snap

地址:https://prettysnap.app/
63 个面向前端开发人员的开源项目工具 - 图59
Pretty Snap 是一种工具,为要在网页中显示的图像创建漂亮的背景。

60、Link-to-qr

地址:https://link-to-qr.com/
image.png
Link-to-qr 是一个免费的网站二维码生成器。

61、CSS 背景图案

地址:https://www.magicpattern.design/tools/css-backgrounds
63 个面向前端开发人员的开源项目工具 - 图61
CSS Background Patterns 是一组漂亮的网站背景图案。这个网站的地方是可以立即在该工具的网站中应用想要的背景。

62、生成 SVG 波形

地址:https://svgwave.in/
63 个面向前端开发人员的开源项目工具 - 图62
Generate SVG Waves 是一个在线工具,为网站创建 SVG 背景波。

63、DEVICE SHOTS

地址:https://deviceshots.com/
63 个面向前端开发人员的开源项目工具 - 图63
DEVICE SHOTS 可以轻松地将网站的照片应用到当今许多流行的设备屏幕上,例如计算机、手机、平板电脑……,非常方便。