67 个节省开发者时间的实用工具、库与资源（前端向）

在这篇文章中，我不会与大家谈论大型的前端框架，如 React、Angular、Vue 等，也没有涉及那些流行的代码编辑器，如 Atom、VS Code、Sublime，我只想与大家分享一个有助于提升开发人员效率的工具列表合集。

或许，一些朋友已经对文中的一些工具有所了解，但如果你发现了一些对你有帮助的新工具，那么，我将倍感欣慰。

由于这个列表中包含了不同类别的资源，为了便于大家查看，我已将其进行了重新的分类，来 Enjoy 吧！

JavaScript 库

Particles.js - 一个用于在网页上创建漂亮的浮动粒子的 JS 库；
Three.js - 用于在网页上创建 3D 物体与空间的 JS 库；
Fullpage.js - 易于实现全屏滚动功能的库；
Typed.js - 实现打字机效果；
Waypoints.js - 滚动到元素触发事件的库；
Highlight.js - 页面上语法高亮显示；
Chart.js - 纯 JS 制作漂亮的图表；
Instantclick - 鼠标悬停预先加载页面资源，大大加速你的网站响应速度；
Chartist - 开源响应式图表库；
Motio - 基于 sprite 的动画和平移库；
Animstion - 页面切换动画的 jQuery 插件；
Barba.js - 创建页面间流畅平滑的过渡效果；
TwentyTwenty - jQuery 视差插件；
Vivus.js - 可以执行 SVG 路径动画的轻量级 JS 库；
Wow.js - 页面滚动时展现动画效果；
Scrolline.js - 页面滚动时显示滚动进度的 jQuery 插件；
Velocity.js - 用于加速 JavaScript 动画；
Animate on scroll - 页面滚动时增添元素动画的小型库；
Handlebars.js - JavaScript 模板引擎；
jInvertScroll - 轻量级的 jQuery 水平视差插件；
One page scroll - 实现苹果风格单页滚动效果的 jQuery 插件；
Parallax.js - 轻量级的视差引擎，能够对智能设备的方向作出反应；
Typeahead.js - 搜索框自动补全的 JS 库；
Dragdealer.js - 基于拖动的 JavaScript 组件；
Bounce.js - 快速创建漂亮的 CSS3 动画效果；
Pagepiling.js - 创建全屏滚动效果；
Multiscroll.js - 创建两列垂直反向滚动效果的 jQuery 插件；
Favico.js - 动态图标插件；
Midnight.js - 固定头部切换效果；
Anime.js - JavaScript 动画引擎；
Keycode - 获取键盘按键的 JS 键码值；
Sortable - 用于拖拽排序的 JavaScript 库；
Flexdatalist - 支持 <datalist> 的 jQuery 自动完成插件；
Slideout.js - 实现滑出式 Web App 导航菜单；
Jquerymy - 实时、复杂的双向数据绑定 jQuery 插件；
Cleave.js - 自动格式化表单输入框的文本内容；
Page - 构建单页应用的小型客户端路由库；
Selectize.js - 基于 jQuery 的 <select> UI 控件，用于创建 tag 标签输入框和 select 下拉框；
Nice select - 创建漂亮下拉框的 jQuery 插件；
Tether - 使用绝对定位创建两个互相相关元素的 JS 库；
Shepherd.js - 创建新手引导的 JS 库；
Tooltip - 工具提示插件；
Select2 - 基于 jQuery 的替代选择框；
IziToast - 轻量的跨浏览器响应式消息通知插件；
IziModal - 炫酷的 jQuery 模态窗口插件。

CSS 库与设计资源

