Camelize, CamelCase

Lunedì 20 Ottobre, 2008

Come già visto nel post Varietà di coding e di coding gli approcci che uno sviluppatore può avere alla risoluzione di un problema sono diversi e molteplici a parità del linguaggio di programmazione usato. Ecco come alcuni dei più noti framework Javascript hanno risolto una semplice funzione di CamelCase:

Prototype.js

Prototype.js, nella versione 1.6.0.3, propone esplicitamente un metodo camelize() per effettuare il camelcase su una stringa. L'approccio dell'autore è abbastanza semplice e il codice risulta auto-esplicativo. In questo caso non è stato fatto nessun uso delle Regular Expression!

JavaScript:
  1. camelize: function() {
  2.     var parts = this.split('-'), len = parts.length;
  3.     if (len == 1) return parts[0];
  4.  
  5.     var camelized = this.charAt(0) == '-'
  6.       ? parts[0].charAt(0).toUpperCase() + parts[0].substring(1)
  7.       : parts[0];
  8.  
  9.     for (var i = 1; i <len; i++)
  10.       camelized += parts[i].charAt(0).toUpperCase() + parts[i].substring(1);
  11.  
  12.     return camelized;
  13.   }

Continua a leggere... »

Post correlati

jQuery contro tutti: un benchmark con 5 browser

Mercoledì 17 Settembre, 2008

image Un buon sviluppatore non ha problemi a passare da un linguaggio di programmazione ad un altro. La scelta di concentrarsi su un particolare linguaggio, framework o ambiente di sviluppo, è dettata più dalla disponibilità di tempo e dal tipo di lavoro che si svolge. Tuttavia, un fattore importante che può influire sulla scelta di "framework" simili, è la simpatia o l'affezione che può maturare con il tempo.
Nello specifico, ho voluto analizzare alcuni - non certo tutti - framework Javascript disponibili oggi, anche perchè "consigliato" a dare un'occhiata soprattutto a jQuery.
I creatori di mootools (uno dei più noti framework Javascript) hanno reso disponibile uno strumento per eseguire un test di velocità e validità su cinque noti framework Javascript: Slickspeed. Questo test, dagli esiti non affatto scontati, è importante in quanto i framework Javascript operano lato client, cioè vengono eseguiti dal nostro browser. È proprio per questo motivo che alcuni trovano Safari più rapido di Internet Explorer o Google Chrome più rapido di FireFox. Tuttavia ciò spesso dipende anche dal tipo di pagina che si sta visualizzando. Infatti può benissimo capitare che un particolare sito sia davvero più "veloce" se visualizzato in Safari, ma questo non significa che "tutti i siti" saranno più veloci con Safari! Ovviamente questo discorso è valido per qualsiasi altro browser.

Il benchmark

Nel test che ho effettuato con Slickspeed ho messo a confronto i browser disponibili sulla mia macchina (Windows Vista Utilmate 64bit - Intel core 2 quad a 2.4GHz con 8Gb RAM).
Purtroppo il test non sono riuscito ad eseguirlo con Internet Explorer 7, in quanto bloccava la macchina, andando anche fuori scala con i risultati! Ancora una volta complimenti Microsoft.
Ho crercato di mantenere identico lo stato del PC durante l'esecuzione dei test, aprendo singolarmente i browser e non mandando nessun altro processo in esecuzione.

Nota: se avete voglia di eseguire anche voi uno o più di questi test, potete commentare questo post in caso di "curiosi" e diversi risultati.

image

Google Chrome è risultato davvero veloce, con un valore di 68 (media) nell'esecuzione dei test con jQuery. Il più lento, invece, è risultato Flock, nonostante provenga dalla stessa "madre" Mozilla. Questo pessimo risultato di Flock è davvero curioso visto il suo taglio Social Network; perchè sono proprio i Social Network Web 2.0 a sfruttare molti dei framework Javascript disponibili, così da fornire un'esperienza di navigazione ed interazione davvero innovativa.
A sorpresa Opera batte FireFox e anche di un bel po', ottenendo addirittura un 74 nell'esecuzione di Dojo! FireFox e Safari, tutto sommato, si assomigliano, con Safari più rapido nei test con Mootools e jQuery.

Quale framework scegliere?

