di Kiko

Le applicazioni web diventano sempre più complesse e sempre più potenti. Dietro la potenza (molto apprezzata dagli utenti) e dietro la complessità  del codice c'è molto lavoro e molto codice. In particolare, la necessità  di offrire all'utente tanta interazione si traduce nell'uso di moltissimo codice Javascript, sempre più legato a framework e librerie. Se non si programma in modo attento si rischia di rendere le web application molto pesanti e quindi anche molto lente, perdendo nella pratica tutti i vantaggi che deriverebbero da queste nuove tecnologie. Una soluzione, lontana però dagli argomenti squisitamente tecnici e che fin qui pare funzionare in modo dignitoso, riguarda i compressori di codice. Il loro lavoro è semplice: prendere il sorgente originale, eliminare tutti i caratteri non necessari (spazi bianchi in primis) mantenendo intatta la funzionalità  del codice. Si riesce così a risparmiare un po' di kilobytes a tutto vantaggio dei tempi di download delle pagine web. Un discorso equivalente si può fare pure per i CSS. Dal momento che, usando un framework, la tendenza è quella di affidarsi alla versione minificata dello stesso, comprimete il codice CSS e Javascript da voi prodotto? E se sì ottenete reali benefici? Sarebbe anche interessante capire quale delle tante soluzioni disponibili per la compressione è quella che ritenete più valida. Al riguardo segnalo a chi non lo conoscesse uno strumento chiamato CompressorRater che consente di svolgere dei test comparativi tra i principali compressori Javascript.

Continua a leggere Sull’uso dei compressori di codice CSS e Javascript

Categoria: CSS

Se parliamo di compressione Javascript, gli strumenti più utilizzati sono: JSMIN, DOJO Compressor e YUI Compressor. YUI Compressor è stato progettato per essere sicuro al 100% e rendere un rapporto di compressione più alto rispetto gli altri strumenti sopra elencati. àˆ per questo che la maggior parte dei framework Javascript lo utilizzano per ridurre al minimo il loro codice Javascript. Il 5 novembre, Google ha annunciato Closure Compiler, il suo tool per la compressione di codice Javascript. Una delle feature più notevoli di Closure Compiler è che non solo elimina gli spazi bianchi, ma riscrive anche il codice per renderlo più piccolo in numero di byte. Inoltre ottimizza il codice Javascript migliorandone le prestazioni. (more...)

Continua a leggere Google vs Yahoo: compressione Javascript a confronto

Categoria: Scripting

Vi giro da questo post sul blog di SitePoint la segnalazione di PunyPNG, un tool online per la compressione e l'ottimizzazione di immagini in formato PNG, JPEG e GIF. Particolarmente adatto al formato PNG, PunyPNG implementa le tecniche di compressione a suo tempo presentate da Sergey Chikuyonok in un articolo di Smashing Magazine. Se pensate che valga sempre la pena risparmiare una manciata di kb, può essere un'ottima alternativa ad altri strumenti tradizionalmente usati per queste operazioni di compressione sulle immagini PNG.

Continua a leggere Ottimizzazione estrema di immagini PNG

Categoria: Grafica

Tags: ,

Matt Snider ha scritto sul suo blog un interessante articolo in cui espone alcuni consigli utili ad ottimizzare la compressione dei file Javascript. Quello di comprimere i file Javascript è un compito comune, ma occorre eseguirlo nel migliore dei modi. Ecco dunque i consigli di Matt. Usare meno "var" Come sappiamo, per dichiarare una variabile occorre usare la keyword var, ma per gruppi di variabili, è consigliabile usarla una sola volta e raggruppare una lista di nomi: // tante var var v1 = 1; var v2 = {}; var v3 = function() { // function code }; // una var var v1 = 1, v2 = {}, v3 = function() { // function code }; (more...)

Continua a leggere Ottimizzare la compressione del Javascript

Categoria: Scripting