Animate.css - 强大的 CSS3 动画库；
Flat UI Colors - 漂亮的扁平化配色；
Material Design Lite - 基于谷歌 Material Design 的前端框架；
Colorrrs - 随机颜色生成器；
Section separators - CSS 区域分割；
Topcoat - 专注为简洁、快速的 Web 应用提供 CSS 开发的工具；
Create Ken Burns Effect - 利用 CSS3 实现的 Ken burns 特效；
DynCSS - 用于分析 CSS -dyn-属性规则，并使其具备动态属性；
Magic animations - 具备特殊动效的 CSS3 动画；
CSSpin - 丰富的 CSS 加载动画；
Feather icons - 简单、漂亮的开源图标库；
Ion icons - 专为 Ionic 框架设计的图标字体；
Font Awesome - 可缩放的矢量图标字库；
Font Generator - 在线字体生成器；
On/Off FlipSwitch - 在线创建纯 CSS3 动画开关效果；
UIkit - 轻量级的模块化前端框架；
Bootstrap - 著名的前端框架；
Foundation - 著名的前端框架。

有用的产品/链接

<head> Cheatsheet - 可以写入到 <head> 标签的内容清单；（译者注：中文翻译版地址）
Ghost - 基于 Node.js 的简易博客平台；
What runs - 用于网站技术分析的 Chrome 插件；
Learn anything - 用于分解项目的强大思维导图。

以上就是我个人常用的一些前端工具、框架、库的列表，希望对大家有所帮助。如果你也愿意分享一些新的发现，可以在推特上随时联系我。

感谢你的阅读。若你有所收获，欢迎点赞与分享。

注：

本文版权归原作者所有，仅用于学习与交流；
如需转载译文，烦请按下方注明出处信息，谢谢！

转载于:https://blog.51cto.com/benchmarking/1967050

67 个节省开发者时间的实用工具、库与资源（前端向）相关推荐

开发知识竞赛答题活动小程序过程中使用到的实用工具库介绍
前言我在做知识竞赛答题活动小程序经常需要处理一些比较基础的事情,比如时间.数组.数字.对象.字符串等处理,自己造轮子的话成本会比较高.这时候我们可以去找一些别人已经写好的开源模块或者开源库,我们直接 ...
Lodash-一个一致性、模块化、高性能的 JavaScript 实用工具库介绍
官网:https://www.lodashjs.com 一.为什么选择 Lodash ? Lodash 通过降低 array.number.objects.string 等等的使用难度从而让 Java ...
17个可以节省你时间的CSS工具
作为一个网站设计/开发人员,你必须不断寻找方法来减少设计/开发过程中所花费的时间.这对于提高你的工作效率并最大化你的利润是非常重要的.下面介绍的按功能分类的CSS工具可以有效地节省你设计网站的时间. ...
JAVA JDK1.8 时间戳与时间格式化实用工具类
这是为了个人的方便,也同时为了大家能更好地了解与使用获取时间的各种方法. 不废话, 上代码 : import org.springframework.util.Assert;impo ...
7个使用JavaScript构建数据可视化的实用工具库，希望你能喜欢
JavaScript运行网络.您可以在浏览器中使用它,也可以在服务器上使用它,并且可以将其用于移动应用程序. 当今的生态系统充满了强大的库和框架,可帮助工程师为任何平台构建功能强大,以用户为中心的应用 ...
rs 实用工具 (rs.exe) (SSRS)SQL server report service
http://msdn.microsoft.com/zh-cn/library/ms162839.aspx rs 实用工具 (rs.exe) (SSRS) 其他版本 SQL Server 2008 R ...
别再重复造轮子了，这几个开源 Java 工具库送给你
文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在里面. 风筝我作为一个野路子开发者,直到遇见下面的这几个工具库,才知道之前重复造了不少轮子,而且轮子还不一 ...
猿创征文｜产品工具-面向综合效能提升的工具库
引言作为一名从软件工程师出身的产品,一个软件或者产品的上限是由开发者和设计者本身的综合素养和能力决定的,而下限是由团队的综合效能的产出去决定的,君子不器体现了以人为本的核心思想,善假于物是在了解了工 ...
10个常用的JS工具库
10个常用的JS工具库,80%的项目都在用! Avue Cloud 2022-01-26 09:46 图片高手区别于普通人的重要一点是,他们善于利用工具,把更多的时间留给了规划和思考.写代码也是同样 ...

67 个节省开发者时间的实用工具、库与资源（前端向）

JavaScript 库

CSS 库与设计资源

有用的产品/链接

67 个节省开发者时间的实用工具、库与资源（前端向）相关推荐

最新文章

热门文章