库&插件&框架&工具

2016 年最好用的表单验证库 SMValidator.js

前端表单验证工具分享

浅谈前端线上部署与运维

说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完成前端的部署操作。如果我现在给你一台新注册的云主机，那么你应该怎么做才能把一个前端工程部署到一台云主机上，成为一个可以访问的网页呢？今天我们就来聊聊前端的部署~ 首先，一个前端工程要变成…

原生 js 和 jquery 两种处理 cookie 的插件介绍

圣诞节，把网站所有的js代码都压缩成圣诞树吧。

本文分两章节，分别讲解如何使用js2image这个库生成可以运行的圣诞树代码和 js2image的原理。 github地址：https://github.com/xinyu19873... ps:求star 效果预览：http://assets.souche.c…

能在安卓上滚起上万个 dom 的 H5 滑动插件 JRoll 发布 v2.3.2

JRoll，一款能滚起上万条数据，具有滑动加速、回弹、缩放、滚动条、滑动事件等功能，兼容 CommonJS/AMD/CMD 模块规范，开源，免费的轻量级 html5 滚动插件。

Threejs之二:相机详解

透视投影相机(THREE.PerspectiveCamera) 所谓透视投影相机(PerspectiveCamera),基本等同于人的眼睛,意思就是:离的远的物体会显得比较小,近处的物体会比较大.透视投影相机的构造函数: PerspectiveCamera(fov,aspect…

【翻译向】webpack2 指南（下）

webpack2 官方指南翻译，包括内容：

缓存
垫片（Shimming）
编写一个库

100+ 超全的 web 开发工具和资源整理

[2016.09.06 更新] 整合 WEB 开发包含的 JavaScript 库，前端框架，Web 应用框架，任务批处理工具 / 包管理器，编程语言 / 开发平台，数据库，icon 图标，本地开发环境搭建，协作工具，Web 开发社区等收集分类......

一些有用的 sass mixins

一些有用的 sass mixins，包括 rem 转换、小箭头、三角形、媒体查询等

Webpack 中文指南

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

JS 运动搞不定你缺少一个运动框架而已

可以解决的运动：

元素的上下左右匀速缓冲运动
图片的透明度变化
图片轮播
元素高度宽度边框像素的变化
适用于多个物体运动以及链式运动
改变元素的位置

对不起，我们来迟了——webpack 中文社区

webpack2.x 正式版本发布！随之而来，webpack 官方给中文开发者送了一份新春大礼： webpack 官方中文社区正式成立！迷茫与行动我使用 webpack 已经有一年多了。这些日子里，许许多多身边的同事，还有开发者，开始加入 webpack 的使用大潮之中。一方面，同事们对…

2016 年 50 个最佳的轻量级 JavaScript 框架和库

回顾今年已发布的 JS 框架和库，我们针对地筛选了一些能够提供直接和具体功能的免费 JavaScript 插件和库，与大家分享。

移动Web利器transformjs入门

简介在过去的两年，越来越多的同事、朋友和其他不认识的童鞋进行移动web开发的时候，都使用了transformjs，所有必要介绍一下，让更多的人受益，提高编程效率，并享受编程乐趣。（当然transformjs不仅仅支持移动设备，支持CSS3 3D Transforms的浏览器都…

逐行阅读 Bootstrap 源码

Bootstrap 作为最受欢迎的前端 CSS 框架，它到底写了什么 tricky 代码，使得开发者的效率能够大幅提升呢？基于自己的个人开发经验，一起来看个究竟！揭秘 Bootstrap 和 CSS 中不被注意的部分。

CSS Modules 入门 Ⅰ：它是什么？为什么要使用它？

这是一个教你如何使用 CSS Modules 实现模块化的系列教程

[[PostCSS] 入门指南：让你轻松开始尝试 PostCSS](https://juejin.im/entry/58117...

昨天我们发了一个开篇，今天这篇是一个入门指南教程。这篇教程为用户提供了 (我认为是) 一个优秀的基本配置，让你能够容易地尝试 PostCSS 并在以后去深入细节。

webpack 教程资源收集

资源不在多，找到你想要的就好！最近在坑 webpack，欢迎来指点...（掘金没有 IM，那就评论区见吧~）

从零到一：用 Phaser.js 写意地开发小游戏（Chapter 4 - 游戏即将开始）

游戏即将开始

flv.js - B 站 HTML5 播放器内核开源

B 站 HTML5 播放器内核开源，超棒的 HTML5 播放器，纯 JavaScript 实现，告别 Flash 啦！

你必须『收藏』的Github技巧

一秒钟把Github项目变成前端网站 GitHub Pages大家可能都知道，常用的做法，是建立一个gh-pages的分支，通过setting里的设置的GitHub Pages模块可以自动创建该项目的网站。这里经常遇到的痛点是，master遇到变更，经常需要去sync到gh-p…

移动端时间选择器（更新 1.2.0 版本）

LazyPicker LazyPicker 是一个简单的移动端时间选择器，支持多种主题。用手机扫描体验： 1.2.0 版本体验：使用方法引入 CSS 和 JavaScript 脚本： <link rel="stylesheet" href="lazyPicker.min.css" /…

使用 mock.js 让前端开发与后端独立

Mock.js实现的功能。基于数据模板生成数据。基于HTML模板生成数据。拦截并模拟Ajax请求。本文仅演示使用mock.js进行模拟并拦截Ajax请求。首先页面中先引用： <script src="http://cdn.bootcss.com/jquery/3.1.…

前端技能图谱

概述 Web 前端要学习的内容。html 就是一堆标签，然后可以在页面显示出一些控件，例如表格，输入框，按钮等。而 css 的作用在于控制 html 的标签位置，效果等，如果不是 css 的话，我们不会见到平时那些如此美观的页面。js 的作用主要是提供运算功能，动态操作页面的元素，还可以通过网络与服务器通讯（传说中的 ajax），动画效果很多时候也是 js 弄出来的。

AlloyTouch Button 插件 - 不再愁 click 延迟和点击态

移动端不能使用 click，因为 click 会有 300ms。所有有了 fastclick 这样的解决方案。然后 fastclick 并没有解决点击态（用户点击的瞬间要有及时的外观变化反馈）的问题。hover 会有不消失的问题，所有大家一般用: active。利用 :active 伪类来设置某元…

【翻译向】webpack2 指南（中）

webpack2 已经发布了，翻译了一下官方指南。
包括内容：

动态模块替换
开发环境配置
为生产环境构建
React 懒加载
Public Path

移动Web触摸与运动解决方案AlloyTouch开源啦

传送门 Github地址：https://github.com/AlloyTeam/... 简介 AlloyTouch的本质是运动一个数字，把数字的物理变化映射到你想映射的任何属性上。所以带来了广泛的应用场景。不论实在应用、游戏、操作系统等许多层面，监听用户触摸，…

Webpack 2 入门教程

本文写于 Webpack 2 正式发布之前（完善文档阶段）。
不仅是一篇 Webpack 2 的入门教程，也让大家了解什么是 Webpack，值得收藏，长文慎入。

Vue高效UI组件库—iView开发实践

前段时间在微软参加活动，分享了 TalkingData 开源的基于 Vue.js 的高效 UI 组件库 iView 的一些开发经验，现整理成文，和大家探讨。本文首发于掘金，转载请注明出处和作者。 GitHub：https://github.com/iview/iview 关于 …

echarts 画图实例讲解

前两天分享了一个项目 (http://hyuhan.com/2016/11/17/...，里面用到了 echarts（一个纯 Javascript 的图表库）来画图，项目中用到了它的字符云图，地图，柱状图，饼图等，今天就给大家分享一些一些实现的细节。建议先去看看五分钟上手 Echarts 再来看这篇博客。

Git学习与环境配制

这偏补充之前hexo+github的git使用. 版本管理集中型(SVN) 1.特点:只有一个仓库,集中放在一个服务器,优点便于管理.缺点就是开发者不能连接服务器就无法获取最新的版本. 分散型可以folk,多个仓库,可以不必连接远程仓库就可以开发注册github，首先你需…

一套绝佳的图标字体库和CSS框架

Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

和 transformjs 一起摇摆

写在前面记得以前 facebook 做过一款 HTML5 游戏。开场动画是一块软体类似豆腐的东西一起摇摆。类似的效果如下面的 gif 所示： facebook 当时使用的是 createjs 下的子项目 easeljs 和 tweenjs 去制作，基于 Canvas 的动画。基本的原理主要是：循环运动 Ca…

Typr.js - 网页字体 Parser

和 opentype.js 类似，解析字体文件并存在 ArrayBuffer 的内存里面，并可以获得 glyph 数据

超全面 + 最流行的「前端速查表」高清版大全

目前最新最流行的前端速查表（Cheat sheet），包含：CSS3 Flexbox、ES6、jQuery 3 以及最新的 Bootstrap 4，前端人员可以将这些当作是备忘表或速记手册，使用时可以快速查阅，相当便捷。推荐收藏备用！

实现小小的 fullpage

今天运营给了一个需求，要做个引导页，也就是全屏滚动。考虑到只有 3 张图，就自己码个吧！遇到一些坑！

作者语：阅读本文之前，先看下面这个 webpack 的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过 Webpack，如果你对 webpack 感兴趣，本文中有一个贯穿始终的例子，如果你能把这个例子自己动手写一次，写完以后你会发现你已明明白白的走进了 Webpack 的大门。

文／zhangwang（简书作者）