Wednesday, February 27, 2008

google 网站管理员工具

https://www.google.com/webmasters/tools/siteoverview

主要内容有:
分析 robots.txt
查看 robots.txt 文件是否按原样或按修改后的方式拦截特定的网址,并针对不同的 Google 用户代理展开测试。

设置目标地理区域
如果您定位到特定的地理区域中的用户,请将该区域与此网站相关联。

启用增强的图片搜索
在您的网站上启用 Google 的增强型图片搜索技术,包括 Google 托管的高级图片标记技术。

管理网站验证
查看此网站所有已验证的持有人,并选择性地重新验证其中一些人。

设置抓取速度
查看 Google 对您网站抓取频率的统计信息,如果需要,可以选择性地调整抓取速度。

设置首选域名
将首选的域名相联到此网站,以便在 Google 搜索结果中始终显示或从不显示“www.”。

删除网址
从 Google 索引中删除内容,包括加速删除。

Tuesday, February 26, 2008

CSS float and document flow difference between firefox and ie7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title>css float and document flow difference between firefox and ie7</title>
<style type="text/css">
.paragraphs {border: 1px solid #ccc; width: 300px; float: left; margin: 10px;}
.divs {border: 3px double #333; width: 600px; margin: 2px;}
</style>
</head>
<body>
text content before float elements, blah, blah.......<br />
text content before float elements, blah, blah.......
<p class="paragraphs">
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
</p>
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
<div class="divs">
text content in normal document flow, which container start point (left top) start after content ignore the float elements(double border div element), and which content will follow float elements. IE has some different tankle with this content, this container start point will after float element.
<br />
text content in normal document flow, which container start point (left top) start after content ignore the float elements(double border div element), and which content will follow float elements. IE has some different tankle with this content, this container start point will after float element.
</div>
</body>
</html>

Sunday, February 24, 2008

[CSS Zen Garden] CSS absolute position and relative position explain

Absolute Positioning:
Understanding absolute positioning means understanding the concept of the document flow.
Absolute positioning provides the ability not only to move an element anywhere within the page, but also to remove it from the document flow. An absolutely positioned block no longer influences other elements within the document, and the linear flow continues as if that block doesn't exist.
Relative positioning:
Relative positioning, on the other hand, will not remove an element from the document flow. Based on the element's starting position, a relative position will offset it and then effectively leave a hole behind that other elements must negotiate, as if the element were still positioned there.
A relatively positioned element stays within the document flow; its originating position continues to affect other elements, whereas its new position is ignored by the document flow.
Relative positioning is mostly useful for offsetting elements; an element with a starting position inside a traditional grid may be easily moved outside the grid structure, and elements can be finely adjusted when other positioning options aren't possible. For example, Savarese employs relative positioning to move the dragon at the bottom of the design from a starting point below the white content area, to its final spot at the left of the footer area. Using absolute positioning to position elements near the bottom of a design is much more difficult than positioning them near the top, so this instance of relative positioning makes the adjustment easier.

#extraDiv1 {
background-image:url(Dragon.gif);
background-position:left top;
background-repeat:no-repeat;
height:206px;
left:-360px;
margin:0pt auto;
position:relative;
top:-225px;
width:96px;
}

reference:
http://www.csszengarden.com/?cssfile=070/070.css

[CSS Zen Garden] Position fixed property of CSS2 and IE6

Exploiting the fact that Internet Explorer lacks support for fixed positioning and for child selectors, a series of rules were created to deliver the optimal design to browsers that comply with the rules of CSS, and to deliver the alternate design to Internet Explorer:

body#css-zen-garden>div#extraDiv2 {
background-image: url(bg_face.jpg);
background-repeat: no-repeat;
background-position: left bottom;
position: fixed;
left: 0;
bottom: 0;
height: 594px;
width: 205px;
z-index: 2;
}

The following CSS is applied only in browsers that don't understand the previous rule, in this case Internet Explorer. Because the child selectors imply greater specificity, the former rule takes precedence, but only if the browser understands it.
div#extraDiv2 {
background-image: url(bg_face_ie.jpg);
background-repeat: no-repeat;
background-position: left bottom;
position: absolute;
left: 0;
bottom: 0;
height: 600px;
width: 265px;
}

While the fixed-position image scrolls off the page in Internet Explorer 6.0, the design is still attractive and acceptable.

