Sizzle si Prototype

Framework-ul JS jQuery foloseste mai nou un selector engine foarte rapid numit Sizzle.

Cum jQuery intotdeauna a stat mai bine la capitolul viteza a selectorilor, inlocuirea selector engine-ului Prototype cu Sizzle ar trebui sa aduca un binevenit boost de performanta.

Urmarind instructiunile din acest articol, este suficient sa incarcam Sizzle (4KB minified si gzipped) si sa adaugam urmatorul cod dupa Prototype:

1
2
3
4
5
6
7
8
9
10
11

//Overwrite findChildElements to use Sizzle http://sizzlejs.com
Selector.findChildElements = function(element, expression){
    expression = expression.join(", ");
    var results = Sizzle(expression, element);
    if(results.length > 0){
        for(var i=0; i < results.length; i++){
            results[i] = Element.extend(results[i]);
        }
    }
    return results;
};

Acum atat $$ cat si Element#select vor folosit Sizzle. Unul din avantajele majore (pe langa viteza mult imbunatatita) este acela ca in afara de schimbarea de mai sus, nu implica nici o alta modificare in codul nostru, fiind deci posibila trecerea la Sizzle in mijlocul procesului de dezvoltare a proiectului.

Teste

SlickSpeed

SlickSpeed Selectors Test

Puteti rula un test comparativ intre Prototype, Prototype cu Sizzle, si jQuery accesand link-ul de mai sus.

Scorurile din imagine reprezinta medii ale rularilor multiple (scorul mai mic e mai bun). Toate au fost rulate sub Windows. Din ele reies cateva concluzii:

PS: voi sterge orice comentariu care se rezuma la “[insert framework name] sucks! Mine is bigger and better.” :)

March 27, 2009 | Filed Under JavaScript | 3 Comments 

Prototype plugin: Showcase

Showcase

Am dezvoltat acest plugin ca pe o jucarie personala, asa ca il prezint aici in speranta ca ii va fi de folos cuiva.

Ca de obicei, inainte de detaliile tehnice, vizitati paginile cu exemple:

1. Cerinte

Pentru functionarea acestui plugin veti avea nevoie de:

Acestea vor trebui incarcate in pagina inaintea Showcase.js:

1
2
3

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="showcase.js"></script>

2. Markup

Minimul de markup si stilizare necesare pentru functionare este urmatorul:

1
2
3
4
5
6
7
8
9

<a href="#next" class="controls" rel="next">Next</a>
<a href="#previous" class="controls" rel="previous">Previous</a>	
<ul id="showcase">
	<li><img src="images/1.jpg" alt="1" /></li>
	<li><img src="images/2.jpg" alt="2" /></li>
	<li><img src="images/3.jpg" alt="3" /></li>		
	...
	<li><img src="images/n.jpg" alt="n" /></li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#showcase {
	position: relative;
	width: 700px;
	height: 170px;
}
#showcase li {
	width: 170px;
	height: 170px;
	float: left;	
	list-style-type: none;	
}
#showcase li img {
	width: 100%;
	height: 100%;
}

Codul de mai sus corespunde unui Showcase orizontal de 700x170px. Orientarea (orizontala / verticala / diagonala) este selectata la initializare:

3. Initializare

Initializarea plugin-ului se face printr-o singura linie de cod:

1

new Showcase.Horizontal($$('#showcase li'), $$('a.controls'), {optiune: valoare, optiune: valoare, etc});

Orientarea este aleasa prin initializarea clasei respective din cele 3 disponibile:

1

new Showcase.Horizontal(slides, controls[, options]);
1

new Showcase.Vertical(slides, controls[, options]);
1

new Showcase.Diagonal(slides, controls[, options]);

4. Parametri optionali

Parametrii sunt selectati la initializare, in format JSON: {parametru: valoare, parametru: valoare}:

5. Download

Puteti descarca atat Showcase.js, cat si exemplele de mai sus:

Download Showcase.js (9.4 KB)
Download Showcase.js – Packed (3.5 KB)
Download Exemple

Lansez Showcase.js sub licenta MIT, care in principiu spune ca oricine poate face ce vrea cu codul :)

October 4, 2008 | Filed Under JavaScript | 19 Comments 

Update Carousel

Deoarece am primit mai multe mail-uri care solicitau acest lucru, pun online ultima versiune a plugin-ului Carousel, ce include, printre mici optimizari, si functionalitate pause / resume, in cazul in care se foloseste optiunea de auto-start. Acestea se declanseaza la mouseover / mouseout pe slide-uri, dar desigur pot fi atasate oricarui event.

Download Carousel

June 5, 2008 | Filed Under JavaScript | 7 Comments 

AJAJ Autocompleter

In incercarile de a reduce cat de mult posibil cantitatea de date transportata intre server si client in mod asincron, am renuntat la a mai folosi XML ca standard, facand trecerea catre JSON (puteti incepe de aici). Majoritatea solutiilor au devenit astfel “AJAJ based”.

Cu siguranta fiecare dintre voi a folosit sau cel putin testat la un moment dat Autocompleter-ul Script.aculo.us. Ei bine, aceasta modalitate de autocomplete este buna, mai putin faptul ca trebuie generat server-side intreg UL-ul corespunzator rezultatelor. Aceasta metoda are doua dezavantaje:

