手机网页用Bootstrap还是jQuery Mobile
许多开发者在为手机网页选型时纠结过这个问题：Bootstrap和jQuery Mobile，到底该用哪个？这篇讲的就是这两者的深度对比。 文章的核心观点很清晰：Bootstrap本质上是一个CSS框架，它解决的核心问题是跨设备的响应式布局和前端开发规范，通过Media Query让一套代码适应不同屏幕，并提供通用的UI组件如按钮、导航栏等。而jQuery Mobile则是一个更偏向移动端的WebAPP框架，它提供的是类似原生APP的组件（如手机导航栏、底部菜单）和丰富的页面转场效果，目标是让移动网页体验接近原生应用。 两者的适用场景也因此截然不同。如果你需要做一个同时在电脑和手机上都能良好展示的网站，或者构建后台管理系统，Bootstrap是更合适的选择。但如果你的项目是一个纯移动端的应用，并且希望给用户带来接近原生APP的交互体验，jQuery Mobile会更贴合需求。 文章也给出了一个务实的结论：对于追求产品级质量的WebAPP，这两个框架可能都力有不逮，自建响应式框架和组件库往往是最终的路径。
记一次淘宝首页奇葩的渲染问题
这篇讲的是一个藏在淘宝首页代码里的、只有在特定交互下才会现身的Chrome浏览器渲染Bug。 作者在维护首页时发现，鼠标滑过某个模块边界时，会出现诡异的渲染残影或错位。这个问题非常“娇气”，只在元素边界与瓦片边界重合时才可能触发，属于浏览器渲染引擎在处理层合并与瓦片栅格化时的计算漏洞。通过Chrome开发者工具的“显示层边框”功能，作者定位到了代表“缺失调整验证”的粉色块，这直接指向了引擎未正确处理元素边界增长后的瓦片重绘。 最实用的经验是，遇到这类难以复现的奇葩渲染问题，一个有效的“土办法”是为目标元素添加 `transform: translateZ(0)`。这行代码能强制浏览器为该元素创建独立的硬件加速渲染层，从而隔离问题，解决概率高达80%。这篇文章的价值不仅在于给出了一句修复代码，更在于完整展现了从现象发现、工具调试到引擎原理追踪的排查思路，为前端开发者解决同类疑难杂症提供了清晰的路径。
SVG精简压缩工具svgo简介和初体验
这篇从实际协作场景切入，探讨SVG文件精简的必要性。作者指出，设计师用Adobe Illustrator等工具导出的SVG常包含编辑器源信息、注释、默认值等冗余内容，使得文件过大且影响性能。前端开发者需要一种本地解决方案，而非依赖在线平台。 为此，文章介绍了svgo——一个基于Node.js的SVG优化工具，在GitHub上收获4000+星。它基于插件架构，提供一系列优化操作，比如移除文档声明、删除空属性、转换路径数据为更简洁形式、合并多个变换等。这些插件覆盖了从清理无用代码到智能压缩的全流程。 作者通过初体验展示了svgo的实用效果：能快速精简SVG文件，保留渲染结果的同时大幅减小体积。这不仅提升了项目加载效率，也促进了前端与设计师的协作分工，让前端专注于Web化处理。对于处理SVG的开发者来说，svgo是一个值得集成的工具。
近几年前端技术盘点以及 2016 年技术发展方向
这篇讲的是，作者从自身2012年入行经历出发，对2009至2015年间前端技术的演进逻辑做了一次系统梳理与展望。 文章并未停留在简单罗列，而是清晰勾勒出一条演进脉络：从早期jQuery等基础类库对浏览器差异的抹平与功能完善，到HTML5标准确立后对富应用与性能的关注，再到2013年后以Node.js、模块化、工程化工具链为标志的“大前端”生态构建。作者特别指出，技术革新的背后是Web从“网页”走向“应用”的根本诉求，以及浏览器标准化、移动端崛起、前后端分离等关键驱动力。 文中对关键转折点的分析很有见地，例如14年HTML5定稿与ES6落地共同推动了大型Web应用开发成为可能；15年React Native等框架的兴起，则标志着前端技术开始突破浏览器边界，向跨平台原生开发渗透。作者将2016年展望为“低版本IE消亡”和“前端工业化生产”深化的一年，并呼吁业界共同推动标准落地与生态进化。 这篇盘点将技术变迁置于具体的时间线与行业背景中，对理解前端技术的昨天、今天与明天提供了扎实的参考。
小谈inline-block的那点空隙
这篇文章从一个常见困惑出发：明明没设置边距，`inline-block` 元素间却总出现难看的空隙。作者首先点明问题根源在于 HTML 代码中的空白符（如换行、空格）被浏览器渲染成了可见间距。 在剖析了 `inline-block` 同时具备行级与块级特性的本质后，文章系统地介绍了几种解决方案。从需要牺牲代码结构的“彻底消除空白符”，到利用 CSS 特性但需注意浏览器兼容性的 `font-size:0` 方法，再到利用 `word-spacing` 和负 `margin` 的调整技巧，甚至探讨了去掉闭合标签这种“非常规手段”。每种方案都配有代码与效果图进行直观对比。 文章的价值不止于解决问题。它还对比了 `inline-block` 与 `float` 的适用场景：前者更适合需要文档流参与、利用 `text-align` 水平居中或实现垂直对齐的布局，而后者则可能脱离文档流影响周围元素。文末附带了深入阅读资源，为进一步学习提供了入口。
常用跨域方法实践（二）
这篇讲的是作者在《常用跨域方法实践》系列的第二篇中，深入介绍了document.domain、URL.hash、cross-fragment、window.name和postMessage这五种经典但相对“非主流”的跨域通信方案的具体实现。与依赖CORS或JSONP的常见方案不同，这些方法往往利用了浏览器的一些底层特性或历史遗留机制，解决特定场景下的问题。 例如，document.domain适用于具有相同父域名的子站点（如www和sample.myapp.com），通过修改这个属性即可实现内部应用的直接通信。URL.hash和其升级版cross-fragment，则利用了hash变化不触发页面刷新的特性，通过监听和修改iframe的hash值，甚至借助代理页面，实现了双向消息传递。作者为每种方式都提供了可运行的测试页面代码和效果演示，清晰地展示了从消息发送、监听到响应的完整流程。 文章不仅展示了如何“做”，也隐含了这些方案的适用边界与取舍：document.domain限于同父域；基于hash的方案虽然巧妙，但可能与其他业务逻辑中的hash使用产生冲突。对于理解浏览器安全模型的历史脉络，以及在特定约束下（如需兼容老旧环境或处理同父域子站通信）如何灵活选择技术方案，这些实践案例提供了非常扎实的参考。
常用跨域方法实践（一）
作者从阅读《跨终端Web》一书得到启发，重新梳理并实践了两种经典的前端跨域方案：JSONP与CORS。这篇文章详细拆解了两者的实现原理与代码细节。 对于JSONP，核心在于利用 `