Se non badiamo ai test sulla velocità di esecuzione e non ci preoccupiamo della dimesione in Kbytes dei framework stessi, la risposta potrebbe essere "quello che più vi piace" o, se preferite, "quello che conoscete meglio o vi risulta più armonico con il vostro stile di programmazione".
In ultima analisi questi framework si assomigliano un po' tutti (vedi l'uso del $ ad esempio), nonostante alcune importanti e sostanziali differenze che possono saltare agli occhi di un esperto o nell'uso davvero spinto di una particolare libreria. In linea di massima, infatti, tutto quello che si può realizzare con jQuery, ad esempio, lo si può fare benissimo con mootools o prototype! Se jQuery vanta una sintassi estremamente compatta, in quanto tutti i metodi restituiscono sempre l'oggetto base jQuery, creando così file interminabili di oggetto.metodo().metodo().metodo()... non è detto che questo sia a tutti i costi un punto di forza, soprattutto per chi dovrà fare il debug!
Librerie come prototype.js peccano forse in assenza di effetti grafici, anche semplici, costringendo lo sviluppatore ad implementare spinoff come scriptaculous.js, pesanti e distanti dalla libreria inizialmente scelta.

Un esempio

Proprio quest'ultimo motivo, ad esempio, mi ha portato a sostituire l'accoppiata prototype/scriptaculous con jQuery per realizzare i pannelli interattivi/animati qui nella sidebar di undolog.com. In effetti, usando anche Google API per importare le librerie, è uno spreco caricare tutta la libreria scriptaculous per uno slideDown e slideUp. A titolo informativo e di esempio, ecco com'era il codice Javascript con l'accoppiata prototype/scriptaculous:

JavaScript:
  1. // prototype/scriptaculous
  2. $$('h2.dropdown').each(
  3.     function(element) {
  4.         element.style.cursor="pointer";
  5.         element.observe('click',
  6.             function(event) {
  7.                 if( this.next().style.display == "" ) new Effect.BlindUp(this.next(),{duration:.5});
  8.                 else new Effect.BlindDown(this.next(),{duration:.3});
  9.                 Event.stop(event);
  10.             }
  11.         )
  12.     }
  13. );

e com'è adesso con jQuery:

JavaScript:
  1. // jQuery
  2. $('h2.dropdown').each(
  3.     function(i) {
  4.         $(this).css('cursor','pointer').click(
  5.             function() {
  6.                 if( $(this).next().is(':hidden') ) $(this).next().slideDown(); else $(this).next().slideUp();
  7.             }
  8.         );
  9.     }
  10. );

Tutto sommato, a ben guardare, non mi sembra ci sia moltissima differenza! Ma come dicevo prima... è questione "anche" di gusto personale.

Post correlati

jQuery restyling

Domenica 31 Agosto, 2008

Proprio in questi giorni (sotto consiglio...) stavo dando un'occhiata a jQuery, un'ottima libreria sullo stile di prototype.js, scriptaculous.js, mooTools, per intenderci... ed ecco che oggi tutto il sito è stato completamente ridisegnato:

image

Ottimo inizio per allargare i miei orizzonti su questo tipo di librerie! Prossimamente pubblicherò qualche articolo interessante, soprattutto sulle differenze tra jQuery e le altre librerie "simili".

Post correlati

Google AJAX Library API: una svolta per gli sviluppatori

Giovedì 29 Maggio, 2008

AJAX Libraries API Google, in quest'ultimo perdiodo, ha rilasciato una moltitudine di strumenti dedicati agli sviluppatori, aggiornando di continuo i propri rilasci. Adesso stringe un accordo con i più diffusi framework AJAX, e non solo, per centralizzare la distribuzione delle librerie jQuery, prototype, script.aculo.us, MooTools e dojo!

In pratica è possibile accedere a queste librerie sfruttando le infrastrutture e la rete Google, con notevoli vantaggi in termini di velocità e sicurezza.

La velocità, nel caricamento, è garantita dalla stessa rete Google che, oltre a fornire di per se una struttura di server distribuita, permette (di default) il caricamento compresso (gzip/minify) delle librerie. Gli hosting Google più vicini alla richiesta saranno utilizzati per inviare il codice e, in caso di non raggiungimento o down temporaneo, la rete Google garantirà comunque l'invio del codice Javascript!

Continua a leggere... »

Post correlati

Tutti i cloni di Lightbox in una matrice dinamica

