某日，天空飘来集成第三方微信登录/注册功能的需求，业务侧轻飘飘的一笔带过，表示这个需求很简单，点击登录，就 ok 了。笔者满脸黑线的表示这个功能想做的好，没有用户吐槽的话，需要考虑的情况非常多。以下便是笔者对该功能的需求分析。因文字描述达不到非常清晰地解释，所以以流程图的方式表示。

某日，同事 J 说发现一个奇怪的现象：一个列表页，在 iPhone7 竖屏上字体大小正常，横屏的时候有些字体就变的特别大。本文便是笔者对这一 “bug” 的分析过程。

目前主流的前端框架在开发的时候都采用最新的 ES6+ 语法，大部分的向下兼容工作都交给了 Babel 来处理。通过引入 Babel 插件，我们可以大胆地使用最新或是正在起草中，甚至是根本不在标准中的 jsx 等语法，跟甚至是你自己胡诌的写法！

本文将带大家了解 Babel 是怎么工作的、Babel 插件是怎么工作又是怎么编写的，并写一个与 webpack 集成的最简单的 Babel 插件。

媒体查询 @media

我们开发一个网站的时候希望在手机端、iPad 端、PC 端都有良好的体验，CSS 给我们提供了一个强大的条件判断语法，可以根据设备的宽度来设置不同的样式，从而实现不同的设备应用不同的布局。

下图展示了利用 @media 实现的同一页面手机端 2 列、iPad 端 3 列、PC 端 4 列的布局。

我们有的时候想查看 Video/Audio 之类的原生控件里面有哪些 DOM 结构或者 CSS 是怎么写的，但是审核元素的时候却看不到里面的结构，那么有没有什么办法看到呢？Chrome 为我们提供了开关 Settings|Preferences -> Elements -> Show user agent shadow DOM，开启之后就能看到隐藏 DOM 了。