Another Post about SEO

This post aims at giving you (the viewer) some important keywords about SEO, in which you can search further for those particular topics if you are interested.  

1. Semantic HTML
• make sure you have valid HTML
• tags have weight, for example, <h1> tag is weight more than <h3> and <b> weights more than normal text
2. Importance of Naming (How search engine knows your page quality, here is a good blog about naming - SEO: Using Descriptive, Creative & Efficient Titles)
• Domain
• URL
• Page Title
• Filename
• alt for image
• title for anchor
• linked text needs to be meaningful, or just use title for link
• label your form
• categories your html is good - use fieldset, thead, tbody, tfoot ... etc
3. Canonical URLs
• /contact-us (good) v.s. /node/1234 (bad)
• /contact-us/name/me (good) v.s. /contact-us?filter=me (bad)
4. Deep Linking
• Don't hide ajax content to search engine.  When you ping the ajax link, you should still see that ajax content. 
5. Hidden Content
• There is no weight on hidden content or orphan pages, make sure your pages / contents have a link somewhere to link to.
6. Duplicated Content
• If you have 2 or more distinct urls point to the same content, you will be punished.  Or in other words, for you site, please do not have identical pages that can be reached via multiple urls.
7. 404 & HTTP Codes
• 200, 301, 302, 304, 401, 403, 404, 500
• 200 success
• 300 Moved | 304 is cached
• 400 Error | 401 not authroized, 403 forbidden, 404 content not found
• 500 Server Error | 501 not implemented, 502 gateway
• if you have a /bad-url, and if your client want you to redirect to home page instead of showing 404, it is a bad move, because it means you have 2 different urls point to same contents.
• 404 is telling the search engine to stop looking the contents, you won't be punished by telling the search engine you have 404.
8. Sitemap
• Well, there are so many services doing that. You can ask Google to read your sitemap directly, and it is recommended method.
9. Page Speed
• Now Google is ranking based on your page speed as well. 
10. Meta
• Please use meta appropriately, if you have stuff in the meta and not related to the page contents, you will be punished. But keep in mid that the meta keywords and meta description is not very useful for nowadays search engine, for example, Google doesn't put the "keywords and description" in their rating formula anymore.
11. Long Tail keyword
• Make sure you don't compete with keywords that are so popular and high valued, try to use keyword that is describing your product even if it is long.  Because using high searched keywords are not cost effective if you are a small size company. The reason is all the high traffic site using those keyword, and they already have build so many traffic, it is hard to compete with. How to find a "long tail" keyword? Try to search in Google, if a keyword you've search return small result or even no result, that is a good long tail keywords.
12. Do not exchange links if it is not relevant
• Link that are not relevant to your site is a trash, so do not do link exchange.  However, a competitor site can link to you will be the best, if possible.
13. Don't put your company name first for the Title
• Well, unless you are big brand, try not to put your company name first for the title. People come here to search for information, give them the most relevant information that they want first in the title.
14. Use keywords that represent your business / website that you offer
• That is so obvious, because if your keyword in your site is irrelevant to your business or website contents, you will sooner or later get a bad fame from it. Also, keep in mind that any "useful" words that appeared in your page appears more than 3 times, it will be a good candidate for your keywords.  And for newer search engine, repeated words will be promoted to keywords automatically. 
15. Using Existence Tool
• There are some good tools out there for you to analyze the market as well as your competitors. For example, Google Analytics is a good one. If you are serious about SEO, you should be familiar with at least one of the tools out there, it will give you a lot of useful information. 

Updated (May 11, 2011)

I came across a site today called Ping-o-Matic, what it does is trying to ping the search engine that your site is updated.  So it is a good tool to make sure your contents are most up to date in the search engine.

Btw, you can do the same thing by setting up a script that do the following, you can set it up as a cronjob if your site is update frequently.  (Below is not a working link, just a sample ...  For other search engine, you need to find how they are being notified!)

http://www.google.com/webmasters/sitemaps/ping?sitemap=http://www.yourwebsite.com/sitemap.xml


If you are interested in further reading about Pinging for search engine and what it is, there is a blog talks about automatic blog pinging using PHP.

http://www.hagrin.com/260/how-to-implementing-automatic-blog-pinging-using-php-and-xml-rpc

Here is a slideshow about SEO in wordpress

Cool Color Code

Have you ever try this color code - "BADASS" ??

BADA55

