那些曾经自以为是的

曾经在自己的小圈子里能解决部分浏览器的兼容性问题,一度以为自己已经很厉害了,能搞定很多他们解决不到的问题。
曾经看到过css bug table,总是没能细细的体会其中涵义。
曾经做兼容性,更多的是把各个浏览器一遍一遍的去调整,没有自习的研究为什么会出现不同。
曾经会刻意的模仿别的网站,使用一些别人不知道的hack,或许以为那是很cool的事情。
曾经以为了解到双倍边距会洋洋自得,因为很多人不知道这问题。

曾经总是很浅薄,很敷衍的对待问题。
就再刚才,翻看reader里面的旧文章,重读Alipay UED 《打败 IE 的葵花宝典:CSS Bug Table》,感触颇深。
温习到那么多得兼容问题时,惊愕了。有多少东西以前注意过,解决过?有多少东西解决过就忘记了?
自习想想这些问题吧。
向前的兼容要掌握,向后的兼容要研究!
链接:打败 IE 的葵花宝典:CSS Bug Table

关于页面字体的选择

虽然我对于字体的研究是一片空白,但也能经常性的感觉到国内页面中的字体一直没有国外网站字体表现形式好。
偶然的今天咋DBA看到介绍统计几个大网站的字体使用情况,被总结如下:

结论1:Arial,Helvetica,San-serif 这个组合适配性是最好的,也是最保险的. 可选:Helvetica Neue .
结论2::用了宋体的,都比较烂 ... 中文网站要想页面视觉稍微好一点,直接去掉 CSS 中的宋体.
Updated: 对于个人站点,字体可以尽情发挥。
Updated 2: 新浪的同学解释说,之所以用宋体,是因为"宋体的半角字符是等宽字体(1/2个全角),长度的标题不会因出现英文或数字而折行"。估计是历史原因吧,相信这个问题总是有解的,看怎么解决罢了。

看到文章下面的评论,褒贬不一。
之前在制作网站的时候使用过一次动态加载字体,刚开始很天真的以为我加载以后就可以使用的。但经过使用,中文字体光是下载都已经够把用户的耐心磨掉了。中文字体太多,每种字体都有几十兆的,中国目前的网速谁又心思去坐那等待下载一个字体。
说到这里,有点羡慕那些做英文网站的Designers,即使随用国内的网速也可以来加载一两个字体使用!
但现在最终决定下来我们制作网站使用什么字体?
淘宝:font-family:courier new,courier,monospace;
QQ: font-family: “宋体”,”Arial Narrow”;
可以参照一下国内网站的情况。

simulate placeholder with jQuery

I just want to use the html5′s form api, but it is not available for ie. This is just a polyfill, you can use it with the Modernizr library.

jQuery.extend( jQuery.expr[':'], {
  'placeholder': function( elem ){
    var attr = elem.getAttribute( "placeholder" ), val = elem.placeholder, n = elem.nodeName.toLowerCase();
    return n === 'input' && attr !== 'undefined' && '' !== val;
    }
});

$(':placeholder').each(function(){
  $(this).css('color', '#a9a9a9').val($(this).attr('placeholder'));
}).bind('focus', function(){
  if ($(this).val() == $(this).attr('placeholder')) {
    $(this).val('');
  }
}).bind('blur', function(){
  if ($(this).val() == '') {
    $(this).val($(this).attr('placeholder'));
  };
});

quick tips:jquery background color animation

There is one jquery color animations plugin in the official website of jquery, which is the weakness of jquery and i have not used it before. I happened to find the snippet about how to use it.

With this plugin you can do many things that the animate function can’t do, something like border color animation, background color animation and font color animation and more of (color, backgroundColor, borderColor, borderBottomColor, borderLeftColor, borderRightColor, borderTopColor, outlineColor), that will make your site amazing and more attractive to your visitors.

You can find the plugin by visiting jquery background color animation of the jquery offical website.

Awesome plugin! The usage of it is very simple, just pass the name and color that you want to make a animation as one json object to the animate function of jquery, something like this:

	element.animate({borderColor: '#F2E2CE', backgroundColor: '#400101', borderColor: '#F2E2CE'});

Jquery color plugin official website: http://www.bitstorm.org/jquery/color-animation/

There are perfect demos here, have your funs.

jQuery Deferred tutorial

I have been reading about the jquery Deferred object for one whole day, i don’t think i can use with it very well , but now i will summary what i learned, if you are knowing it better and more usage, please tell me.

In my option, the deferred object can do one thing and do it very well: provides flexible ways to provide multiple callbacks, and these callbacks can be invoked regardless of whether the original callback dispatch has already occurred.

Three status of it: unresolved, resolved, rejected of the actions.

I shall not show you many examples, only show you about my mind of the Deferred class.

There are 11 methods of the Deferred Object, excatly of the Deferred’s promise object.Because if you use the asynchronous function like ajax, in jQuery 1.6 it will return you one instance of the Deferred’s promise object, or if you excute your function with $.when(), both the cases should return the promise object( For the function or jquery object, you should use the promise method to make the promise object before using the multiple callback functions ).

