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.

Day 2 : InputCanvas 2.0

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

Hi , Last time I wrote the BasicShape object , today I think that I should add some proprieties : value & font in order to add text to shapes. Also a font's setter method :

/**
   * Set font proprieties.
   *
   * @param int size       : Size of border in pixel.
   * @param string color  : Color of border (Hex).
   * @param string family : Font family.
   * @return void
*/
BasicShape.prototype.Font = function (size, color, family) {
   this.font.size   = size   || 14;
   this.font.color  = color  || '#000000';
   this.font.family = family || 'Arial';
};

The next big thing is how to draw text on a shape while respecting border , border-radius , and padding ?!!

Blogger custom comment form [Wordpress like] - Part II

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

Last time we transformed all inputs to a single JSON object which would be stored in a plain text comment and sent to the server , this time we will try to display those comments.

Ok we need to get the JSON string stored in comment's body from Blogger's database using :

<b:loop values='data:post.comments' var='comment'>
      <data:comment.body />
</b:loop>

Blogger custom comment form [Wordpress like] - Part I

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

I was playing with Blogger's comment form using Firebug . If you don't know, Blogger uses an iframe to display the form , So because of the Cross-domain we can't style the form neither apply any Javascript code on it .

First, you need to know the major inconvenient of this method : comments will be considered as spam , So you have to check Not spam manually every time to make the comment visible (if you already administrating comments then you are used to).

Let's look at the next HTML code :

 
<form id="commentForm" method="POST" action="http://www.blogger.com/comment-iframe.do">
    <input type="text" id="user" placeholder="User Name" />
    <input type="email" id="email" placeholder="email" />
    <input type="url" id="url" placeholder="Website" />
    <textarea id="text"  placeholder="Text..."></textarea>
    <input type="hidden" name="commentBody" id="commentBody" />
    <input type="hidden" name="security_token" value="AAAAAAAAAAAAAAAAAAAAAAAAAA:***********" />
    <input type="hidden" name="blogID" value="**************" />
    <input type="hidden" name="postID" expr:value="data:post.id" />
    <input type="hidden" name="identityMenu" value="ANON" />
    <button id="sub">Submit</button>
</form>

Day 1 : InputCanvas 2.0

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

Today I'll start redesigning InputCanvas , the old version wasn't clear and customisable. There was only 2 objects FormCanvas and InputCanvas , and only text input.
In this new version I'll try to create so match more objects that we can use separately. Also I'm going to use one of the most important feature in OOP which is inheritance , the most important object is BasicShape it's the parent object of all types of inputs with basic proprieties and methods.

InputCanvas 2.0

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

Hi, I have been developing InputCanvas.js in the open (on github.com), It's the first Javascript Library to create real forms and inputs on the Canvas element . It's not HTML's native inputs and no CSS positioning .

What can I do with InputCanvas?

You can create forms and inputs that work exactly like usual html fields on canvas , with events and style support.

How can I use it ?

Using InputCanvas is really simple . just follow the steps :