Venerdì 11 Aprile, 2008

Planetozh ha realizzato uno splendito strumento dinamico in grado di elencare tutte le librerie Javascript simili a Lightbox.

image

image Tramite un pannello (vedi  immagine qui a sinistra) con una serie di "spunte" (checkbox), che indicano le varie caratteristiche delle librerie, è possibile eseguire un filtro ottenendo così la lista di una o più librerie che fanno al caso nostro. Speriamo che l'autore mantenga aggiornata questa fantastica pagina, utilissima nel districarsi tra le numerose e sempre più potenti librerie di questo tipo.

Post correlati

Light gallery: Lightview 2.0.0_rc1

Martedì 19 Febbraio, 2008

Lightview Appena rilasciata ecco l'ennesima libreria Unobtrusive Javascript per gallerie di immagini e non solo. Lightview, nella release 2.0.0_rc1, aggiunge anch'essa le funzioni per "aprire" delle Window con contenuti che vanno oltre la semplice immagine: filmati Flash, QuickTime, Form e IFRAME! Rispetto alla precedente versione (la 1.1.0 - che gestisce solo immagini), quindi, questa release candidate si arricchisce delle funzionalità presenti anche in altre librerie. Gli strumenti richiesti da Lighview per funzionare sono gli arcinoti Prototype 1.6.0.2 e Scriptaculous 1.8.1. Gliattributi usati per gestire la libreria sono class e rel.

Un'aspetto interessante di questa libreria è l'estrema cura della grafica con cui si presenta.

Voto: 9 - Home page di Lightview

Post correlati

Light Library: da Slimbox a Shadowbox, gallerie in Javascript

Mercoledì 13 Febbraio, 2008

Qualcuno potrebbe dire -  e non a torto - basta! Di librerie Javascript (Unobtrusive - non intrusive, o parzialmente) per gestire immagini e gallerie ce ne sono davvero tante. Comunque sia ecco la lista, con pregi e difetti, delle migliori che ho provato.

SLIMBOX 1.41

Estremamente minimale, 7K (alla versione 1.41), richiede mootools per funzionare. Come indicato sulla Home page è un vero e proprio clone grafico di Lightbox, che vedremo più sotto. Sinceramente, a parte l'estrema compattezza della libreria, non possiede caratteristiche peculiari. Sullo stesso sito, comunque, è possibile trovare anche uno script per generare riflessioni runtime... al limite può essere utile questo ;)

Voto: --6 - Home Page Slimbox, Home Page Reflection.js for MooTools

LIGHTBOX2

Lightbox2 Una delle più note e semplici. Gestisce in questa release sono immagini (quindi non funziona con QuickTime, Flash o altro). Per il suo funzionamento richiede Prototype e Scriptaculous. Usa l'attributo rel per identificare i link delle immagini da processare:

HTML:
  1. <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Come le altre librerie che vedremo, supporta la modalità slideshow, inserendo tra parentesi quadre un qualsiasi identificativo in una serie di link/image:

HTML:
  1. <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
  2. <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
  3. <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Voto: 6 - Home Page Lightbox2

LIGHTWINDOW 2.0

LightWindow 2.0 Anche questa è abbastanza diffusa! Dopo tutto come capire qual'è la più usata? ;). Comunque sia è estremamente completa  e versatile. Sul sito campeggia la richiesta di donazioni per l'acquisto di un Mac... un tantino invasiva e pressante... Comunque sia, come la precedente, per il suo funzionamento, richiede la presenza di Prototype e Scriptaculous. A differenza della precedente, tuttavia, questa permette di visualizzare moltisiimi tipi di file: dalle immagini, filmati QuickTime, filmati Flash, pagine HTML esterne e PDF. Di contro, utilizza vari attributi, alcuni facoltativi (author, caption e title) altri obbligatori (classparams - per impostare il comportamento della libreria). Ad esempio, per visualizzare una gallery o slideshow usa l'attributo rel:

HTML:
  1. <a href="gallery/0-sushi.jpg" class="lightwindow" rel="[Sushi]" title="Left Behind" caption="Look's super tasty!" author="Unknown">image #1</a>
  2. <a href="gallery/1-sushi.jpg" class="lightwindow" rel="[Sushi]" title="Beware of warewolves..." caption="I shouldn't be doing this when I am hungry" author="Unknown">image #2</a>
  3. <a href="gallery/2-sushi.jpg" class="lightwindow" rel="[Sushi]" title="That was good!" caption="Take that sushi!" author="Unknown">image #3</a>