IE7 has supported position fixed property if it’s in standard mode.
reference:
http://www.csszengarden.com/?cssfile=037/037.css

[CSS Zen Garden]The Negative-Margin Solution for Center layout

#container {
background: #ffc;
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
}

margin-left is half of #container width, and position of #container must be absolute.

[CSS Zen Garden]Centered Design Using Auto Margins

The preferred way to horizontally center any element is to use the margin property and set left and right values to auto. For this to work with layouts, you'll create a containing div. You must include a width for your containing div:

div#container {
margin-left: auto;
margin-right: auto;
width: 168px;
}

Friday, February 22, 2008

Javascript event delegation

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript Techniques</title>
<script type="text/javascript">
var addListener = function() {
if ( window.addEventListener ) {
return function(el, type, fn) {
el.addEventListener(type, fn, false);
};
} else if ( window.attachEvent ) {
return function(el, type, fn) {
var f = function() {
fn.call(el, window.event);
};
el.attachEvent('on'+type, f);
};
} else {
return function(el, type, fn) {
element['on'+type] = fn;
}
}
}();

</script>
</head>
<body>
<div id='d1'>test</div>
<ul id="example">
<li id="li0">foo</li>
<li id="li1">bar</li>
<li id="li2">baz</li>
<li id="li3">thunk</li>
</ul>

<script type="text/javascript">
addListener(document.getElementById('d1'), 'click', getUserNameById);
function getUserNameById(e) {
alert('api function getUserNameById');
getUserNameById(this.id);
}
var element = document.getElementById('example');
addListener(element, 'click', handleClick);
function handleClick(e) {
var element = e.target || e.srcElement;
alert('target: ' + e.target + " currentTarget: " + e.currentTarget + " id: " + element.id + " this: " + this + " eventPhase: " + e.eventPhase);
}
</script>
</body>
</html>
event.target是指事件发生时的对象,可以是document中的任何一个node,包括text node。
如果在捕捉阶段或者起泡阶段处理事件,事件event.target仍然都是指向发生事件的node上,但currentTarget却不是指向此node。
如上例子中点击的event.target是li元素时,ul上的事件处理是发生在起泡阶段(第3阶段),而不是在AT_TARGET(2)阶段。此时的event.target指向li元素,event.currentTarget则是指向ul元素。
callback中的this与event.currentTarget在目前实现的addEventListener方法中是指向相同的元素,但最好不要用this.
Reference:
http://www.digital-web.com/articles/seven_javascript_techniques/

IE6 javascript bug

在IE6中,当一个utf-8的编码文件,包含了一个gbk编码的javascript文件,并有中文注释写在文件头时,此文件后面的javascript有可能不能正常解释,当文件里调用此文件中定义的function时会报function未定义的错误。
在IE7、FIREFOX中无此问题。

Cleaning up rails old session file

$> cd rails_app
$> find tmp/sessions/ruby_sess* -ctime +2 | xargs rm -f

参数说明:
-ctime n: 文件修改时间n*24小时,+2即文件最后修改时间大于2天,此session已经过期。
xargs command: 执行命令。

Thursday, February 21, 2008

[Rails Cookbook Recipe 10.2] Fixing Bugs at the Source with Ruby -cw

Using the syntax checker is a great way to make sure you're supplying Rails with valid Ruby, and it's easy enough to do every time you save a file. If you're using any modern programmable text editor, you should be able to check syntax without leaving your program. For example, while editing the solution's student.rb file in Vim, you can type :w !ruby -cw in command mode, and you'll see the following within the editor:


:w !ruby -cw
-:4: parse error, unexpected '}', expecting kEND
Student.find(:all).map {|s| s.age }}.flatten.uniq.sort
^

shell returned 1

Hit ENTER or type command to continue

If you're using TextMate on a Mac, you can set up a keyboard shortcut that filters the file you're working on through a command such as ruby -cw. If you're not using a text editor or IDE that offers this kind of flexibility, you should consider switching to something like Vim, TextMate, or Emacs, and learning how to customize your editor.

Wednesday, February 20, 2008

[Rails Cookbook Recipe 4.9] Inspecting Requests with Filters

Recipe 4.9. Inspecting Requests with Filters
Problem
You have taken over development of a Rails application, and you are trying to figure out how it processes requests. To do so, you want to install a logging mechanism that will let you inspect the request cycle in real time.

Solution
Use an after_filter to invoke a custom logging method for each request. Define a CustomLoggerFilter class:

