这50款前端热门工具简直不要太好用了!(3)
上两篇介绍了构建、框架和库、CSS和HTML、JavaScript相关的工具,这篇文章小编将介绍剩余21款工具,希望在新的一年里对大家有所帮助。
图标、图表工具
30、Orion Icon Library
orioniconlibrary.com/
多达6000专业免费的SVG矢量图标,还支持深度的定制,比如更换配色,更改线条粗细,变换图标风格(细线条、粗线条、扁平),一键生成相关代码。
31、Frappe Charts
frappe.io/charts
一款简单、专业、开源、现代风格的SVG报表工具,不需要任何依赖库,代码风格简单,简单易用。支持一键导出svg代码。
32、SVGator
www.svgator.com/
如果您希望将Web图形提升到一个新的水平,那么动画SVG就是您的选择,而SVGator是您可以用来创建它们的最简单的工具之一。一款专业级的SVG动画制在线制作工具。SVGator还具有代码管理器面板,因此您可以准确地看到应用程序生成的代码。SVGator导出干净,格式良好的代码。
33、ApexCharts
apexcharts.com/
ApexCharts.JS 是一个现代化 JavaScript 图表库,用于使用简单的 API 构建交互式图表和可视化,功能十分强大。方便你将图表嵌入到你的Vue、React项目中。
34、MapKit JS
developer.apple.com/maps/mapkit…
一款苹果公司提供的地图工具,如果想制作和苹果官方网站一样的地图风格,这个工具将是一个不错的选择,允许你在地图上添加交互事件,丰富你的地图应用。
35、Img2
github.com/RevillWeb/i…
一款图片自动预加载和缓存工具,防止图片闪烁,并使用模糊滤镜预先显示图片延迟图片加载,提高网页加载速度,使用起来非常简单,你只需要使用<img-2>替代<img/>标签即可,使用起来就是这么简单!
36、Lozad
github.com/ApoorvSaxen…
Lozad.js 是基于 IntersectionObserver API 的轻量级、高性能、可配置的纯 JavaScript并且无依赖的懒加载器,其能够被用于进行图片、iframe 等多种形式的元素。通过gzip压缩过后,仅仅1kb大小,相对于常用的jquery.lazyload.js来说,lozad.js实力碾压,虽然jquery.lazyload.js也才几kb大小。在github上,已经收获了4800+的star。
React工具
37、RSUITE
rsuitejs.com/
React Suite 是一套 React 组件库,为后台产品而生。由 HYPERS 前端团队与 UX 团队打造,主要服务于公司大数据产品线。经历了三次大的版本更新后,累积了大量的组件和丰富的功能。并支持在线定制个性化主题,更重要的是有中文版,方便我们学习使用。
38、Pagedraw
pagedraw.io/
一款神奇的在线UI设计制作工具,你只需要拖动和布局页面,这个工具就会给你自动生成质量高的React组件代码,更多功能等待你的发掘。
39、react-smooth-dnd
github.com/kutlugsahin…
一款拖拽页面元素的React工具,拖拽效果平滑,让你轻松就能实现卡片、列表、表单组件的的拖拽。
40、Unstated
unstated.io/
一个新的状态管理类库 unstated.js:简单易用/合理。和之前的 state 管理库思路完全不同,这个unstated主打 local state(不是全局store,一个小改动导致整棵树 rerender),多个 local state 之间也可以共享, 兼具了redux的易用性与flux的合理性,令人耳目一新;unstated完全就是为React设计的,“足够React”,让你感觉不到在用第三方组件。
41、Reach Router
reach.tech/router
Reach-Router 是前 ReactRouter 成员 Ryan Florence 开发的一套基于 react 的路由控件. 那么已经有比较成熟的 ReactRouter 了, 为什么要”再”做一套 Router 呢, 有兴趣的同学可以去了解一下,小编认为主要有以下几个特点值得你看看:
- 小,就4kb,压缩后比react-router小40kb左右。
- 更少的配置
- 更好用
- 基本一样的api,学习成本非常低
- 源码非常简洁,总共就3个文件,900行,如果你想深入理解单页应用的路由是怎么实现的,reach-router,绝对是绝佳的下手资料
42、SVGR
www.smooth-code.com/open-source…
svgr是一个将SVG转换为React组件的工具,svgr由JavaScript实现。整个文档也非常的小,已开源在github上。
43、React Spreadsheet Grid
github.com/denisraslov…
用于React类似于Excel的网格组件,具有自定义单元格编辑器,高性能滚动和可调整大小的列。
测试和数据工具
44、webhint
webhint.io/
Webhint项目提供了一种用于检查代码的可访问性、性能和安全的开源检查(Linting)工具。在创建Web站点和应用中,有越来越多的细节问题亟待完善。为此,Webhint力图帮助开发人员标记这些细节。
Webhint以命令行接口(CLI)工具和在线扫描器两种形式提供,使用在线扫描器是最快的上手方式。使用在线扫描器需要为其提供一个公开的URL,用于运行报告并洞悉应用的运行情况。
在测试应用时,Webhint提供三种运行环境:jsdom、Chrome和Edge。后两种运行环境使用了Chrome DevTools协议,第一种运行环境使用Node.js环境快速地执行有限次数的检查,无需浏览器的支持。
还有更多强大的功能,还有待你试用挖掘。
45、Airtap
github.com/airtap/airt…
Airtap 是一种在浏览器中测试 JavaScript 的简单方法,号称能覆盖800多种浏览器,能够在数秒内开始在本地测试你的代码,并无缝转移到由 Sauce Labs 提供的基于云的浏览器上,以获得更好的覆盖测试。
Airtap 与其他跨浏览器测试运行器的不同之处在于其简单性,以及能够在许多浏览器中轻松运行测试套件而无需在本地安装它们。它可以让你在开发过程中快速迭代,并在发布前提供良好的浏览器覆盖率,而不用担心缺少浏览器支持。
不要只是声称你的 JavaScript 支持“所有浏览器”,用测试证明它!
46、mkcert
github.com/FiloSottile…
HTTPS 是 Web 发展的趋势,用于提高网站的安全性。使用 HTTPS 需要配置 TLS 证书,得益于 ACME 协议和 Let's Encrypt 证书,远程环境可以很容易部署。但是对于本地环境,还没有普遍有效的证书。
mkcert 被设计的足够简单,隐藏了几乎所有生成 TLS 证书所必须的知识。它适用于任何主机名或者 IP,包括 localhost ,因为它只在你的本地环境使用。
证书是由你的私有 CA 签发,当你运行 mkcert-install 会自动配置这些信任,因此,当浏览器访问时,就会显示安全标识。目前支持 MacOS、Linux 和 Windows,以及 Firefox、Chrome 和 Java。甚至支持一些手机设备。
47、Puppeteer Recorder
checklyhq.com/docs/puppet…
Puppeteer 是一个Node库,它提供了一个高级API来控制DevTools协议上的Chrome或Chromium,常用于爬虫、自动化测试等,你在浏览器手动完成的大多数事情都可以使用它来完成。
48、jsonstore.io
www.jsonstore.io/
jsonstore.io 为小型项目提供免费,安全且基于JSON的云数据存储。只需输入 https://www.jsonstore.io/ ,复制URL就可以开始发送HTTP数据请求。POST请求将保存数据,PUT请求修改数据,DELETE请求删除数据和GET请求检索数据。大大方便了前端开发人员进行测试接口的集成,前端页面制作完成就能进行接口测试,使用起来就是这么简单。
49、Initab
initab.com/
一款为开发人员定制打造的工作台,通过谷歌浏览器插件安装即可使用,通过此工作台你可以轻松订阅你感兴趣的git项目、跟进相关问题、pull相关操作,查看版本历史,订阅Stack Overflow相关的内容,管理查看Gists相关内容,可以说一个主流技术平台聚合工作台。
50、lambdatest
www.lambdatest.com/
一款在线自动化测试云端平台,号称在2000多个真实浏览器和设备进行测试,可以根据你的测试需求进行深度定制,并形成相关记录,方便团队的协作,帮你发现跨平台不同浏览器版本的各种问题。
最后
希望这些工具对大家有所帮助和启发,祝各位在新的一年里前端技术棒棒的,薪资翻翻,一起在国内推动大前端的未来!
自己是从事了五年的前端工程师,不少人私下问我,2019年前端该怎么学,方法有没有?
没错,年初我花了一个多月的时间整理出来的学习资料,希望能帮助你快速学习前端,拿高薪offer!
如果你依然在编程的世界里迷茫,不知道自己的未来规划,可以加入web前端学习交流群:731771211 里面可以与大神一起交流并走出迷茫。新手可进群免费领取学习资料,看看前辈们是如何在编程的世界里傲然前行!群里不停更新最新的教程和学习方法(进群送web前端系统学习路线,详细的前端项目实战教学视频),有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入
点击: 加入
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69901074/viewspace-2636151/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/69901074/viewspace-2636151/
这50款前端热门工具简直不要太好用了!(3)相关推荐
- 这50款前端热门工具简直不要太好用了!
来源 | IT智云编程 19年,又是新的一年,"前端届",又出了哪些新的"玩意",今天向你推荐目前比较热门新鲜度靠前的50款前端工具,希望在新的一年里,对你有所 ...
- 19年你应该关注这50款前端热门工具(下)
上两篇文章<19年你应该关注这50款前端热门工具(上)>.<19年你应该关注这50款前端热门工具(中)>文章小编介绍了构建.框架和库.CSS和HTML.JavaScript相关 ...
- css画横线箭头_2020年你应该关注这50款前端热门工具:CSS HTML 工具篇
大家好,在一篇文章里 2020年让人难以置信的50款前端新工具:JavaScript插件篇(一),我分享了 11 款 JS 插件,本篇文章我将会和大家分享七款 CSS.HTML 相关的新工具. 12. ...
- 前端热门工具简直不要太好用了!
★★★★★ Web前端开发神器:点击查看→→ WebStorm安装与使用 今日送书!包邮!10本!(初来乍到,多多指教) <Bootstrap实战> <图解CSS3核心技术与案例实 ...
- 2020年你应该关注这50款前端热门工具,JavaScript插件篇(一)
前端之所以有趣,就是每年有比较多新奇的插件和工具值得我们去探索和研究.我们在开发前端应用时,自然少不了去找一些第三方插件帮助我们提高开发效率.本文给大家介绍的这50款新工具,都是相当的新,都是去年的新 ...
- 174款前端开发工具汇总,学习,开发,事半功倍!
我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您的工作更加轻松,特别是 ...
- 这四款前端开发工具,你必须知道
今天给大家介绍四款比较常用的前端开发工具,具体哪一款最好用,因人而异,大家可以根据自己的情况,选择一款个人认为最好用的web前端开发工具. Sublime Text Sublime Text凭借其漂亮 ...
- 加速 Web 开发的 23 款前端开发工具
市面上有许多前端开发工具可以加速 Web 开发工作.本文是对 2019 年顶级 Web 开发工具的一次精选汇总,分别介绍了每款工具的关键特性,并已附上下载链接. Novi Builder Novi B ...
- 分享:一款前端布局工具(alloydesigner)
困扰 设计师给出静态的高保真图片, 需要前端工程师按照高保真图,进行html编码. 前端工程师, 一般工作方法为: 打开图片,一边看下图片, 一边编写相应的html代码. 这样有两个问题: 1. 前端 ...
最新文章
- python数字排序分组代码_python pandas 组内排序、单组排序、标号的实例
- [转载][总结]函数getopt(),getopt_long及其参数optind
- 8086汇编常用指令(待解释)
- Mac OS使用技巧之十六:系统失去响应怎么办?
- Tensorflow2.0开启,从此忘记1.*版本
- 前端学习(3313):redux的基本操作
- c#中关于delegate、委托、事件之间的联系、关系
- 桌面云的四大协议解析
- JavaScript(二)基本概念
- 大一c语言编程上机题库,C语言上机题库Word版
- 操作系统概念之定义和功能
- matlab计算纹波电压,如何估算开关电源纹波电压?
- 计算机科学与昆虫,基于视觉的昆虫物种识别算法研究
- 线上测评图形题技巧一
- 学习记录 重叠网络权威知识——多尺度复杂网络社区发现的链接
- 兰州大学信息与计算机科学硕,兰州大学信息科学与工程学院
- Office365:客户端升级后无法启动Microsoft Outlook
- 剑侠情缘(网络版)---开发回顾 ------赵青
- 深度神经网络(DNN)的反向传播算法总结与图解
- 简单读懂什么是闪电套利
热门文章
- STM32F103芯片FSMC使用外扩SRAM芯片
- Linux之学习目标,初识linux操作系统。(其开发者们之无私奉献与分享合作精神,使我辈敬佩之至,在此由衷地向前辈们表达敬意与感谢。)
- 《走进人工智能》学习笔记
- webots自学笔记(二)节点与机器人建模
- linux端口占用eclipse,Linux 中 eclipse 的tomcat端口号被占用
- JSP判断radio是否选择和传值栗子(测试应聘人员能力自动计算分数)
- Apache OpenSSL生成CA证书使用
- Iptables封禁IP,记录地址
- antirez:Redis6真的来了
- spring boot信佳玩具有限公司仓库管理系统毕业设计源码011553