Voto: 8 - Home Page LightWindow 2.0

SHADOWBOX 1.0B

Shadowbox Nonostante sia alla versione 1.0 beta, questa è forse la libreria più completa, sia dal punto di vista funzionale sia per le librerie supportate. Per il suo funzionamento, infatti, è possibile scegliere tra una serie di framework, grazie a dei file "adapter" appositamente realizzati e fornite dall'autore:

L'effetto visivo (configurabile tramite skin/css), poi, a differenza delle altre, è sicuramente più accattivante. Gli attributi usati sono solo il rel dove, al sue interno, trovano spazio tutti gli altri parametri di configurazione. Ad esempio, per realizzare una gallery, basta usare:

HTML:
  1. <a href="beach.jpg" rel="shadowbox[Vacation]">The Beach</a>
  2. <a href="pier.jpg" rel="shadowbox[Vacation]">The Pier</a>

Se si desidera impostare qualche opzioni (vedi sito per la lista completa) basta usare la seguente sintassi:

HTML:
  1. <a href="myimage.jpg" rel="shadowbox;options={overlayOpacity: 0.5, resize: false}">My Image</a>

Su Internet se ne possono trovare anche altre, come ad esempio Highslide JS. Anzi, se volete segnalarmi qualche altra libreria... Comunque sia, personalmente, preferisco Shadowbox per semplicità, scalabilità e cross-framework.

Voto: 9 - Home Page Shadowbox 1.0B

Post correlati

Accordion 2.0

Mercoledì 19 Settembre, 2007

image Ne avevamo già parlato di questa libreria Javascript Unobtrusive realizzata dallo stesso autore di LightWindow 2.0. Viene ora rilasciata la versione 2.0, che fa sempre uso di scriptaculous.
Tra le novità più interessanti troviamo la possibilità di "innestare" gli Accordion uno dentro l'altro, sia in modlità orizzontale che in verticale.
Allontanandosi poi dall'originale funzionamento degli Accrodion classici è stata aggiunto il comportamento di apertura/chiusura. Sul sito è possibile scaricare lo script (indicato ancora con la dicitura 1.0!?) e accedere agli esempi di codice.

Post correlati

Accordion per Scriptaculous

Lunedì 16 Luglio, 2007

Finalmente un bello script in Javascript (scarica Accordion 1.0), semplice e leggero, che permette di aggiungere il componente Accordion usato in Flash e in mootools sfruttando la libreria scriptaculous. Effettivamente mancava questo oggetto, utile in tante occasioni. Questa versione è estremamente semplice e permette di creare Accordion sia orizzonali che verticali. Lo script è gratuito, tuttavia potete fare una piccola donazione all'autore per aiutarlo ad acquistare un bel MacPro ;)

Per utilizzarlo basta inserire queste semplici righe di codice:

HTML:
  1. <script type="text/javascript" src="javascript/prototype.js"></script>
  2. <script type="text/javascript" src="javascript/effects.js"></script>
  3. <script type="text/javascript" src="javascript/accordion.js"></script>

Il markup HTML è immediato:

HTML:
  1. <h3 class="accordion_toggle">Title Bar</h3>
  2. <div class="accordion_content">
  3. ...
  4. </div>
  5. ...
  6. ...
  7. ...
  8. <h3 class="accordion_toggle">Title Bar</h3>
  9. <div class="accordion_content">
  10. ...
  11. </div>

Un'esempio pratico:

JavaScript:
  1. // General Syntax
  2. new accordion('container-selector', options);
  3.  
  4.  
  5. // Horizontal example
  6. var horizontalAccordion = new accordion('#top_container', {     
  7.     classNames : {
  8.           toggle : 'horizontal_accordion_toggle',
  9.           toggleActive : 'horizontal_accordion_toggle_active',
  10.           content : 'horizontal_accordion_content'
  11.      },     
  12.      defaultSize : {
  13.          width : 525
  14.      },
  15.      direction : 'horizontal'
  16. });
  17.  
  18. // Vertical Accordion
  19. var verticalAccordion = new accordion('#bottom_container');

Post correlati