支付宝UED的鸽子同学制作了一个Firefox插件，它可以用来快速实时编辑网页代码，快速基于Firefox制作Demo页面，方便的编辑修改CSS Sprite，以及配合Fiddler调试页面，是一个很不错的前端开发助手。

Firefox版本

该插件基于Firebug，所以安装前请确保已经安装Firebug。

一些主要特性；

• 即时编辑——即改即现，把Firefox打造成超强网页编辑器；
• 与Fiddler一起使用，快速调试线上网页，HTML代码快速生成；
• 刷新CSS，DOM不刷新；
• 禁用单个CSS样式；
• CSS Sprites位置快速设定；
• 保持Session不过期；
• 导出任意节点为PNG图片；

More »

在今天的设计中，排版常常被忽视，特别是被网页设计师忽视。这真是件遗憾的事情因为CSS可以做很多事情来控制我们的排版。也就是说，我们被局限于某些“网络安全”排版，但是我们不应该限制我们自己的创造性。本文整理了一些用于在网页上排版的CSS技巧。

Font属性

CSS提供了font属性，它允许我们在我们的页面中调整文字。这是一系列的关于语法和如何使用CSS调整文字的概述。

Font-size

使用font-size可以修改你的文字的大小。

1
2
3

font-size: 1.2em;
font-size: 12px;
font-size: 10pt;

预览

1. 文字大小为1.2em.
2. 文字大小为12px.
3. 文字大小为10pt.

PS:关于font-size，推荐一下码头写的《http://www.css88.com/archives/821》

Font-weight

该属性用来改变你的文字的粗细(比如bold, bolder)

More »

先前有介绍过一个超级快速写HTML代码的插件，专门发布了博文牛x无敌！！！Zen-Coding-一种快速编写htmlcss代码的方法

下面是是从前端复制过来的Zen Coding的资源链接

1. zen coding前些天升级到了0.6版本，新增了几项小功能，这里不再赘述，感兴趣的同学可以更新自己用的相应的插件；
2. zen coding官方有个速查手册(PDF)，很全面，严重推荐；
3. zen coding刚刚发布了 notepad++插件；
4. 这里有个非官方的VIM插件：http://github.com/mattn/zencoding-vim (多谢 @kejunz 的分享)
5. 使用UltraEdit的同学可以看一下 @ytzong写的《在UlrtraEdit中配置Zen Coding》教程；
6. 使用EditPlus的同学可以看一下这个《zencoding(HTML) for EditPlus v1.0》
7. zen coding的dreamweaver插件安装教程http://www.qianduan.net/zen-coding-for-dreamweaver-plug-in-tutorial.html:

CSS3 Please一个在线生成跨浏览器的CSS3代码的网站，现在支持的CSS 3属性有圆角、阴影、渐变、自定义字体、旋转、rgba色彩。

点击属性值直接修改就可以及时预览。toggle rule on和toggle rule off按钮可以启用或禁用某个属性。

事实上，现在支持这些CSS3属性的浏览器大都没有完全的支持W3C标准属性，而是采用自己的私有属性，这显然增加了开发的复杂度，也给将来的维护带来一些不确定性。不过貌似chrome dev版开始支持原生的border-radius了。

点击进入：http://css3please.com/

出版商: Oreilly | ISBN: 0596805780 | 2010年1月  | PDF | 192页 | 2.8 Mb

It’s a fact: if you know HTML, CSS, and JavaScript, you already have the tools you need to develop your own iPhone apps. With this book, you’ll learn how to use these open source web technologies to design and build apps for the iPhone and iPod Touch on the platform of your choice-without using Objective-C or Cocoa.

More »

今天MeePlace被报了IE7的BUG，郁闷！

介绍几个IE下的调试工具，需穿墙下载。
Companion.JS 这是一个IE下的JS调试工具，就像Firebug

http://www.my-debugbar.com/wiki/CompanionJS/Installing

DebugBar 这是IE的一个工具条，可以显示DOM，HTTP请求等

http://www.debugbar.com/

IETester 多窗口，多版本的IE

http://www.my-debugbar.com/wiki/IETester/HomePage

还是那一句：I hate IE !!!

