十年前我还是个“孩子”，十年后我已有了自己的孩子；
十年前我还有足球还尽情的挥洒着汗水，十年后我只剩肚腩；
十年前我还像执行定时器一般的每月向着父母要着生活费，十年后我依然像执行定时器一般的按月还着不同的贷款；
十年前父母已有了皱纹，十年后已如刀刻般更深了；
十年前我还在他乡每逢佳节思念着故乡，十年后他乡已变故乡；
……
还记得我们为什么使用SCSS/LESS等CSS预处理器吗？我想很大一部分人是因为变量和嵌套语法。变量让我们可以很方便的去管理整个系统（网站）中的主题；嵌套语法则可以让我们更好的去组织和编写CSS代码，且让我们的样式文件有了最初始的命名空间或者说是作用域的概念（我们可以把某个模块的代码都放在一个唯一的container当中，这个container就是一个作用域）。至于如条件语句/函数这些特性，如果你不是去开发如Bootstrap/Element-ui 等这些库的样式，在常规的项目编程中通常用到的很少。
还记得我们为什么使用SCSS/LESS等CSS预处理器吗？我想很大一部分人是因为变量和嵌套语法。变量让我们可以很方便的去管理整个系统（网站）中的主题；嵌套语法则可以让我们更好的去组织和编写CSS代码，且让我们的样式文件有了最初始的命名空间或者说是作用域的概念（我们可以把某个模块的代码都放在一个唯一的container当中，这个container就是一个作用域）。至于如条件语句/函数这些特性，如果你不是去开发如Bootstrap/Element-ui 等这些库的样式，在常规的项目编程中通常用到的很少。
HTML5中有很多十分有趣的标签，相比于article/section等这些我们所熟知并且已经应用的标签，还有些标签或者因为兼容性，或者因为还处于草稿阶段而不那么为人所知。在使用Bootstrap/Element等UI组件时，常常看到某个标签上会应用一些如role="dialog"的不常见的属性，这是因为HTML语义化的需要。role属性主要供有障碍人士使用，作用是告诉如屏幕朗读程序等辅助程序当前元素所扮演的角色。由于HTML5标签本身已经实现了语义化，role属性不建议被添加。而对于一些老浏览器或者一些模拟元素（如div模拟dialog），role属性则应该被注明。Bootstrap中有很多注明了role属性的组件，而这些组件有一部分已经被HTML5所实现，并已经标签化，如dialog,progress等。当然，这些标签的原始样式各个浏览器不统一，并且可以说很简陋，对此，可以通过一些自定义CSS样式来进行优化。
特别说明：本文介绍的标签，目前兼容性都很差（虽然部分标签有对应的polyfill），仅供学习和了解，请勿用于生产环境。同时，DEMO仅限Chrome浏览器预览。
编程时我们往往拿到的是业务流程正确的业务说明文档或规范，但实际开发中却布满荆棘和例外情况，而这些例外中包含业务用例的例外，也包含技术上的例外。对于业务用例的例外我们别无它法，必须要求实施人员与用户共同提供合理的解决方案；而技术上的例外，则必须由我们码农们手刃之，而这也是我想记录的内容。
我打算分成《前端魔法堂——异常不仅仅是try/catch》和《前端魔法堂——调用栈，异常实例中的宝藏》两篇分别叙述内置/自定义异常类，捕获运行时异常/语法异常/网络请求异常/PromiseRejection事件，什么是调用栈和如何获取调用栈的相关信息。
是不是未出发就已经很期待呢？好吧，大家捉紧扶手，老司机要开车了^_^
知识需要积累。
打开有道云笔记，在前端目录中已经有约30多篇来自工作中，项目中或者书本中的知识点总结，大概看了一些，大部分都是JavaScript相关的知识点，css不多，这里筛选出一些来，按照时间顺序汇总分享出来。文章没有具体内容，也没有章节顺序，仅仅是一些知识点的碎片或者理论化的论点。时间跨度较长，可能有些知识已经过时或者本身总结过程中有错误或遗漏，请指正。
一直以来，CSS作为一种申明式的样式标记语言，很难像如javascript等命令式编程语言一样通过定义和使用变量的方式来维护和追踪某些状态。后来随着scss,less等CSS预处理器的出现，我们可以像优秀的开源框架bootstrap那样，通过维护一个_variables.scss变量文件的方式来维护一个庞大的项目。但预处理需要编译，并非CSS原生支持。而现在，我们可以在原生CSS中使用变量了！
最近在读《你不知道的javascript》系列图书，收获蛮大，感慨也挺多的。
是的，关于javascript，你不是不知道，而是真的不知道。🐶
就比如类型转换，从开始到看完到第二第三第N遍，我经历了如下的心路历程：
这有什么不知道的 → 一脸懵逼 → 有点意思 → 卧槽，怎么这样? → 原来是这样 → 靠，还是坑...
真可谓是不学不知道，一学吓一跳。
为了避免再次入坑，这里做个总结，不，了结。
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
Webpack 官网
Webpack 中文指南
前段时间写过一篇介绍简单音乐播放器效果开发的博文《为你的博客添加简单的CSS3音乐播放器》，实现了单曲循环播放效果，这个效果也是我的博客首页一直有的效果，同时文中也介绍了一些简单的HTML5 Audio标签的属性和方法，如 play() , paused()等。当然，之前的效果只适合诸如博客或者某个单页面（如专题页面）使用。而现在的可以称之为完整版的播放器弥补了之前的不足，增加了列表播放，音量控制，播放进度，播放时间以及播放模式，上一曲，下一曲等功能，除了歌词外，基本就是个播放器了（本来就是播放器）。
JavaScript的window对象对应着浏览器窗口本身，因此这个对象的属性和方法统称为BOM（浏览器对象模型），如window.open(),window.location等。
JavaScript的document对象是指文档对象模型，主要是处理网页内容。DOM（Document Object Model）即文档对象模型，是针对 HTML 和 XML 文档的 API 。字母D指document（文档），字母O指object（对象），字母指Model（模型）。DOM 描绘了一个层次化的节点树。节点表示一个连接点，文档是由节点构成的集合，DOM的节点主要分为三类：元素节点、文本节点（不是文本内容）、属性节点。
本文内容已过于陈旧，请以最新微信文档为准
本文并非是对微信JS-SDK说明文档的复制，而是通过一个简单的例子来更深入的了解使用微信JS-SDK，具体文档请参考官方说明文档《微信JS-SDK说明文档》。微信公众平台面向开发者开放微信内网页开发工具包（微信JS-SDK），通过微信JS-SDK提供的11类接口集，开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力，还可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
微信JS-SDK提供的11类接口（分享接口、图像接口、音频接口、智能接口、设备信息、界面操作、地理位置、微信扫一扫、微信小店、微信卡券、微信支付）在使用方式上完全相同，唯一需要注意的是，这11类接口并不是都开放的，有些接口非认证用户是没有权限的，比如分享接口，小店接口、卡券接口、支付接口则必须通过微信认证后才能使用。具体权限问题可参考你的接口权限表。
偶然间发现这篇文章，可以说，这是我见到的对移动rem单位做的最详细，最细心的一篇总结性文章，果断转载至本博客，以便有需要的同志们研究。
本文结合作者（流云诸葛）对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容较多，但对你的技术和工作一定有价值。
有网友@she在留言中询问本站音乐播放器如何实现，博客也好久没更新了，趁着清明放假有点时间，分享一下实现过程。这是一个很简单的播放器效果，界面主要利用CSS3的一些属性，如animation、translate、transform等，效果则利用Html5 Audio属性配合JS实现。播放器相对简洁且未实现列表播放、音量控制、歌词展示等相对复杂的功能，如需实现诸如酷狗音乐的播放器效果，请深入研究Audio。个人认为，该播放器足以满足博客等非音乐网站的需求。当然，诸如以往，以上包括这句都是废话：）