app/controllers/custom_logger_filter.rb:

require 'logger'
require 'pp'
require 'stringio'

class CustomLoggerFilter

def self.filter(controller)
log = Logger.new('/var/log/custom.log')
log.warn("params: "+controller.params.print_pretty)
end
end

class Object
def print_pretty
str = StringIO.new
PP.pp(self,str)
return str.string.chop
end
end
Install the logger in the AccountsController by passing it as an argument in a call to after_filter:

app/controllers/accounts_controller.rb:
class AccountsController < ApplicationController

after_filter CustomLoggerFilter

def index
list
render :action => 'list'
end

def list
@account_pages, @accounts = paginate :accounts, :per_page => 10
end

def show
@account = Account.find(params[:id])
end

def new
@account = Account.new
end

def create
@account = Account.new(params[:account])
if @account.save
flash[:notice] = 'Account was successfully created.'
redirect_to :action => 'list'
else
render :action => 'new'
end
end

def edit
@account = Account.find(params[:id])
end

def update
@account = Account.find(params[:id])
if @account.update_attributes(params[:account])
flash[:notice] = 'Account was successfully updated.'
redirect_to :action => 'show', :id => @account
else
render :action => 'edit'
end
end

def destroy
Account.find(params[:id]).destroy
redirect_to :action => 'list'
end
end
Discussion
Rails filters allow you to do additional processing before or after controller actions. In the solution, we've implemented a custom logging class that is invoked after calls to any actions in the Accounts controller. Our logger opens a filehandle and prints a formatted version of the params hash for easy inspection.

With the logger in place, you can use the Unix tail command to watch the logfile as it grows. You'll see what happens to the params hash with every action that's called:

tail -f /var/log/custom.log

For the AccountsController in the solution, you can watch the log as you list, create, and destroy accounts.
params: {"action"=>"list", "controller"=>"accounts"}
params: {"action"=>"new", "controller"=>"accounts"}
params: {"commit"=>"Create",
"account"=>{"balance"=>"100.0", "first_name"=>"John", "last_name"=>"Smythe"},
"action"=>"create",
"controller"=>"accounts"}
params: {"action"=>"list", "controller"=>"accounts"}
params: {"action"=>"destroy", "id"=>"2", "controller"=>"accounts"}
params: {"action"=>"list", "controller"=>"accounts"}
Rails comes with a number of built-in logging facilities. This approach gives you an easy way to add logging to a controller with only one line of code. You can also limit what actions of the controller the filter is applied to.

Javascript function results caching

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>javascript function results caching</title>
<script type="text/javascript">
var overrideSelf = function () {
return overrideSelf = 'test';
};
alert(overrideSelf);
alert(overrideSelf());
// alert(overrideSelf()); // overrideSelf is not a function
alert(overrideSelf);

var fnl = function () {
var v = 'xxx';
alert('alert from fnl');
return (fnl = function () {
return v;
})();
};
alert(fnl());
alert(fnl());
alert(fnl());

var fnp = function () {
if(!fnp.b) {
fnp.v = 'yyy';
alert('alert from fnp');
fnp.b = true;
}
return fnp.v;
};
alert(fnp());
alert(fnp());
alert(fnp());

var fnm = (function () {
var v, b = false;
return function () {
if (!b) {
v = 'zzz';
alert('alert from fnm');
b = true;
}
return v
}
})();
alert(fnm());
alert(fnm());
alert(fnm());
</script>
</head>

<body>
test function results caching
</body>
</html>
references:
http://developer.yahoo.net/blogs/theater/archives/2007/12/high_performance_ajax_applications.html

Friday, February 15, 2008

Usage of linux command: tee

$> ps -ef |grep httpd|tee > grep_result |awk -F " " '{print $1}'|wc -l
其中tee > file是将前面得到的结果打到文件里以方便查看结果。

Translate selection text to chinese in new window

Firefox:
javascript:var dict=function(){var select=document.getSelection();var url='http://sh.dict.cn/search/?q='+select;window.open(url);return ;};dict();

闭包(closures)的写法:(function(){var q=String(window.getSelection());var url='http://sh.dict.cn/search/?q='+q;window.open(url);return;})();

IE7:
javascript:var dict=function(){var select=document.selection.createRange().text;var url='http://sh.dict.cn/search/?q='+select;window.open(url);return ;};dict();

