岁月如歌

KISSY 是淘宝新一代前端 UI 类库，陆陆续续经过大半年的开发，终于完成了核心部分。KISSY 借鉴了 YUI3 的代码组织思想，尝试融合 jQuery/YUI2/ExtJS 等类库的优点。目前才刚起步，下面是相关话题：

为什么要开发 KISSY

这是经常被质疑的一个问题。请先看个 ppt, 或许能解答你的疑惑：前端_UI_类库_KISSY_赛马竞标书.pptx

KISSY Core Preview

ks-core 包括 kissy, dom, event 三个核心模块，文档地址：docs

开发文件存放在 src 目录，欢迎感兴趣的同行 review code 并给出宝贵的意见。
部署版本在 build/packages 目录，可以在页面中直接引用 ks-core-min.js 文件。
此外，cssreset, cssgrids, csscommon 模块也都已添加正式文档，欢迎给出建议。

文档写得比较匆忙，尚未达到预期。如果你对如何将文档书写得更有趣易读有任何好的想法，千万别吝啬，非常欢迎你的参与。

源码和授权

淘宝是一家开放的公司，我们一直期望能为开源社区贡献力量。KISSY 是完全免费的，基于 MIT 协议，代码在 google code 上维护。

源码地址：http://kissy.googlecode.com/

相信开源能让 KISSY 走向卓越！

昨天有幸邀请到周爱民先生在懒懒交流会上分享《前端，架构、框架和库》，很精彩睿智的讲演，受益颇多。其中提到对架构的一个描述：

架构是把握问题的关键，平衡设计。

很认可。下面是我的理解：

1. 什么是把握？在武术届有一种器械训练方式是“抖大杆”：一条白蜡木做的大杆，杆长超过两米，训练者一手把杆，一手握住杆的底部，全身配合双手，将杆抖出各种样式。把和握是两个不同的动作，把的是方向，握的是基底。把握是一种掌控，武林高手能让大杆随心而动，随意而行，这就是把握。把握可以以把为主，以握为辅，随心所欲，花样百出。把握亦可以握为主，以把为辅，以气驭剑，天马行空。
2. 什么是问题？物理学家狄拉克有一个典故。有一天他到一个学校去演讲，讲完以后，主持人说：“大家有什么问题？可以问狄拉克教授。” 这时，有一个学生站起来说：“刚才你在黑板上写的那个方程式我不懂。” 狄拉克没有回答，好长时间都没有回答。于是主持人就问：“狄拉克教授，您可不可以回答这个问题呢？” 狄拉克说：“那不是一个问题。” 狄拉克为何拒绝回答？因为提问者看不懂方程式只是现象，而不是问题。什么是问题这个问题，推荐阅读杰拉尔德·温伯格的经典著作《你的灯还亮着吗 — 发现问题的真正所在》。
3. 什么是关键？关键的原始释义是门闩。关是关闭，把门合上，键指机械零件。放到现代，关键就是门上的锁。如何找出未知问题的关键所在？资深的盗墓者，遭遇一个前所未有的机关时，首先是观察，尽可能的获取信息。其次是分析，尽可能推断机关背后的机理。紧接着可能会联想和尝试，用已有的破解技巧，去尝试解决当前问题。反复以上步骤，不懈努力，等机关破解的那一刹那，盗墓者也就明白了该机关的关键所在。
4. 什么是平衡？Douglas 说，万事皆权衡。架构的好坏，是一个适不适合场景的问题。无论是类库的设计，还是某一行代码的书写方式，好坏与否，都要看这个类库或这行代码，使用在什么场景下。Google 首页可以省去 html 结束符，但并不意味着你的博客这么干也是妥当的。在前端界，table 布局也不是万恶不赦的。如果你的用户群里还有不少用户在使用非常旧式的浏览器，table 布局就是最合适的方式。

为了进一步阐释，下面举一个实例。
阅读全文 »

slideshare 在线观看：The Beauty Of Refactoring
ppt 下载：重构之美.pptx
src code：/trunk/src/widget-switchable

欢迎讨论交流。

双飞翼布局的由来：渐进增强式布局探讨（上）（下）

源码文件：grids.css
压缩版本：grids-min.css
合并版本：reset-grids-min.css
测试页面：grids-taobao.html

命名规则和样式生成工具：css-generator.html
阅读全文 »

源码文件：reset.css
压缩版本：reset-min.css
测试页面：test.html

更新说明：

1. 调整了字体和行高，请参见 三谈 Web 默认字体。
2. 将 h1 到 h3 的默认字号调整为 font-size: 100%;
3. 去掉了 tt, abbr, hr, q 的重置样式。原因是：tt, q 不推荐使用。hr 的差异，具体页面去负责。abbr 的默认样式在各浏览器下虽然有差异，但并不会带来问题，重置意义不大。
4. 加入了对 sup, sub 的重置样式。
5. 增加了 reset-post.css, 方便重置以大段文字展示为主的内容区块。测试页面：test-post.html

最后，贴一份代码：
阅读全文 »