Category Archives: Javascript

GlassLayer : web app. to design & purchase plates online

Posted on by
1


www.glasslayer.com

Before reading rest of the article please check out the GlassLayer Web App. itself

Hi everybody,
Finally , i finished this web application i’ve been working for over a year. So i thought it would be a good idea to share my experiences and announce the application here on my blog. Application name has changed a few times along the way but final name is GlassLayer. I’ve made this web application for Glass Art Projects company located in LA. What they offer is that they give a kit of glasses , you glue those glasses on to a base glass as you like , it’s as simple as that and you get to design your very own plate. This was the traditional procedure but now with this new web application you get to design your own plate faster & cheaper.
Continue reading →

Javascript Closures

Posted on by
4

I’ve been working on a web application project for about a year now.Seven months ago i switched to object-oriented javascript due to complexity of the project.It increased productivity in a way that i can not express with words , you just have to experience it.

As i switched to object oriented javascript i learned some new tricks in javascript that i’ve never needed or used before.One of them was closures.I dont think i’m yet an expert on javascript or its closures but i want to share my experiences with it. I perceive closures as parameterized callback functions that you can pass arguments into the function.

So when it becomes useful you ask?
It becomes very useful when you are using Jquery & OOP javascript together. Let me give you an example:

<ul>
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
</ul>
<script>
obj={
counter:1,
set:function()
{
$('li').each(function(){
$(this).html(this.counter);
});
}
}
</script>

This will not work as expected because second “this” pointer becomes current $(‘li’) element.
So how you gonna handle it?
You can fix it by editing it to:

$(this).html(obj.counter);

But wait that’s against OOP approach to assume object name is always going to be “obj”.I wish it was just that , but it will also make it impossible to declare and use more than one instance of that class in one document which can be solved by using seperate documents and showing them in one page within iframe elements.But dont you think it is quite unprofessional?

So that’s where we use Javascript Closures.By using a closure we can pass object pointer keyword “this” into “each()” function of JQuery.
for working example click : http://jsfiddle.net/C7yen/

<ul>
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
</ul>
<script>
obj={
counter:1,
set:function()
{
setF=(function(ev){ return function(){ $(this).html(ev.counter); } })(this);
$('li').each(setF);
}
}
</script>

PS:
Some of the JQuery functions such as “.bind()” allows you to pass arguments.In those cases you dont need closures.But those functions are very few , maybe its only “.bind()” function , because it’s only one i know.

<ul>;
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
</ul>
<script>
obj={
counter:1,
set:function()
{<code></code>
$('li').bind("click",{context:this},function(ev)
{
$(this).html(ev.data.context.counter);
});
}
}
</script>

Google DevFest Istanbul 2011

Posted on by
Reply

Hi everybody,

I was at Google Chrome DevFest today, it was great in a lot of way , it has been very educating and entertaining in the same time. We’ve been introduced to some of the amazing – yet beta – features of chrome browser. I’ve got to admit that if this features goes mainstream and gets support by more browsers , It is going to change the way we think of the web. The Web might become a whole lot better intuitive & fun experience with this upcoming features. Not only it will change the user experience , but also it will create new possibilities for developers. As an enthusiast Web App. developer , all i can say is that we have to spread the modern browser usage , we’ve got to get more users to upgrade their browsers to one of the modern browsers.It will not only ease the development process but also it will enrich the materials we use to develop web apps and im sure that this will accelerate the innovation in web.

Continue reading →

Redo & Undo : different approaches on logging the Action

Posted on by
Reply

Here we are with another riddle to be solved. Undo and Redo feature , it’s everywhere , you can come across to it on any software you use on a daily basis.It has become an inevitable piece of feature on every application.
But im sure that you do experience too that sometimes it does fail to understand how much of action to undo.And sometimes you stuck at where you’ve end up after undoing and become unable to redo.
Well… I’ve been thinking about how to implement an undo & redo algorithm for a freelance project i have been working on.It’s kind of a start-up web project and will be a new thing online.Thus i wanted to make sure everything matches users expectations and works efficiently. It has a practical graphical editing interface.If you are already familiar with a couple of graphical productivity softwares.You might have already experienced the difference between them in undo&redo feature.Everyone has a unique way of its own to handle the data.So to speak every application requires a different approach on redo & undo algorithm to match its user’s expectations.
I’ve thought of 2 possible techniques and a third one which is actually a combination of those two.

History Data logged for each action:

OBJECT , ACTION , POST_DATA , PRESENT_DATA
I guess those are self-explanatory…

[kml_flashembed movie="http://mclightning.com/wp-content/uploads/2011/06/unredo.swf" width="550" height="400"]

Method A :

There is no ruling or filtering in this method whatever user does added into history log.
Cons:
Even the sequential smallest amount of movements logged.
Thus it consumes too much of memory
And User has to click over and over again to skip back while undoing.

Pros:
It is possible to undo every action as it is logged no matter how small effect it had on the design.

Method B:
Rule:
if (
last_logged_action->object==present_action->object
&&
last_logged_action->action==present_action->action
)
{
last_logged_action->present_data=present_action->present_data;
}
else
{
// Log present_action as a new record.
}

Pros:
User can directly undo just before the first of the sequential action.
So it comforts user from clicking over and over again to the undo button.

Cons:
There is no way to go back into the somewhere in the middle of the sequential action.

So… Here comes the Third Method The combination of these two methods above.

Method A+B : Convenient name huh :D ?
Rule:

sensitivity=5;
if (
last_logged_action->object==present_action->object
&&
last_logged_action->action==present_action->action
&&
last_logged_action->present_data – present_action->present_data>sensitivity
)
{
last_logged_action->present_data=present_action->present_data;
}
else
{
// Log present_action as a new record.
}

I guess you noticed that sensitivity comparing line addition to Method B.
By presetting a sensitivity value for each action type we can decide when to go with Method A or Method B.

LunarCannon Project Demo

Posted on by
Reply

hi fellows,
I’ve been working on a web app. project which lead me to use RaphaelJS library 5 months ago.Last night i just wanted to do something with this library just for fun other than business.So here is another Gravitation Involved Project :D .
Use Arrow Keys to rotate Cannon
And Space Key to shoot

LunarCannon

let me know your reviews :)