每个开发人员都应该知道的资源。
大家好!我创建这个帖子,是因为我想分享一些我在开发应用时日常使用的工具或资源。其中一些或许对你有用。快来开始吧!
在线代码编辑器。
有时,在开发应用程序时,我们需要执行某个流程、创建某个算法,但我们不想在项目中执行这些操作。我们可以选择创建一个新项目并进行测试。但有时我们需要快速完成,因此在线代码编辑器并不理想。
代码沙盒。
其定义为“让团队能够更快速地协同构建,
利用协作沙盒创建、共享和获取反馈,从而实现快速的 Web 开发”。访问以下链接:https://codesandbox.io
代码打开。
CodePen 被定义为“构建、测试和发现前端代码的最佳平台。CodePen 是一个面向前端设计师和开发者的社交开发环境。在这里,您可以构建和部署网站,展示您的作品,编写测试用例进行学习和调试,并寻找灵感。” 访问以下链接:https://codepen.io
堆叠闪电战。
被定义为“地球上最快、最安全的开发环境”。访问以下链接:https://stackblitz.com
其他在线代码编辑器。
测试。
当我们完成我们的应用程序时,就该测试我们所做的一切是否正常工作,并防止在生产中出现问题。
Cypress.io
Cypress 是一款专为现代 Web 构建的前端自动化测试工具。Cypress 基于全新架构,与被测应用程序的执行周期相同。因此,Cypress 能够为浏览器中运行的所有内容提供更好、更快、更可靠的测试。Cypress 适用于任何前端网站或框架。访问以下链接:https://www.cypress.io
API 平台。
我在创建 API 时会用到这个工具,而且我不想在开发 API 时同时开发前端。我知道 VSCode 里有一些扩展,比如 REST Client。不过我想跟大家分享一些程序。
邮差。
Postman 是一个用于构建和使用 API 的平台。Postman 简化了 API 生命周期的每个步骤,并简化了协作,以便您能够更快地创建更优质、更高效的 API。您可以从以下链接下载:https://www.postman.com
失眠。
其定义为“通过标准以及与 Insomnia API 设计平台的协作,交付高质量的 API”。您可以在以下链接下载:https: //insomnia.rest
电子邮件测试。
很多时候,当我们想要为用户添加电子邮件验证功能,或者开发电商平台时,需要向客户发送优惠信息,这时就需要发送电子邮件。以下是一些可以帮助我们测试整个流程的工具。
邮件陷阱。
这是我开发需要发送电子邮件的应用程序时用过的最好的工具之一。点击以下链接:https://mailtrap.io
发送网格。
现在,sendgrid 带来了新功能,其中之一就是能够在正式上线前测试我们的邮件。点击此处:https://sendgrid.com/solutions/email-marketing/email-testing
其他工具。
模拟数据。
数据生成器。在开发应用程序时,我们经常需要生成一些数据,以便进行测试并检查一切是否运行正常。想象一下,您正在创建一个虚拟商店,其中包含产品、类别、客户、促销等信息。如果您意识到数据量很大,而且输入这些数据是一项繁琐乏味的任务,那么就请尝试一下。有了这些工具,您就可以减轻这个负担。
莫卡罗。
Mockaroo 是一个网站,你可以在几秒钟内创建数千个测试数据,修改数据库模型的字段等等……就我个人而言,这是我最常用的网站。访问以下链接:https://www.mockaroo.com
生成数据。
Generatedata,一个允许您立即创建虚假数据的网站,您可以获取街道、地址、姓名和电话号码。此外,您还可以指定所需的格式,例如 JSON、HTML、SQL 等等。请访问以下链接:https://generatedata.com
其他生成数据。
- https://mockapi.io
- https://designer.mocky.io
- https://www.onlinedatagenerator.com
- https://www.randomuser.me
图像。
在网站上添加图片是很常见的,但有时我们想要高清的图片。因此,我给大家推荐了一些图片质量最好的网站。
拉开。
允许您添加 SVG 图像。此外,它还允许您进行美观更改,使其与我们的网站同步。访问以下链接:https://undraw.co/illustrations
Pexels。
这是我最常用来向我的网站添加图像的网站之一。
UiAvatars。
如果你想知道谷歌如何添加带有你的名字和姓氏的头像,请查看此处:https://ui-avatars.com
Unsplash。
其定义为“互联网上免费使用图片的来源,
由世界各地的创作者提供支持”。访问以下链接:https://unsplash.com
其他网站。
图像压缩。
有时候,我们的图片太大,会减慢网站的加载速度。这时,就需要缩小图片大小,或者使用延迟加载。
TinyPNG。
本网站允许我们压缩所有分辨率和扩展名的图片。点击以下链接:https://tinypng.com
其他网站。
网站图标生成器。
当我们即将部署一个应用程序(或正在开发中)时,我们希望在页面上看到一个图标。该图标如下。
Favicon.io
您下一个项目所需的唯一网站图标生成器。快速从文本、图像或数百个表情符号中生成您的网站图标。网站https://favicon.io
其他网站。
颜色。
最安全的情况是你已经知道这些页面,但无论如何我都会把它们留在这里。
扁平颜色。
在本页面,您可以找到一些漂亮的颜色,可以添加到您的页面、网站或网络应用中。访问以下链接:https://flatuicolors.com
Ui渐变。
这个网站,我通常需要渐变色的时候用。访问以下链接:https: //uigradients.com
Html颜色代码。
其他网站。
- https://htmlcolors.com
- https://www.webfx.com/web-design/color-picker
- https://www.w3schools.com/colors/colors_picker.asp
图标。
当我们开发应用程序时,我们需要在按钮、卡片、工具栏和其他内容上添加图标。
盒子图标。
您可以在本网站找到许多可添加到组件的图标。点击以下链接:https://boxicons.com
真棒字体。
好吧,每个几周大的开发人员都知道这个工具。😂😂😂我留下链接:https://fontawesome.com
Google 图标。
Google 也提供了非常漂亮的图标,并且支持按类别、名称等进行筛选,这样我们就能更快地找到想要的图标。点击此处:https://fonts.google.com/icons
其他网站。
文本生成器。
当我们开发应用程序时,如果需要添加填充文本来查看效果,文本生成器就非常有用。但事实上,添加填充文本非常繁琐,尤其是在文本量较大的情况下。以下是一些网站:
Loremipsum.io
Lorem Ipsum 是一种占位符文本,常用于图形、图表和出版行业,用于预览视觉布局和模型。点击以下链接:https://loremipsum.io
其他网站。
在撰写本文时,这些是我日常使用的工具,至少是我记得的那些。如果您也使用过其他工具,请不要忘记评论,这对我们社区的成长非常有帮助。此致,下次再见。