美的灯饰上线

这段时间忙碌了很多事情,经历过工作的愤怒,尝试过敢情的痛苦,从来不敢说自己的经历有多丰富,但也会不禁的沉湎在记忆的长河,时而年幼的可笑,时而年少的疯狂,但仍没有现在的精彩。
“文字能表达一种思想,即使你的思想很丰富,但缺少表达的渲染也就不会让这些思想保留下来”
一直都在计划这每天能写点东西,沉湎的文学的魅力,尽管我更多的还是喜欢小说类的作品,但不能因此剥夺对文学的喜爱。
2011年9月2日,“美的灯饰”正是上线,开始做百度推广,可以说是自从6月31日离职到现在唯一作为自己的事业的事情,尽管目前来看前景渺茫,我更会珍惜这次经历,让这么美好的记录伴随着我的成长,在这里留下记忆的痕迹。
回忆一下当时的情景:

“现在百度推广已经生效了吗?我怎么没有一点感觉啊。”
“你还想有啥感觉,能吃啊”

就这样,我很没有感觉的就开始走走上了这条分岔路口。
感慨:我们经常听别人说,万事开头难,自己也很清楚这个道理,但事情只有自己亲自经历的时候才能切身的体会到,“万事”开头怎么个难发。
鼓励:虽然是不熟悉的领域,但相信自己,珍惜经历!
这段时间在家的时候,就如刚开始“大墩哥”说的那,回家以后就不受控制的生活规律就开始松散下来了,后来每次想停歇下来,不想工作学习的时候,就用这句话来提醒自己:I leave uncultivated today, was precisely yesterday perishes tomorrow which person of the body implored!
这是摘自哈佛图书馆管训里面的一句:我无所事事地度过的今天是昨天死去的人们所奢望的明天!
慢慢的要学会珍惜,珍惜时间,珍惜生命,珍惜亲情,珍惜爱情,珍惜生命!

css属性zoom的使用

相信很多开发者写css的时候使用过zoom属性,以前也模仿使用过,那时候刚开始接触前端开发,抄过来一段代码就知道能解决什么问题,实现了什么功能,但是对于里面使用的各个属性并不是很了解,也没有很深入的去研究过。
这种现在伴随着我成长了很长一段时间,然后才意识到这其实是一种很大的弊端,很不利于对于技术的研究。反复告诫自己,在研究代码,研究程序的时候尽量要做到彻底弄清楚实现的原理!
今天在看alipay一位前段大虾的博客的时候,又碰到了关于这方面的问题,于是乎,本着不能草草了事,知其然须知其所以然的态度,在网上搜索了一下相关的内容,有很多大致类似的解释和说明,下面摘录修改了一段感觉比较能明确解释其功能的文字:

zoom : normal | number
语法取值
normal  : 默认值。使用对象的实际尺寸
number  : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值
使用说明
此属性仅IE6使用。设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。虽然此属性不可继承,但是它会影响对象的所有子对象( children )。这种影响很像 background 和 filter 属性导致的变化。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

尤其后半句的说明更加重要,利用这个代码来实现ie6下清楚浮动的功能。网上比较流行的清楚浮动的代码:

.clear:after{ visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0; }.clear{zoom:1}

前面是清楚高级浏览器浮动,后面主要是针对ie6.
作此记录,备忘(脑子不够用现在。。。)

那些曾经自以为是的

曾经在自己的小圈子里能解决部分浏览器的兼容性问题,一度以为自己已经很厉害了,能搞定很多他们解决不到的问题。
曾经看到过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!

WordPress SEO fine-tune by Meta SEO Pack from Poradnik Webmastera