“跨终端的Web”是我为QConbeijing2013的前端专题定的主题。infoQ中文站发表了《从可编程到跨终端——QCon北京2013“跨终端的Web”专题出品人专访》中比较详细的解释了为什么，现在转一份过来，欢迎探讨。同时，今天在Twitter上发布征集讲师送价值4200元的门票一张的消息，欢迎自荐或推荐。1）优先送给选上讲师所对应的推荐者，2）如果没有讲师被选上，会送给第一个提交正式主题大纲的讲师所对应的推荐者。 阅读全文 »

经过2009到2010年全球领先的互联网企业Google、Apple、Facebook等等在HTML5上的大力推进和应用，今年在国内业界开始真正地热起来，4.10 QConBeijing2011的12个专题之一就是HTML5开发平台，4.18 由W3CTech主办的“拥抱HTML5” 又是国内业界另一个顶级的HTML5大会，这次的HTML5 in China是今年第3个关于HTML5的国内业界顶级会议，还有即将到来的7.9 D2前端技术论坛 也将会有部分HTML5相关的内容。在这么短的时间内国内组织了这多次和HTML5相关的大规模顶级会议，几乎涉及到国内所有最领先的互联网企业，从中可以看出HTML5的热度。

HTML5引起业界如此重视这是好事，但短时间内过热反而说明了业界对于HTML5的理解程度不够，这点和2005年言必称标准和ajax非常类似，等大家真正对标准和ajax深刻理解并应用到生产实践的时候反而在谈论的是利用标准和ajax成就了某项产品而不仅仅是技术本身，HTML5也正经历这样一个过程。现在最热的讨论之一就是在移动平台上使用原生开发还是使用HTML5，如果只是讨论两者的技术优势这个问题估计永远没有答案，因为我们的目标真的不是那种技术更好，而是哪种技术更能适合我们用来快速的解决用户的需求，一个复杂游戏比如极品飞车当然用HTML5来做当然不是最佳的方案，但类似Google Reader之类数据展现性和简单交互的应用当然用HTML5开发比较好，其实如果你稍加留意就连Apple自己的App Store这个应用的本身就是用HTML5开发的。本次会议前面有两位同学介绍使用phoneGap + HTML5来重构新浪微博的iPad客户端，两个人利用一周的业余时间大致实现了这个iPad客户端的全平台覆盖（Web、Mobile Web、Android、iPhone和iPad），我想新浪微博的同学看到这个应该会有一些不一样的感触吧。

我把这次每张幻灯片要讲的内容都写到幻灯片的注释中，有兴趣的同学可以对照看会更明白一些，同时也在blog中列出每张幻灯片要讲的内容。另外，几乎每张幻灯片的后面都了一两个链接，这些链接很多都非常精彩，强烈推荐大家看看。

阅读全文 »

在《JavaScript语言精粹》的第72页有这样一段：

用正则表达式字面量创建的RegExp对象来共享同一个单实例：
function make_a_matcher(  ) {
    return /a/gi;
}

var x = make_a_matcher(  );
var y = make_a_matcher(  );

// 注意：x 和 y 是同一个对象！

x.lastIndex = 10;

document.writeln(y.lastIndex);    // 10

当你在浏览器中运行这段代码时，你会发现IE6-IE9、FireFox4、Chrome10、Safari5输出都是0，Firefox 3.6.16输出是10，原因可以在ECMAScript5规范第24页和第247页找到：

阅读全文 »

Web性能优化最佳实践中最重要的一条是减少HTTP请求，它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射（Image Map）和使用Data URI来编码图片。CSS Sprites和图像映射现在已经随处可见了，但由于IE6和IE7不支持Data URI以及性能问题，这项技术尚未大量使用。目前大部分网页中的JavaScript和CSS文件数量和开发时一致，少量的网页会根据实际情况采取本地合并，这些合并中相当多的是有选择地手动完成，每次新的合并都需要重新在本地完成并上传到服务器，比较的随意和繁琐，同样文件的压缩也有类似的情况。而利用服务端的合并和压缩，我们就可以按照开发的逻辑尽可能让文件的颗粒度变小，利用网页中URL的规则来自动实现文件的合并和压缩，这会相当的灵活和高效。

