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! :-)

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

MySQL to JSON on Github

This morning I tried to fiddle with Git, a version control system by Linus Trovals. Github is a social coding website which has definitely beaten sourceforge.

For long time I had been thinking to test it out and transfer my only open source contribution, MySQL2Json, a PHP class to convert mysql resultset into JSON. The class actually released in 2006. At that time there was no built-in support of JSON encoding in PHP.

Lots of people who used it asked me to move it to Github but I was not getting time to focus on it. This morning I finally did it. The URL of the code is given below:


https://github.com/kadnan/MySQL2JSON


I am not so good at Licensing thing. The prior code released under PHP License. If it allows you to contribute then do it otherwise let me know. So make a fork and improve it, fix it if necessary.

Happy coding.

PHP: Get first key in Associative Array

If you want to get the very first key in associative array then use Reset and key method to get the key. Reset brings the pointer on first index and key returns the key name. Code snippet given below:


$shapes = array("Box" =>"Square","Moon" => "Circle");
//Set the internal pointer of an array to its first element
reset($shapes);
//get the first key that is "Box"
$keyname = key($shapes);


How to find Query Source in MySQL general Log

Most of the time similar queries are used in different modules of the code-base. At times it gets difficult to find out the page where buggy or slow query is being executed. MySQL provides the option of logging slow and general queries in files. In order to record the source of the executed query it is best that you append a string in query which is then being executed via mysql_query() function of PHP.

$sql = "-- Executed via yourfilename.php:

  SELECT * from table;";

$resulr = mysql_query($sql,$connection);

By doing this you can now find out where your query got executed. Easy and handy, No? :-)