上面function里最后面必须是return; (相当于是return undefined;)否则当前页面会被function return的结果重写,要防止结果重写,也可以将dict()方法调用包含到void操作符内:
void((function(){var q=String(window.getSelection());var url='http://sh.dict.cn/search/?q='+q;window.open(url);return false;})());
usage:
1. 新建一个书签,目标URL用上面的代码,IE会有个提醒,需要确认一下。
2. 在打开的网页里,如GOOGLE READER,要查某个词,选中此词。
3. 点击刚新建的书签(bookmarklet),IE会再次提醒。

Ruby debug method Object.tap

class Object
def tap
yield self
self
end
end
references:
http://moonbase.rydia.net/mental/blog/programming/eavesdropping-on-expressions

ruby rss aggregator using feed-normalizer

$> gem install feed-normalizer

require 'rubygems'
require 'feed-normalizer'

feed = 'http://googlechinablog.com/atom.xml'
rss = FeedNormalizer::FeedNormalizer.parse(open(feed))
exit unless rss.entries.length > 0
#Read entries
rss.entries.each do |entry|
title = entry.title
body = entry.content
authors = entry.authors.join(', ') rescue ''
entry_url = entry.urls.first
puts title, body, authors, entry_url
end
reference: http://ruby.dzone.com/articles/ruby-rss-aggregator

curry - functional javascript


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>curry - functional javascript</title>
<script type="text/javascript">
Function.prototype.curry = function() {
var fn = this, args = Array.prototype.slice.call(arguments);
//alert(fn); // function slice() { native code }
//alert(args); // 2
return function() {
//alert(this); // ['t', 'e', 's', 't']
//alert(args.concat(Array.prototype.slice.call(arguments)));
return fn.apply(this, args.concat(
Array.prototype.slice.call(arguments)));
};
};
var arr = 'test'.split('');
Array.prototype.yaslice = Array.prototype.slice.curry(2);
alert(arr.yaslice(3)); // arr.slice(2,3) => 's'
</script>
</head>
<body>

</body>
</html>

references:
1. http://ejohn.org/blog/partial-functions-in-javascript/
2. http://osteele.com/sources/javascript/functional/

Wednesday, February 13, 2008

Ruby class variable, class attribute(class instance variable), class constant tips


class Class_Attribute
@var = 1 #class attribute or class instance variable

def initialize
@var = 2 #instance attribute
end

def report
@var # instance attribute, not the class attribute
end

def Class_Attribute.report
@var # class attribute
end
end

class Child_A < Class_Attribute
@var = 3
end

puts Class_Attribute.report #=> 1
puts Class_Attribute.new.report #=> 2
puts Child_A.report #=> 3
puts Child_A.new.report #=> 2

class Class_Constant
VAR = [ 'a' ]
VAR2 = [ 'b' ]

def self.report
VAR2[0]
end
end

class Child_C < Class_Constant
VAR2 = [ 'c' ]
end

puts Class_Constant::VAR[0] #=> 'a'
puts Class_Constant::VAR2[0] #=> 'b'
puts Class_Constant.report #=> 'b'
puts Child_C::VAR2[0] #=> 'c'
puts Child_C.report #=> 'b'
puts Child_C::VAR[0] #=> 'a'

from David A. Black:

@@avar = 1
class A
@@avar = "hello"
end
puts @@avar # => hello

A.class_eval { puts @@avar } # => hello

If you’re just looking to store some data in a variable which is unique to your class, but accessible from instances or externally, why not just use instance variables?

class A
@foo = "bar"
class << self; attr_reader :foo; end
end
nil
A.foo #=> "bar"

references:http://www.oreillynet.com/ruby/blog/2007/01/nubygems_dont_use_class_variab_1.html

Tuesday, February 12, 2008

Using parseFloat() or "+" instead of parseInt()

parseInt() 在解析字符串为数字的时候,有时候会有点问题,如
parseInt("010") 可以被解析成10,也可能被解析成8,字符串以"0"开头可以被做为8进制解析也可以被做为十进制解析,所以parseInt('08')得到的结果是0,而parseInt('07')得到的结果却是7,如果parseInt('08', 10)的第二个参数明确说明解析为十进制数字时就会得到结果8。
一般解析字符串为数字时可以用parseFloat()这个全局函数或者是"+"运算符。
['2008', '02', '11', '06', '21', '03'].map(function(v) { return + v });
# [2008, 2, 11, 6, 21, 3]