阅读全文 »

Apache的Mode Rewrite模块提供了一个基于正则表达式分析器的重写引擎来实时重写URL请求。在大多数情况下，它和.htaccess文件配合使用。比如本篇文章的URL（http://dancewithnet.com/2010/05/29/making-mod-rewrite-and-htaccess-work-on-mac-os-x）就是Wordpress配合Mod Rewrite模块和.htaccess文件一起实现的，即所谓的固定链接（Permalinks）。

阅读全文 »

Mac OS X 内置Apache 和 PHP，使用起来非常方便。本文以Mac OS X 10.6.3和 10.8.1为例。主要内容包括：

1. 启动Apache
2. 运行PHP
3. 安装MySQL
4. 使用phpMyAdmin
5. 配置PHP的MCrypt扩展库
6. 设置虚拟主机

启动Apache

有两种方法：

1. 打开“系统设置偏好（System Preferences）” -> “共享（Sharing）” -> “Web共享（Web Sharing）”。注意，从Mac OS X从10.8开始取消了 “Web共享（Web Sharing）”。
2. 打开“终端（terminal）”，然后（注意，sudo需要的密码就是系统的root帐号密码）
   1. 运行“sudo apachectl start”，再输入帐号密码，这样Apache就运行了。
   2. 运行“sudo apachectl －v”，你会看到Mac OS X的Apache版本信息，如10.8.1中：

      Server version: Apache/2.2.22 (Unix)
      Server built:   Jun 20 2012 13:57:09
      

如此在浏览器中输入“http://localhost”，就可以看到一个内容为“It works!”的页面，其位于“/Library（资源库）/WebServer/Documents/”下，这就是Apache的默认根目录。

阅读全文 »

经过大半年的努力和等待，口碑网前端团队5位成员共同翻译的《高性能网站建设进阶指南（Even Faster Web Sites）：Web开发者性能优化最佳实践》终于面市了。翻译的过程本身就是学习的过程，又经过了在口碑网的实践，我们深刻地感受到本书内容不仅和每个Web开发者的日常工作结合得非常紧密，而且对于每个开发者都有着重大的指导意义。在此，我们诚恳地向所有的Web开发者推荐本书，欢迎大家就本书内容进行交流、批评和指正。

本书的主要作者Steve Souders是《高性能网站建设指南（high Performance Web Sites）：前端工程师技能精髓》的作者，Web性能优化领域的权威，前Yahoo!首席性能工程师，现在Google负责Web性能和开源组织。他是Firebug的性能分析扩展YSlow的创建者，也是O’Reilly Web性能与运作会议Velocity的联合主席。通过他的个人网站http://stevesouders.com/能了解全球最新的Web性能动态和技术发展。

阅读全文 »

通常用户看到的页面的样式会受到三层控制，第一层是浏览器的默认样式，第二层是网页定义样式，第三层是用户自定义样式。和CSS一样，后面的优先级高于前面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。实际情况是虽然浏览器都或多或少提供了用户自定义样式的功能，但是极少数会有用户去自定义，一般用也是高级用户。而浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。

以后准备使用如下默认字体样式：

body{
  font: 12px/1.5 arial;
}

阅读全文 »

动态加载JavaScript文件和CSS资源为Web前端开发提供了巨大的灵活性，同时也实现了lazy load和按需加载，相比XMLHttpRequest而言其没有跨域的限制使其广泛应用。其基本原理是：在页面DOMReady后，利用JavaScript把指定文件路径的script和link元素插入到页面中，然后判断其加载状态再进行继续操作。

阅读全文 »

去年曾总结了《IE对CSS样式表的限制和解决方案》中限制的第4条写道“一个CSS文件的不能超过288kb？”，这是一个疑问句，当时没有重现出来且参考来自Internet Explorer CSS File Size Limit。今天终于看到了IE在CSS上的另一个限制：IE中每个style标签或css文件的选择符个数不能超过4095。其实style属性也应该有这个限制，但是几乎不可能发生。这个限制在IE6、IE7和IE8中存在。请看IE关于4095个选择符限制的DEMO。

阅读全文 »