Tuesday, July 2, 2013

Rebuilding Jaw,B blog

May Allah`s peace , mercy and blessing be upon you

Hello everyone, first of all, I think you noticed the comment's css bug, I don't know why the comments floats from the parent !! so I decided to redesign the blog and do some optimisations.

I didn't wanted the whole experience to be just old regular web development, like I used to do. Hence I decided to apply some of the great tools that I installed a long time ago but never used. I began with setting up directories and use Bower to download libraries, then I initialized Guard to watch javascript files and concatenate them and do Livereload. Also, I used Sass, Compass and Zen-grids for CSS.
I really liked the workflow, guard is terrific and did a great job keeping my finger away from F5. Sass is good too, I never liked preprocessors but Compass and Zen-grids succeeded in tempting me to try it. The workflow is surely optimized, but I'm not sure if I can say the same about the CSS that still need a review. To be fair, using a preprocessor implies learning the ins and outs of the tool because nesting selectors and media queries randomly or reproducing the DOM tree can generate a terrible CSS. One more tool ,that I'm not sure if I actually used it, is Git, I started the project doing some commits during the setup then I forgot about it till the end -_-' .

When the template was ready, fluid and responsive, I had to start making it a blogger template .. I couldn't accept the idea that I had to deal with those awkward XML tags and the "b:" things !! Then I had the idea to use AngularJs the awesome framework to manipulate Blogger RSS feed, it's XML on the same domain so why not. Few hours after and it's ready, everything Blogger offers : posts, pagination, tags, displaying comments, social sharing ...

Finally I decided to take it one step further by implementing the wordpress like comments system, the method is explained in the 2 parts tutorial that published a year ago part1 , part2 .

So, here it is a blog on blogger totally free from Blogger's XML specification you have only to give Blogger an empty b:skin and b:section, Blogger loves b:skin and b:section; That's the idea, I don't want to dig into the code because it's javascript and code is not minified for readability. These method allow to use Blogger as a database and store any type of structured data then read it from RSS, parse it and manipulate it. So if you are homeless like me, here is a new way to live under Blogger's wings :)

No comments:

Post a Comment

Zoli Issam's blog proudly powered by Blogger | All rights reserved Jaw,B 2010-2013