Well this is not a new issue and neither the solution is but I wanted to repeat it so that newbies don’t waste time hunting for this problem.

jQuery core is added by default in WordPress Admin Pages BUT in noConflict() mode. So if you are writing a plugin and want to use jQuery you will get an error for using $ because this dollar namespace is not exported in noConflict mode. As a result, your habit of writing

1

2

3

$(document).ready(function(){

....

});

will result an error saying $ is undefined.

To counter this problem, there are a number of ways. First and the most suggested obvious way is to use like

1

2

3

jQuery(document).ready(function($){

// Now you can freely use $ within this scope

});

BUT, we want to do something more useful. We are going to use a combination of Closure / anonymous function + Global Import.

JavaScript has some very good features. If you have read the design patterns, you will find it very familiar, and if you haven’t it won’t be much difficult. The closures can be self executing functions. Like

1

2

3

(function(){

// This gets executed automatically.

})();

Now there’s another thing called Global Import using this closure. Let’s have a look at how they look like.

1

2

3

4

5

(function($){

$(document).ready(function(){

$("#myDiv").html("Hell Yeah");

});

})(jQuery);

Almost all the well written libraries expose a global namespace. For jQuery it’s jQuery, for Yahoo it’s YAHOO and so on. Notice that we have supplied this jQuery nameapce in parameter of closure and using $ in the callback function parameter. Now that $ can be anything. If you write $YO , you will be able to write $YO(document).ready(….) . Why to follow this ? Because you can use any of your legacy script within this anonymous closure without any modification – not even $(document).ready.

So, next time you write some jQuery code in your plugin admin pages for WordPress, consider using the second method mentioned here.

Google Adsense recently changed the ads they used to look like. Here are how they appear now with those big ugly arrows.

Now, Google says it has been introduced to protect more advertisers interests so that visitors don’t click on ads unknowingly. While it might be a good reason, but look at the aesthetics, it’s going to be really tough for publishers to put these ads on a site which has very good aesthetics. These buttons simply don’t go with most of the layout of the site and content and thus looks really awkward. Advertisers might be happy since it will bring more genuine visitors to their site and their Cost Per Click will be more justified than before BUT Google should really re-think about the design of the ads as they appear to be disgusting.

There’s CSS3 Drop Shadow, Text Shadow and Gradient. Nowadays people are using latest browsers and it’s likely that people will see the page like the image for most of the popular browsers .

Of course you can use it for any 404 page for any PHP app OR if you like it you can even replace your apache 404 page (hosting specific) with this one [Just remove the php codes from top]
Codeigniter, CSS, design

Ok, so i got this news of Internet Explorer 9’s BETA release from Huffingtonpost.com and was quite curious to put it to some tests. Not that too much technical test and all those performance benchmarks – but from an average browser’s point of view. I don’t want to demoralize everyone at the very beginning with some negative comments. Let’s just try to be positive and compare with some other popular browsers (of course Fireforx, Chrome, Safari and Opera). And i don’t want to iterate things written in Microsoft’s site. They did it for IE 8 and their blazing fast JavaScript Engine but all those simply didn’t work for us (developers). None of us made IE as their default browser and from W3C’s browser stat page, it doesn’t look quite promising for Microsoft.

Anyways, let’s just compare some sites in the new and so called Ambitious Browser – Microsoft Internet Explorer 9

1. I begin with my very own blog. I recently embedded one of my favorite font (Titillium) as one of the best CSS3 feature. And i’m disappointed with IE9’s output. Look here.

If you enlarge this image (clicking) you can see the header is plain Arial. And this is the IE9.

And here comes the output from Chrome. Can you see the font rendering ? It’s almost perfect here. Firefox, Safari behaves the same. Why Microsoft Couldn’t do it in IE9 ?

One of the sites i keep an eye on is greepit.com to know about some of the latest and coolest tools in web development. I came across this new Database Library or wrapper called Crystal database wrapper. The library really looks promising and in fact appears to be minimalistic as they claim. They also have a data validation module and manipulation module which is all you need to create basic to intermediate apps. From the user guide i looked at some of the examples of CRUD and i just felt it’s Active Record from Codeigniter. As i did a lot of Codeigniter sites so far, it just looked so comfortable to me. Just for an example.