Monday, February 04, 2008

Using javascript copy text string to user's clipboard

1、System.setClipboard() 方法允许 SWF 文件用纯文本字符串替换剪贴板内容。这不会带来任何安全性风险。为避免因剪切或复制到剪贴板的密码和其它敏感数据所带来的风险,FLASH AS3并未提供相应的“getClipboard”(读取)方法。


if (clipboard.length)
{
System.setClipboard(clipboard);
}

2、JavaScript调用FLSAH里设置的回调方法,将文本内容clipboard传给FLASH,由FLASH完成copy到剪贴板的动作。
另在IE7里操作剪贴板会有提示框警告。

Saturday, February 02, 2008

gem unpack usage and example

E:\workspace\>gem help unpack
Usage: gem unpack GEMNAME [options]

Options:
--target target directory for unpacking
-v, --version VERSION Specify version of gem to unpack

Common Options:
-h, --help Get help on this command
-V, --[no-]verbose Set the verbose level of output
-q, --quiet Silence commands
--config-file FILE Use this config file instead of default
--backtrace Show stack backtrace on errors
--debug Turn on Ruby debugging


Arguments:
GEMNAME name of gem to unpack

Summary:
Unpack an installed gem to the current directory

Defaults:
--version '>= 0'

Example:
$> gem install mofo
$> cd rails_app/vendor/plugins
$> gem unpack mofo

Friday, February 01, 2008

MySQL 同步1064错误及补救方法

Last_Error: Error 'You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '` = 37938' at line 1' on query. Default database: 'search_production'. Query: 'UPDATE tests SET `created_at` = 1195728959, `published_at` = 11d` = 37938'

slaver服务器上收到这个奇怪的1064错误,从master server传过来的要执行的语句应该是:
UPDATE tests SET `created_at` = 1195728959, `published_at` = 1195728081 where `id` = 37938
却变成了上面的样子,在确认此条语句重要性不大后在从服务器上执行以下语句跳过此错误继续同步数据。
mysql> SET GLOBAL SQL_slave_SKIP_COUNTER = n;
mysql> START SLAVE;
按mysql5.1手册上说,在从服务器上没有过直接的数据操作不应该出现这类错误。

Using acts_as_taggable in Rails

change some step from <a href="http://noobonrails.blogspot.com/2005/11/using-actsastaggable-in-rails-quick.html">article</a>: http://noobonrails.blogspot.com/2005/11/using-actsastaggable-in-rails-quick.html
1. In your project database, add two tables, tags and tags_[model you're linking to], here's an example sql script:
CREATE TABLE `books` (
`id` int(6) unsigned NOT NULL auto_increment,
`title` varchar(50) NOT NULL default '',
`author` varchar(50) NOT NULL default '',
`description` text NOT NULL,
`created_on` datetime NOT NULL default '0000-00-00 00:00:00',
`updated_on` datetime NOT NULL default '0000-00-00 00:00:00',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
CREATE TABLE `tags` (
`id` int(11) NOT NULL auto_increment,
`name` varchar(30) NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
CREATE TABLE `tags_books` (
`tag_id` int(11) NOT NULL default '0',
`book_id` int(11) NOT NULL default '0'
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

2. at a command prompt, from in your project directory, run
gem install acts_as_taggable

3. Create a tag model. You can do this manually or with the generator like so:

ruby script\generate model tag
ruby script\generate scaffold book

5. copy gems/acts_as_taggable/lib/taggable.rb to rails_app/lib and add
require 'taggable'
The new version 2.0 now uses the Rails standard join table names. In the past it was always prefixed by tags,
independent of the alphabetical order.
If you would like to upgrade without changing your table names, or if you prefer the other style - modify
your models as follows:
require 'taggable'
class Photo < ActiveRecord::Base
acts_as_taggable
end

becomes:
require 'taggable'
class Photo < ActiveRecord::Base
acts_as_taggable :join_table => "tags_photos"
end

6. In your target object's controller (books_controller.rb for us) add this line under your
if @books.save line..
@book.tag(params[:tags])

7. Add this to your _forms partial
tags for this book: <%= text_field_tag('tags', '') %>

8. To get the items to show in yor list.rhtml view, you can call them with this
<%= book.tag_names.join(" ") %>

9. Has a native tag cloud supports. Get more infomation from Docs.
That's the quick way to get acts_as_taggable working.