Dress Color Mystery Finally Resolved

So I have been saying that the dress is gold and blue like very few people and no one was believing. Well, eyes can be deceived but when it comes to Photoshop then i don’t think computers are color blind. I will prove that the dress is gold and blue in following steps:

1. First pick the colors from the dress in Photoshop or using any color picker tool.

I added the picture of the dress to Photoshop and first picked the color from the blue area aka white.dress-color-is-blue

If you look at the bottom of the color panel in the photo, u will see a hex code of the color. its #8693c0Now let’s get to the gold area which people think as black.


Now check the color is the second screenshot, showing a brownish color with a hex code of #7e6e4a. Visually, from screenshots, its proved that the dress is gold and blue now let’s prove it mathematically.

2. Comparing the color codes with that of black and white.

So you still think the dress is black and blue or gold and white. Let’s compare the color codes:

1. Color Code for black is #000000

When u want to give black color to anything in computer, your software uses the code #000000. Now if the dress was of black color then Photoshop would have given me black color code which is #000000 but it gives me brownish gold which is #7e6e4a 

2. Color Code for White is #ffffff

As said above, when u want to color something white, your software will use the color code #ffffff like this #ffffff. But using the color picker on the so called white area gave me the color code #8693c0 . This is definitely bluish or lavender Like, for your sake of convenience,  I have applied the color codes to themselves. Hence proved that majority of world needs some special glasses, specially guys like waheed sohail, iftikhar shinwari and asim ali 😀 Don’t worry no one knows them so don’t bother. Happy commenting 🙂


What is the real color of the dress that broke the internet?


The mystery is finally resolved. Click here to know


Tonight, I was setting with some idiotic friends (no offence to Waheed Sohail :P) and he showed me a dress and asked for its color. The dress probably looks Gold and blue but majority says that its either gold and white or blue and black. Well after doing some research, I found that its the angle of your screen which gives You a different color. Not sure about this? Here is the picture:

1425008415925855Now just tilt your screen and You will see the different type of color which your friends are reporting.

Taking the advantage of this, some people gave lame scientific explanations for this while other said that it is a new type of color blindness. Interesting fact is that this is just a normal dress wearing a price tag of $77 and there is nothing special in it. Its just a bad photography and the excitement of peoples which led to its virility.   Let me know if tilting the screen give u some strange color like green and orange 😀

How to store Site Configuration in Database

I am glad that after initial launch of my blog, I stumbled upon a code in my project which is worth sharing. I created function which will use database to store site configurations.

Recently, I got an email from my one of my client on whose project I am currently working. She enlisted a number of site settings which she wanted to be able to manage through the admin panel of the site. It would have been easy if it was one or two settings. But there were dozens of them. Now I had two options:

1. Create a php function which will edit php files and alter the variables in them
2. Manage it by storing the site configurations in database.

Well, I went with the second option because the first one was not feasible and will create a mess in long run. Because the php function will be utilized by pointing it to line number of the variable in a specific file. But what if another developer changes that php file and so does the line number of that variable?
So I went with the second option as follow.

1. Creation of a table in database:

Creating a table with columns named after all those settings variable was not an option because these settings are expected to expand in future and adding more columns to the table after that will not only make the table structure very big but will also effect performance as this table is expected to be queried on every page load.
So first of all, I created a table named “settings” which will store the site’s configuration in database. This table had three columns:

- id    (INT) AI
- name  (VARCHAR) 250
- value (VARCHAR) 500


As its obvious from the table, the name field will store the name of the settings variable while the value column will store the value of that name field.

You can see that there are a number of variables and their values shown in the sample table. After this, I was put into the thought that how to retrieve a specific setting’s value from the database because there was no column for the setting named variables and using a foreach() loop and comparing the variable name with that of the retrieved data was not an option.

2. Custom Function to turn the data into array

To solve this problem, I created a function which will turn the whole data of the settings table into an array. With name as key and value as value of that key.

//Function to get site settings

function get_site_settings() {
$query=mysql_query('SELECT * FROM `settings`');
$results= mysql_fetch_array($query);

//changing all the keys from `name` column and `values`
// to corresponding `values column

foreach ($results as $key){



return $settings;


I have used simple mysql functions but its not appreciated to be used. I just used them to simplify the function. I was developing the code in Codeignitor and I used framework specific functions.

So let’s explain it. First of all, I retrieved all the data from the settings table and stored it in a variable $results. Then I created an empty array named $settings. Then I used the $results in the foreach() loop and created keys by using $key[‘name’] and then sat the value of that specific key by using $key[‘value’].

As foreach() loop reads one array at a time, so it ensured that the value of every $key[‘name’] will be set to the corresponding value from the value column of database. On completion of the loop, we had an array named $settings.

Now to simply use the settings for site configuration, I will do the following:

//Out put site name
$settings['site_name']; //will give 'Abbas Haroon'

//output registration settings

$settings['user_registration']; //will give 'allowed'

//output comments approval

$settings['comment_approval']; //will give 'auto'

Using this array, you can easily use an if elseif statement to check the settings and do perform appropriate actions in your code. You can easily update the above settings using a mysql query from admin panel. Some points to be note:

  • Use Human Readable data in name and value columns.
  • Use lower case for all the stored data so that your script do not output unexpected error
  • Use Boolean values if possible

I hope that this might help you in your projects. I saw it once in WordPress. A table store the site configuration in database and use something similar to the above function to utilize that data. If you have a better idea to utilize site’s configuration stored in database, then please share it with us in your comments below. Also if you have any question you can ask, Happy commenting : )

CSS Hacks for Internet Explorer

Internet Explorer is a curse to web developers. I wonder when will Microsoft close that franchise. As a developer its always a headache to fix the CSS proprieties whether its IE5,6,7,8 or 10 and so on. A simple CSS code which will work in every other browser will refuse to show its effects when it enters the Kingdom of IE. You always have to use CSS hacks for Internet Explorer.

CSS hacks for internet explorer

Lately, I have been searching for a lot of Fixes for CSS in IE and i will like to share them all with you here.

1. Include a CSS file only for IE:

Its the most common way, include a separate CSS file in your page just for Internet Explorer. You can even specify the Version for which you want to include the CSS file.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css"/>
.header {
//your code here

Use this code in your HTML page, the <!–[if IE]–> makes sure that the code is loaded only when the user is using IE. If you want to load a specific CSS file for a specific version of internet explorer then use this code in the following way.

<!--[if IE 7]> <!--For IE 7-->
<link rel="stylesheet" type="text/css" href="ie7.css">
.header {
//your code here

<!--[if IE 8]> <!--For IE 8-->
<link rel="stylesheet" type="text/css" href="ie8.css">

<!--[if IE 9]> <!--For IE 9-->
<link rel="stylesheet" type="text/css" href="ie9.css">

Another amazing idea is to use the IE conditional comment to add specific class to the body tag, referring to that class, you can then select any child element and add CSS properties to it in just one file.

<!--[if IE]> <!--Add the body tag if browser is IE-->
<body class="ie">
<!--[if !IE]> <!--if browser is not IE then just add body without class-->

Now after adding that to your HTML page, you can easily control the proprieties for IE as follow:

//regular class for good guys
.header {
//for Internet explorer
.ie .header {

2. Hack For inline CSS or for few CSS proprieties:

Sometimes, you might want to adjust a few properties or have to adjust an inline CSS. You may not want to increase the requests to your server by creating additional CSS files. So here is the hack for writing Internet Explorer specific CSS properties without loading the a new file.

.header {
width:10px; //for normal guys
_width:10px; //an _ for that old IE6
*width:10px; //an * For Grandpa IE7
\0width:10px; //let the IE8 now that its worth zero 0
\9width:10px; //For IE9, worth Oops!

Now that CSS looks pretty ugly and will not even get validated by W3C CSS validator, it will work.But honestly speaking, Who Cares?

3. Using Media Queries as CSS Hack for Internet Explorer:

Well, I will totally do not recommend these methods because it uses flaws in internet Explorer. IE will run an invalid media query as valid while other browsers will simply discard it. Thanks to Microsoft, there are different flaws in different versions and using them, you can target specific versions of Internet Explorer. Here we Go.
Target the older Versions i.e 6 and 7

@media screen\9 {
.header { margin-left: 100px; }

Target IE6,7 and 8

@media \0screen\,screen\9 {
.header { margin-left: 100px; }

Just target Internet Explorer 8

@media \0screen {
.header { margin-left: 100px; }

To Target IE9 and 10

@media screen and (min-width:0) {
.header { margin-left: 100px; }

So that was about fixing the Crap created by Microsoft. No offense intended (some should be taken though). But whenever I create a wonderful site and then see it on internet explorer, I get a mini heart attack. Fixing them is sometimes like creating some parts of the site from the scratch. Using CSS hacks for internet explorer is not a good practice which we all do because there is no other way. My last wish will be to see IE closed officially. According to the stats from w3schools, which are reliable in no way but are good to make your self apparently happy, Internet explorer’s market share are going down day by day.


If you haven’t used Internet Explorer yet which I bet You would have then don’t be so lucky and download it here.

If you have any questions or want to share your thoughts, please let me know in comments. Alternatively, ask me on twitter or Facebook.

Beautiful and Simple CSS3 Loader

As more and more sites are using Ajax to load contents, ajax loaders are getting more and more popular. Web developers usually use .GIF animated images as loaders. Some use SVG images to show a loader while content is loading. With advancement of CSS and with addition of new properties like transform and keyframes, now creating animations in CSS3 isn’t a difficult task. Using CSS, developers have created a lot of loaders.

Today, I saw a Pure css3 build loader at wifeo. The loader is amazing and I thought it would be worth sharing with you guys. Here is the demo:



You can use this CSS loader in two simple steps:

1. Add the following CSS code to your website:

width:88px; height:88px;

width:88px; height:88px; position:absolute;

width: 40px;
height: 40px;
.ball_1, .ball_2, .ball_3, .ball_4
position: absolute;
-webkit-animation:animball_one 1.3s infinite ease;
-moz-animation:animball_one 1.3s infinite ease-in;
-ms-animation:animball_one 1.3s infinite ease-in;
animation:animball_one 1.3s infinite ease-in;
border:1px solid #cb2025;
top:0; left:0;
border:1px solid #f8b334;
top:0; left:48px;
border:1px solid #00a096;
top:48px; left:0;
border:1px solid #97bf0d;
top:48px; left:48px;
@-webkit-keyframes animball_one
0%{ position: absolute;-webkit-transform:rotate(0deg);}
50%{top:24px; left:24px; position: absolute;opacity:0.5;}
100%{ position: absolute;-webkit-transform:rotate(360deg);}
@-moz-keyframes animball_one
0%{ position: absolute;-moz-transform:rotate(0deg)}
50%{top:24px; left:24px; position: absolute;opacity:0.5;}
100%{ position: absolute;-moz-transform:rotate(360deg)}
@-ms-keyframes animball_one
0%{ position: absolute;-ms-transform:rotate(0deg)}
50%{top:24px; left:24px; position: absolute;opacity:0.5;}
100%{ position: absolute;-ms-transform:rotate(360deg)}
@keyframes animball_one
0%{ position: absolute;transform:rotate(0deg)}
50%{top:24px; left:24px; position: absolute;opacity:0.5;}
100%{ position: absolute;transform:rotate(360deg)}

2. Then add the following HTML to the page:

<div class="contener_general">

<div class="contener_mixte"><div class="ballcolor ball_1">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_2">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_3">&nbsp;</div></div>
<div class="contener_mixte"><div class="ballcolor ball_4">&nbsp;</div></div>

You can also check the orignal post from wifeo at http://www.wifeo.com/code/43-css3-simple-loader.html

Let me know if you need further help with this in comments.


Writing your first post on a new Blog isn’t an easy Job. One need to brainstorm ideas about it. For Businesses, its easy to write about themselves but for personal blog, its gonna be a challenge to pick a topic for the First Post because you might have already covered . So after a lot of thinking, the topic I choose for my First post was to write about how to write YOUR FIRST POST. Amusing, Right!
Thinking about First Post

Thinking About My First Post. Its Crazy

I will write the steps in headings and will explain them using myself as example. So let’s Start:

1. What is this Blog About?

This blog is my personal blog, I will share my stories here, I will post about my completed projects. I will write about some amazing events of my life which will amuse you too. I will like this blog to be a source of interaction for me with you guys specially with programmers. I will try to post one post a week and in spite of my blunt and rude nature, I will try to be as humorous as possible except that I will not be Joker because I am a bad one :p

2. What will be My topics?

Writing my first post, I don’t really have any idea that which topics I will cover or what will be the categories. I don’t even have a category to place my first post in it. But a rough idea which i had when purchasing the domain was that I will post about my events of life, Will post my codes and scripts which might help you people in your projects, I will share my completed programming projects and will share their details and will like to know your opinions, for beginner guys, I will like to show them the legit ways to earn online. I will also like to solve some myths and get answer for some famous but unanswered questions.

3. How will you guys interact?

This is the important part. Its a WordPress website and WordPress has a powerful commenting system. You people can post comments and I will try to answer each and everyone. You can also contact me using the forms. I will also appreciate guest posts if you would like to post some.

4. Why should You read What I post?

That’s a great question. Why will someone read all this? Well, everyone need something to read. Apart from books, its funny to read about some real miss happenings of real persons if the person is amused by it too. I will also share code, memes, songs, movies and useful files like PSDs etc which can save you time in your projects. Besides, My experience in the freelancing and the online business will give you good tips and tricks to start your own.
I thinks, these four titles will cover the headings of your First Post very well. You can even use my article to post on your blog but with a link back to the original one. I hoped You like it, and why not be the first one to comment on the My first Post 😛