Apr 2, 2011

IE的CSS相关的BUG(转载)

  • CSS
  • Browser
  • IE
  • IE6
  • IE7
  • IE8
  • IE BUT

译文地址:

http://coolshell.cn/articles/1245.html

这个网页(

http://haslayout.net/css/index)上例举了所有的IE和CSS相关的BUG。如果你在开发网页的时候,你需要看看。目前,这个网站上包含了

28 个“普通的Bug”

4 个“布局方面的Bug”

6 个“可以绕开的Bug”

以及

1 个“IE崩溃的Bug”

,所有的这些Bug有39个指南和48个解决方法。这个列表目前更新到

2009年8月11日,19:50:22

下面是所有的bug列表,你可以点击每个BUG名的链接查看更详细的说明。

普通Bug

这部分

IE 的 bug 是比较普通的无法归到其它种类,或是同时属于多个种类的Bug。

名称

IE的版本

描述Hover White Background Ignore Bug

IE7

background 不会因为 :hover而改变IE7 Child Selector Comment Bug

IE7

一个 selector 包含了一个子的selector,如果后面跟着一个注释,则会被完全忽略。Star HTML Bug

IE6

IE6

!important 关键字会忽略,如果有相同的属性被设置了PNG Image and Background Color Mismatch

IE8 及以下版本

背景颜色和指定的图片的颜色不一致。而他们本来是一致的。IE认为这是他一个Feature。太可笑了。No Auto Margin Center Pseudo-Bug

IE8 及以下版本

如果把margins 设置成 auto ,IE不会把组件放置在中间的位置。所有的浏览器都会,只有IE不会。:first-line !important Rule Ignore Bug

IE8

如果在伪class :first-line 内使用!important,那么其所有定义会被忽略。:first-letter Ignore Bug

IE6

整个:first-letter 的属性定义会被除数完全忽略。:first-letter !important Rule Ignore Bug

IE8

如果在伪class :first-letter内使用!important,那么其所有定义会被忽略。Partial Click Bug v2

IE8以

设置了整个区域是可以点击的,但在IE中只有文本可以点击。Staircase Bug

below IE8

浮动的元素排序起来就像一个楼梯。Disappearing List Background Bug

IE6

B <li>, <dt>, <dd> 没有背景。noscript Ghost Bug

IE8 and below

Mar 21, 2011

每个开发人员都应该了解的几款jQuery插件

  • 前端
  • jQuery
  • 插件

##Creative Radical Web Typography

##New FancyMoves Jquery Product Slider

##Jquery Space Gallery

##Fancy Thumbnail Hover Effect

##Jquery Inline Form Validation

##Site Switcher

##AnythingSlider

##Jquery Tooltip Coda Bubble

##Jquery Upload and Crop Image

##jQuery Carts

##Twitter-like login box

##Polaroid Photo Viewer

##jquery Hover Sub Tag Cloud

##Graph Visualization

##Show/Hide Jquery Panel

##Drop Down with CSS and jQuery

##Quick & Easy Zooming With jQuery – Zoomy

##Horizontal Accordions

##Flexible Rating

原文:

http://www.topdesignmag.com/20-useful-jquery-plugins-every-developer-should-know-about/

Mar 20, 2011

软件编程21法则(转载)

  • 软件
  • 编程

任何一个有经验的程序员都知道,软件开发遵循着一些不成文的法则。然而,如果你不遵循这些法则也并不意味着会受到惩罚;相反,有时你还会获得意外的好处。下面的就是软件编程中的21条法则:

  1. 任何程序一旦部署即显陈旧。

  2. 修改需求规范来适应程序比反过来做更容易。

  3. 一个程序如果很有用,那它注定要被改掉。

  4. 一个程序如果没用,那它一定会有很好的文档。

  5. 任何程序里都仅仅只有10%的代码会被执行到。

  6. 软件会一直膨胀到耗尽所有资源为止。

  7. 任何一个有点价值的程序里都会有至少一个bug。

  8. 原型完美的程度跟审视的人数成反比,反比值会随着涉及的资金数增大。

  9. 软件直到被变成产品运行至少6个月后,它最严重的问题才会被发现。

  1. 无法检测到的错误的形式无限多样,而能被检测到的正好相反,被定义了的十分有限。

  2. 修复一个错误所需要投入的努力会随着时间成指数级增加。

  3. 软件的复杂度会一直增加,直到超出维护这个程序的人的承受能力。

  4. 任何自己的程序,几个月不看,形同其他人写的。

  5. 任何一个小程序里面都有一个巨大的程序蠢蠢欲出。

  6. 编码开始的越早,花费的时间越长。

  7. 一个粗心的项目计划会让你多花3倍的时间去完成;一个细心的项目计划只会让你多花2倍的时间。

  8. 往大型项目里添加人手会使项目更延迟。

  9. 一个程序至少会完成90%,但永远完成不了超过95%。

  10. 如果你想麻烦被自动处理掉,你得到的是自动产生的麻烦。

  11. 开发一个傻瓜都会使用的软件,只有傻瓜愿意使用它。

  12. 用户不会真正的知道要在软件里做些什么,除非使用过。

Mar 20, 2011

改良程序的11技巧(转载)

  • 技巧
  • 程序

有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点,程序你只写一次,但以后会无数次的阅读。当你第二天回头来看你的代码

时,你就要开始阅读它了。当你把代码拿给其他人看时,他必须阅读你的代码。因此,在编写时多花一点时间,你会在阅读它时节省大量的时间。

让我们看一些基本的编程技巧: 1. 尽量保持方法简短

 2. 永远永远不要把同一个变量用于多个不同的目的

 3. 使用自描述的变量名和方法名

 4. 尽可能的把变量定义在靠近使用它的地方

 5. 拒绝神秘数字

 6. 友好的对待你的语言

 7. 不要逆常规而行

 8. 警惕过早优化

 9. 积极重构测试过的程序

  1. 不要过度沉迷于技巧

  2. 通过习例学习新知现在,让我们把每个小点展开来详细讲一下。

###1. 尽量保持方法简短

尽管很多人都遵循这个规则,但它仍然非常的重要。你写的方法要始终能在一个屏幕里放得下。如果你需要去滚动屏幕,这会分散你的注意力,而且你看不到

整个的上下文。最佳长度是5-20行,这根据你的情况而定。当然,getters/setters

通常是一行代码的方法,但与其说它们是真正的方法,不如说它们只是存取工具。

###2. 永远永远不要把同一个变量用于多个不同的目的

一个变量应该始终只为一个目的服务。通过使变量常量化(C++里的

const, Java里的

final),使得编译器能够优化编译,而且使你的代码醒目表达

这个变量是不能改变的,你的程序的可读性会变得更好。

###3. 使用自描述的变量名和方法名

你的代码应该,对于任何人来说,只要看一眼就能知道是干嘛的。尽量不要用简写方式,除非有特殊的习惯,就像下面的:

src - source

pos - position

prev - previous

如果你认为描述性的名称并不是那么有价值,请对比一下

n, ns, nsisd 和

numTeamMembers, seatCount, numSeatsInStadium。

###4. 尽可能的把变量定义在靠近使用它的地方

盖房子时,你可不希望把锤子放到别人的院子里。你希望把它们放的离手头越近越好。定义变量也是同样的道理。

int foo = 3;

int bar = 5;

// 一大段使用“bar”的代码,

// 但没用到“foo”

// …

baz(foo);

这段代码可以简单的重构成

int bar = 5;

// 一大段使用“bar”的代码,

// 但没用到“foo”

// …

int foo = 3;

baz(foo);

当你把变量的声明和第一次用到它的地方间隔太远时(距离超过一个屏幕),这确实会成为一个问题。记住上下文关系会变得困难,你需要滚动屏幕去找哪来的这个变量。

###5. 拒绝神秘数字

当你要把什么东西跟一个常量值做比较时,记得

把这个值定义成常量。没有什么会比去猜测你的同事写的这样的代码更让人头疼的事了:

il < 4384

换个形式感觉如何?

inputLength < MAX_INPUT_LENGTH

###6. 友好的对待你的语言

学习新语言是一种很有乐趣的事情,你能学到一种新的完成任务的途径。当一个对一种语言已经很

专业的人去学习另一种语言时,会出现一种很大的负面效应。比如说你是一个Java开发者,试图去学习Ruby。你应该学会用Ruby的方式解决问题,而不是沿用Java的解决问题的思想。

当你需要重复5遍”Hello world!“时,在Java里,你可能会这样做:

for (int i = 0; i < 5; i++) {

System.out.println(“Hello world!”);

}

在Ruby里,你也许会禁不住这样写:

for i in (0..5)

puts “Hello world!”

end

这样看起来没问题,但有一个更好的方式:

5.times { puts “Hello world!” }

###7. 不要逆常规而行

每种语言都有自己不同的习俗约定。一般来说,人们听的最多的是Java的编码规范。让我们看看其中的一些习俗规范:

*方法名应该小写字母开头,其后用字母大写的单词连接(

veryLongVariableName)

*类名应该都使用首字母大写的单词连接而成

*常量名应该全部大写,用下划线连接(

MY_CONSTANT)

*左大括号应该跟 if 语句在同一行只有在有必要的理由时才去打破这些常规,不要轻易的因为你不高兴就违反它。如果你只是在团队里改变一些这样的习惯,那也没问题,但当把你代码拿出来和其他的没有这些思想准备的程序员共享时,问题就会来了。

###8. 警惕过早优化

过早优化是所有问题的根源,至少电视上是这么说的 … 你第一应该关心的事情是写出易于理解的代码。起初写的程序不要求快。

除非你的程序很慢,否则谈优化都是为时太早。如果你想优化什么东西,你首先需要知道问题出在哪。这就是我们需要

profilers这个工具的原因。

在没有知道问题在哪的情况下试图对程序进行优化,其结果必然是把程序能坏,至少你的代码会丧失可读性。如果你觉得有些地方很慢,不要盲目的重写代码,

你应先找到慢的证据。

不要傻乎乎的去解决根本不存在的问题。

###9. 积极重构测试过的程序

没有任何东西会是完美的。即使你感觉你真正写出了一段完美的代码,几个月后回头再看看,你可能会惊讶道”怎么会这样傻?“

改进程序的一个好方法就是重构,但要等程序测试通过之后。你首先要确保程序是好的可运行的,你可以通过自动化测试或手工测试完成这个工作。

之初,你需要的是程序可用。不要期望在第一次就写出完美的程序,你只需要把它写出来,可用。然后重构它,使之完美。对于你们当中知道测试驱动开发

(TDD)的人来说,对这个会很熟悉。这里的关键就在于你要习惯于重构这种事情。如果你使用的是像IntelliJ

IDEA这样强大的集成开发工具的话,重构的工作会变得简单的多。

重构之后,你也许会弄出一些Bug,导致某些功能出问题。这就是为什么说写自动化测试的原因。不论何时重构后,只要运行一下所有的测试用例,你就能准确的知道什么地方出了问题。

###10. 不要过度沉迷于技巧

当我第一次读到有关设计模式的知识时,我觉得我找到了圣杯。这些精心设计的思想作用显著,它能使你的设计易于理解,因为你可以简单的说”我使用的是

‘观察器模式’“,而不用从头到尾的解释一遍。那么,有问题吗?一切看起来都这么自然、简单,你开始不论在哪都使用设计模式。为什么不把这个类做成

singleton呢?干嘛不去再创建一些工厂类呢?

于是一个80行就能写完的脚本,你最终使用了10个类,15个接口,外加一大堆范式和标记符。97%的代码不做任何事情。设计模式是一种十分有用的用来简化你的设计的工具,但这

不意味着你该在所有能用到的地方都用它。

你应该用它们,但不能滥用。

###11. 通过习例学习新知

编程是一种学习新知的过程。当你学到了新的程序库或新语言,你可能会迫不及待的丢掉旧的代码,用你新学到的东西重新写一遍。有很多的理由都能说明你不该这么做。

往现有的应用里增加新的类库或框架同属于这种情况。就说你写了一个Javascript的web应用,期间,你发现了jQuery。现在你突然急切的想丢到你的Javascript程序,重新用jQuery写,尽管你还从来没用过它。

最好的方式是你先用jQuery写一些简单的例子,通过这种方式把你在应用里将要用到的知识都学会。需要AJAX?在你的项目之外做一些小例子,当完全弄懂了后,丢掉例子,应用到你的产品里。

如果你非常关注编程技术,我强烈的推荐你阅读Steve McConnell写的

《代码大全》 一书。它会永远的改变你对编程的认识。

原文:

http://progfu.com/best-practices/11-tips-for-better-code/

译文:

http://www.aqee.net/2011/01/05/11-tips-for-better-code/

Mar 19, 2011

MAC OS X 安装ImageMagick

  • MAC
  • ImageMagick
  • brew

命令:brew install ImageMagick

Zheng-MicllematoMacBook-Pro:~ zhengmiclle$ brew install ImageMagick

Warning: It appears you have MacPorts or Fink installed.

Software installed with MacPorts and Fink are known to cause problems.

If you experience issues try uninstalling these tools.

==> Checking out https://www.imagemagick.org/subversion/ImageMagick/trunk

==> ./configure –disable-osx-universal-binary –without-perl –prefix=/usr/local/Cellar/imagemagick/6.6.4-5 –disable-dependency-tracking –enable-shared -

==> make install

==> Caveats

Because ImageMagick likes to remove tarballs, we’re downloading their

stable release from their SVN repo instead. But they only serve the

repo over HTTPS, and have an untrusted certificate, so we auto-accept

this certificate for you.

If this bothers you, open a ticket with ImageMagick to fix their cert.

Some tools will complain if the ghostscript fonts are not installed in:

  /usr/local/share/ghostscript/fonts

==> Summary

/usr/local/Cellar/imagemagick/6.6.4-5: 1288 files, 32M, built in 2.6 minutes

Zheng-MicllematoMacBook-Pro:~ zhengmiclle$

在Checking out之前可能还有去下载安装几个依赖包

Mar 19, 2011

homebrew — Mac OS X 下新的软件包管理工具(转载)

  • MAC
  • homebrew

安装:

首先,Homebrew 的原则是“No sudo”,也就是说,既然 Mac OS X (client 版本) 绝大部分情况下都是归你这个有管理员权限的用户,为什么在自己的 /usr/local 下安装程序还需要 sudo 呢?所以,首先:

sudo chown -R whoami /usr/local

然后可以正式开始安装,我推荐的安装方式是先用 git-osx-installer 装上 git,然后用 git 安装:

cd /usr/local

git init

git remote add origin git://github.com/mxcl/homebrew.git

git pull origin master

这么做的实际作用是把你的 /usr/local 目录变成了一个本地 git 仓库,只不过这个仓库只跟踪跟 Homebrew 相关的更新,并不影响任何其他软件的安装。

这样安装会在 /usr/local 下创建 Library 这个目录,然后在 /usr/local/bin 中加入 brew 这个 ruby 脚本。

使用:

安装完毕,下面就可以试试了:

brew search

这个命令用来搜索所有可以通过 homebrew 安装的软件,不带任何参数的时候就是列出所有的。可以看到数量已经不少了。

下面就是选择安装,比如我想安装 unrar:

$ brew search rar

gnu-scientific-library     unrar

$ brew install unrar

Warning: It appears you have Macports or Fink installed

Although, unlikely, this can break builds or cause obscure runtime issues.

If you experience problems try uninstalling these tools.

/usr/local/Library/Formula/unrar.rb:3: warning: already initialized constant ALL_CPP

==> Downloading http://www.rarlab.com/rar/unrarsrc-3.9.4.tar.gz

######################################################################## 100.0%

==> g++ -O4 -march=core2 -mmmx -msse3 -w -pipe -D_FILE_OFFSET_BITS=64 -D_LARGEFILE_SOURCE all.cpp -o unrar

/usr/local/Cellar/unrar/3.9.4: 3 files, 320K, built in 13 seconds

可以看到,unrar 被安装到了 /usr/local/Cellar/unrar/3.9.4 这个目录下,但这样我们访问起来显然很不方便,所以 Homebrew 会在 /usr/local/bin 下面创建到 unrar 程序的符号链接,如果安装的是库之类的,也会对应在 /usr/local/lib 这样的目录下创建符号链接。所以这是一套类似 GoboLinux 的软件管理方式。

安装后就可以用 list 命令列出:

$ brew list

pkg-config  unrar

更新:

如果用了一段时间,需要更新同步上游的 Formula,可以简单地:

$ brew update

From git://github.com/mxcl/homebrew

 * branch            master     -> FETCH_HEAD

Updated Homebrew from 60600885 to 60600885.

No formulae were updated.

Homebrew 会通过 git 完成同步。

原文:

http://blog.jjgod.org/2009/12/21/homebrew-package-management/

Mar 19, 2011

jQuery的.bind()、.live()和.delegate()

  • jQuery
  • 事件泡冒
  • bind
  • live
  • delegate

    单击事件

    当点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何已绑定到该元素的单击事件上的函数的执行。这个时候会弹出消息“Click event”。click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素直至document根节点,只要是它的某个后代元素上的单击事件被触发,事件就会传给它,这称之为事件冒泡(又称事件传播)

.bind() :

    $(‘a’).bind(‘click’, function() { alert(“jQuery bind”) });

    jQuery扫描文档找出所有的$(‘a’)元素,并把alert函数绑定到每个元素的click事件上。

.live() :

    $(‘a’).live(‘click’, function() { alert(“jQuery live”) });

    jQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a’这一CSS选择器是否匹配,如果都是的话,则执行函数。

    live方法还可以被绑定到具体的元素(或“context”)而不是document上,像这样:

    $(‘a’, $(‘#container’)[0]).live(…);

    提示:$(‘#container’)返回的是jQuery对象,$(‘#container’)[0]是这个标签的DOM对象。

    live方法有一个非常大的缺点,那就是它仅能针对直接的CSS选择器做操作。

.delegate()

    $(‘#container’).delegate(‘a’, ‘click’, function() { alert(“jQuery delegate”) });

    jQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。

    这一过程与.live()类似,但是其把处理程序绑定到具体的元素而非document这一根上。但是$(‘a’).live()等同于$(document).delegate(‘a’)吗?不完全是。

为什么.delegate()要比.live()好用

    基于几个原因,人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子:

    $(‘a’).live(‘click’, function() { blah() });

    // 或者

    $(document).delegate(‘a’, ‘click’, function() { blah() });

速度:

    后者实际上要快过前者,因为前者首先要扫描整个的文档查找所有的$(‘a’)元素,把它们存成jQuery对象。尽管live函数仅需要把 ‘a’ 作为串参数传递以用做之后的判断,但是$()函数并未“知道”被链接的方法将会是.live()。

    而另一方面,delegate方法仅需要查找并存储$(document)元素。

    一种寻求避开这一问题的方法是调用在$(document).ready()之外绑定的live,这样它就会立即执行。在这种方式下,其会在DOM获得填充之前运行,因此就不会查找元素或是创建jQuery对象了。

灵活性和链能力:

    live函数也挺令人费解的。想想看,它被链到$(‘a’)对象集上,但其实际上是在$(document)对象上发生作用。由于这个原因,它能够试图以一种吓死人的方式来把方法链到自身上。实际上,我想说的是,以$.live(‘a’,…)这一形式作为一种全局性的jQuery方法,live方法会更具意义一些。

仅支持CSS选择器:

    前面有讲过live方法有一个非常大的缺点,那就是它仅能针对直接的CSS选择器做操作,这使得它变得非常的不灵活。

为什么选择.live()或.delegate()而不是.bind() ?

    毕竟,bind看起来似乎更加的明确和直接,难道不是吗?嗯,有两个原因让我们更愿意选择delegate或live而不是bind:

    为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上,它不能把处理程序绑定到还未存在于页面中的元素之上。

    如果你运行了$(‘a’).bind(…),而后新的链接经由AJAX加入到了页面中,则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上,因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。

   或者为了把处理程序附加到单个元素上或是一小组元素之上,监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上,这种做法带来了性能上的好处。

停止传播(阻止冒泡事件传递)

    通常情况下,我们可以通过使用这样的事件方法来终止处理函数的执行:

    $(‘a’).bind(‘click’, function(e) {

        e.preventDefault();    // 或者 e.stopPropagation();

});

    不过,当我们使用live或是delegate方法的时候,处理函数实际上并没有在运行,需要等到事件冒泡到处理程序实际绑定的元素上时函数才会运行。而到此时为止,我们的其他的来自.bind()的处理函数早已运行了。

参考:

http://article.yeeyan.org/view/213582/179910

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

Mar 16, 2011

ActionScript 3.0 反射小抄

  • AS
  • 反射
  • ActionScript

flash.utils.getQualifiedClassName获取实例的类名

var sprite:Sprite = new Sprite();

trace(getQualifiedClassName(sprite));

// 输出”flash.display::Sprite”

flash.utils.getQualifiedSuperclassName 获取超类的名称:

trace(getQualifiedSuperclassName(sprite));

// 输出”flash.display::DisplayObjectContainer”

flash.utils.getDefinitionByName通过类名字符串获取类的原型(类对象引用)

var Tmp = getDefinitionByName(“flash.display.Sprite”);

var spr = new Tmp;

trace(spr is Sprite);

//输出 true

flash.utils.describeType 可以获取非常详细的类的信息:

trace(describeType(new Sprite));

Mar 14, 2011

readline.so: libreadline.so.5: cannot open shared object file

  • Linux
  • ruby
  • rails
  • vps

root@vps:/var/www/# rails c

/usr/local/lib/ruby/1.8/x86_64-linux/readline.so: libreadline.so.5: cannot open shared object file: No such file or directory - /usr/local/lib/ruby/1.8/x86_64-linux/readline.so (LoadError)

    from /usr/local/lib/ruby/1.8/irb/completion.rb:10

    from /usr/local/lib/ruby/gems/1.8/gems/railties-3.0.1/lib/rails/commands/console.rb:3:in `require’

    from /usr/local/lib/ruby/gems/1.8/gems/railties-3.0.1/lib/rails/commands/console.rb:3

    from /usr/local/lib/ruby/gems/1.8/gems/railties-3.0.1/lib/rails/commands.rb:20:in `require’

    from /usr/local/lib/ruby/gems/1.8/gems/railties-3.0.1/lib/rails/commands.rb:20

    from script/rails:6:in `require’

    from script/rails:6

安装 libreadline-ruby1.8 即可解决此问题

root@vps:/var/www/# apt-get install libreadline-ruby1.8

Mar 9, 2011

qefqei.com恢复访问

  • JavaScript
  • jQuery
  • API

之前在hostmonster上的服务到期了一直没有转到新的VPS上,昨晚折腾了一下把网站用Rails3重构了一下,原有的

JavaScript

jQuery文档小抄可以正常访问了,

qefqei.com(这就是你所要找的,这就是你所要做的)做了快三年了,一直以没时间为借口,更新甚少,很是惭愧!