关于工具:那些前端开发必不可少的生产力工具

46次阅读

共计 2177 个字符,预计需要花费 6 分钟才能阅读完成。

引言

一些开源的生产力工具能极大的晋升咱们的开发效率(我始终是这么认为的 ????)。

明天举荐一些我始终在用的、比拟香的工具给大家。其中包含一些文档、可视化工具、剖析工具、代码片段、调试工具等。

Collect UI ????

Collect UI画廊是一个收费的在线资源,用于每日 UI 设计灵感。目前,它有 6500 多个条目,并且持续保持更新最新内容。

在边栏中,有做分类。包含 404 页面、登陆 / 登出、购物车、日历、视频播放器等。如果你想在某不便需要灵感,而后用于你的公司我的项目或者集体我的项目,我想是会有很大的帮忙的。

Taskade ????

在平时生存中总会有很多的事要做,比方工作时有很多待办事项,然而很容易就会遗记一些事件,这时咱们就须要一款具备带有待办事项的 chrome 插件 –taskade

Taskade简略,整洁并且设计精美,有着令人放松的主题和背景。应用 Taskade 来整顿您的思路,这样您能够集中精力做事件。

Colordot ????

有时候咱们想寻求一个本人喜爱的色彩(有点像起一个本人称心的昵称),却没有灵感,这时候咱们就能够来这里

网页区域内随便滑动鼠标,能够产生不同的色调。确定一个色调,再随便滑动产生下一个色调,直到找到本人称心的配色。

FontSpark ????

FontSpark是一个帮忙有字体抉择艰难症的用户打造的抉择字体的网站,用户只须要输出所须要展现的文字即可取得网站举荐的字体,包含字体类型和大小。

对于举荐的字体不是很称心的话,点击 Generate 按钮刷新即可。

The Noun Project ????


The Noun Project 网站专门提供高品质、可辨识性强的 icon,这些icon 没有很炫酷的设计,通常只用单色来出现,使用者却能很容易地分别出它要传播的意思。

目前 NounProject 提供超过 200 万的 icon 供使用者收费下载,且继续在更新中,如果你须要某种icon,却始终没有找到适合的,无妨到这个网站来走走。

csseffects ????

CSSeffectsSnippets收录了大概 20 多种 CSS 动画,无论是加载读取中,或是将光标挪动过来产生的动画,都能在网站上即时预览。

而这还不是它最大的亮点,最值得举荐的是所有成果都能在点击后疾速复制相干代码,间接让开发者使用到本人的网站或博客,当然可能还是须要通过微调,不过不必从头开始,也不需在网路上寻找这些动画代码,十分不便而且省时。

unDraw ????

unDraw 是由希腊设计师 Katerina Limpitsouni 开发的一套开源矢量插图库,在这个网站上有超过 1000 个扁平矢量插画供你下载应用。

如果你在做集体网站,但对于插画没有灵感,或者你能够来看看。

DevDocs ????

这个网页利用汇聚了各种我的项目的文档,还反对离线应用。

不论是老手程序员还是老程序员都须要有一个能够在线查问各种编程手册的文档,而 DevDocs 会集了最全的编程开发文档,又领有极佳的浏览模式,让你能够疾速的查问想要的命令,同时还反对浏览器扩大,堪称不便之极。

CSS Tricks ????

CSS Tricks是一个国外的优良前端开发博客,次要分享应用 CSS 款式的技巧、教训和教程等。

该网站一直的在更新一些优良的教程和技巧,为前端社区做出了具大的奉献。我也始终在这下面学习,让我在 CSS 方面视线拓宽了很多。

cssreference ????

如果须要更新 CSS 常识或者查问不相熟、不罕用的属性,能够拜访这个站点。上面对每个 CSS 属性的解说很深刻,给出的示例也很分明,便于你了解这些属性并利用于本人的我的项目。

Can I Use

前端开发的时候时常须要查看浏览器的兼容性,在这里举荐 (Can I Use) 这个是一个针对前端开发人员定制的一个查问 CSSJs 在各种风行浏览器中的个性和兼容性的网站,能够很好的保障网页的浏览器兼容性。有了这个工具能够疾速的理解到代码在各个浏览器中的成果。

Lighthouse ????

Lighthouse是一个 Google 开源的自动化工具,次要用于改良网络应用(挪动端)的品质。目前测试项包含页面性能、PWA、可拜访性(无障碍)、最佳实际、SEO

Lighthouse会对各个测试项的后果打分,并给出优化倡议,这些打分规范和优化倡议能够视为 Google 的网页最佳实际。

Majestic

Majestic是一款好用的 Jest 运行测试 GUI 工具。

利用可视化的形式,应用它能够让咱们查看测试用例输入日志更加简略。

Wappalyzer ????

Wappalyzer是一款可能剖析指标网站所采纳的平台架构、网站环境、服务器配置环境、javascript框架、编程语言等参数的 chrome 网站技术剖析插件。

iHateRegex ????

对于开发人员来说,正则表达式是会被常常用到的,很多类型简单的字符串都能够用它匹配进去,但惟一但毛病是编写起来很艰难,不仅须要熟练掌握规定,还须要花工夫编写、调试。

iHateRegex就是这样一个帮你解决书写正则表达式懊恼的神器。

iHateRegex是一个在线开源工具,可疾速检索并匹配到适合的正则表达式,帮你实现如用户名、邮箱、日期、手机号码、明码等常见规定的验证。

当然你也能够看到它外部的匹配过程,这有助于加深你的了解。

参考

https://dev.to/joserfelix/40-…

正文完
 0