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!
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!
While I was planning for the changes I had three things in mind:
- Easy to access
- Easy to maintain
- 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!
Happy Coding! :-)
