webpack的配置文件并没有固定的命名，也没有固定的路径要求，如果你直接用webpack来执行编译，那么webpack默认读取的将是当前目录下的webpack.config.js

本系列文章主要介绍如何用webpack这一当前流行的构建工具来设计一个多页应用的架构。请注意，本文并非新手教程，着重点更多是在于提供解决问题的思路，而非手把手带你装逼。

由于目前各浏览器对ES6兼容性较低，再加上需要兼容历史上各种版本的浏览器，因此，使用编译器将ES6语法转译成ES5语法则势在必行了。babel是目前最常用的ES6转ES5的工具，但即使是ES5，各浏览器的支持度也是不一的，因此便产生了本文，找出一些能够被翻译成兼容性高代码的ES6语法。

template string（模板字符串），至ES6，javascript终于也能直接往字符串里插变量了。这用途嘛，说大不大，说小也不小；虽说不能实现比较复杂的例如if/for等语句就不能说是一个完整的模板引擎，但起码以后拼字符串就不用老写连接符+了不是？

一直以来，我对ES6都不甚感兴趣，一是因为在生产环境中使用ES5已是处处碰壁，其次则是只当这ES6是语法糖不曾重视。只是最近学习react生态，用起babel来转换jsx之余，也不免碰到诸多用上ES6的教程、案例，因此便稍作学习。这一学习，便觉得这语法糖实在是甜，忍不住尝鲜，于是记录部分自觉对自己有用的方法在此。

前提本文讨论的是两列自适应布局：左列定宽/不定宽，右列自适应。虽然分这两种情况，但实际上不定宽的方案同样适用于定宽的场景，因此不定宽的方案泛用度更高。左列定宽，右列自适应margin + float {代码...} {代码...} 这个方法其实已经是兼顾到低版本IE的完善版本了，缺点是代码冗长，而且有两个关键知识点比较难理解...

inline-block是个很特殊的属性，既有inline文本的特性，又有block布局的特性；因此，用上inline-block，既可以让div像文本一样居中（text-align: center;），又不会影响div本身的宽高。这个方案有个缺陷，就是由于在parent上设置了text-align: center，因此child里的元素都会继承这个text-align: center，需要重新设置个...

javascript的Function中有不少不那么常用，又或者用了也是知其然而不知其所以然的属性/方法，本文就来谈谈这一系列属性/方法：caller/callee/apply/call/bind。

对Null使用typeof返回object，这跟我们的认知还是有一定差距的，这是javascript的一个设计上的bug，ECMAScript 6中有提议修改此bug，但已经被否决了；不过只要加个逻辑非!运算符，就能把Null这种情况给排除了。

与其它编程语言不一样的是，javascript的面向对象并非依赖于抽象的类，而是通过原型链，将一个个具体的对象实例进行连接，位于原型链下游的对象实例可以读取/使用位于上游的对象实例的属性/方法。下文由简及深，试图一步步理清javascript面向对象的本质。

本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！也许你会说，left/right以父元素的width为参照物好理解，但是top/bottom为什么也是以父元素的width为参照物的呢？网上众说纷纭，关键还是看W3C的规范：

文本方面的CSS内容不少，但只要是用过一下office word来编辑过文章的童鞋都能轻易理解其中的大部分。那么，今天仅仅来谈谈其中最复杂的部分——文本格式。

Emmet是一款文本编辑器/IDE的插件，用来快速生成复杂的HTML代码，只要掌握一些常用的语法（类似于CSS选择器），就可以减少重复编码的工作（主要是懒）。我个人惯用的是sublime，因此下文介绍的语法仅在sublime测试通过，不过其它平台应该也不会有什么出入。

与同为代码构筑的系统（例如残疾人士阅读器以及搜索引擎爬虫等）沟通，帮助其快速、准确达到目的。由于这类系统与人类的智能相比起来实在有限，因此需要协定好通过什么样的方式来进行沟通，而W3C的决议就是语义化HTML的标准了。

画布配置 虽然对于切图仔来说，一般都是直接从设计师那接过PSD图，而不会自己新建一个画布，不过为了“教育”菜鸟设计师，还是需要知道一下的，嘿嘿。 有几个要注意的点： 网页设计中通通以像素(px)为单位。 目前主流屏幕的分辨率是1920*1080，因此宽度一般设为1920像素。 由于网页可以往下滚动，因此高度一般不限，大于10...

