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

car-dealers

 

adsense-box

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.

 

 

 

How would this look ?

CSS3 404 Error Page for Codeigniter

Instead of the boring

Boring Codeigniter Error Page

Want the Code ? There you go ! Just paste the  code in your application/errors/error404.php.

< ?php header("HTTP/1.1 404 Not Found"); ?>
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>404 Not Found</title>
<style type="text/css" media="screen">
body
{
color: white;
background-color: #AAA;
margin: 0px;
font-family:"Droid Sans",Arial;
}

#horizon
{
color: white;
background-color: #37AEB6;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 0px;
overflow: visible;
visibility: visible;
display: block
}

#content
{
margin-left: -205px;
position: absolute;
top: -34px;
left: 50%;
width: 380px;
height: 60px;
padding:10px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow: 0 0 15px rgba(255,255,255,.9);
-webkit-box-shadow: 0 0 15px rgba(255,255,255,.9);
text-shadow: 0px 0px 1px #000;
visibility: visible;
background: rgb(155,0,0);
background:-webkit-gradient( linear, left bottom, left top, color-stop(0.24, rgb(250,0,0)), color-stop(0.89, rgb(128,20,20)) );
background:-moz-linear-gradient( center bottom, rgb(250,0,2) 24%, rgb(128,20,20) 89%);
}

.bodytext
{
font-weight:bold;
font-size: 13px;
text-transform:uppercase;
}

.headline
{
font-weight: normal;
font-size: 30px;
text-shadow: 0px 0px 4px #000;
line-height:38px;
}

a:link, a:visited
{
color: #06f;
text-decoration: none
}

a:hover
{
color: red;
text-decoration: none
}

.captions
{
color: white;
font-size: 10px;
line-height: 14px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: left
}
</style>
</meta></head>
<body>
<div id="horizon">
<div id="content">
<div class="bodytext">
<span class="headline">404</span><br />
Sorry, the page you're looking for is not found</div>
</div>
</div>
<div id="footer">

</div>

</body></html>

 

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]

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.


www.mahbubblog.com in IE9 






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

www.mahbubblog.com in Chrome

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 ?

 

Read the rest of this entry »

Crystal Database Wrapper for PHP
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.

<br />
 $db->select('products, clients')->from('table')<br />
 // Produces SELECT `products`, `clients` FROM `table` - Available in Crystal 0.3</p>

<p>$db->select('very_long_column_name :as column, products')->from('table')<br />
 // Produces SELECT `very_long_column_name` AS `column, `products` FROM `table` -- Available in Crystal 0.3</p>

<p>$db->select(array('products','clients')->from('table')<br />
 // Produces SELECT `products`, `clients` FROM `table`</p>

<p>// You can use string if you need single column<br />
 $db->select('products')->from('table')<br />
 // Produces SELECT `products` FROM `table`</p>

<p>// OR if you need complex columns selection, you can skip Crystal's default parameter filtering<br />
 $db->select('products, MAX(price), MIN(payment)', FALSE)<br />
 // Produces SELECT products, MAX(price), MIN(payment)<br />
 

Read the rest of this entry »

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 :

http://www.zendcasts.com/wp-content/uploads/2008/12/zc1-technology-overview-screen.mov

http://www.zendcasts.com/wp-content/uploads/2008/12/zc2-setup-folders-for-zend-mvc-screen.mov

http://www.zendcasts.com/wp-content/uploads/2008/12/zc3-creating-a-zend-index-file-screen.mov

http://www.zendcasts.com/wp-content/uploads/2008/12/zc4-creating-controllers-screen.mov

http://www.zendcasts.com/wp-content/uploads/2009/01/zc5-adding-a-doctype-and-stylesheet-with-zend-screen.mov

http://www.zendcasts.com/wp-content/uploads/2008/12/zc6-using-blueprintcss-with-zend-screen.mov

http://www.zendcasts.com/wp-content/uploads/2008/12/zc7-custom-routes-with-zend-controllers-screen.mov
Read the rest of this entry »

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.

So, use it when u need it :)

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.
Mahbub - Family Tree

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