Revenind la exemplul Autocompleter-ului Script.aculo.us, acesta poate fi rapid ajustat pentru lucrul cu date in format JSON, prin simpla “suprascriere” a functiei ce se ocupa de inserarea in pagina a rezultatelor transferului in felul urmator:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Ajax.Autocompleter.prototype.updateChoices =  function (choices) {
	if (!this.changed && this.hasFocus) {
 
		this.update.update('<ul></ul>');
 
		response = choices.evalJSON();
		if (response) {
			response.each((function (suggestion) {
				this.update.down('ul').insert((new Template("<li>#{text}</li>")).evaluate({text: suggestion}));
				}).bind(this));
			}
 
		Element.cleanWhitespace(this.update);
		Element.cleanWhitespace(this.update.down());
 
		if (this.update.firstChild && this.update.down().childNodes) {
			this.entryCount = this.update.down().childNodes.length;
			for (var i = 0; i < this.entryCount; i++) {
				var entry = this.getEntry(i);
				entry.autocompleteIndex = i;
				this.addObservers(entry);
				}
			} else { 
				this.entryCount = 0;
				}
 
		this.stopIndicator();
		this.index = 0;
 
		if (this.entryCount == 1 && this.options.autoSelect) {
			this.selectEntry();
			this.hide();
			} else {
				this.render();
				}
		}
	}

Doar liniile 4-11 sunt cele modificate, restul reprezinta functia initiala. Sfatul meu este sa nu editati direct libraria controls.js din Script.aculo.us, pentru ca orice modificare direct pe fisierele librariei va duce la ingreunarea unui viitor update, trebuind operate de fiecare data schimbarile pe noua versiune. Mult mai simplu este sa includeti pur si simplu codul de mai sus intr-un fisier ce va fi incarcat dupa Script.aculo.us.

April 21, 2008 | Filed Under JavaScript | 1 Comment 

Prototype plugin: Scroller

Va ofer un nou plugin pentru Prototype, numit simplu Scroller. Ca de obicei, inainte de detaliile tehnice, testati exemplul urmator:

Scroller – exemplu

1. Cerinte

Plugin-ul necesita Prototype 1.6 pentru a functiona.

1
2

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scroller.js"></script>

2. Markup

Cu toate ca existenta urmatoarelor elemente este obligatorie, pozitia si stilizarea lor este in mare parte la discretia voastra:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="wrapper">
    <a href="#" class="scroll vertical" id="scroll-up" rel="up">&nbsp;</a>
    <a href="#" class="scroll vertical" id="scroll-down" rel="down">&nbsp;</a>
    <a href="#" class="scroll horizontal" id="scroll-left" rel="left">&nbsp;</a>
    <a href="#" class="scroll horizontal" id="scroll-right" rel="right">&nbsp;</a>
 
    <a href="#" class="scroll diagonal" id="scroll-nw" rel="nw">&nbsp;</a>
    <a href="#" class="scroll diagonal" id="scroll-ne" rel="ne">&nbsp;</a>
    <a href="#" class="scroll diagonal" id="scroll-se" rel="se">&nbsp;</a>
    <a href="#" class="scroll diagonal" id="scroll-sw" rel="sw">&nbsp;</a>
 
    <div id="scroller">
        <div id="inner"></div>
    </div>
</div>

Elementele cu clasa scroll vor fi cele care vor declansa miscarea (interactiunea cu ele se face prin hover si click), directia acesteia fiind data de atributul rel al fiecarui declansator.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/* ---------------------------------------- CONTAINERS */
#wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 10px auto 0 auto;
    padding: 50px;
    }
#scroller {
    width: 500px;
    height: 500px;
    overflow: hidden;
    }
#inner {
    width: 5000px;
    height: 5000px;
    }
.scroll {
    position: absolute;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

/* ----------------------------------- SCROLL CONTROLS */
.horizontal {
    width: 40px;
    height: 500px;
    top: 50px;
    bottom: 0;
    }
.vertical {
    width: 500px;
    height: 40px;
    left: 50px;
    right: 50px;
    }
.diagonal {
    width: 40px;
    height: 40px;
    }
#scroll-left {
    left: 0;
    }
#scroll-right {
    right: 0;
    }
#scroll-up {
    top: 0;
    }
#scroll-down {
    bottom: 0;
    }
#scroll-nw {
    top: 0;
    left: 0;
    }
#scroll-ne {
    top: 0;
    right: 0;
    }
#scroll-se {
    bottom: 0;
    right: 0;
    }
#scroll-sw {
    bottom: 0;
    left: 0;
    }

Acest markup asigura minimul necesar pentru pozitionare si dimensionare. Pentru o configurare mai detaliata cercetati codul din exemplul de la inceput.

3. Initializare si optiuni suplimentare

Initializarea plugin-ului se face prin urmatoarea constructie JS:

1

var scroller = new Scroller($('scroller'), $$('.scroll'), {optiune:valoare, optiune:valoare, etc});

Optiunile disponibile sunt:

4. Download

Puteti descarca atat fisierul scroller.js, cat si exemplul:

Download scroller.js
Download exemplu

Ca de obicei, completarile si adaugirile sunt binevenite.

March 21, 2008 | Filed Under JavaScript | 6 Comments