You can find online example in the jQuery’s offical website jQuery promise and deferred.promise().

Maybe you don’t get what you want learn from it, but what i want to tell you is that , read the official website of this chapter one or more times, you will find much power from it.

Here is some sites of jQuery Deferred tutorial for you:
1. Official website of jQuery of the Deferred: http://api.jquery.com/category/deferred-object/.
2. Some example i found for help: http://www.erichynds.com/jquery/using-deferreds-in-jquery/

what i learned from one html5 web source code

I think html5 is powerful,but i had not learned befor,when i saw one article about tablet made in html5, i was deeply moved,it is so amazing!
I open one html5 web and read the source code carefully, though i knew some of these tips, i write them here :
1.you can use html5 doctype in your works, because even ie6 is supporting the simply doctyp.
2.much more simple format when inviking css and script, especilly the rel attribute of link tag and none-attribute tag script
3.rich comments:include html tag comments and the condition comments, they all will be very useful when you doing modify of your site.Make the end of the comments with and slash before your words.

4.invoke google code of jquery, you can also make js document.write one invoke of your own to avoid none respone of goolge code in some area.

var src = '';
!window.jQuery && document.write(unescape('%3Cscript src='+ src +'%3E%3C/script%3E'));

It will be very useful in your website.
5.Here are some places for you and me to learn condition comments and condition css:

http://www.conditional-css.com/usage

http://www.quirksmode.org/css/condcom.html

http://www.conditional-css.com/index

6.i know the meta tag in html is very powerful and useful, new useage:author, Go to and find more useage
7.usage of html5 tags is one big problem for me , i am not sure of when and how to use the new tags, and i will learn them and introduce them to you later:section,header,nav,article,footer ect.
8.people i know who are it-people used to name the id and class in the own method , not much meanful, when i read the code of forgin website , i really like the names which they name the ids and classes. Learning it will make your code more meaningful.

htaccess RewriteRule and RewriteCond examples

I had wrote Simple php guestbook based on MVC last day, and want to refine the mvc framework and make my own blog system.In that post i refered the htaccess file,It is very powerfule for developers,today i want to summary something about it and some useful rewrite rule write in htaccess file.

Below is one snippet write in wordpress’s htaccess file that make the url to be showed link www.domain.com/posttitle, i think it will be very useful in my future blog, so i will analysis it here.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

1.<IfModule mod_rewrite.c></pre> does the work checking if the rewrite module exists, most like the if statement in php.
2.The second line and the third line is to open the rewrite module and set the rewrite directory.
3.Next line command will rewrite the url to hide the index.php when the url consists of index.php
4.The remaining lines decide when the files or the directories visited exist, you will go to the url; if not you will be jump to the index.php

You will notice that there a [L],-f,-d after the commands, here are some introduction:
RewriteCond Syntax: RewriteCond TestString CondPattern [flags]
[L]: the last command be executed, that mean the commands below will be ignored except the right rewrite comditions will cause executing the last commands.
[NC]: With this in the command , letters in the url will not not be case-sensitive
-f: check if is regular file
-d: check it is directory and if the directory exists

And that is the wordpress htaccess file.Other examples of htaccess RewriteRule and htaccess RewriteCond:
1.According to the user agent , the server decides which file to visit, is it like a if statement?

RewriteEngine on
RewriteCond  %{HTTP_USER_AGENT}  ^Mozilla/5.0.*
RewriteRule  index.php            index.m.php
RewriteCond  %{HTTP_USER_AGENT}  ^Lynx.*
RewriteRule  index.php            index.L.php
RewriteRule  index.php            index.b.php

2.If the host of visitor’s last visited page is www.test.cn , the current request to any page will be redirect to test.php

RewriteCond %{HTTP_REFERER} (www.test.cn)
RewriteRule (.*)$ test.php

3.If your ip address is host1 or host2 or host3, you will be jump to test.php.Here we can see that the default relativeship of each line RewriteCond is ‘and’ , if you want to use or you must write is clearly.

RewriteCond %{REMOTE_HOST} ^host1.* [OR]
RewriteCond %{REMOTE_HOST} ^host2.* [OR]
RewriteCond %{REMOTE_HOST} ^host3.*
RewriteRule (.*)$ test.php

4.If the files end up with those suffixes, the url will not rewrite and visit that file directly.

RewriteCond %{REQUEST_URI} !^.*(.css|.js|.gif|.png|.jpg|.jpeg)$

5.Preventing images hotlinking

RewriteCond %{HTTP_REFERER} !^$ [NC] // alow visit images by visiting the image url
RewriteCond %{HTTP_REFERER} !dev-trickss.com [NC] // allow this domain to visit the images
RewriteRule .*\.(gif|jpg|png)$ - [F] // besides the allowed domain, other domain will display crosses instead of the images

6.301 redirect, this will be very useful to do seo and some status like 302,404 ect. More response status reffer here.

RewriteRule ^index\.php$ http://dev-trickss.com/ [R=301,L]

7.Custom Error Pages