Progressive Enhancement vs. Gracefully Degradation

Currently in the web development world, there are two different strategies for dealing with development against different browsers or systems. One is Progressive Enhancement and one is Gracefully Degradation.

The first one is you first build a base website that all the browser can render, then enhance the features that newer browser support.  So the experience or look and feel will be slightly different for those people who use new browser and for those that use older ones. It is a bottom-top design - you first design the base and build special features on top for modern browsers. And the benefit is that it contains all the information (contents) a user needs.

The second one, on the other hand, it is a top-bottom design and it prioritize presentation. You first start with the modern browsers, and later you fix the older browsers such that it doesn't break.

Below is I copied from other articles I read before :

Graceful Degradation is a widely used term which ideology is basically using the latest technologies first, and then fix anything that needs fixing for older browsers. We do this on a daily basis: most of us code for Firefox first, then fix Internet Explorer. That is Graceful Degradation in the practice.

Progressive Enhancement refers to the habit of building first for the less capable, outdated browser and then enhance for the latest technologies. We, too, use this on a daily basis. For example, most of the times we code a website we start with the markup and then apply an external CSS file where we add all the styling. That is Progressive Enhancement in the practice.

YUI Graded Browser Support has mentioned the following:-

"These two concepts influence decision-making about browser support. Because they reflect different priorities, they frame the support discussion differently. Graceful degradation prioritizes presentation, and permits less widely-used browsers to receive less (and give less to the user). Progressive enhancement puts content at the center, and allows most browsers to receive more (and show more to the user). While close in meaning, progressive enhancement is a healthier and more forward-looking approach. Progressive enhancement is a core concept of Graded Browser Support."

For more information, I found these two links quite comprehensive:

http://dev.opera.com/articles/view/graceful-degradation-progressive-enhance/

http://www.thatagency.com/design-studio-blog/2009/07/progressive-enhancement-vs-graceful-degradation/

CSS selectors combined behavior

Have you ever seen rules like that?
#home .row.boxes { ... }  // note that .row.boxes  2 classes are combined

Here is another example,

div.foo.bar[title^="Test"] { ... }

And when I played around with it, it is used for targeting an element that has "row" and "boxes" at the same time.

Let's using the same rule here:  #home .row.boxes { ... }

<div id="home">
    <div class="row boxes">This will pick up that css rules</div>
    <div class="boxes row">This will pick up that css rules</div>
    <div class="row">This will not pick up that css rules</div>
    <div class="boxes">This will not pick up that css rules</div>
</div>

You can think about this "combined" rules as "AND", in other words, the rule mentioned above says, only if "row" AND "boxes" are in the same element.

It is quite useful in some cases.  Think about the following case, without the combined rules, how can you only targeted the "bold" element?

<div class="boxes">
    <div class="row box">Hello World</div>
</div>
<div class="boxes">

    <div class="box">Hello World 2</div>

</div>

<div class="boxes">

    <div class="row">Hello World 3</div>

</div>

String conversion to numbers

I came across the PHP documents today on Type Juggling and String conversion and find this interesting behavior.

$result = 10 + "10 pigs";  // integer(20);
$result1 = "10.0 people" + 10';  // float(20.0);

The "+" sign is an automatic type conversion operand.  Just like the example above, it doesn't care if you have non-numeric string inside your "string", it will convert to numbers for you.  The catch is, the number in a string must be occurred first, it won't work if the numeric value sits in the middle of the string.

According to the PHP document,

A valid numeric data is an optional sign, followed by one or more digits (optionally containing a decimal point), followed by an optional exponent. The exponent is an 'e' or 'E' followed by one or more digits.

For further readings, here are the links:

• Type Juggling 

• String conversion to Numbers

How cookie works

A lot of developers know how to get / set cookie to persist their application, however, not necessarily all of them know how cookie actually works.  Here is a short tutorial on how cookie works.

When your browser send a request to a website "A", your client (browser, for example) will contact server "A" for contents.  Your browser will look on your machine whether a cookie that has been set by "A".  If it finds the "A"'s cookie, your browser will send all those related name-value pairs in the file to "A" as HTTP headers. If it didn't find the file, it won't send any cookie data ( well, that's obvious ).  After that, the "A" website can use the cookie that the browser send, and "A" can set additional cookies for future use.  Also, the cookie is a text string that is include in the request and response, that's how "A" can interact with your browser.


The following is a more visualize version of how cookie is set and get:

