19年你应该关注这50款前端热门工具(下)

上两篇文章《19年你应该关注这50款前端热门工具(上)》、《19年你应该关注这50款前端热门工具(中)》文章小编介绍了构建、框架和库、CSS和HTML、JavaScript相关的工具,这篇文章小编将介绍剩余21款工具,希望在新的一年里对大家有所帮助。

四、图标、图表工具

30

Orion Icon Library

https://orioniconlibrary.com/

多达6000专业免费的SVG矢量图标,还支持深度的定制,比如更换配色,更改线条粗细,变换图标风格(细线条、粗线条、扁平),一键生成相关代码(高级功可能需要付费)。

31

Frappe Charts

https://frappe.io/charts

一款简单、专业、开源、现代风格的SVG报表工具,不需要任何依赖库,代码风格简单,简单易用。支持一键导出svg代码。

32

SVGator

https://www.svgator.com/

如果您希望将Web图形提升到一个新的水平,那么动画SVG就是您的选择,而SVGator是您可以用来创建它们的最简单的工具之一。一款专业级的SVG动画制在线制作工具。SVGator还具有代码管理器面板,因此您可以准确地看到应用程序生成的代码。SVGator导出干净,格式良好的代码。

33

ApexCharts

https://apexcharts.com/

ApexCharts.JS 是一个现代化 JavaScript 图表库,用于使用简单的 API 构建交互式图表和可视化,功能十分强大。方便你将图表嵌入到你的Vue、React项目中。

34

MapKit JS

https://developer.apple.com/maps/mapkitjs/

一款苹果公司提供的地图工具,如果想制作和苹果官方网站一样的地图风格,这个工具将是一个不错的选择,允许你在地图上添加交互事件,丰富你的地图应用。

35

Img2

https://github.com/RevillWeb/img-2

一款图片自动预加载和缓存工具,防止图片闪烁,并使用模糊滤镜预先显示图片延迟图片加载,提高网页加载速度,使用起来非常简单,你只需要使用<img-2>替代<img/>标签即可,使用起来就是这么简单!

36

Lozad

https://github.com/ApoorvSaxena/lozad.js

Lozad.js 是基于 IntersectionObserver API 的轻量级、高性能、可配置的纯 JavaScript并且无依赖的懒加载器,其能够被用于进行图片、iframe 等多种形式的元素。通过gzip压缩过后,仅仅1kb大小,相对于常用的jquery.lazyload.js来说,lozad.js实力碾压,在github上,已经收获了4800+的star。

五、React工具

37

RSUITE

https://rsuitejs.com/

React Suite 是一套 React 组件库,为后台产品而生。由 HYPERS 前端团队与 UX 团队打造,主要服务于公司大数据产品线。经历了三次大的版本更新后,累积了大量的组件和丰富的功能。并支持在线定制个性化主题,更重要的是有中文版,方便我们学习使用。

38

Pagedraw

https://pagedraw.io/

一款神奇的在线UI设计制作工具,你只需要拖动和布局页面,这个工具就会给你自动生成质量高的React组件代码,更多功能等待你的发掘。

39

react-smooth-dnd

https://github.com/kutlugsahin/react-smooth-dnd

一款拖拽页面元素的React工具,拖拽效果平滑,让你轻松就能实现卡片、列表、表单组件的的拖拽。

40

Unstated

https://unstated.io/

一个新的状态管理类库 unstated.js:简单易用/合理。和之前的 state 管理库思路完全不同,这个unstated主打 local state(不是全局store,一个小改动导致整棵树 rerender),多个 local state 之间也可以共享, 兼具了redux的易用性与flux的合理性,令人耳目一新;unstated完全就是为React设计的,“足够React”,让你感觉不到在用第三方组件。

41

Reach Router

https://reach.tech/router

Reach-Router 是前 ReactRouter 成员 Ryan Florence 开发的一套基于 react 的路由控件. 那么已经有比较成熟的 ReactRouter 了, 为什么要”再”做一套 Router 呢, 有兴趣的同学可以去了解一下,小编认为主要有以下几个特点值得你看看:

  • 小,就4kb,压缩后比react-router小40kb左右。
  • 更少的配置
  • 更好用
  • 基本一样的api,学习成本非常低
  • 源码非常简洁,总共就3个文件,900行,如果你想深入理解单页应用的路由是怎么实现的,reach-router,绝对是绝佳的下手资料

42

SVGR

https://www.smooth-code.com/open-source/svgr/

svgr是一个将SVG转换为React组件的工具,svgr由JavaScript实现。整个文档也非常的小,已开源在github上。

43

React Spreadsheet Grid

https://github.com/denisraslov/react-spreadsheet-grid

用于React类似于Excel的网格组件,具有自定义单元格编辑器,高性能滚动和可调整大小的列。

六、测试和数据工具

44

webhint

https://webhint.io/

Webhint项目提供了一种用于检查代码的可访问性、性能和安全的开源检查(Linting)工具。在创建Web站点和应用中,有越来越多的细节问题亟待完善。为此,Webhint力图帮助开发人员标记这些细节。

Webhint以命令行接口(CLI)工具和在线扫描器两种形式提供,使用在线扫描器是最快的上手方式。使用在线扫描器需要为其提供一个公开的URL,用于运行报告并洞悉应用的运行情况。

在测试应用时,Webhint提供三种运行环境:jsdom、Chrome和Edge。后两种运行环境使用了Chrome DevTools协议,第一种运行环境使用Node.js环境快速地执行有限次数的检查,无需浏览器的支持。

还有更多强大的功能,还有待你试用挖掘。

45

Airtap

https://github.com/airtap/airtap

