What time is it ?

Dojo 0.4 has been released and one of its new features is a clock widget ... a clock widget ? ... Yes, a "fantastic" JavaScript Client Time based clock widget !!!

Hey Dojo developers, why do you think that OS (bottom right) clock isn't enought ?

It seems that Web 2.0 is going to be the new Flash 5 of the net ... I don't like it!

Ok, your framework is amazing, your code is fantastic ... but I wonder who need another JS clock ?

Is this server-side Greenwich time based ? None ...
Can I flip something inside that to set an appointment ? None ...
... then I can understand You only if it's a SVG demo (However, who care about my opinion ?)

Finally, since it's time to create clock widgets, I've decieded to waste my time with a basic digital clock and sure ... if you add some hour you could have different times too ...

This is my "fantastic" digital clock ... (LOL)


P.S. hey guys, it's only a joke :D

Some valid reason to hate IE7

I don't like IE, and I don't like new 7 version too and I would like to create a page that will work with every other updated browser but obviously not with IE7 ... our new web development bottleneck !!!

P.S. Please, Microsoft, remove IE7 as default browser from Windows Vista when it will be available ... and let users choose the best way to surf the web 2.0, thank you.

Unobtrusive JS Pixel Font (Round 2)

If you dont' know why this is the second round You should read this post and its comments .

This is the round 2, or better, the final round for my Pixel Font Engine, now totally based on CANVAS and DOM or based on SWF OBJECTS and one innerHTML for old deprecated browsers or Internet Explorer (really it cames with new version 7 and in WEB 2.0 era it doesn't support canvas ... damn IE7 !!! Why You should use them ?)

new concept
CANVAS or Flsh Player 6 dedicated SWF to render Pixel Font table Objects, because old version was really too mush slow and because canvas are better than nested tables to draw something (and Flash 6 can draw something well too).

Why I've not used VML or other fake canvas for IE ? Because I've tested them and they're all slow for this kind of interaction and excanvas render single pixels in a bad, bad, bad, way ... thery're unreadable !!!

Well, now You can't parse entire page but you can use this font or others created by yourself using pixel font generator ... and, have fun with pixel fonts :)

Here there's a shot of what You should view after onje click on DEMOSTRATION (... and another click to back to normal version)

JavaScript Pixel Font Generator

One of the coolest things of generic Flash textFields are pixel fonts.
I love those tiny smally colly fonts ... that's why I've decieded to create a pixel font render engine.

concept
matrix and grids ... sure, and if You think that a grid "is a table" you've just found the render engine concept:
a lot of table cells with or without a background color.
Since the better way to draw something on web pages is a nice CSS style, created tables are quite totally CSS based, then You can joke with cell width, height, padding, spacing and colors and then You can have different effects with a single font table.
This strange object will contain one or more dedicated cell string that you can create using a really simple SWF GUI application like this one, then everyone should have a personal JavaScript pixel font * :)
Pixel Font Render class will use these information to create a lot of string dedicated for an innerHTML interaction.


Why innerHTML ?
I'va a personal DOM based version of render engine but for some reason IE (7 too) didn't creates as expected runtime tables as FireFox or Opera 8 did.
Another reason is that DOM isn't faster as innerHTML and multiple elements creation should be a browser killer.


Why You wrote "be sure to use a fast browser" ? Are there limits ?
Tables are not really performances friend, then You can't use this engine to replace every string in your web pages because any browser could manage big big tables quickly.


(then) What js pixel font should be used for ?
Use your immagination but I just could tell you these things:

• web page decorations
• menu customizzation
• graphic enanchment
• dynamic Chapcha
• footer pages informations
• header titles

... and probably more.



If You've not viewed the example page (or You didn't understand how does it work) You could clik this link and then You can click DEMOSTRATION header.
Please be sure You're not using an old browser or an old PC, that page should stress old hardware :(



* please, send me Your pixel font to create a demostration page with different fonts and to allow users to download one of them

JavaScript Path Finder with A Star

Last post talks about a stupid tris game and while I was writing that code I've thought about a way to create a better script (more intelligent).
Since tris game, as many others, is based on a grid, I've looked for one A * JavaScript implementation but hey, I didn't find them !

I remember Alessandro did a path finder for ActionScript and as you know AS is ECMA and its A Star implementation should work on JavaScript too.
However, Flash has a dedicated virtual machine (Flash Player) and its source is byteencoded, then AStar is fast enought but not so fast used with JavaScript.

That's why I've decieded to create a generic AStar function quite optimized for JavaScript (but it probably should be better too) and usable with ActionScript 1.0 too.

Here there's a simple application example while in this page you can read about the function and view the source code too.

Example uses a MemTronic version to reduce AStar size into 1,4 Kb.

Finally, this is the "old" Alessandro implementation where you can find more informations about A Star algorithm :)

A simple JavaScript game to waste Your time

A pool ? A web service ? A fantastic UI ? ... no, it's just a simple and fast way to waste Your time online, it's just a stupid JavaScript Tris Game :)

Here the source, have fun !

bytefx V 0.3 final

New API since it's a young library and I suppose is better to have a final release before someone will use them.

Now, better code, better comments, better api, linear methods, real private methods, rewrote drag with new features ... in the same compressed version size, less than 2Kb for MemTronic version !

It's bytefx ... version 0.3 final (if this hasn't bugs, this will be exactly in this way)

Packer Friendly JavaScript

Mario tells me a thing on this post comments that could be a good point to analyze.

Since I've known Dean Edwards packer, I've started to write code in a different way.
The reason is simple: code is elegant enought and I could pack or unpack them quickly.