ErrorDocument 401 /err/401.php
ErrorDocument 403 /err/403.php
ErrorDocument 404 /err/404.php

8.Forcing PHP to include files from a specific directory, that means you can set a specific directory, that when you use include in php, the program will search the file directly to the specific directory.

php_value include_path /home/myaccount/library

With this setted, you can use the include function like this in any where.

include('developer.php');

9.hide some directories you do not want to be known by public and the spider

deny from all
//deny specific IP addresses
order allow,deny
deny from 123.48.56.108
allow from all
//allow only specific IP addresses
order deny,allow
deny from all
allow from 123.48.56.108

10.have you wish to execute a little php code in you stylesheet?You can realize this by setting commands in the htaccess file.

<FilesMatch ".(css|style)$">
 SetHandler application/x-httpd-php
</FilesMatch>

You can find the usage manual here:Module mod_rewrite, and for Chinese can find the translation here:杨宇的技术博客.

I have summaried all i can find here, many of these methods will not be very useful, but still you can not abandon them, for me,the most useful code will be that of wordpress’s htaccess commands.

Simple php guestbook based on MVC

Last time, i wrote the do-with-your-own-php-mvc-framework and i found it is very useful.Last week we had a test of making a php guestbook, and i do that with it.
What you can do with the guestbook or the tiny MVC?
1.The core is to leave a message and manage the messages.
2.The administrator can turn on or turn off the message checker, with that on the guest’s message must be checked before displaying it in the main page.
3.You can open the guestbook or close it in your will.
4.The management can be done friendly with ajax or some effect with jquery.
5.You can modify the guestbook’s name and notice and copyright in the admin panel freely.

Here is the screenshot,about 15 files and images with a .htaccess file, my final goal is to establish the framework and with that to expand it to a blog system, and i got much of it.

Simple php guestbook based on MVC structure

Let me show it to you:
1.The entry is the index.php file, but it only has 6 lines of code,include error_reporting setting and 4 const defines and one include file ‘tinyMvc.php’ which is the heart of the guestbook.
2.I include all the main files in this file: the controller , the model, the loader, the common functions and the initialize of the contorller in tinyMvc.php.
3.controller:Because of this is just a tiny system and the function is very simply so i make all the controlls methods no matter that is the font pages or the manage of the guestbook.
4.model: there is only one model file, that include the database operations as you know , such as insert message, update system settings, check messages, edit messages ect.
5.views: i think the guestbook or the framework is mostly like the codeigniter framework, because i had used it before and i like the operation method.So, i have a folder to store the views and find it quickly.
6.the .htaccess file: thanks to the .htaccess file, that make the url rule of the guestbook, makes the url more friendly.That will be more important in the future when i modify the guestbook to a blog system.

What i have learned from this coding:
1.The important of the .htaccess file
2.Database operation is not that perfect as other system
3.MVC framkwork is very usefull in doing bigger project
4.It is very flexible.

The guestbook is just a begining of my project, i will make it a blog in my need.So i will not show the files download this time, but if you want it and learn it with me, i would be very pleasure to email it to you.
By the way , i am Chinese , and i would like to make friends with you!

10 things we will experience with a better browser

I strongly support you to use a better browser, with the better browser especially technology of html5 and hardware acceleration you can experice better websites and it is a enjoy!

1.Native video and audio with keyboard enabled controls that can be styled and accessed like any other element in the page.

2.Forms with richer controls like colour pickers, calendars and autocomplete fields.

3.Rounded corners, gradients and drop shadows without graphics.

4.Local and offline storage to create real application experiences.

5.Geographical location and device orientation to give you a personalised experience of the web.

6.Rich graphs and visualisations using Canvas and SVG.

7.Games that don’t ask you to install plugins.

8.3D graphics and support for any font.

9.Drag and drop and touch support for tablets.

10.File upload and access to the file system like any other application.

As a developer , you know it is HTML5 and related technologies that pretty the web.
The html5 demo City Videos i find in http://ie.microsoft.com/testdrive/ have extremely beat my heart, it is Awesome!

Add some news about html5:
1.Adobe is doing an experiment called ‘Wallaby’ that is the codename for an experimental technology that converts the artwork and animation contained in Adobe® Flash® Professional (FLA) files into HTML. Although it is not a final product now, you can download it here.
2.Ie6countdown website for a final end of ie6 launched on 5th, Mar, 2011.Speed up the demise of ie6!

Something About My Career

I am wondering of change a job.

It has been almost three years since i graduated from college, i learned about computer in my university, but nearly everything i used within my work was learned in this cormpany.To by a programer is not my desire,but besides that, i don’t know what to do, in my deep heart, i wish to be expert in communication, and i want to be the one in a novel i have read, who can talk and speak as he wants, and express himself clearly to everyone.

May be , this is childish or i do not express myself in the correctly way.So, i want to change a job, not to say any other reasons.

May be forign trade? I am trend to do so..actually i do know which position to be in the future, and i should think about it seriously!
But i will not give up what i have learned about coding, that is the baseline to live a life.