Airtap 是一种在浏览器中测试 JavaScript 的简单方法,号称能覆盖800多种浏览器,能够在数秒内开始在本地测试你的代码,并无缝转移到由 Sauce Labs 提供的基于云的浏览器上,以获得更好的覆盖测试。

Airtap 与其他跨浏览器测试运行器的不同之处在于其简单性,以及能够在许多浏览器中轻松运行测试套件而无需在本地安装它们。它可以让你在开发过程中快速迭代,并在发布前提供良好的浏览器覆盖率,而不用担心缺少浏览器支持。

不要只是声称你的 JavaScript 支持“所有浏览器”,用测试证明它!

46

mkcert

https://github.com/FiloSottile/mkcert

HTTPS 是 Web 发展的趋势,用于提高网站的安全性。使用 HTTPS 需要配置 TLS 证书,得益于 ACME 协议和 Let's Encrypt 证书,远程环境可以很容易部署。但是对于本地环境,还没有普遍有效的证书。

mkcert 被设计的足够简单,隐藏了几乎所有生成 TLS 证书所必须的知识。它适用于任何主机名或者 IP,包括 localhost ,因为它只在你的本地环境使用。

证书是由你的私有 CA 签发,当你运行 mkcert-install 会自动配置这些信任,因此,当浏览器访问时,就会显示安全标识。目前支持 MacOS、Linux 和 Windows,以及 Firefox、Chrome 和 Java。甚至支持一些手机设备。

47

Puppeteer Recorder

https://checklyhq.com/docs/puppeteer-recorder/

Puppeteer 是一个Node库,它提供了一个高级API来控制DevTools协议上的Chrome或Chromium,常用于爬虫、自动化测试等,你在浏览器手动完成的大多数事情都可以使用它来完成。

48

jsonstore.io

https://www.jsonstore.io/

jsonstore.io为小型项目提供免费,安全且基于JSON的云数据存储。只需输入https://www.jsonstore.io/,复制URL就可以开始发送HTTP数据请求。POST请求将保存数据,PUT请求修改数据,DELETE请求删除数据和GET请求检索数据。大大方便了前端开发人员进行测试接口的集成,前端页面制作完成就能进行接口测试,使用起来就是这么简单。

49

Initab

http://initab.com/

一款为开发人员定制打造的工作台,通过谷歌浏览器插件安装即可使用,通过此工作台你可以轻松订阅你感兴趣的git项目、跟进相关问题、pull相关操作,查看版本历史,订阅Stack Overflow相关的内容,管理查看Gists相关内容,可以说一个主流技术平台聚合工作台。

50

lambdatest

https://www.lambdatest.com/

一款在线自动化测试云端平台,号称在2000多个真实浏览器和设备进行测试,可以根据你的测试需求进行深度定制,并形成相关记录,方便团队的协作,帮你发现跨平台不同浏览器版本的各种问题。

结束语

终于把50款工具整理完了,在新的一年里,希望这些工具对大家有所帮助和启发,再次感谢大家对我文章的关注,让我新的一年收获满满,祝各位在新的一年里前端技术棒棒的,薪资翻翻,一起在国内推动大前端的未来!

本文分享自微信公众号 - 前端达人(frontend84)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-02-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏bamboo前端学习记录

浏览器兼容

产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先) 成本的角度 (有无必要做某件事)

30650
来自专栏csxiaoyao

小程序开发总结01 - 模块化开发流程规范

H5 的开发涉及开发工具、前端框架、模块管理工具、任务管理工具、UI库、接口调用工具、各种浏览器运行环境等,尽管H5丰富的开发环境给了开发者更加灵活的配置方案,...

21520
来自专栏前端真相

web应用常见安全攻击手段

JS注入 解决方法:HTML编码 如:<%=Html.Encode(feedback.Message)%> HTML5引入的新标签包括、、、

26130
来自专栏盟主来了

18.5.13日报

1,找到帧率低的原因了,wkeWake里做的帧率限制。打开后,并且调整每帧的sleep之类,帧率基本和chrome差不多

7730
来自专栏编程微刊

小程序webview组件嵌H5页面,安卓手机没有问题,苹果有部分页面不显示

小程序上线之后的有一天,发现了一个bug,同事说点击列表的时候会进入一个状态界面,这个界面是H5页面,但是在苹果手机上却是空白的。这涉及到了小程序webview...

53120
来自专栏人工智能cv应用

AI营销库 | 低成本精准引流:21世纪AI流量小花

基于AI人脸定位与风水命理,对照片人物进行眼口鼻关键点定位,为人脸标记分析,准确识别多种面相特征,输出面相占卜结果。适用各种营销互动活动,引流等。

27950
来自专栏深度学习之tensorflow实战篇

HTML5与HTML4的区别,新增的元素有哪些?

注:部分格式编写存在<>封闭错误,只为在博客中显示,并非正确写法。 1. HTML5推出的理由

28730
来自专栏深度学习之tensorflow实战篇

python读取与写入csv EXCEK HDF 文件

一. 数据文件         pd指pandas简称,df指DataFrame对象。 1. csv 读取  pd.read_csv('foo.csv') 写...

15330
来自专栏米扑专栏

HTML5 标签audio添加网页背景音乐代码

html5 <audio> 是 HTML 5 的新标签,定义声音,比如音乐或其他音频流。

2.4K20
来自专栏米扑专栏

2013年互联网十大趋势

    导读: 每次互联网新的爆发点出现时,成功的原因都会被一遍一遍反复分析,其目的不外乎于试图从中借鉴一些成功的经验。在即将过去的2012年,有一些模式或概念...

10910

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励