Saturday, January 26, 2008

Next! - Property again

I talked before about Next.Property, today i am going to talk about it again

I have changed allot Property lets make a diagram of it:

#get(); //get the value
#set(v, [delay] ); //set the value, optionally it can wait some time before do it

#set( true|false|1|0|-1);//set the value , -1 toggles
#is(); //check the property
#toggle(); //inverts the value

#concat(str );//concats the string

#getAnimation(options ); //
#animate(options );//
#animateTo(to, [options] );//
#animateBy(by, [options] );//


The Properies itself may look something stupid, but the main idea of them is to register on objects

So for example to deal with the visibility of an element we could have:

As in Java:
  • isVisible();//true|false
  • setVisible(true|false);
As in PrototypeJS
  • visible();//true|false
  • show();//make visible
  • hide();//hide it
  • toggle();// toggles visibility
With Next.bool we do:
  • visible.set(true|false|1|0|-1);// 0 sets to false, 1 to true and -1 toggle
  • visible.toggle();//toggle visibility, same as visible.set(-1)
Now with Next.Number we can have some other funny things
  • width.get();//returns the with of an element
  • width.set(width);//set the width
  • animate... all animation stuff can be used to animate this property, making very neat effects
It will fade out and then hide the element

So i might add a function like

if (effect=="fade"){
if (effect=="fade"){

So we can do $(this).hide("fade"); and it does the same as the code before, fade the element to 0 and then hide it, $(this).show("fade"); would make the element visible and fade to 1
$(this).hide("blind"); or $(this).hide("slide"); are some other things that culd be implemented

Theres allot of good implementations for Properties, and on Elements they are very usefull

The implementation is on progress!!

Blogged with Flock

Saturday, January 19, 2008

Next! - Color

Hi again.

some time ago i have done a class to deal with colors, since i think about create some kind of GFX support ( SVG,VML) , i decided to put it here

Its just 8,00 KB Minified, so its not that much, and much of the sise is because of the default colors, that can be removed.
Eg. it have Next.Color.Red="##FF0000" etc...;

You can access the source of the class here
If you have a SVN copy on your pc just do an update to it.

The class is named Next.Color

This class give many ways to convert color formats

* Usage:
* new Next.Color(r,g,b);//parameters
* new Next.Color([r,g,b]);//array with 3 numbers
* new Next.Color({R:r,G:g,B:b});//object with R,G,b or r,g,b members
* new Next.Color("RGB(r,g,b)");//String RGB CSS
* new Next.Color("#FFFFFF");//String HEX CSS

You can export to:

It have a helper function very cool when we need to check and use some color, lets say:

function dc(c){
if ((c=Next.Color.check(c))!==null){
alert(c);//toString method on Color class give you the hex value

dc("Red");//alert's "##FF0000"
;//alert's "#FF0000"
dc("#FF0000");//alert's "#FF0000"
dc([255,0,0]);//alert's "#FF0000"
;//alert's "#FF0000"
dc({R:255,G:0,B:0});//alert's "#FF0000"
Its nothing special but still useful for the upcoming GFX stuff

Its all for now!!

Friday, January 18, 2008

Next! - Property

Hi, now i am going to present you Next.Property!

In Java a property is for example "int getX()" "setX(int i)" this property is called "x"

In JavaScript 1.6 we have support for getters and setters, so we are able to make x a property that calls a different callback when is accessed, so instead of do "var a=this.getX()" we can do "var a=this.x" and it will internal call a getter funtion tomcalculate and return the value

Its all nice and good but.... Internet Explorer dot support Javascript 1.6, in fact they only support 1.2...

Unfortunately there is no way for a JavaScript library to fix that, well some guy did it but using some dirty VBScript methods, thats not good....

So my idea was to provide some kind of Properties support but since we don't have a way to do it as it should lets extend it a little bit.

So with my code we can't make "var a=this.x;" but we can do:

var this.x.get();
//And the neater one
var anim=this.x.getAnimation(options)
this.x.animate(options)//same as before but automatic starts animating

On "options" we specify "from"( optional: if not specified it uses current value), "to" ("where to animate"), duration (the time it takes), interval ( for make animation smother or less smother )

So its the same options as we pass to a Next.Animation, it actually uses it, so you can do with the returned animation: play, reverse etc...

Now.... How to implement a property? Well, i am posting a simple( and a bit stupid example )

<div id="test" style="border: 1px solid black; background-color: red; width: 100px;">0</div>

<button onclick=";">play</button>
<button onclick="anim.reverse();">reverse</button>
<button onclick="anim.toggle();">toggle</button>
<button onclick="aprop.animate({from:10,to:150});">use animate directly</button>
<script type="text/javascript">
var a=10;
function get(){
return a;
function set(value){
var t=document.getElementById("test");

At the moment only Next.Number is done.
The first parameter is the object were the functions will be applied, this case is null because we the functions are on global scope, the other 2 parameters is the getter and the setter function.

Ok this may look hard to implement and don't look so nice, you are right!

But this property system can be applied on HTMLElement, since the property need to be registed on the thisObject i decided to extend the HTMLElement.extend so it also create the properties
So we have HTMLElement.props that is an array, you can add objects with property options and they will be automatic applied to HTMLElement whan you use Next.byId, $ or other element functions

So we can do:

return this.getStyle("margin-left").toFloat();
Then you can have:
<div style="background-color: blue;" onclick="$(this).marginLeft.animate({to:200});">click</div>

When you click it will increase the margin-left until 100px;
Of course you can also do $(this).marginLeft.get(); to get the value or $(this).marginLeft.set(v); to set the value of it

I think its a great feature, ease to use, much more things can be added like opacity, width left.....

Next thing i want to add to the animator stuff is "by" so we can do $(this).marginLeft.animate({by:100}); and each onclick it would increase more 100 px to margin-left

I hope everyone enjoyed :)

Next! - Animation

Hi again!

Theres other thing on air...


So i decided to implement a basic Animation system, it might look stupid and uneusefull, but when i post other thing that will be based on this you will understand.

The animator class is simple to use

var anim = new Next.Animation({onStep:function(v){
//v will be between 0-1

You can specify other options like:
duration - the time the animation will take - defaut=1000
interval - the interval between animation - default=20
onStep - the callback function called each step of animation
onComplete - the callback function called when animation ends

Now what you can do with "anim" object?

seekFromTo(from,to)//seek from one position to other
seekTo(to)//seek to the position
jumpTo(to)//jump to position without animate
toggle()//toggle direction
play()//play from 0 to 1
reverse()//play from 1 to 0
stop()//stop animation

And for now its all i have on animation, it might need some fine tune to fix some stuff

You can see the code, just checkout the code on svn!

Next! - getStyle

Hi, we all need sometimes to get the style of one HTMLElement, and most times we do


If there was a "color" rule on the element own style, that will work. But it wont work if the "color" was set on a CSS rule.
So that breaks, for example in PrototypeJS they have $("elid").visible() that should return true if the element is visible, how they check?!="none";

But that will say the object is visible if i set it to display:none on a CSS rule

While working with PrototypeJS i had lots of troubles cause i always had to use style="display:none" or the animation stuff ( ) would not work.

This guy did a fix on the code he use for animate CSS properties, so i adapted it to work on Next!, its cross browser

* Get the value of the style
* Based on
* @param {String} style
HTMLElement.prototype.getStyle=function(property, def){
if (property=="float" || property=="cssFloat" || property=="propertyFloat"){
if (property=="opacity" && this.filters){
return this.filters.item("Alpha").opacity/100;
return 1;
var style;
if(document.defaultView && document.defaultView.getComputedStyle){
style = document.defaultView.getComputedStyle(this, "").getPropertyValue(property);
if (style) {
return style;
property = property.camelize();
style = this.currentStyle[property];
return style ||[property];

This function itself fix also the "opacity" so in this lib you can not only set the opacity but you can get the opacity of the element even if it is a filter ( IE ) on some CSS rule

This code is need and really moves the library to a next stage, we can get the REAL style of the element not only the in-line style, just great!

Now that we have a getStyle we must also have a setstyle
setStyle its simpler it will just set the inline style of the element

* Set the style of the element
* @param {String|Object} style
* @return {HTMLElement}
if ({";"+style;
if (style.contains("opacity:")){
}else if ({
for (i in style){
if (i == "float" || i == "cssFloat" || i == "styleFloat") {[i];[i];
}else if (i=="opacity"){
return this;

This code is still missing a fix, it will be done soon, but the base idea is that you can do

More things are comming!!

Wednesday, January 16, 2008

Hi again!

I am here to announce that i hosted the code of this project on googlecode

I committed the current code into SVN repository, you can checkout and play around with it.

Its not much yet, and theres some stuff there that i haven't talked here about yet ( but i will soon )

The code is a bit mess, i am reorganizing it, then i will commit changes


Tuesday, January 15, 2008

Next! - Element

Hi everyone!

Today i am going to talk about DOM elements and how to extend them

In most modern browsers there are Interfaces for all kind of elements. All them extend the base Interface: HTMLElement. For example a div tag use the interface: HTMLDivElement that extends HTMLElement.

So this mean that we can easily add functions to elements, like this:


And now we can call that function on any element, for example:


Nice huh?

Yes it is very nice and may come in handy but theres a problem... the same problem ever... Internet Explorer DON'T support it. Also even HTMLElement don't exist!

So what can we do?

    if (!window.HTMLElement ){
        window.HTMLElement = function(){};//Empty function
    //now we need to create a helper function to extend the object on unsupported browsers  
    HTMLElement.extend= function(element){
       if (element && !element._extended && !Next.browserExtensions){
          for (var i in HTMLElement.prototype){
       return element;
    //this is a marker, so we dont exten the same object each time we  need it

    } ;
    //now we need a function to get the element and extend it
       return HTMLElement.extend(document.getElementById(element));

    Next.byId("test").hide();//Now it works on all browsers

This implementation is simple and not much heavy and works well.
Others would make everything rely on Object extenders

With some work we could do it able to have different functions for different tag's.

Its all for now! Its time to implement ll this on Next!
The next post i might talk about animation say tuned!

Blogged with Flock

Tuesday, January 8, 2008

Profiling Class

This is a quick side note.

I have been tying to profile the class creation of PrototypeJS and Next!. Unfortanly i was not able to find a fair result, because i evaluated full prototype since everything depends on everything :S
I would be a hard trick to remove all uneed stuff.

So i tested by doing this( this is not real code, just graph )

Class Animal
alert( + ": " + message);

Class Cat extends Animal
if (food instanceof Mouse);
else if (food instanceof BadMouse)
this.say("i dont like bad mouse");
this.say("Whatever you gaved me to eat, i dont like");

Class Lion extends Cat

Class Mouse extends Animal

Class BadMouse extends Mouse

var l= new Lion();

I picked this and created class with Next! and with PrototypeJS and used Firebug to profile and see how much function calls are done and how much time it taken

Next! ( Just class stuff ): Profile (0ms, 11 calls)
Prototype (full):
Profile (31.25ms, 1091 calls)

Theres a Huge diference, but we must dont forget that most of this calls are from PrototypeJS base, its impossible to make a good comparission
But one thing i can say none of those 11 calls are iterating over objects to extend

In the end, PrototypeJS code looks a bit better and might be some char's smaller but overuses object extending stuf, and its slower to parse

Next! - Inheritance

Hi again, today i am hereto talk about inheritance and object extenders.

Inheritance is one thing we have from Java and other OOP languages, its about to create a class based on other class, in Javascript we dont have classes and obvious no class inheritance.

So what most people use? Object extenders! When i first found it i thought it was great and i did myself a small class system with support to extent classes, implement other objects and specify creators, constructors etc...

It was great but after doing some classes and some other classes extending base classes etc, i noticed that the execution was slow, there was a loose in extending objects so i just quited it ( also lost sources... )

So if we look to a library like PrototypeJS, we notice that they use way too much object extenders.

So what is a object extender? Lets see how PrototypeJS does it:
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
return destination;
Thats it! It will iterate over all methods and properties of an object and include them in other object.
Is this bad? Well we cant say that it is much bad, theres times that we really need to use it, theres no other choice, so we use it to make our life easier.
So where should we not use it? If we look at PrototypeJS we see some:
Object.extend(String, {
interpret: function(value){
return value === null ? '' : String(value);
Object.extend(String.prototype, {
startsWith: function(pattern){
return this.indexOf(pattern) === 0;
endsWith: function(pattern){
var d = this.length - pattern.length;
return d >= 0 && this.lastIndexOf(pattern) === d;
empty: function(){
return this === '';
blank: function(){
return (/^\s*$/.test(this));
As you can see, they are extending core functions as i stated on my last post, but they are using Object.extend for it, so they create a new object, iterate over it and extends the core functions.
So even if we don't use any of these extensions to String there was a small loose time for Inheritance over the objects.
The right approach would be:
String.interpret= function(value){
return value === null ? '' : String(value);
String.prototype.startsWith= function(pattern){
return this.indexOf(pattern) === 0;
String.prototype.endsWith= function(pattern){
var d = this.length - pattern.length;
return d >= 0 && this.lastIndexOf(pattern) === d;
String.prototype.empty= function(){
return this === '';
String.prototype.blank= function(){
return (/^\s*$/.test(this));
I don't know if they do that for look better or for saving type same thing over and over or for save some kb (faster downloading, slower parse...)
The truth is that its a bit hard to be typing same thing over and over and also it takes some extra space, we can do a simple workaround:
var S=String, Sp=S.prototype;
S.interpret= function(value){
return value === null ? '' : String(value);
Sp.startsWith = function(pattern){
return this.indexOf(pattern) === 0;
Sp.endsWith= function(pattern){
var d = this.length - pattern.length;
return d >= 0 && this.lastIndexOf(pattern) === d;
Sp.empty= function(){
return this === '';
Sp.blank= function(){
return (/^\s*$/.test(this));
Easier to type and we save some kb. I wrapped it around a function cause i don't want to populate the global scope. This function can be the same for wrap all our code.

So far we stated the no need to use object extenders to extend core functions, but it is the same for lib functions
In PrototypeJS we do ( it changed on new version, but on background its the same ):
var MyClass=Class.create();
This is the same as:
var MyClass=function(v){
The diferences are that in first code we do 2 object extends ( wish means iteration etc... ) but we have a nicer code wish is simpler to type, in the second one theres no call to any extender but it looks worse because we keep typing same thing over and over
We can use the same method as we did before ^^ to make the var names smaller etc

I hope no one thinks that i hate PrototypeJS etc... I don't! I used it lots of times for lots of different projects and it is a great library, but it fails at some points, nothing its perfect, and one of this points is the over-use of object extenders

Now how will i do my classes etc on Next! library? First i will extend core objects ( prototyping obvious ) and i will put my classes on context "next". eg.: next.Animator

And also it will suport classes that extend other classes, yes, but using a diferent method
function Inheritance(){}
Inheritance.prototype = baseClass.prototype;
this.prototype = new Inheritance();
this.prototype.constructor = this;
if (baseClass.base) {
baseClass.prototype.base = baseClass.base;
this.base = baseClass.prototype;
Remember the "MyClass" that i created before, lets say i want to create another class based on it:
var MyOtherClass=function(v,c){,v+c);//calls super constructor
I'm out of time to explain this better but you can have a light of what it is, although its supported i don't think i will use it much times.

Its all for now!!

Saturday, January 5, 2008

Next! - Prototyping

Hi again, here is my second post about my library!

Well this post is not talking about Next! directly but talks about my way to look at JavaScript.

Theres allot of buzz about un-obstructive JS, they mean that we should not extend core objects and we should put everything in packages, and don't pollute main scope ( window ) with variables etc...

I agree in some aspects, but i don't like to loose the main advantage of JavaScript, extending Core objects, ok that makes my library breaks compatibility with other libraries. Thats bad, i know.

Lets look on this, for start my library i do:
var next={};
For now on i put all my vars and functions on that context, if i do everything in un-obstructive way i would have todo something like this:
return string.indexOf(what)===0;
//for use it we do:
return this.indexOf(what)===0;
//for use it we do:
Now... doesnt the second aproach look better and eseyer to create and use?
Not only to talk about where we can resolve missing stuff in diferent browsers!
For example JavaScript 1.6 suports some new array extensions:
They are great! But not all browsers suport them yet, so we can create them for browsers thatdot suport!

So on Next! library i am going to use prototyping on core types to make js more extended.

Its all for now, next ime i am going to talk about inherance and Class stuff

Friday, January 4, 2008

Next! - The JavaScript library


Today i am going to present my new JavaScript library.

Its a prototype based library( prototype not prototypejs, in fact this lib is incompatible with prototypejs)

The base idea is to extend JavaScript itself, but try to make it in a non obstructive way and make jslinted code to provide in the end a jsminified file too. Also i will try to document it using ScriptDoc

I am using Aptana Studio for develop and document my code.

As i advance with this i will post here! Once i have something i will move it to a SVN so everyone can see soure and give feedback

Will post more news soon!

Thursday, January 3, 2008

First blog post

Hi everyone!

Ok this is the 4th blog i have, but i never posted too much

I hope to post allot about JavaScript

Theres allot of things i have worked on JavaScript, and some js tecnologies that i want to talk about

So this is for first post ;)