I’ve been writing an Ajaxified App in Zend with Doctrine and was looking for some efficient ways or shortcuts to get a good grasp on Zend+Doctrine. It seemed a bit difficult in the beginning to integrate Doctrine in Zend Framework. Then i came across this huge resourceful site zendcasts.com where a massive number of Zend Framework tutorial videos are there. Got 5 video tutorials related to Doctrine which are awesome. The best part is that there are corresponding project files hosted in google code for most of the screen casts. This is a huge help since you get ready made thing what you have just seen. Looking at the index there, a treasure of zend videos popped up by this nice guy – Jon Lebensold. Then i watched lot of those but wanted an offline ways to watch at my discretion. So i had to hack the video sources using firebug and prepared this list to download the videos so that other people may download these videos and watch them offline. Here’s the list :

This is just a small tip. A lot of us use CYGWIN as a port of *nix apps in windows to do various things. And we use different types of terminal like CMD on windows, Git-Bash or Konsole. Now the problem is, CYGWIN default (or even advanced) installation option doesn’t have ‘clear’ command like we have it in Linux. And it’s annoying esp. when we try a ls -l command and it fills up the screen. The undocumented feature of CYGWIN console is that it clears up the screen when you press CTRL+L.

Ever wanted to build your family tree ? Hell I did, cuz I have records of last 10 generations (Yes, I’m not kidding). The list was maintained by my Grandfather who handed to my father some 15 years ago. Sounds filmy, huh ? Anyways, as we had that in pen and paper, i wanted to make program that generates it. I started JavaScript in late 1998 and in 2002 I wrote a script [only for IE 🙁 at that time ] which shows a family tree and the DB is easily updated from the source. You can run the script downloading from here. I just checked it in IE and it seems to be working still after 8 years.

Yesterday, I was just browsing Google charts and visualization libraries to see if there’s any new thing since I saw them last time. And I saw this organization chart which can be used to build the family tree. So i just wanted to see how our 10 generations’ family looks like when putting them in Google’s visualization library. And it came out a really big horizontal one as you can see below.

Now, you can simply make your family tree using this API. It’s dead simple. Just see the couple of lines of code which is pretty self explanatory. I’m putting a little light here for easy understanding. So go and have fun creating your family tree and show it to your elderly persons, they might be happy seeing it.

To get started, just start with the sample code Google is providing here . http://code.google.com/apis/visualization/documentation/gallery/orgchart.html#Example

And if you look at how the database is being constructed, it’s very simple. For my BIG table i had the staring point like this

It means Kalu Khan is the root. The second Parameter is left blank which means it doesn’t have parent. Next you have to add Children node to it. The first parameter is the Children Name and second one is the Parent Name.

[‘Ahsan Khan’, ‘Kalu Khan’, ”] ——– Here Ahsan Khan is the Children and ‘Kalu Khan’ is the parent. So just make the list for your family and save for next generations 🙂

Oh, there’re some other options there as well like collapse / un-collapse and styling those nodes. Keep discovering..

It’s been quite a long time since i designed for some print materials. One of my best friends from elementary & high school (& still is) requested me to design his prescription pad for him because his current one looks horrible. He’s a general physician and a very good orthopaedic surgeon. So i thought i’d give a try for my friend’s prescription and this came up after a 2 hr effort.

I used two of my favorite fonts called “Square 721 BT” and Titillium. Google it if you want to download them. And it’s the first composition with Adobe Illustrator CS4 after doing anything with CS2.

I ran into this problem recently and found a good fix. As we make custom CMS, blogs as parts of websites, we frequently use some WYSIWYG editors like TINYMCE. Now when you enable people to post contents along with image urls, people may enter an image url which possibly is much larger than the available width we have in the page layout. Perhaps most of the images may become larger as we would only get around 650px of width when we are using 960px standard layout with some sort of sidebars.

So the user’s posted image in the blog post may overflow the layout. What to do then ??

1. We want to keep the image within the available width (may be 600px).

2. We also want to keep the aspect ratio intact so that the dimension doesn’t get messed up.

After googling in some pages I had to combine the CSS solution which works for most of the modern browsers (certainly not IE6).

So here’s the neat solution totally in CSS.

1

2

3

4

5

6

7

8

9

#post_view img {

max-width:620px;

height:auto!important;

width:expression(this.width >620?620:true);

}

The above snippet assumes that your ID for the container (i.e DIV) is post_view. I’d discourage using class here because ID has a higher order of preference when it comes to override CSS rules.

So, all the image who exceeds the width of 620px will be automatically resized to 620px. Images below 620px will not be affected at all. The height: auto !important; will keep the aspect ratio of the image to the original ratio.