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

在本文中,我不会去谈 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

(0)

相关推荐

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

    在本文中,我不会去谈 React.Angular.Vue 等等这些大的前端框架,也不会谈 Atom.VS code.Sublime 等等这些已经很出名的代码编辑器,我只是想简单的分享一套我认为有助于提升开发者工作流的工具集. 这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了. 这个列表包含许多种类的资源,所以这里我将它们分组整理. Javascript 库 Particles.js - 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js 

  • 用Oracle9ias开发无线应用程序开发者网络Oracle

    正在看的ORACLE教程是:用Oracle9ias开发无线应用程序开发者网络Oracle. 介绍:细处着手,巧处用功.高手和菜鸟之间的差别就是:高手什么都知道,菜鸟知道一些.电脑小技巧收集最新奇招高招,让你轻松踏上高手之路. Oracle 移动服务的中心组件 Oracle Application Server Wireless (OracleAS Wireless) 是一个灵活的无线和语音综合平台,可以使任何公司的联系扩展到其公司范围以外.利用 Oracle9iAS Wireless,企业可以部

  • 一文带你了解前端包管理工具npm、yarn和pnpm

    目录 为什么需要包管理工具? 版本管理规范 前端主流包管理工具 yarn vs npm vs pnpm 包管理工具安装和版本切换 安装项目依赖 npm .yarn 和 pnpm 常用命令 安全性 lock 文件 性能对比 pnpm 的优势 总结 为什么需要包管理工具? 每种主流编程语言都有包管理工具,比如 java 的 Maven.Gradle,Python 的 pip,nodejs 的 npm.yarn.pnpm 等. 包管理工具的主要作用是管理第三方依赖,也可以看成一个"轮子"工厂

  • Android开发中4个常用的工具类【Toast、SharedPreferences、网络及屏幕操作】

    本文实例讲述了Android开发中4个常用的工具类.分享给大家供大家参考,具体如下: 1.土司工具类(Toast管理) /** * Toast统一管理类 * * @Project App_ZXing * @Package com.android.scan * @author chenlin * @version 1.0 * @Date 2013年7月6日 * @Note TODO */ public class ToastUtil { private ToastUtil() { /* canno

  • Android开发实现的Intent跳转工具类实例

    本文实例讲述了Android开发实现的Intent跳转工具类.分享给大家供大家参考,具体如下: 一.概述 Intent的中文意思是"意图,意向",在Android中提供了Intent机制来协助应用间的交互与通讯,Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述,Android则根据此Intent的描述,负责找到对应的组件,将 Intent传递给调用的组件,并完成组件的调用.Intent不仅可用于应用程序之间,也可用于应用程序内部的Activity/Service之

  • Android开发实现查询远程服务器的工具类QueryUtils完整实例

    本文实例讲述了Android开发实现查询远程服务器的工具类QueryUtils.分享给大家供大家参考,具体如下: /** * 查询远程服务器的工具 * @author chen.lin * */ public class QueryUtils { private static final String TAG = "CommonUtils"; private static QueryUtils instance; private SharedPreferences sp; privat

  • Android开发中解析xml文件XmlUtils工具类与用法示例

    本文实例讲述了Android开发中解析xml文件XmlUtils工具类与用法.分享给大家供大家参考,具体如下: 1. xmlUtil工具类 package com.example.xmlpaserutil.util; import java.io.InputStream; import java.lang.reflect.Field; import java.util.ArrayList; import java.util.List; import org.xmlpull.v1.XmlPullP

  • PHP7扩展开发之基于函数方式使用lib库的方法详解

    本文实例讲述了PHP7扩展开发之基于函数方式使用lib库的方法.分享给大家供大家参考,具体如下: 前言 首先说下什么是lib库.lib库就是一个提供特定功能的一个文件.可以把它看成是PHP的一个文件,这个文件提供一些函数方法.只是这个lib库是用c或者c++写的. 使用lib库的场景.一些软件已经提供了lib库,我们就没必要再重复实现一次.如,原先的mysql扩展,就是使用mysql官方的lib库进行的封装. 在本文,我们将建立一个简单的lib库,并在扩展中进行封装调用. 代码 基础代码 这个扩

  • Android开发之弹出软键盘工具类简单示例

    本文实例讲述了Android开发之弹出软键盘工具类.分享给大家供大家参考,具体如下: package com.maobang.imsdk.util; import android.content.Context; import android.view.inputmethod.InputMethodManager; import android.widget.EditText; import java.util.Timer; import java.util.TimerTask; /** * 让

  • 提高 Python 开发效率的3个小工具

    目录 在Sublime Text中支持Python运行 在Mac系统的iTerm2中支持查看图片 Python中的typing模块介绍 本文将介绍的三个小工具如下: 在Sublime Text中支持Python运行: 在Mac电脑的iTerm2中支持查看图片: Python的typing模块介绍. 详细内容介绍如下. 在Sublime Text中支持Python运行 在平时工作中,我们通常用PyCharm开发Python工程,也可以用Vim编辑和查看Python脚本.但是,如果我们仅仅想创造一个

随机推荐