Webpack 在前端开发中作为模块打包工具非常受开发者的青睐，丰富的 loader 使它可以实现各种各样的功能。本文将通过 webpack 来打包一个 js 文件，看看 webpack 是如何加载各个模块的。

如果我们用过动态样式语言（像 Less、 Sass ）的话，肯定对其中可以定义变量的特性非常喜欢，特别是随着样式文件越来越复杂的时候，把一些值抽成变量会使代码更好维护。现在随着 CSS 的发展，目前 CSS Variables 也引入了自己的变量，本文就对 CSS Variables 进行简单的介绍。

如何才能防止在给 box-shadow 制作动画过渡时导致的每一帧都要进行的重绘（re-paint），从而提高页面的性能？答案就是：不可能。给变化的 box-shadow 制作动画会大大缩减页面渲染的性能。

生命周期方法（按照时间先后顺序依次为： getDefaultProps, getInitialState, componentWillMount, componentDidMount, componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, componentDidUpdate, componentWillUnmount ）

说到 javascript 中的定时器，我们肯定会想到 setTimeout() 和 setInterval() 这两个函数。本文将从 事件循环（Event Loop） 的角度来分析两者的工作原理和区别。

在今年对 Instagram Web 进行全新的设计的时候，我喜欢在写 React 组件的时候，用上一些 ES6+ 的新特性。请允许我列举这些能够改变你写 React 应用方式的新特性。比起以往，这些特性能够使你撸起码来更加容易、有趣！

Gulp 是 Grunt 的替代者。作为构建工具，Gulp 更具有语法简洁易懂的优势，所以学习成本更低。利用 Gulp， 我们不仅可以对HTML、CSS（LESS|SASS）、JS（CoffeeScript）进行编译；还可以监听文件的变化，同时借助 livereloader 实时地刷新页面；甚至还可以对图片进行压缩优化。下面记录一下我的 Gulp 学习之旅 。

来自Google的前端工程师-Philip Walton 分享了自己关于如何成为优秀的工程师的一些观点。个人感觉很有价值，所以翻译成中文，方便大家阅读。水平有限，如翻译不妥之处请在评论中指出。

我使用 React.js 构建大型项目已经有一段时间了，我遇到过很多在不同的组件中都要用到相同功能的情况。因此，我花了一个小时左右的时间去了解mixin的用法，然后分享我所学习到的一些东西。

今天偶然在youtube上看到一段视频，讲诉的是作者在他的网页中用到了background-attachment: fixed;来实现背景图固定效果，但是这种是实现方式导致页面在滚动时，会出现页面卡顿的现象，这很明显降低了用户的体验。 下面介绍通过will-change来部分规避这个问题。

原文来自： [链接] 所谓的倾斜效果，我也不知如何用语言描述，那就直接看Demo啦，下面我们会对这个效果的实现原理逐步分析：[链接] 文档结构 对一个图片添加该效果，首先，我们需要一个具有宽高的容器。DOM 结构非常简单。 {代码...} 上面这段结构经过脚本处理之后，会被替换成下面的结构： {代码...} 脚本分析 我们利用...

所谓的Hack就是只有特定浏览器才能识别这段hack代码。Hack 不是什么好东西，除非没有办法，我们尽量还是不要用着玩意。 下面是各个浏览器的CSS Hack 列表。

这个规则对于函数同样适用，其原因在于函数只是分配给变量的对象。唯一需要引起注意的地方在于当适用函数声明时，函数定义也会被提升，而不仅仅是函数声明被提升。看下面的代码：

以下编码风格来自于《编写可维护的 javascript》一书中，加上个人总结，自代表个人风格，仅供参考。 缩进 缩进可以采用2格缩进或者4格缩进，具体使用哪个看团队的代码规范和自己的爱好。 行尾分号 行尾一律加上;分号，除非该行需要折行。 行的长度 单行不应该超过80个字符，如果超过，应该折行编写。 折行 当一行长度达...

首先考虑一下，改变 DOM 样式导致浏览器重绘有两种方式，一种是单纯的重绘，页面布局没有受到影响（如改变盒子的背景色，修改字体颜色，修改透明度...）；另外一种是在重绘之前会触发 Rendering（回流），也就是页面布局受到了影响，需要重新布局，在重绘页面。下面我们分别对这两种情况进行测试。

CSS3 提供了transition 过渡、transform 变换和animation 动画来实现页面中的一些样式转化，这篇文章会对这几个属性做简单的介绍，然后比较一下 CSS3 动画和 JS 动画哪个性能更好。

