{Carrer web log}

picoCSS - really small JavaScript Framework

Thursday, April 28, 2011 { 15 Comments }

I've had some extra time during the Easter holidays and I did some JavaScript experiments. The result of that experiment is super small JavaScript library for basic CSS manipulation mainly for building iPhone, iPad and Android web apps.

This project has one objective DOM CSS manipulation with JavaScript that is optimized for webkit browsers(Safari, Chrome) and it will work in (Firefox, Opera) without the part of animation.

With this library you can do just three things insert inline CSS or manipulate CSS with changing the id and the class name of the HTML element. Also webkit CSS3 animation are supported. I've used Svetlo like selector engine.


The coding syntax looks like this:

p.select("#a").css("background-color : green; color: #fff;");

or

p.select("#b").animate('0.5', '1','360','1','1','1','1', '0','0');

or

p.select("#main").att("class","bumm");

And here are some examples (Safari/Chrome):

Example 1
Example 2
Example 3
Example 4

>> Download & Watch the library on GitHub

This Framework is not meant to be complete JS Framework like jQuery. It is just CSS helper library.

If you need small but complete framework for mobile development I suggest you check:

Zepto.js
Ender.js
jQuery Mobile

All comments and suggestions are appreciated!

Svetlo - One Line JavaScript Selector Engine

Tuesday, April 12, 2011 { 7 Comments }

I'm working on one new mini JavaScript Framework for building mobile apps.

Probably the most critical part of any JavaScript Framework is the selector engine. Naturally the faster is the selector engine the faster will be all the Framework.

Most of the modern selector engines are build upon querySelectorAll because it gives the best flexibility. Little problem with querySelectorAll is the speed.

Traditionally getElementById is much faster then querySelectorAll, but things are changing. Opera 11 has super optimized querySelectorAll and probably all the browsers in the future will try to speed optimize querySelectorAll.

For my (not yet published) JavaScript Framework I've used this code for the selector engine (codename Svetlo).

// Svetlo :

function $(selector){return Array.prototype.slice.call(document.querySelectorAll(selector))}

What this code does is putting the querySelectorAll results "toArray" and that helps the speed optimization. The code is not new I think the first time I saw it on John Resig blog.

I'm not even sure that this line of code can be called selector engine, but I think that it can be helpful to someone and is good baseline for writing JS applications that doesn't need to run in IE. Hint: Web apps for iPhone and Android.

I did some performance test.

The test are based on this principle http://jsperf.com/nodelist-vs-array-iteration

http://jsperf.com/svetlo-class

http://jsperf.com/svetlo-id/3

http://jsperf.com/svetlo/3

If my testing logic is correct result show that this selector engine is faster then the native querySelectorAll and equal like native getElementById method.

If my testing logic is correct result show that this selector engine is faster then the native querySelectorAll and equal like native getElementById method.

This solution will run on of Safari, Chrome, Firefox, Opera and doesn't support IE.
My intention was to build JS Framework for mobile webkit browsers(iOS, Android).
So if you building web app for iPhone, iPad, Android this selector engine can help you, if you need to support IE this selector engine is completely useless.

Other super small selectors:

Ben Alman QSA library
Dan Heberden Quewery
Dustin Diaz Qwery

All comments and suggestion about this small selector will be appreciated!