响应式图片属性 srcset

srcset 属性是由 W3C 旗下的响应式图片社区提出的,目的是为不同分辨率的用户提供适合的图片大小的解决方案。之前只有 Safari 支持该属性,而现在刚刚发布的 Chrome 34 也开始支持。

srcset 设置起来很简单:

<h1><img alt="The Breakfast Combo"
    src="banner.jpeg"
    srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w">
</h1>

Continue reading

Chrome 开发工具 Javascript 调试技巧

一、Sources 面板介绍:

Sources 面板分为左中右 3 部分
左:Sources 当前页面加载的资源列表,Content scripts 是在 Web 页面内运行的 js 脚本资源列表,同常是开发调试插件时使用。
中:代码面板,这里展示选中的脚本代码。
右:执行控制面板,可以在这里查看、控制断点以及一些运行的详细信息。
Continue reading

Hybrid 应用开发选型

Hybrid App 是 Native App 和 Web App 混合开发的产物,它的原理是将 Web 页面嵌入到 Natvie App 的 WebView 中。因此它综合了 Native 和 Web 两种模式应用的优势,具有开发速度快,交互体验好,跨平台等优点。但它也有自己的软肋,就是性能受到系统浏览器内核的影响,因为 WebView 中的界面渲染及交互都是 Web 来实现,而 Web 渲染性能依赖系统内置浏览器,所以该技术的使用必须要有合适的场景。目前混合应用实现方案包括两种:
Continue reading

Squirrel 前端 Web 框架

很长时间没有写博客了,因为绝大部分业余时间都投入到 Squirrel 前端框架的开发中。Squirrel 是一个轻量级的移动 Web 前端框架,目的是打造一个简单易用、易扩展的基础框架,让前端脱离枯燥的重复开发,从而快速构建移动 Web 应用。之所以命名为 Squirrel 一方面是因为松鼠是公司的吉祥物,另一方面是寓意快速、灵活。
Continue reading