Include è un framework Javascript che permette di comprimere a runtime un qualsiasi numero di file Javascript (con l'ausilio del JS Packer ideato da Dean Edwards) in un unico file risultante. Il tutto con poche e significative righe di codice: // settiamo la modalità  'compressed' include.setup({env: 'compressed'}); // includiamo 3 file include('../myfile1','scripts/myfile2','myfile3') (more...)

Continua a leggere Include: il compressore Javascript

Categoria: Scripting

A raccogliere in un unico e comodo post una serie di risorse e strumenti dedicati alla compressione di file CSS e Javascript per velocizzare il caricamento delle nostre pagine ci ha pensato Max Kiesler.Per completare la lista, nel caso dovessero sfuggirvi, segnalo i tool menzionati dai rispettivi autori nei commenti: Packed.it di Andrea Giammarchi e compressor di Sergej Muller.

Continua a leggere Tool e risorse per minimizzare il peso di CSS e Javascript

Categoria: Scripting

Packed.it è il servizio di compressione per file Javascript e CSS creato da Andrea Giammarchi (ne parla sul suo blog).Come accennato, si tratta di un servizio completamente online, che nelle intenzioni dell'autore dovrebbe e vorrebbe superare i limiti di altre soluzioni affini, o almeno racchiudere in un solo prodotto tutti i loro pregi (parlo per esempio di JSMin, ma anche del packer di Dean Edwards, di YUICompressor e Dojo ShrinkSafe). packed.it permette di inserire codice a mano o di uploadare una serie di file Javascript e CSS. Il software utilizzato per comprimere e ottimizzare entrambi i formati si chiama MyMin, creato dallo stesso Andrea e ispirato da JSmin e packer. àˆ disponibile in 4 linguaggi di programmazione: C#, JavaScript, PHP e Python. La licenza è di tipo MIT. Dal momento che Andrea sicuramente ci legge, credo vorrà  condividere nei commenti qualche ulteriore spunto e magari fornire a tutti i dettagli più tecnici.

Continua a leggere Comprimere Javascript e CSS su packed.it

Categoria: Scripting

Bookmark CSS

5 Apr

Breve appuntamento con i bookmark dedicati ai CSS. Cominciamo con 10 quick tips for an easier CSS life che presenta dieci validi consigli di sviluppo. Se non avete ancora un editor preferito, in Free CSS editors trovate una selezione di editor free esclusivamente dedicati ai CSS. Dal titolo forse un po' pretenzioso, ma andrebbe aggiunto al post CSS per la stampa pubblicata tempo fa qui sul blog questo CSS print stylesheet: the definitive guide di Trenton Moss. Parlando di template CSS: su Code-sucks si possono trovare ben 42 faux coulumns CSS layouts. Li segnalo con due piccola riserve: valutate se l'ordine di HTML colonne laterali-contenuti centrali vi è congeniale, e soprattutto, se vorrete usarli, fatelo dopo un buona fase di test cross-browser dato che la compatibilità  non è dichiarata. Per quanto riguarda la compressione dei CSS con PHP: segnalo in conclusione The Definitive Post on Gzipping your CSS: originariamente pubblicato tre anni fa, ma ripubblicato di recente.

Continua a leggere Bookmark CSS

Categoria: CSS

Seguendo i consigli di un esperto (grazie Cesare che mi hai distolto dalle prime sgangherate prove) ho tentato un esperimento empirico per confrontare la qualità  e soprattutto il rapporto peso/qualità  dei formati JPG e HD Photo. Microsoft, infatti, ha annunciato di avere intenzioni serie circa questo nuovo formato (già  in odor di standard), dunque è utile fin da subito valutarne le qualità . (more...)

Continua a leggere JPEG vs HD Photo

Categoria: Grafica

Appuntamento dedicato ai bookmark Javascript. Cominciamo con alcuni tools decisamente utili. Certo non ha le funzionalità  di Firebug, ma devo dire che sono rimasto sorpreso dall'implementazione del metodo dump(), preso in prestito da ColdFusion, che si presta benissimo al debug. Rimanendo in tema di codice, CodePress è un syntax highliter per PHP, JavaScript, Java, Perl, HTML e CSS.Giunta da poco alla versione 1.0, ecco SmoothGallery una galleria/slideshow davvero potente e versatile basata su mootools.Forse un rant, oppure un altro spunto interessante contro framework e librerie che continua il filo logico del post Il peso e la necessità  di Javascript... in ogni caso una lettura interessante questo Prototype.js != $(). Ho trovato utilissima e molto completa la libreria presentata in Table Sorting, Filtering, Etc. La pagina di esempio mostra benissimo le caratteristiche: ordinamento, righe alterne, filtri e altre funzionalità  per la manipolazione delle tabelle.Parlando di ottimizzazione: in Make your pages load faster by combining and compressing javascript and css files viene presentato un metodo per concatenare e comprimere file CSS e Javascript con il PHP. Rimanendo in tema di PHP, concludo con ClickHeat una soluzione Javascript/PHP che costituisce un mini-sistema di analisi per visualizzare i click su un sito. Non si tratta di vere e proprie heatmap ma magari può valer la pena provarlo.

Continua a leggere Bookmark Javascript

Categoria: Web Design