Espresso，mac下强大的web开发IDE，最近升级到1.1，增加了不少新功能。
试过不少编辑器，最终还是选择了espresso来写页面，因为他最像神器textmate。类似textmate一般干净的界面和主题，不断增加中的sugar(扩展)，完美支持中文，更能导入textmate的bundle为我所用！这些优点和轻量的感觉，使得写页面这种枯燥的事情也变得鲜活乐趣起来。
这次增加的功能不少是重要更新，类似”Find in Project”，”Image Preview”，”Open with”，都使得工作流更加集成。
在一个界面端完成所有要紧事，这恐怕是你我这样的懒人最期望的事情。
是不是觉得每天都敲同样的html代码有点麻木？ok，那就让css代我们生成优雅的代码和排版吧。让我们专心做其他更重要的事。
这就是Zen Coding所能做的。Zen Coding是一套快速编写html/css的工具，语法简单至极，实现的效果却有点惊人。利用css的书写规则来创建html，想像一下这有多便利吧，尤其是列表、小模块，这简直太棒了！
演示视频
简单的例子
1 | div#content>h1+p |
上面这一行的输出结果
1 2 3 4 | <div id="content"> <h1></h1> <p></p> </div> |
更多语法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | * E Element name (div, p); * E#id Element with identifier (div#content, p#intro, span#error); * E.class Element with classes (div.header, p.error.critial). You can combine classes and IDs, too: div#content.column.width; * E>N Child element (div>p, div#footer>p>span); * E+N Sibling element (h1+p, div#header+div#content+div#footer); * E*N Element multiplication (ul#nav>li*5>a); * E$*N Item numbering (ul#nav>li.item-$*5); |
上手很简单，多看几个例子就ok，或者在demo尝试一下，online demo。
Zen Coding支持的IDE众多，包括textmate和espresso，可以作为插件安装到我们最熟悉的IDE上。Ok, let’s speed up!
用Data URIs来嵌入image的好处是能减少连接数，更少的连接数意味着更快的访问速度，和更低的服务器负载。
Rob Flaherty作了一个 Data URIs for css images的测试，将一个页面做成三个版本，分别对比他们的加载情况：
结论：如预期般的，加载时间c<b<a，但是效果并不明显， 具体情况见这里
把平常捣鼓的一些小玩意放在了lab中，经常更新。
经验很大程度上就是代码量的堆砌，轮子造出来了稍微修剪下就能应用，在细节上没有必要纠缠太多，快速实现，频繁迭代，不要让时间拖累了自己。
超长换行的字符串
在换行的地方加\
1 2 3 4 5 6 7 | var table = '<div class="table-form">\ <table>\ <tr>\ <td ><input type="button" value="关闭"></td>\ </tr>\ </table>\ </div>'; |