想当年，我做了一个新媒体网站项目（AIISPO，已下线）。跟普通资讯网站不一样的是，老板要求PC端前台的文章阅读模式一定得是瀑布流+模态框。瀑布流指的是以瀑布流的形式将文章罗列出来，而模态框则指的是点击瀑布流中代表文章的某个文块时，直接在当前页面弹出模态框来显示文章正文。

本文主要介绍一些本人在此之前不甚了解，但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下自己，在实际项目中多使用这些功能，尽快熟悉起来，提升自己的工作效率。

本文主要介绍一些本人在此之前不甚了解，但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下自己，在实际项目中多使用这些功能，尽快熟悉起来，提升自己的工作效率。

localstorage在浏览器的API有两个：localStorage和sessionStorage，存在于window对象中：localStorage对应window.localStorage，sessionStorage对应window.sessionStorage。localStorage和sessionStorage的区别主要是在于其生存期。

今天看了离线缓存(manifest)方面的资料，兴冲冲地就想给自己的网站用上。待我把代码都写好部署上服务器，并测试过OK的时候，在SegmentFault刷了一把manifest方面的问答，才发现这个大坑：manifest除了缓存manifest.appcache文件所指定的资源外，还必定会缓存当前的html页面。

本文主要介绍一些本人在此之前不甚了解，但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下自己，在实际项目中多使用这些功能，尽快熟悉起来，提升自己的工作效率。

很多年前，当我只知道photoshop有图层这个概念时，我就猜想，应该有一个功能能把这些图层都分别导出来才对呀。不过从今时今日来看，我的这个猜想还是比较超前的，因为知道photoshop cc版本才有了“自动切图”这一自动导出图层的功能。

chrome扩展其实有点像是一个打包编译好的app，如果加载到chrome里再调试，即使是未打包的状态也相当麻烦，每调试一次便要重新加载一次，由此，我想当比较方便的方法是，直接在浏览器中打开（推荐部署在本地服务器再打开），这样每改一个小地方，只要刷新一下浏览器，马上就能看到最新的结果了。

最近又鼓捣起两年前做的一个chrome扩展，想要跑起来却发现报错了，看了下console，首先是indexedDB报错，说是window.webkitIndexedDB已经被废弃了，用window.indexedDB代替后，就没再报错了，看来我这chrome 46的indexedDB api只是改了个更通用的名称，还是比较厚道的，所以，这里就不详述了。真正出问题的是桌面通知，c...

这里向大家推荐两个网站：caniuse.com以及html5test.com，大家在使用新技术前，可以在这两个网站上看看浏览器的支持情况，看看自己能不能接受，同时也考虑一下能不能优雅降级。

这个属性用来开启或关闭表单的“自动完成”功能（属性值为"on"表示开启，为"off"表示关闭），不填的话就看浏览器的默认值了。在我的经验中，往往更多是利用autocomplete="off"来关闭“自动完成”的，因为有一些跟安全相关的字段（例如账号、邮箱地址等），是不希望透露给第三者知道的。autocomplete属性适用于 <form> ...

输入方式：对比起以前只能用键盘敲的input:text，现在已经有调用日历/时钟的，有调用调色板的，有拉滑动条的……总体来说就是让你可以更懒更准确地进行输入。

以往的一个form表单，结构比较死板，所有的form元素都必须处在<form>和</form>之间才有效，这会造成一些麻烦，比如说：像bootstrap这种使用<div>来控制布局的框架，<form>放在哪都很尴尬；另外，目前的web 2.0，UI比较丰富，为了布局或其它的原因，表单元素之间可能充斥着大量非表单相关的元素...

挖洋货这项目，因为没有公司的名头，也就无法备案，所以前端机放在阿里云香港ECS，另配一台阿里云杭州ECS来跑crontab——执行爬虫、保存图片到阿里云OSS等。最近觉得杭州ECS有点多余了（原本还有个杭州RDS的，统一搬到香港RDS了），打算撤掉，就把杭州ECS上的crontab全部搬回香港ECS来跑，这下就引发不少问题了。引发什么...

DataURL是一种对文件进行编码，并将编码后的内容嵌入及呈现在另一个文件中的规范/协议。目前DataURL用得最多的领域是把图片文件转化成DataURL（此时，这个DataURL就是这个图片的所有内容）并在网页上利用<img>直接输出，而非给<img>指定文件路径让浏览器另行下载。