Thursday, September 29, 2011

Funny Bugs Make Good Interview Questions

I'm currently collecting my set of standard interview questions for future candidates.  The following is one of the those which would be in my list, and it is coming from a bug that I found recently.

I was tracing some bugs few weeks ago and found out the following code snippets ( well, it is a modified version ).

Can you spot any potential problems for the following code?

filterResult: function(query, collection) { 
  var matches = [];
  var resLen = collection ? collection.length : 0;       
  for (var i = 0; i < resLen; i++) {            
    var item = collection[i];
    var itemStr = ( + +;          
    if (itemStr.indexOf(query) != -1) {
  return matches;

And my next question would be asking from performance and best practice points of view, how they could enhance this code.

Actually fixing this bug doesn't take that long, but the process of hunting this bug and tracing the logic is tedious.  The function works 99.9% of time, but it failed on a small number of test cases.  And the process of collecting failed cases and understanding the relationship among those failed test cases took quite some patience.  But seriously, it is fun :)

CSS4 first public draft

Can't believe it, CSS4 is on first public draft now. One of the long asking features was how to "select a parent", and it is coming to CSS4.

How you can select a parent in CSS4 ? Let me quote their syntax

$E > F

Yep, that's it.  So for example,

#roy $div >  .header { ... }

And the css definition inside is applying on parents of ".header", which is the div (please note there is a dollar sign).  Is that a cool feature?

There are also some new pseudo classes seems interesting as well

:only-child,  :nth-match, :matches ... etc

Here is the first draft link, if you are interested.  But I don't think it will be final until 5 - 8 years later :)

Note: For those who are curious why there is no parent selector in CSS so far, here is a very nice explanation :-

Monday, September 26, 2011

Status Code 204 Bug in older jQuery

Recently debugging an old tool written partially in jQuery ( version 1.3.2 ), and found out that the ajax call always ends up going to the error() callback.  But when I ping the web service, it is returning 2XX which is totally fine.  And I kept tracing until I found out a bug in that version of jQuery, aha!

Hope this post help those who may have a chance maintaining tools that are developed using older version of jQuery.

Some blogs mentioned that it is the jQuery doesn't accept 204 as success. But when I traced the jQuery code, I saw that it actually accepts 204 as a success.  So "204" is not the main reason.  Look at the following code snippets :-

        httpSuccess: function( xhr ) {
                try {
                        return !xhr.status && location.protocol == "file:" ||
                                ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status == 304 || xhr.status == 1223;
                } catch(e){}
                return false;

The main reason is not the http code 204 itself, but it is about what 204 actually means.  HTTP 204 means No Content.  It seems like "No Content" is something not correct at the very first impression, but think about this way, what about people who wants a web service to response a success but they don't need a body or message (well, they just want to know it is a success and that's all).  And that is what HTTP 204 means, success but no content.   

Even though the above jQuery snippets says that 204 is a valid response, and treated it as success;  however, somewhere later, jQuery has this function to throw a "parseerror" when there is no content.

        httpData: function( xhr, type, s ) {
                var ct = xhr.getResponseHeader("content-type"),
                        xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0,
                        data = xml ? xhr.responseXML : xhr.responseText;

                if ( xml && data.documentElement.tagName == "parsererror" )
                        throw "parsererror";
                . . .

So this is what jQuery ( older version ) says, "We accept 204, but if it is no content, we will throw you an error".

In order to fix the issue, you will need to do something in your error() callback

error: function(xhr, errText) {
   if(xhr.status == 204) {
       _successHandler(what, ever);
   _errorHandler(what, ever);

Thursday, September 15, 2011

Best CSS3 Utilities

Most of these tools are pretty well known, but just in case you haven't used or heard of them, you can try to click and explore yourself.  If you know more CSS3 tools that is useful, please feel free adding those to the comments.

If you are interested in creating CSS3 tools for the community,  let me know, we can definitely figure something out.

Saturday, September 10, 2011

Basic Linux commands for LAMP developer

Came across this blog recently, and found it's quite useful.  It covers some basic useful commands that a LAMP developer may need to use from day to day.

Besides the list above, let me include some of which I think all LAMP developer should have known.  [ Note:  I'm not including any advanced commands here, since this post is about basic only. ] 

wget - for retrieving stuff
scp - copy stuff in ssh way
scp fileA.tgz me@yourhostname:/path/you/want
rsync - it keeps an index of sync files which decrease the bandwidth usage when transferring ( yes, dump ftp )
rsync -avu  -e ssh ~/path/to/stuff me@hostname:/path/to/sync-with
top - check running process status, the basic usage is to check which process is taking the most memory, for example.

tar - backup by creating tarball, and you can use with other params to create tgz ( tar gzip ), for example.

alias - create alias for your commands, this will save you tons of time.

export - export a shell variables in your current session.

find - find files
find /mp3-folder -name 'Celio*' -and -size +10000k 

Please don't ask me why you don't see "mv, ls, rm, mkdir ... etc".  Those are not should know, those are MUST know for LAMP developer.

Please feel free to add (comment) what you think the basic commands that we all should know and is not listed above. 

Thursday, September 8, 2011

US Debt Crisis and Impacts

The video maybe exaggerated the consequences of the debt crisis, but it's definitely something we need to think about for this country and our consumption habits in general.

The following is a fiction video of what happen if one day the dollar crashes. Well, it is fictional, I don't think the leader in our country will let this happen.  But that's still scary.

Monday, September 5, 2011

Re: The grey areas of progressive enhancement

Going through some articles about progressive enhancement and found this one - The grey areas of progressive enhancement.

Well, not everything has to follow the progressive enhancement rules, let's keep it flexible.  If it is something critical for a business or corporate, you don't want that to lose the design.  And I believe it is the spirit of progressive enhancement as well, keep critical elements the same in all platform and let's those non-critical to be enhanced progressively.  

Here are something I can think of at this moment about progressive enhancement:-

  • Normal user won't look at your site using 2 or more browsers at the same time, so their user experience should basically be the same. But of course, those corporate identity design has to be kept as they are critical.
  • The cost of making everything the same in all browsers could be huge. And if it is not critical, why not just save those resources for something else?
  • You are punishing those users who are using older browser if we needs everything to be the same.  Because in order to achieve everything the same, client user may need to download extra images, extra js libraries.  

I came from the background of both "everything has to be the same" and "let's make it progressive enhance / gracefully degrade".  And each one has its good and bad, nothing is perfect honestly.

But for "making everything the same" method, here is my experience as a developer - You will learn the most out from it, but it could be a pain of the butt process.  Honestly if I have time and budget, I would do that, since it is fun. And a lot of famous libraries are coming out because some old browsers do not support certain features (maybe you could be the next one).  And again, if you have time and budget, just go for it :)

Ok, at the end, let me suggest you a graph and help you to decide when you should use "progressive enchantment" or not :)

The rule is "choose 2 and dump 1" :-
  • If an element has to be the same, and you have limited budget, you need to give a lot of time to it
  • If an element has to be the same, and you have short turn around time, you need to prepare a bigger budget ( hire more contractors, giving OT ... etc )
  • If you have both time and budget limit, think about if an element has to be the same or not. If it is not critical, then why bother?

Thursday, September 1, 2011

CSS Gradient test Gotcha, IE vs. other

Making some test cases for applying gradients on top of "something" for various browsers.  Since IE 7 - 9 doesn't  support gradient, so we will use the most compatible "gradient filter" for IE.  The test cases link will be at the end of this post.

In FF, Chrome and Safari, the result is the same as the following image :-

The above demo does not just only show you how to create different effects using gradients, but also includes some gotcha you may not know.  Please pay attention to box 3, 4, 7 and 8.

Box 3 and 4 - The background and the gradient is in the same box.  The order doesn't matter, the gradient will have more weight.  And the background will be covered by the gradient in both cases. 

Box 7 and 8 - Similar to the above, but we use "background-color" instead.  However, instead of being covered by gradient, the background color does show up.

So "background color" and "background image" could have different effects when used with gradient. And the next question will be why?  Since background color and background image both will fill the spaces, why background color will show up while background image won't.  I'm guessing this behavior is due to browser optimization, because calculating complex pixels in one shot could be slow.  But if you know the answer, feel free to let me know as well :)

Now it is IE's turn.  Actually IE's gradient filter play pretty well, and it doesn't have the background color and background image inconsistent issues.  Here is the screen shot, aIl E 7 - 9 looks the same.

See that?  The Box 3 and 4 background's image does show up.

So based on the above comparison, which gradient implementation is the correct one?  Is it the one covered the background image, or the one that doesn't?

My test cases page -, you can test on various browsers and feel free to add more test cases to it that you found interesting and let me know :)

I created 2 more test cases, Box 9 and 10 .  What I tried to do is to see the result when I do some permutations on gradient, background-image and background-color.  And this is what I found here :-

For FF, Chrome and Safari
  1. When you put background-image and gradient in the same box, gradient wins.
  2. When you put background-color and gradient in the same box, both merges.
  3. When you put background-image and background-color in the same box, background image wins.
  4. When you put 3 together, background-color and gradient wins.
Below is what my Chrome browser told me, it's consistent with the results listed above, maybe it is the default behavior :)  Gradient and background image cannot lived in the same element ?!

And IE actually behaves a little bit different.  Well after all, IE's gradient-filter is not the same as css3 gradient.

That's interesting :)

For those who haven't known it yet, W3C gradient color code is sequenced as rgba, while IE gradient filter color code is sequenced as argb.  Be careful when you copy and paste color code around :)

If you are looking for how to apply background image and gradients on the same elements, I found a post -