67 个节约开发时间的前端开发者的工具、库和资源


Posted in Javascript onSeptember 12, 2017

在本文中,我不会去谈 React、Angular、Vue 等等这些大的前端框架,也不会谈 Atom、VS code、Sublime 等等这些已经很出名的代码编辑器,我只是想简单的分享一套我认为有助于提升开发者工作流的工具集。

这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。

这个列表包含许多种类的资源,所以这里我将它们分组整理。

Javascript 库

Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库

Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库

Fullpage.js— 快速实现全屏滚动特性

Typed.js — 打字机效果

Waypoints.js — 滚动到某个元素位置时触发一个功能

Highlight.js — web 语法高亮

Chart.js — 使用 JavaScript 创建漂亮的图表

Instantclick — 能够明显加速网站加载时间,鼠标 hover 时预加载资源

Chartist — 另一个图表库

Motio — 一个基于动画和平移的雪碧图库

Animsition — CSS 实现动画过渡的 jQuery 插件

Barba.js — 流式页面过渡

TwentyTwenty — 一个对比图片的可视化 diff 工具

Vivus.js — 在 SVG 上绘制动画

Wow.js — 滚动时展现动画

Scrolline.js — 页面滚动时显示滚动进度

Velocity.js — 快速流畅的 JavaScript 动画

Animate on scroll — 漂亮的页面滚动元素动画

Handlebars.js — Javascript 模板

jInvertScroll — 视差滚动

One page scroll — 又一个页面滚动库

Parallax.js — 对智能设备方向变化做出响应的视差引擎

Typeahead.js — 搜索补全

Dragdealer.js — 炫酷拖拽

Bounce.js — 创建炫酷的 CSS3 动画

Pagepiling.js — 全屏滚动

Multiscroll.js — 两列垂直反向滚动

Favico.js — 动态 favicon

Midnight.js — 固定头部切换效果

Anime.js — 动画库

Keycode — 获取键盘按键的 JavaScript keycode

Sortable — 拖拽插件

Flexdatalist — 自动补全

Slideout.js — 移动应用侧滑导航

Jquerymy — 使用 jQuery 实现双向数据绑定

Cleave.js — 实时格式化输入内容

Page — 客户端单页应用路由

Selectize.js — 用来添加 tag 的 Hybrid 选择框

Nice select — 创建漂亮的选择框的 jQuery 库

Tether — 使用固定定位来创建相关元素

Shepherd.js — 为应用创建新手引导

Tooltip — tooltip 提示框

Select2 — Jquery 选择框插件

IziToast — 通知弹窗实现

IziModal — 模态框实现

CSS 库 / 设计相关

Animate.css — 动画库

Flat UI Colors — 扁平化设计配色

Material design lite— 基于 Google material design 的框架

Colorrrs — 随机颜色生成器

Section separators — CSS 实现区域分割

Topcoat — 框架

Create ken burns effect — 使用 CSS3 动画实现 Ken burns 特效

DynCSS — 给 CSS 添加 function,动态化 CSS

Magic animations — CSS3 实现动画特效

CSSpin — css spinners 合集

Feather icons — Icon 集合

Ion icons — Icon 集合

Font awesome — Icon 集合

Font generator — 组合多个字体创建混合字体

On/Off switch — 使用 CSS 创建 on/off 开关、radio 按钮

UI Kit — 框架

Bootstrap — 框架

Foundation — 框架

有用的产品/链接

cheatsheet — 可以写在中的所有标签

Ghost — 基于 Node.js 的博客平台

What runs — 一个用于网站技术分析的 Chrome 插件

Learn anything — 一个强大的用于分析某个主题的思维导图

这是我个人有时在使用的一些工具/框架/库的一个列表。很高兴在twitter 上和我联系,并分享你的发现。

译者:myvin
译文:http://www.zcfy.cc/article/4174
原文:https://hackernoon.com/67-useful-tools-libraries-and-resources-for-saving-your-time-as-a-web-developer-7d3fb8667030

Javascript 相关文章推荐
jquery 操作DOM的基本用法分享
Apr 05 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
深入理解(function(){... })();
Aug 16 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 #Javascript
JavaScript中递归实现的方法及其区别
Sep 12 #Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 #Javascript
React中jquery引用的实现方法
Sep 12 #jQuery
JS+canvas动态绘制饼图的方法示例
Sep 12 #Javascript
详解react-router4 异步加载路由两种方法
Sep 12 #Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 #Javascript
You might like
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
php获得当前的脚本网址
2007/12/10 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
php微信开发自定义菜单
2016/08/27 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
JavaScript定义类的几种方式总结
2014/01/06 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
python django 增删改查操作 数据库Mysql
2017/07/27 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
百丽国际旗下购物网站:优购
2017/02/28 全球购物
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
体育教育专业自荐信范文
2013/12/20 职场文书
小学教师国培感言
2014/02/08 职场文书
高中军训感言200字
2014/02/23 职场文书
同学会主持词
2014/03/18 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
党员个人总结范文
2015/02/14 职场文书
解除租赁合同协议书
2016/03/21 职场文书
导游词之峨眉山
2019/12/16 职场文书
导游词之日本富士山
2020/01/06 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript