mysql.sock SYMLink and sudo on MacOSX

Today I was trying to configure MySQL driver with Python on my Mac Machine. Everything went smooth but on connecting MySQL I was getting socket error as driver was pointing out to /tmp/mysql.sock

I made symlink of .pid file and it worked but when I used similar ln-s command for making symlink. It did not give any error. On doing ls-la it showed as well but on doing again it got removed. It was weird. On further investigation I learnt that .sock symlinks can't work without root access.

Moral of the story. Use Sudo where ever you can! :)

How to show Retina Display Images on UIWebView in iOS

If you are making a mobile web app or embedding a UIWebView in your native app, showing @2x.png images is not as straight as it is to use in UIImageView. If you use an Image in UIIMageView   then it automatically picks @2x image for iPhone 4 and greater but it does not work if you are calling images from CSS that loads in UIImageView, for that purpose you have to use  webkit-background-size


For example visit here:


http://stackoverflow.com/questions/3652930/high-resolution-images-in-a-uiwebview





Making my Home Page Open Source

Home Page is not like a product which one visits and consume every day. Specially when it's not a blog or belongs to a techie *Yikes*

For the past few years, yes years, I had been thinking of making my personal site. Most of the stunning sites I liked were actually made by designers or the people who do have aesthetic sense. Sadly I don't have one. Recently when I bought Kadavy's Design for Hackers then it gave a bit of hope that designing is something which is actually Hackable. It's a wonderful book I must say and worth spending $24. If you're like me who drools on lovely designs and wish to make one then this book is for you. I got a good excuse to try my learnings on my own home page and here we go!

http://adnansiddiqi.com

While I was planning for the changes I had three things in mind:

1. Easy to access
2. Easy to maintain
3. Easy to port

Easy to access:

For making it user friendly and simple I tried to transfer my recent learning about UX and typography on my site. The attempt is definitely not perfect but I think it's better than version 1 and version 2. The entire site is based on jQuery and CSS2/3. jQuery and tried to use what Kadavy teaches about ratios like 3:4 etc and used it in font size selection. I also used pretty much whitespace, something I never realized before. AJAX is heavily used in it. Infact I should say AJAY has been used, Y->YAML. In order to make it SEO friendly I implemented Hijax which was even recommended by Google to make your AJAX based site crawl-able.

Easy to maintain:

I am quite a lazy ass and enhancement on my own site after 4 years is the classic example of it. Since one of the main motive was to make it easy to maintain. In past I made an attempt to make this site DB-driven but failed as I found it quite a cumbersome to main. I then decided to keep it text file driven as this is the most handy way to keep things in shape; no hassle of tables,user/passwords. Thus I decided to go for INI files. INI files in my opinion were best choice for such site thus I started writing code and completed it but when I tried to run the code on main server, BoOOM! It got exploded. The reason was incompatibility of PHP versions which had broken parse_ini() implementation in older versions of PHP. It was quite disappointing for me as I'm not always a great finisher and I start getting irritated when projects duration starts exceeding. I started looking for alternative. I found YAML. YAML's clean and natural syntax made me to fall in love with it. It was also a bit like INI files having assignment operator for values. I made a quick search to find out some PHP parser for it. Luckily I not only found a parser but it also had feature to convert entire YAML file into an Associative Array. SPYC is an awesome YAML parser in PHP and quite fast too. Since I was already getting an output in Array form. All I needed to build same array. It took me a while to figure out the syntax of YAML and SPYC code to form the array. In next 10 mins the entire site was based on YAML. Since I wanted to make entire changing process simple, I also tried to keep site formatting off the HTML files. Markdown was the answer. The clean and cute syntax of Gruber's Markdown made the entire formatting process quite easier. Michel F's PHP Markdown made life easier. So the Markdown is used in YAML file an PHP Markdown then translates it into legitimate HTML syntax. So easy, No?

Easy to port:

The heavy usage of Markdown and YAML based file made it quite easier for me to transfer entire site here and there. In future if I have to make changes in my CV, all I will do is to edit YAML file, no change in markup files, no hassle about DB conenctions. Infact I can easily port it on any other domain I want. It's all about transferring of files.

Why Open Source?

I remember the days when I wanted to make a simple website to show off my portfolio. I could not afford templates from online resources neither I could ask buddy to make a site for you. On top of that I wanted to learn something new, now this is something which matters. I spent a week on it, I could invest it somewhere else but heck! it gave me opportunity to find out and try some things new, it does not give me an excuse to keep my learning to myself. So instead of writing endless blog posts about what I did or not, I prefered to release code for outrworld, at one side developers can learn about new things but they can also make changes and use it for their own sake. The code released under MIT License which gives enough freedom for everyone. The other beauty of open source is that you can use  some good brains to finish the things where you have left. The code I released do have issues like non-IE compliant. Yeah I simply directed to http://adnansiddiqi.com/noie.html rather than adding checks in my CSS. I did not hesitate this on the basis of my current Analytics and last 3 months Browser stats gave me enough courage to dump IE for other browsers. So no IE for a while though some guys told me that IE10 is quite descent and covers many modern things. Anyways, lets leave for the next or let someone else pick it up.

Last but not least, giving credit where it's due. Musa for sorting out missing click event on FireFox due to overlapping of elements and Jonathan's 11th hour help to figure out why site was throwing 404 on IE. Thanks guys!

I can just hope this long rant will be helpful for others. Oh Yeah! One thing, I forgot to give the Github link so here it is!

https://github.com/kadnan/HomeSite/

Happy Coding! :-)

Awesome CSS Generators

While working on my home page, I found an interesting site where the guy generously listed down some cool CSS generators. The one I liked a lot was CSS gradient generator by colorZilla.

http://www.aoclarkejr.com/10-really-awesome-css-generators.html

jQuery theme roller

jQuery UI provides a default .css file with the package but what if you want to change color scheme etc? One way to do is to override classes manually. There's a neat option for the purpose; use jQuery theme roller. Theme Roller provides a simple to use interface for customization of default jQuery themes. You can also select pre-defined themes and customize them. A really awesome tool I must say.

Simplest way to display Array Key and Values in PHP

Displaying the values of an associative array is something which you do every other day. At times you need to display both key and value of the associative array. One of the methods is to loop thru the array var and format the string by concatenating key and value. PHP provides another easy way to achieve this, infact it's a one liner solution and the solution is, use http_build_query. It takes an associative array and then convert it into query parameter. Based on default settings it uses & as a separator. What if you want to show data in the following format?

Name=Adnan
Nationality=Pakistani

By using the following code you can achieve the desire result.

$user = array('Name'=>'Adnan',

              'Nationality'=>'Pakistani'

              );
echo http_build_query($user, '', '\n');

The third parameter is used as a separator. Make sure you don't omit the second parameter

Facebook: An error occurred please try again

Working on Facebook APIs is quite an interesting experience but at times it could become pain in neck when you find no proper error message from the platform.

Recently I started working on an Fb app. I had made a testing account where I put the code so that client keeps seeing the progress. Last night I pushed the changes from local to remote site and made all necessary changes; Client Key, Secret  Key, putting remote redirect_uri but I kept getting error:

An error occurred please try again

I was really not being able to figure out what's going wrong despite of putting all things correct in my PHP script, the issue was that the Redirect URI or Site. See the image Below:

No matter what url you use for redirection in your code, it MUST be the URL mentioned here.

It took me a while to figure out but finally I made it. Hope it would be helpful for some :D

Optional Parameter in Javascript

Javascript does not officially allows you to declare optional parameter but there is still a way you can handle them. Here we go!

function generateForm(id)
{

    var editable = false;

    if (arguments.length == 1 && typeof id!= "undefined")

    {

        editable = true;

    }

    if(!editable)

    {

        alert("add form");

    }

    else

    {

        alert("edit form");

    }

}

As you can see, what all I did that I checked the length of given arguments and then also checked whether there is undefined type, there would be an undefined type if you provide no parameter. By simply checking this you can implement optional parameters

Ruby on Rails: Implementing should_not_have_content in CapyBara

CapyBara is an awesome tool for testing purpose. It provides you way to apply BDD while writing Rails code.

In Manning's Rails3 in Action. In Chapter 4 one of the rules is:

And I should not see "Standards compliance"

The whole view_tickets.feature file is given below:

Feature: Viewing tickets
    In order to view the tickets for a project
    As a user
    I want to see them on that project's page
Background:
    Given there is a project called "TextMate 2"
    And that project has a ticket:
    | title | description |
    | Make it shiny! | Gradients! Starbursts! Oh my! |
    And there is a project called "Internet Explorer"
    And that project has a ticket:
    | title | description |
    | Standards compliance | Isn’t a joke. |
    And I am on the homepage
Scenario: Viewing tickets for a given project
    When I follow "TextMate 2"
    Then I should see "Make it shiny!"
    And I should not see "Standards compliance"
    When I follow "Make it shiny!"
    Then I should see "Make it shiny" within "#ticket h2"
    And I should see "Gradients! Starbursts! Oh my!"
    When I follow "Ticketee"
    And I follow "Internet Explorer"
    Then I should see "Standards compliance"
    And I should not see "Make it shiny!"
    When I follow "Standards compliance"
    Then I should see "Standards compliance" within "#ticket h2"
    And I should see "Isn't a joke."

In order to implement Should not have , you just apply following simple step in steps file:

Then /^I should not see "([^"]*)"$/ do |arg1|
  page.should_not( have_content(arg1))
end 

Upon running cucumber:ok command it should execute And I should not see "Standards compliance" or any other string matches the criteria properly