Google Chrome浏览器跟火狐浏览器一 样，可以通过使用扩展来增强浏览器的功能。如果你是一位网页开发 者，Google Chrome内置的开发者工具会让你的工作轻松不少。但是除此之外，Chrome浏览器上也有众多扩展给你提供不少工具，供你使用。扩展有一个最大好处， 那就是它可以让你不用切换到其他应用程序就可以完成一些任务。这种不用切换就能完成某些任务的特性可以让你节省不少时间。

注意：如果你在下载Chrome扩展时遇到问题，请打开C:Windows\System32\drivers\etc下的host文件，在其中添加一行：74.125.47.139 clients2.google.com 即可。

下 面就是13个你会觉得有用的Chrome浏览器扩展。

拾色器

拾色器可以让你获取任何颜色的Hex和RGB值！你也可以调整 颜色的色调，饱和度和颜色平衡。
More »

UED全称User Experience Design，中文叫“用户体验设计”。
UXD全称User eXperience Design，中文叫“用户体验设计”。

显然这两个词还是一回事情，但要比UE迟的多。最早我在2005年底从Yahoo那边了解的，大概2006年听到同行普遍提起，同年9月份“淘宝UED”团队博客建立之后，才被大家熟知。但中国互联网公司最早成立部门研究“用户体验”的不是淘宝，而是百度，当时就叫“用户体验部”，后来才被同化的UED。大概在2005年已经有30人左右成型的团队（用户体验部总监郭宇，于2004年11月加入百度）。

首先UED这个词来自海外，但在海外除Yahoo很少有公司提起。如前文所述，老外并不习惯叫UE，所以理论上描述“用户体验设计”的缩写不应该是UED，而是UXD。确实也有UXD的说法，但只偶尔在某些海外网站上见到，同行心目中的认知程度不高。

再仔细推敲，其实不难发现，UED这个词有误。因为“用户体验设计”的说法本身有问题，UE并不能通过Design完全解决，通常Design涉及的只是UE比较表层的Experience需求。事实上，海外公司普遍都叫“UX团队”，也没有“UED团队”的说法。

而UED来到中国后，反而成为主流论调，得到广大公司的认可。可见与UE类似，UED也具有很浓的本地化色彩。在进入用户体验执行层面之后，很多同行/公司的第一反应，是要有这样的一个人，或者有这样的一个团队。因此才有了“UE工程师、UE设计师”和“UED部门”类似的称谓。

早期UED部门设立的职能职位主要有用户研究、交互设计、视觉设计，慢慢后来加入前端开发、界面设计等，某些甚至把产品经理也划入其内。具体叫法五花八门、千奇百怪。有个重要差异值得探讨，关于“工程师、设计师”的区别，根据理论推敲，既然UE是个非理性话题，不似Usability那样有逻辑可以遵循，有标准可以执行，所以我认为偏重“感性”的用户体验应该更靠近“设计”。
More »

最近在为MeePlace 2.7的后台编写多选功能。在一个接一个的版本中，MeePlace的后台是越来越强大了（不够谦虚，hoho），后台采用纯ajax异步（有的时候觉得编程会有点麻烦，但是从1.0开始就是这样的后台，现在要改的话也麻烦，况且AJAX能给用户带来更好的体验，就继续开发吧：D）

这次后台增加的功能中，有一个是能够多选/全选项目，这个已经是历史遗留问题了，在我所有开发的项目中都是用这套自己开发的后台系统，改一改就成。这次布莱恩吧multi-selectable列在了Milestone里，所以就写了。以前有做过多选，不过由于是原始form的post，所以比较简单。这次用AJAX的后台多选操作，我还是想了一下才开始动手的。

我的想法是，通过遍历checkbox，来得到有被选定了的checkbox的value，然后再传给后端进行多选处理。

下面公开MeePlace的这部分代码。

全选按钮。用户点击全选的那个checkbox后，checkbox的onclick=”select_item_all(this,”allitem”,”childitem”)”
其中”allitem”是全选的checkbox的classname，因为也许这个全选会出现两个，或者更多，比如表头和表尾各一。
“childitem”是所有的条目前的checkbox的classname。
JS代码：
More »

一、父窗口调用iframe子窗口方法

1、HTML语法：<iframe name=”myFrame” src=”child.html”></iframe>

2、父窗口调用子窗口：myFrame.window.functionName();

3、子窗品调用父窗口：parent.functionName();

简单地说,也就是在子窗口中调用的变量或函数前加个parent. 就行

4、父窗口页面源码：
More »