一般我们通过box-shadow来设置盒阴影，但是有些属性我们一般没有用到，这篇文章将对box-shadow属性进行逐个分析。 语法 {代码...} inset 投影方式 此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”, 其投影就是内阴影； x-offset 水平方向的偏移量； y-offset 垂直方向的偏移量； blur...

通过Media Query 媒体查询可以针对符合相应条件的媒体设置特定的样式。 引入方式 引入媒体查询的方式有两种。 link 方式引入 {代码...} css 中引入 {代码...} 常见的 Media Query 兼容性参考

我们可以通过 CSS3 中的box-shdow和transform 来实现酷炫的Drop-shadow效果： 下面记录一下是实现步骤。 DOM 结构 我们仅仅需要一个div作为主体，阴影可借助伪元素:before和:after来实现。所以我们的 DOM 结构非常简单。 {代码...} 添加阴影 给两个伪元素添加阴影，暂时先搞定左边，右边的阴影稍后再处理。 {代码...} 现...

如果希望在打开vim时不想每次都输入set nu｜set number来显示行号，那么可以对用户的vim配置文件加入一些简单的配置即可： 首先打开vim配置文件.vimrc 该文件的路径一般为~/.vimrc，如果主目录下没有这个文件，可以通过下面的方式创建： {代码...} 在.vimrc中输入： {代码...} 这样简单的配置就行啦，每次进入vim时，vim...

Mac OS X 10.10 下安装Nginx， 终端纪录如下： {代码...} 运行nginx，报错： {代码...} 通过brew doctor看看到底是哪里出了问题： {代码...} 获得如下信息： {代码...} 按照提示操作，结果又抛出一条错误： {代码...} Google一下，发现一个解决方案 {代码...} 接着，再link操作即可： {代码...} 完成后，就可以成功运行n...

一些情况下，我们希望网页可以直接向桌面推送消息。本文利用 HTML5 的 Web Notifications API 来展示具体的代码该如何编写，同时来看一看这个特性在各个浏览器上的兼容性如何。

在一个较大的样式表中,可能会有很多条规则都选择同一个元素的同一个属性。比 如,一个带有类属性的段落,可能会被一条以标签名作选择符的规则选中并指定一 种字体,而另一条以该段落的类名作选择符的规则却会给它指定另一种字体。我们 知道,字体属性在任意时刻都只能应用一种设定,那此时该应用哪种字体呢?为解 决类似的冲突...

浮动元素脱离了文档流,其父元素也看不到它了,因而也不会包围它。这种情况有 时候并非我们想要的,下面向大家传授三种围住浮动子元素的方法。记住,这三种 方法你都得掌握,这样才能审时度势,选择最合适的一种。

网关（gateway）是一种特殊的服务器，作为其他服务器的中间实体使用。通常用于将HTTP流量转换为其他的协议。网关接受请求时就好像自己是资源端服务器一样。客户端可能并不知道自己正在与一个网关进行通信。 例如，一个HTTP/FTP网关会通过HTTP请求接受对FTP URI的请求，但通过FTP协议来获取文档。得到的文档会被封装成一...

可以看到，VO类中只包含getter和setter方法。定义完VO类之后，接下来定义一个DatebaseConnection类，用来完成数据库的打开及关闭操作。

问题重现 在编写一个表单文件时，由于我考虑到表单中没有敏感数据，于是使用了get的方式来提交表单。 {代码...} 其中emp_insert_do.jsp这个文件正确的设置了编码： request.setCharacterEncoding("utf-8"); 但是真正存入到数据库中的汉字是乱码。 问题分析 对于表单中POST方式提交的数据，只要在接收数据的JSP中正确设置...

参考：5 useful jquery tricks you should know 1.禁用鼠标右键 {代码...} 2.让内容闪烁起来 {代码...} 3.DOM加载完成的简写形式 {代码...} 4.探测浏览器 {代码...} 5.判断元素是否存在 {代码...}

Servlet（服务端小程序）是使用Java语言编写的服务端小程序，可以用于生成动态的Web页面。 Servlet处理的基本流程 客户端通过HTTP提出请求。 Web服务器接受该请求并将其发送给Servlet。如果这个Servlet还没有被加载，Web服务器会将它加载到Java虚拟机并执行它。 Servlet程序将接收该HTTP请求并执行某种处理。 Servlet会...

大家都知道css里面用text-align:center加上margin:0 auto就可以实现水平居中了，但是垂直居中却没有相应的css属性来设置，而如果要设置元素能够垂直居中必须得将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。