1) when you request a server by url a http requst will be sent ( assume this is the first time access )
============================
GET /index.html HTTP/1.1
Host: www.abc.com
============================

2) when server response, it will have something like that
============================
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=iroy2000
============================

3) now the browser request the same page again
============================
GET /index.html HTTP/1.1
Host: www.abc.com
Cookie: name=iroy2000
Accept: */*
============================

Extra Note about Cookie
What's the difference between "session" and "cookie" ?
There are two kinds of cookies: session cookies and persistent cookies. The session cookies are stored in memory on the server, whereas persistent cookies are stored in a cookie file on the client.

Some developers, when they first start, may be confused about "session" and "cookie".  In short, "cookie" is saved in the client's browser and can last for a long time (it first saved in browser memory - "temp cookie", but if you set a long time-to-live value, the cookie will be saved into a file - "permanent cookie" ) , while "session" is saved in the server and only valid for a browser session.

What is a persistent (permanent) cookie?
A persistent cookie is a cookie which is stored in a cookie file permanently on the browser’s computer. By default, cookies are created as temporary cookies which stored only in the browser’s memory. When the browser is closed, temporary cookies will be erased. You should decide when to use temporary cookies and when to use persistent cookies based on their differences:

• Temporary cookies can not be used for tracking long-term information.
• Persistent cookies can be used for tracking long-term information.
• Temporary cookies are safer because no programs other than the browser can access them.
• Persistent cookies are less secure because users can open cookie files see the cookie values.

And depends on your architecture and your use case,  one method may be more preferable than the other one. Let me list some points that you should consider:

1. How many servers you run your website?  Remember that "session" is saved in the server (yes, a server, not multiple server), so it means if you have more than one server in your cluster, you need to maintain the "session" for a particular user.  Usually people sync the "session" using the database, and I believe apache's mod_proxy provide sticky session that maintain sessions in multiple server settings.  However, cookie is saved in browser, so it won't care how many servers at your back.
2. How sensitive is your data?  Since "cookie" is save in your local machine, it means your user could potentially modify those data.  For example, firefox users can modify their cookie values.  If you do not want your user to modify the information, and if the data is sensitive, it is recommended that you should not use cookie to hold the data, but instead, try to hold sensitive data in database and use cookie to hold the ID for future retrieval. 
3. How long you need your data? Well, as mentioned above, session is for a browser session, cookie is for longer term.
4. How large is your data? Cookie since it is saved in the browser, it has a size limitation, if you are going to store big amount of data, you should consider session or database, because these both saved in a server and has more generous limitation than session. 

Additional Readings

• http://www.nczonline.net/blog/2009/05/05/http-cookies-explained/
• http://www.nczonline.net/blog/2009/05/12/cookies-and-security/
• http://www.ravelrumba.com/blog/third-party-cookies/

jQuery - check element if it's existed

This is the correct way of doing this

if($('.myClass').length > 0) {

    // blah ...

}

Some people ask, why the following doesn't work??

if($('.myClass')) {

    // blah ...

}

Well, it's because jQuery selector always returns you an Object. 

===

Of course, if you are using plain javascript, then it is correct.  For example,

var home = document.getElementById("home");

if(home) {
  // blah ...
}

Dangerous about Outreach as an end goal model

!! The following are just my personal opinions / observations. !! It is not pointing  to any particular groups or organizations, it is just about a potential of making things better for the future.

Definition
Outreach as an end goal model – words by words – means you have fulfilled the goal of bringing a good number of people into the church.  And you think it is a mission completed.

However, outreach by NO MEANS should be an end goal or just one of a particular isolated events of the year.  We are talking about “life” business here, not just bringing a good number of people to the church and that’s it.  Without a series of following ups for those new “outreachees”, we are no different from leaving them on isolated island and let them to play the game of “natural selection” – so at the end, only the fittest will stay.   Let me rephrase it, it means you bring people into church and isolating them??!!

And this actually makes outreach  become a poison for new believers and non-believers.  How?? One’s early experience / observations in the church (or a group)  could determine his perception of “what a church is” for his life time.   So what does it mean??  Perhaps it means we’re blocking God’s hand to touch those people’s heart…  Have you ever heard some people they saw bad things in the church and never went to church again???  Do you think it will be more difficult to outreach to those people who has been to church but had a bad experience before??

So when you think you have completed a “mission”, have you ever thought whose mission you are completing for??

You may not be the one who do both outreach and follow up at the same time, but are those 2 things should be tightly related to each other??

Let me make it more visualize – the dangerous of “Outreach as an end goal model”.  Let us make a “田”, if you know chinese – “田” means a farming field, and inside a “田” is soil.

Assumption for this model:
1) Outreach brings new life to the field.
2) Following up bring those new life to be future workers in the field who will bring other new life.


Detail – yet not very detail
Soil A is the best soil.  With both outreach and following up in shape, there is a eco-system of 1) Outreach – bring new life to the field, 2) follow up – make the new life become the future “workers” in the fields to outreach other new life.  And through this eco-system, there are several side benefits that comes with it.  1) Encouragement; 2) Bringing meaning to your serving; 3) Grow in size … etc.

Soil B is bad testimonial soil. People only do the outreach but neglect the importance of following up.   It means the plants could be die down for whatever reasons easily and they don’t have support.  What does it mean?? With no following up, unless they ask for help, nobody will know or  care what’s going on in their life.  With no following up, it means you bring people into church and  isolate them??!!

Soil C is in grown soil, which is bad too.  In this Soil C model, the church members become so comfortable with their current church life, and do not want to have a change. And this is why Bible said “Now is the harvest time, but where are the workers ?”.  The church will start to ingrown only, and it is the  beginning symptoms of a “no life church”.  No life means no new life, No life means there won’t be next generation leader to revive the church.  So Soil C is a ingrown shrinking land.

Soil D, please, that should never be happening in our community…  That is a social club.

Mobile (Hybrid) Apps Introduction

Been to several events that talk about mobile development recently.  Looks like the "web mobile apps" is the way to go in the future.  And the technology using here is quite simple and standardized - html5, css3 and javascript.  With the new HTML5, it provides lots of features like canvas, videos, geo-location, local storage ... etc, it makes developing a persistent web apps for mobile phone become highly doable.  And the techniques of developing web apps in mobile is not much difference than doing that in the browser, the only difference is the API (and device) you can access. Well, of course, doing web apps in the mobile has its limitation too, for example, performance is an issues.

However, there is a concept of Hybrid App, which converting your web apps into a native app for your mobile.  So in this way, you are still using html5, css and javascript (yep, you don't need to learn Objective-C ... etc) and yet your app will end up be compiled as native app and can access your phone features / devices.  And it solved the problems that a pure web mobile apps had. PhoneGap is one of the leaders in this field.

There are several links I found useful  for mobile web development, let me share it here

http://tinysrc.net/   - a free service convert your image into appropriate size on the fly
http://caniuse.com  - can you use certain feature in html5, css on a various platform
http://blitz.io/ - load testing for mobile
http://origwww.blaze.io/mobile/ - test your website performance in mobile devices
http://www.webpagetest.org/  - similar to above
http://punypng.com/ - a free web service to downsize your image without trading off quality

jQuery selectmenu - call back

The jQuery selectmenu  documentation is kind of confusing, it lacks of examples and documentations.  Well, it covers how to use this plugin in its basic way, but nothing more.

I came across this problem of firing callback when the menu is changed. The documentations says;

Callback events The selectmenu plugin provides callbacks for open, close, select, and change events, allowing you to execute scripting based on those events. The change event even triggers a change event on the original select element, allowing you to reliably track form change events.

Do you pass your call back in as one of your config parameter or what?? And finally it is how it works:

// You first need to initialize the select menu and bind your element
$('.menu-drop').selectmenu({ style: 'dropdown' });

// Now there are some new functions bind to ".menu-drop" that you can use

$('.menu-drop').change(function () {
        //either ajax call or whatever you want
});


Well, of course, you should be able to chain that (recommended) ~

$('.menu-drop').selectmenu({ style: 'dropdown' }).change(function () {

        //either ajax call or whatever you want

});

Javascript code only works in firefox when firebug open???

Symptoms: Your javascript code works only in FF when firebug is turned on.

Solution:  Look inside your code and see if you have console.log or something like that in there.  Because when firebug is turned off, the console is becoming undefined.

If you must have the console in your code, try to wrap your console in something like this:

if(window.console) {
    console.log();
}

IE throws Invalid Argument when calling window.open() ??

In my javascript code, I try to open a new window to hold a div ( a block of contents ) for printing.  And IE throws me an "Invalid Argument" error ( while other browsers are fine, which is usually the case ~ ).

I search online, there are 2 different methods to deal with this problem:

1)   var w = (window.open(urlstring, wname, wfeatures, false));

2) You cannot have 'space' in between "wname" items in IE.

I tried the first one, it doesn't work; and I tried the second 
one, and it works.

For the method one and its explanation, here is the link
http://stackoverflow.com/questions/710756/ie8-var-w-window-open-message-invalid-argument

jQuery nth-child counts wrong in IE ??

I came across an interesting problem today, we are using a nth-child selector in jQuery.

$(".tag_even tr:nth-child(2n)").addClass('even');

Somehow a person code something wrong in the table, he inserted a <div> as one of the <tr>.

Because the selector in jQuery target at "tr", so the div should be ignored.  It make senses, right?

This assumption is true for FF / Chrome and Safari, but IE still count the "div" in? What the hack??

It is because IE wrap the table each children elements with a "nodeIndex", and jQuery when in IE, it uses "nodeIndex" for counting the nodes, no matter it is a "tr" or not.  The below is how jQuery implement the nth-child selector, and please look at the "bold" part that it is using "nodeIndex".


                CHILD: function(elem, match){ 
                // ... 
                        case 'nth': 
                                        var first = match[2], last = match[3]; 
                                        if ( first == 1 && last == 0 ) { 
                                                return true; 
                                        } 
                                        var doneName = match[0], 
                                                parent = elem.parentNode; 
                                        if ( parent && (parent.sizcache !== doneName || ! 
elem.nodeIndex) ) { 
                                                var count = 0; 
                                                for ( node = parent.firstChild; node; node = node.nextSibling ) { 
                                                        if ( node.nodeType === 1 ) { 
                                                                node.nodeIndex = ++count; 
                                                        } 
                                                } 
                                                parent.sizcache = doneName; 
                                        } 
                                        var diff = elem.nodeIndex - last; 
                                        if ( first == 0 ) { 
                                                return diff == 0; 
                                        } else { 
                                                return ( diff % first == 0 && diff / first >= 0 ); 
                                        } 
                        } 
                // ... 
                }, 

Another Post about eval() is Evil

Not only eval() is evil, the following functions are something you need to be careful when using it (Basically those four functions are coming from the same family).

eval() // the famous "evil"

Function()

setTimeout()

setInterval()

Please do not use those function to evaluate string. Because everytime when you do that, the javascript needs to evaluate the string, parse it, and then execute using the compiler. And this will cause you a so called "double evaluation penalty" which will slow down your script.(well, of course, you don't need to care if you are just a small website).  And also, using those functions give you access to compiler which could pose security issues.

In short

So stop using eval() and Function() if possible. Well, there is no problem to use setTimeout() and setInterval(), the only catch is, please avoid passing string to these 2 functions.

Image not showing in IE

Symptoms: My JPEG image shows in FF/Chrome, but it doesn't show in IE??

If you have that issue, there is a simple fix. Try to resave your image using photoshop or other photo editing softwares in RGB color mode.

The reason is sometimes your image is in CYMK color code, which won't be understood by IE. Because IE so far only understand RGB, and CYMK is a print format, not really for web.

For people who are using photoshop, when you save your image, use the "save for web" options.

From Failure to Success Culture

We are in a culture that encourage success and high performance, no people really talks about failure. Because people tends to make the term "failure" same as "nothing good in it" or "shame". But how many "winners" out there have never once been a "loser" at certain time or how many of them have never made a mistake that brought them into all times low??

Most of the people must have experienced failure at a particular time, but it is not the end of the story. Every time you experienced a low is also a time that you can learn from it, which is the path to your future success.

But somehow, in our culture, we are made to deny our failure or to blame others for the failure. And thus we are not at all benefited by learning from those valuable lessons, and that is the worst of all.

I'm not encouraging failure, and I'm not telling you to pursuit for failure; But what I'm telling you is, life is a lesson, and you are always in learning process until you finish the course.

A wisdom quote

Please do not hide when something goes wrong, or pretend things will go right eventually by itself. 

A New Word - Greweet

Wow, I just invented a new word today - Greweet ( Gre - weet ).

It's the combination of "Great" and "Sweet".

It is used for expressing your appreciation of somebody's "exceptional" performance or action.

Usage: Well done!! You are so Greweet!

Updated:- I have submitted the word to urban dictionary, and it is published!!
http://www.urbandictionary.com/define.php?term=Greweet