在这篇文章中，我不会与大家谈论大型的前端框架，如 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 库与设计资源

有用的产品/链接

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

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

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

注：

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

英文原文：67 useful tools, libraries and resources for saving your time as a web developer
作者：Ognjen Gatalo
译者：IT程序狮
译文地址：http://www.jianshu.com/p/c95e400e43b6

作者：IT程序狮
链接：http://www.jianshu.com/p/c95e400e43b6
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

67 个JavaScript和CSS实用工具、库与资源的更多相关文章

  1. JavaScript和CSS实用工具、库与资源

    JavaScript和CSS实用工具.库与资源 JavaScript 库 Particles.js  - 一个用于在网页上创建漂亮的浮动粒子的 JS 库: Three.js  - 用于在网页上创建 3 ...

  2. Lodash JavaScript 实用工具库

    地址:https://www.lodashjs.com/ Lodash 是一个一致性.模块化.高性能的 JavaScript 实用工具库.

  3. JavaScript 实用工具库 : lodashjs

    首页地址:https://www.lodashjs.com/

  4. 8个提高效率的CSS实用工具

    CSS,也就是Cascading Style Sheets,推出于1997年,差不多是17年前,至此为我们开发网页大开方便之门,协助我们制作出一个又一个惊艳绝伦的网站设计和模板,提升了我们的创造能力, ...

  5. lodash (js实用工具库)

    是什么? 它提供了一整套函数式编程的实用功能, 并且支持模块化, 比underscore更优秀. 文档? http://lodashjs.com/docs/ 引用? <script src=&q ...

  6. js工具库---Lodash

    Lodash是一个一致性.模块化.高性能的 JavaScript 实用工具库 为什么选择 Lodash ? Lodash 通过降低 array.number.objects.string 等等的使用难 ...

  7. iOS商品详情、ffmpeg播放器、指示器集锦、自定义圆弧菜单、实用工具等源码

    iOS精选源码 电商商品详情 Swift.两种方式实现tableViewCell拖拽功能 ffmpeg+openGL播放器 微信聊天表情雨.表情下落.表情动画 iOS指示器集锦 弹窗增加 picker ...

  8. 2018年你需要知道的13个JavaScript工具库

    译者按: 你可能已经用到Underscore或者Lodash.本文列举了13个常用的JavaScript工具库来提高开发效率. 原文: 11 Javascript Utility Libraries ...

  9. 3 月 15 个有意思的 JavaScript 和 CSS 库

    Tutorialzine 旨在让你了解最新最酷的 Web 发展趋势.这就是我们每个月为何都会发布一些我们偶然发现并认为值得你关注的优秀资源的原因. BasicScroll https://github ...

随机推荐

  1. [C#]SQL Server Express LocalDb(SqlLocalDb)的一些体会

    真觉得自己的知识面还是比较窄,在此之前,居然还不知道SqlLocalDb. SqlLocalDb是啥?其实就是简化SQL Server的本地数据库,可以这样子说,SQL Server既可以作为远程,也 ...

  2. Node.js中读取文件后用Json.parse方法报错解决方案

    今天,在调试一个node项目时,发现了一个很大的坑,在此分享给大家! 大家都知道,Json.parse()方法对格式要求是很严格的,格式不对极其容易报错,但是有时候格式看似是正确的也会报错. 比如这一 ...

  3. Java面试MySQL的一些问题

    MySQL InnoDB存储的文件结构 索引树是如何维护的? 数据库自增主键可能的问题

  4. python面向对象（封装、继承、多态）+ 面向对象小栗子

    大家好,下面我说一下我对面向对象的理解,不会讲的很详细,因为有很多人的博客都把他写的很详细了,所以,我尽可能简单的通过一些代码让初学者可以理解面向对象及他的三个要素. 摘要:1.首先介绍一下面向对象 ...

  5. ASP.Net Core 中使用Zookeeper搭建分布式环境中的配置中心系列一：使用Zookeeper.Net组件演示基本的操作

    前言:马上要过年了,祝大家新年快乐!在过年回家前分享一篇关于Zookeeper的文章,我们都知道现在微服务盛行,大数据.分布式系统中经常会使用到Zookeeper,它是微服务.分布式系统中必不可少的分 ...

  6. [蛙蛙推荐]SICP第一章学习笔记-编程入门

    本书简介 <计算机程序的构造与解释>这本书是MIT计算机科学学科的入门课程, 大部分学生在学这门课程前都没有接触过程序设计,也就是说这本书是针对编程新手写的. 虽然是入门课程,但起点比较高 ...

  7. ACM/ICPC 2018亚洲区预选赛北京赛站网络赛D-80 Days--------树状数组

    题意就是说1-N个城市为一个环,最开始你手里有C块钱,问从1->N这些城市中,选择任意一个,然后按照顺序绕环一圈,进入每个城市会有a[i]元钱,出来每个城市会有b[i]个城市,问是否能保证经过每 ...

  8. matplotlib 入门之Pyplot tutorial

    文章目录 pyplot 介绍 修饰你的图案 格式字符串 [color][marker][line] Colors Markers Line Styles 利用关键字作图(大概是数据映射到属性吧) 传入 ...

  9. c++入门之命名空间存在的意义

    看过鸡啄米的C++编程入门系列教程的朋友,应该能注意到,在其中的很多实例中,都有这么一条语句:using namespace std;,即使用命名空间std,其作用就是规定该文件中使用的标准库函数都是 ...

  10. XT535

    今天金山误删了一个文件,把手机系统整坏了,故刷了个机,刷机教程: http://bbs.dospy.com/thread-15027415-1-623-1.html 中间安装了个驱动精灵,否则手机开启 ...