The "big one rule" to write compressors friendly code is the usage of the semi-colon ";" instead of new line at the end of each line (sure, only where it's necessary).

In this way your code could be crunched without problems from a big list of js compressors.

Let me show an example

// "typical" code

function a() {
    return "a"
}

function b(c) {
    c = "b" + c
    return c
}

These functions are not a problem for javascript parser because it reads new lines as semi-colon (or better ... as end points) but to be sure that a compressor will not have problems, You need to think that every code must be parsed correctly inline, trimming every space or tab.
In this case, function a has no problems while function b has one.

// function a can be wrote inline
function a() {return "a"}

// function b cannot be wrote inline
function b(c) {c = "b" + creturn c}

There's any end char after c var, then creturn is not c and then return.
What is the solution ? You know it, just a semi-colon :)

function b(c) {c = "b" + c;return c}

return c doesn't need any semi-colon because curly brackets tells to code parser that in that point the execution ends.
If You have an if, while, else if, else, for You don't need to add anything before last curly bracket.

function c(d) {
    if(d) {
        d = true
    }
    return d
}

But if You don't use curly brackets for single operations after some expression, the use of semi-colon is a must.

function c(d) {
    if(d)
        d = true;    // remember
    return d
}

I think is really important to remember that there is a particular case where curly brackets requires a semi-colon at the end and this case is a generic object declaration.

var    obj = {}
var    arr = []
// do you need an error ? try this
// var obj = {}var arr = []

// correct way
var    obj = {};    // remember
var    arr = [];

If you need more than one temporary scope variable you could use the colon "," to concatenate each var declaration.
In this case the semi-colon is not necessary between two variables.

var    obj = {}, arr = [];

That's all about curly brackets but I would suggest to use a semi-colon after every end bracket "}", to be sure that there aren't problems and to write a more linear code.

function a(a) {
    return a
};

function c(d) {
    if(d) {
        d = true
    };
    return d
};

var    obj = {};    // remember

Talking about vars You can see that a semi colon is necessary after each declaration.

// not friendly way
var    str = "test"
var    num = 1
var    boo = false

// friendly way
var    str = "test";    // remember
var    num = 1;    // remember
var    boo = false;    // remember

And as I've said, using a colon for each temporary var requires a semi-colon only at the end.

var    str = "test", num = 1, boo = false;    // remember

Other characters that require a semi-colon at the end are parentheses.

// anonymous function, not friendly way
(function(){
    alert("anonymous")
})()

// friendly way
(function(){
    alert("anonymous")
})();    // remember

Sure, semi-colon is not necessary if you send anonymous function to another one but in other cases is really important to rememeber that every end parenthese ")" needs a semi colon, such at the end of this alert example.

alert((function(){return "something"})());

With class object declaration You could forget parenthese but these should be wrote at the end of class name, then rememebre to add a semi-colon.

// generic class
function MyClass(){
    this.ready = true
};

// generic class objects
var    c1 = new MyClass(),
    c2 = new MyClass;    // remember

// generic check
alert(c1.ready === c2.ready);    // will be "true"

I think there's only last case where semi-colon is necessary and this is the switch operator.

// not friendly way
switch(true) {
    case false:
        break
    default:
        alert("true");
        break
};

// friendly way
switch(true) {
    case false:
        break;    // remember
    default:
        alert("true");
        break
};

Only the last break could be wrote without the semi-colon, because as is for everything before each end curly bracket "}".
The final point is that semi-colons are javascript friends, then is always better one more than one miss.

I think this is all you need to know about compressors friendly code and as You can see adding just a semi colon while You create is neither a bad practice nor less elegant than other ways but Your script will be released as packer ready :-)



[ edit ]
Just a simple addiction that should be a mistake ... with if, else and else if or where curly brackets are more than one operation, You don't have to put any semi colon at the end of closed bracket.

if(something) {
    test = true
}    // remember no semi-colon
else {
    test = false
};


try {
    something()
}    // remember no semi-colon
catch(e) {
    alert(e);
};

google world, world wide or world wide web ?

It's just a funny post about a strange thing happened just 5 minutes ago ... I need to change my keyboard because it often misses some char, however I was looking for an Italian site when I've quickly digited ww.google.it ...

I read url error but connection was working ... then, what's up ? Google has a personal ww prefix ?
It's really strange, maybe my friend FireFox did it for me ... but hey, it's the same with my enemy IE 7RC1 ... and Opera opened them too !!!

... but, wow, this happen with a single w too, http://w.google.it/ ... and if I search something this work as www.google.it ... Ok, Ok, the world changes too fast and I'm not updated, let me try w.devpro.it .... error ? Why error ?

Why google has 4 ways to be open while every site I know has a maximum of 2 ways ? (site.it, www.site.it)

I don't know if this is a news, I don't know if You known it but I know that google.com doesn't work in this way (but there's a redicert if you try with a single or double w).

It's strange for me and maybe I need to rewrite every url parser that accept http:// or www[0-9]+\. $name .... he he he, who have an updated compatible reg-exp ? :P

new bytefx presentation page

JavaScript code is the same, less than 2Kb compressed for a simple effects library, but its presentation page now is better than ever.
Here it is, bytefx, with a simple design and some special effects for compatible browsers.

This page is totally unobtrusive, as bytefx would be, but for compatible browsers it should look cool and it's a new library demo too!

For this new index I've used packer version combined with JSL to have more compatible browsers and to use some JavaScript 1.6 standard and useful methods.

What do you think about this new bytefx site ? I hope you like it and remember thatI'm working on then come back soon to view new contents or examples :-)