data.addRows([
['Kalu Khan','','1570'],
['Ahsan Khan', 'Kalu Khan', ''],
['Jharu Khan', 'Kalu Khan', ''],
['Ajmat', 'Ahsan Khan', ''],

]);

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..

And you can also see my 10 generations family db — mahbub-family-tree.

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.

prescription pad

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.

Leave me a comment if you want the source AI or EPS file.

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.

#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.

Compatibility:

Firefox 3

Opera 10

IE 7 (I don’t care if it works in IE 6 or not)

Chrome

Safari 4 (win) [ Don't know about Mac cuz i don't have any :( ]

EXAMPLE :

example image

So, in Blueliner Bangladesh, we needed some PHP programmers in the coming months. I almost took over 20  interviews from screened out CVs and found some good candidates. There’s some points we’d like the programmers of this country to be concerned about. Here are some of my observations and recommendations.

You have to learn yourself. Company may not give the opportunity!

This is one of the most common pitfalls i found in this recruitment drive. Most people complain that they don’t get enough time to learn about the latest tools and technologies. But the thing is, It’s your career! the companies will always try to get the best out of you within shortest possible budget and time. And at the same time you have to enrich yourself not only through the projects you get but also with some voluntary open source projects. What most companies don’t realize that, if the programmers are not given some room to do R&D, it’s eventually the organization who will lose by compromising with the standards of the programmer against budget. And the programmers are not updates with the latest tools technologies. So, guys! you have to take some personal effort to play with the newer things. Even if you don’t get a minute in the workplace, find some time at home to do some R&D. It will pay off inshAllah.

Ability to do things VS Ability to do things with Art.

There are hell lot of renowned Javascript programmers but how many do we know? John Resig, Jack Slocum, Remy Sharp and so on. Why do we know them ? Because they did something which others didn’t. They did things with Art for which we know them. So all the promising programmers, please concentrate on doing thing with Art. If you know jQuery, learn how it works, who’re the people behind it, follow them on twitter, read their blogs. Let alone John Resig’s Blog can give you a very good insight what’s being cooked for the next generation javascripts. BE detail oriented about things you play everyday with. You’ll always be appreciated for things you want to do not “things you had to do”.

Object Oriented Programming

PHP had been very lose in standards and conventions when it comes to Object Oriented Programming. The recent releases of PHP are much more matured that it used to be in the past. I started in 2000. We can do lot of things without even following the standard way. But dear PHP programmers, better companies or promising companies will take you because you’ll make some magical changes, add some new dimensions in the organization. So please be very clear and efficient about Object Oriented Concepts and way of doing those things in PHP. There’s a difference between a programmer who declares a class “abstract” knowing when it’s needed and a programmer who knows OOP but doesn’t want to declare the class abstract. PHP is not at the pick of it’s maturity. So try to discover which things are absent in OO PHP which are there in other languages (C++,Java, Ruby).

Have some publishing activities

To present yourself as a passionate programmer, you gotta have a blog or some sort of publishing which is visible on the WWW. If you have a blog and you write about things you play with, problems, time saving solutions, it will help you a lot getting the attention as a good, focused and passionate programmers. So start your blog now if you don’t have one. It takes a little time to get used to with some writing habit.

Care more on the CV

May people simply flooded of with bunch of tools and technologies. Many of cv looked like they are Jack of All trades. But hardly anyone was proficient in all they mentioned. So please, do not put items on which you don’t have substantial hold of and just for the sake of filling up CV. If you write you are good at Javascript, expect advanced level questions from JS. If you write “Good in OOP” , expect higher level questions from OOP.  Make the CV withing 3 pages maximum. It irritates the interviewer when people have long descriptions about each project you have worked on.

There are other points i wanted to write but the post will become longer than the comfortable or acceptable length. So i’ll share some more next hopefully.

top