index

Web开发常用第三方lib导航

非常欢迎您的 添加 和 修改（issues） 来共同完善常用lib，让 Web开发更简单和快捷

Node.js的出现就像把前端从农业化时代一下子拉向了工业化时代。

常用

路漫漫其修远兮，吾将上下而求索

点

文章

数据

神器

  • 变量取名 “计算机科学的两件难事：缓存失效和命名。”

抓包

ICON

iconfont

加载

MVV*
Other
  • React
  • elm 在浏览器中的函数式编程

Angular

  • UI Bootstrap 基于 AngularJS & Bootstrap
  • LumX 基于 AngularJS & Material Design 的框架

脏检查的原理是：我们所有的对数据的赋值，都是在某些特性场景下触发的，比如：

    - UI事件
    - 网络事件
    - 定时器
如果在每次操作之后，对数据保留一份复制，然后下一次再有事件发生的时候，把新老数据进行比对，就可以判定哪些数据产生了变更，从而可以更新关联的界面。

React

微信

  • WeUI 微信官方出品
  • vue-weui 针对 Vue框架移植的 WeUI 框架的适配

前端工具

  • DevTools an Animated Journey 2016
  • VanillaJS 最快的 JS(没有之一)
  • is.js 这被描述为“微型检查库”，它提供了一个很好的API，允许你做各种数据进行检测。
  • userAgent解析库 ua-device.js是由Baidu WebFE(FEX)团队开发的一个用于解析UA来得到用户终端信息的JS框架。
  • VisSense.js 一个DOM元素的观测能见度变化的实用工具库。
  • Roll 帮助你跟踪位置、滚动、和分页的JS库
  • clipboard.js 拷贝文字到剪切板的现代化方法
  • html5tooltips.js 带有CSS3动画的轻量级简洁Tooltip插件
  • Annotator.js 为页面中选中的文本添加注释、高亮、标签等的JS库
  • cookie.js A tiny JavaScript library that simplifies cookies.
  • store.js 它有更简单的api，最重要的是他解决了跨浏览器问题，甚至解决了低版本浏览器(ie6)不支持localStore的问题。
  • data.js 是带有消息通知的数据中心，我称其为会说话的数据。旨在让编程变得简单，世界变得美好。
  • Keypress 一定记不住键盘上每个键的键位码吧，来试试这个，直观的展示，再也不需要记忆了。
  • device.js 你想检测用户的设备，试试这个吧，比jq.browser全面多了。
  • Device detection (phone, tablet, desktop, mobile grade, os, versions)
  • jsqrcode Javascript的QRCode的扫描仪(依赖一个叫getUserMedia的属性)
  • Mobiscroll
  • Moment JavaScript 日期处理类库
  • QRCode
  • offline 自动显示在线/离线显示给用户
  • Intro.js 新功能介绍和一步一步的用户指南

下载

编码

开发工具

调试

调试工具

proxy server

  • Chrome 下通过插件 SwitchyOmega 实现，详见在线调试
  • iOS 下通过配系统代理
  • Android 下通过 ProxyDroid 实现

前端错误、监控

测试工具

构建

优化

计算

组件

  • notie.js 清洁、简单的通知插件。

  • share.js 一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等社交网站。

  • Web组件库 [Web组件库 如："跑马灯"的抽奖效果。

666

  • parallax 轻量级的的视差引擎，智能设备的方向作出反应。 示例：demo1 demo2

JS前端模板引擎

Node模板

导航

  • Elevator.js “返回顶部”效果像真正的电梯一样。
  • Slideout.js 适用于移动端WEB应用的触摸式导航菜单。
  • Bootply Bootstrap是一个非常流行的框架，所以这个BootStrap编辑器值得一试。

触摸

  • Hammer.js JavaScript 多点触控手势库。

Scroll

轮播图&画廊

  • Swipe Swipe 是最准确的触摸滑块。
  • swiper 为移动端而生的滑动框架，无依赖，轻盈小巧，性能极致(weui)
  • ItemSlide.js 同时支持触摸滑动以及鼠标滚动的JavaScript轮播图库。
  • lory.js 使用vanilla JavaScript编写的简单的触摸式滑块工具。
  • Simple Lightbox 同时支持移动端和PC端的jQuery灯箱效果插件。
  • Chocolat.js 响应式jQuery灯箱插件。
  • jQuery lightgallery 轻量级、可定制、模块化、响应式的灯箱画廊插件。
  • viewerjs 图片浏览控件

延迟加载

  • Layzr.js 体积小、速度快、现代化、无依赖的延迟加载库。
  • AntiModerate 渐进图片加载库。

表单插件

  • Awesomplete 超轻量级、高度可定制化的自动补全jQuery插件。
  • Submitter 简单的jQuery表单提交插件。
  • Select or Die 为 select元素设置样式的jQuery插件。
  • jQuery Nice Select 把原生 select样式替换为可定制的下拉菜单的轻量级jQuery插件。
  • datedropper 提供管理日期输入字段的jQuery插件。
  • Instantsearch.js 用于高性能即时搜索的插件。

动画插件&库

  • Velocity.js
  • AniJS
  • iconate.js 体积小、性能高的跨浏览器图表转换库。
  • Animate-Plus 帮你设置CSS及SVG动画属性的高性能JavaScript库。
  • Dynamics.js 用于创建基于物理学的CSS动画的JavaScript库
  • cta.js 轻量级“行动到效果”动画库 (**)
  • ramjet.js 实现DOM元素从一个状态到另一个状态平稳过渡的库 (**)
  • mo.js motion graphics toolbelt for the web。
  • jQuery.smoothState.js 不显眼的页面过渡jQuery插件
  • Move.js 如果你操作过css3的属性，一定会觉得非常痛苦的，那不如来试试合格，css3动画瞬间变得简单了。
  • CSS动画汉堡包

辅助工具

  • 代码规范有 ESLint
  • 单元测试有 Karma
  • 集成测试有 CasperJS/Nightwatch

  • 代码覆盖率用 istanbul，

  • Web 前端开发规范文档

在线工具

日期

图形与图表

另类

  • egg.js 向网页上添加复活节彩蛋的简单JavaScript库
  • Flexbugs Flexbox常见问题及狂浏览器解决方案
  • favico.js 在favico上添加数字是不是很nice，点击下面的官网查看效果，这肯定要逼死强迫症了。

适配

动画

CSS

doc

PostCSS

Other

  • Juiced Flexbox CSS 框架
  • Drop 用于创建下拉菜单和其他浮动元素的库。
  • SassyFlags 为你的网站添加旗帜的简单库

PPT 幻灯片

视屏

  • Vidage Vidage.js - 网页背景视频 / 图片

坑

300 毫秒点击延迟的来龙去脉

Mac下Chrome手机模拟器里网页字号bug

Font Boosting

Node

文章：

模板

Hybrid Mobile

后台管理模板

工具

Markdown

Mock数据

游戏引擎

  • Hilo 阿里巴巴集团开发的跨年底HTML5游戏开发解决方案

存储

Ajax 替代方案 Fetch API 是基于 Promise 设计

promise

Server

常用脚本语言下开启简易 web server的方法

http-server -p 8080
ruby -run -e httpd . -p 9090
python -m SimpleHTTPServer 8000
php -S 127.0.0.1:8088 router.php

browser

browser-sync start --proxy "192.168.1.222:8001" --files "templates/**" "static/**"

内网

  • 花生壳
  • ngrok 内网穿透利器