Flickr Widget

不知什么时候 Flickr 改得找不到以前用过的 widget。直到后来才在官方论坛中看到人家的提问回答,到 http://www.flickr.com/badge.gne 上定制。以前用的是右面那个 flash 版本,动来动去的效果虽然还不错,不过会让人心烦。所以这回还是用 html 版本,选择 by-iphone 这个 set,随机显示三张,稍微修改了下 CSS,现如右侧所示。因为是用 iPhone 拍的,所以大小统一,看起来比较整齐。

IE 下 JavaScript 调试

本来在 FireFox 下用 FireBug 是一件很美好的事情。可绝大多数的项目都还需要在 IE 下面调试。开始的结果总是惨不忍睹。除了 CSS 要加很多 trick 之外,如果 JS 报错,就麻烦了。IE 只是很笼统地给出一些错误信息,给出一个内部的行号,字符位置和抛出的异常名称。很难在此基础上发现并解决实际的问题。就算用了 FireBug 的 Lite 版本,也好不到哪里去。只能靠经验摸索,恼人得很。

今看到 gugod 介绍 Jash 貌似不错的样子,有机会在接下来的工作中用用看。

Google Ads

Ubuntu 7.04 临近发布

于是上午还能很流畅地访问官方下载网址,到了下午三点的时候,已经开始丢掉了 CSS;而到了现在四五点的时候,已经几乎无法打开了。这不能不说是 Ubuntu 的巨大成功。

虽说我几乎每天都会升级,也到 shipit.ubuntu.com 定了 3 张光盘,但还是非常期盼可以用上正式的 7.04。

更新:
晚上看到有说已经放出了,可首页依然没有变。敢情是在这里:

http://releases.ubuntu.com/feisty/

晕。

WordPress Plugin: Preserve Code Formatting

以前我的 blog 里面很少出现 code 片段,那是因为 WordPress 默认情况下支持不好,而且我很懒,所以宁可什么也不做。

刚才安装了来自 coffee2code.com 的插件,貌似不错。我不喜欢在文章中语法高亮,以及什么行号,干净最好。

单此可用了,不过默认的编辑器上面的按钮只有 Code 没有 Pre 也没有 PreCode。于是编辑 /wp-includes/js/quicktags.js ,找到定义 code 按钮的那一行,照样画葫芦加了两个。回来再修订下 css ,这下满意了。

cookies.js

对于 Javascript ,并不算精通,不过常用的,或者说以前需要用的,基本上还是了解一点的。

刚才作公司的代理平台,有个菜单做成了点击展开(或者收起)的 JS 效果,这个简单,DOM + CSS 几分钟搞定。但如果展开后,跳转到别的页面的话,菜单又会恢复收起的默认状态。每次都要点开很麻烦,所以系统应该“记住”用户最后的状态,并保持下去,直到用户改变这个状态。

那么怎么“记住”呢?跟着表单提交?不现实,也未必每个连接都是表单。用 Ajax 在幕后提交到一个 action 然后保存到 $c->session 里面?我考,Ajax 看多了,用上繁复的技术绕上一圈,就为了保持一个简单的状态?Cookie! 最简单有效的办法我想就是用 Javascript 直接写 cookie 了。

我是懒人,所以 Google :Javascript Cookie 于是我发现了这个 cookies.js说明文档也很简单,符合我的风格。用法也很简单,一个 setCookie(name,value) ,一个 getCookie(name) ,只要预先 load 那个 cookies.js 库就可以了。当下放到开发环境中,三十秒搞定。至于 cookies.js 里面到底干些什么,我才不关心。拿来用就是了。除非接下来哪一天有新的需求,到时候再说。

比较欣赏如此简约实际的东西,不记下来有点可惜。

Backbase.com

这是一个了不起的公司,Backbase.com,看看它的宣传图片:

最后一个在跑动,一点都不为过。写完之前的一篇,再仔细读阅 backbase 的 Backbase_Community_Edition_3.0.1 中的内容,突然发现这就是我要的东西。Backbase 将 Ajax 等常用的 js 代码封装为 bpc.js ,然后还做好了很多 GUI 组件,诸如 tabbox, menu 等等。而你所要做的就是按照 BXML 的语法写一些完全兼容 XHTML 的代码,这些 BXML 标签加上一些属性,结合 js 和 css 定义,便呈现出动态丰富的 GUI 组件。其中还运用了 XPath,XLST 等技术,兼容大多的浏览器,做的非常专业,一般用得到的那些 widget 基本上都有了,从 communitity edition 的包里面就有 starterkits 等演示,不仅是 cool 而且还展示了将来的(现在?)web 应用系统的趋势。

说起 web 上的 GUI 组件,两年前尝试编写自助建站系统的时候,硬是用 html + js + 简单 css 写了几个小的 TT2 的模版文件,然后通过 TT2 的 wrapper 来拉进来,并给出参数,效果是出来了,维护成本和兼容性的问题就出来了,而且最终出来的页面也很大。当时作了 tabbox, tabmenu 等等, checkbox 也都换成了图片的形式,做的和 Mac 上一样,当时也算是非常得意地,因为也只需套用数据就可以,GUI 的逻辑由这个小的 tpl 完成。后来这个项目不了了之。

其后,更多地关注 XHTML + CSS 的 web 标准。从 A List Apart 上看了几篇文章,发现只需要 CSS 加上 JS 就可以做到很 cool 的效果,而且,数据表示也很简单清爽。喜欢 alistapart 是因为上面的文章作者很有创意,充分发掘和利用了现有的技术和特性,比如做 Tabbox, 就是两张对角图片,只要一张足够大,出来的效果就是平滑而美丽的,xhtml 代码却很简洁,只要定义 class 就可以。另外,比如 ul/li 这样的 list 也可以换成 tabbed menu 或者级联的菜单。当不同状态,某个地方背景变化,以前的做法是调用不同的图片,新的创意则是一张图片,不同状态使用 css 定位到不同位置,带来什么好处呢,不会有等待载入的延迟。虽然很简单,不过确是革新的进步。

而现在细看了 backbase 则把这些充分运用,很多地方的思路和上面的并无二致,只是他们把这些都封装的让你可以更容易的使用。常用的一些 GUI 组件都给你做好了,你只要大致看一下例子便可以拿来就用,而无非是写一些 class , attribute 或者换几张图片而已。backbase 还充分运用了 XML 和 XPath, XLST 等技术。这群人的底蕴一定都非常深厚了,想想自己相比之下,小巫都没资格。

backbase.com 的站点里面还有些业界或者学术的讨论研究文章,花点时间阅读非常有裨益。还有些介绍 backbase 的技术结构框架

接下来还要花些时间好好消化研究。

不用图片实现圆弧边角的背景框

如果给你这个课题,你会怎么解决?我想不到。以前很自然的,用表格,四角用四张图片(圆弧边角)。虽然很麻烦,不过在 TT2 里面,把它封装为一个 tpl 文件,然后调用 Wrapper 指令,用起来也还算方便。

看看这里。上面有若干例子,看了就明白了。基本原理是先放置上下各四个 inline 特性的标签(为了简单,使用标签 b 而不是标签 span),然后对它们的定位,逐个缩近,并使用 overflow: hidden,使它们的顶角构成圆弧边缘的像素。那么看起来的效果就好像是个小圆弧了。

该文作者说道:“An idea is nothing more nor less than a new combination of old elements.” — 创意无非是已有事物的重新组合。这在本案例的形式上如此,思想上更是如此。