10K Apart: un’applicazione web in 10kB

La sfida? Realizzare una web app minimalista e concorrere alla vincita di 3000$.

Con l’arrivo della banda larga e l’aumento della velocità di connessione, internet è stato affollato da applicazioni e siti web molto più pesanti del necessario. Qualcuno potrebbe erroneamente pensare: “A cosa serve l’ottimizzazione quando ci sono connessioni ADSL disponibili?”

Questo atteggiamento è sbagliato, e proprio per fare un salto nel passato e tornare a realizzare applicazioni ben ottimizzate è stato lanciato il concorso 10K Apart. Ci sono più di 10000$ in premi per i concorrenti: l’invito è quello di proporre delle applicazioni web che non occupino più di 10 kilobyte.

L’introduzione sul sito infatti recita:

It’s time to get back to basics — back to optimizing every little byte like your life depends on it. Your challenge? Build a web app in less than 10 kilobytes.

E’ possibile appoggiarsi a delle librerie esterne per migliorare le proprie creazioni dal punto di vista grafico e funzionale: jQuery, Prototype e Typekit sono ammesse, e non influiranno sul conteggio dei 10kB.

Se volete partecipare avete tempo fino al 25 agosto. Intanto è possibile già vedere sul sito ufficiale le web app proposte, in attesa di conoscere il vincitore.

Galleria di effetti Javascript

Una rassegna di Javascript: slider, popup e altre animazioni notevoli.

Javascript e AJAX hanno senza dubbio invaso la rete negli ultimi anni. Se in passato era molto più raro vedere degli effetti sulle pagine web, ormai i framework utilizzabili sono numerosi, ed ancora di più gli effetti disponibili.

Ecco una breve rassegna di soluzioni eleganti, che potrete prendere come fonte di ispirazione.

Coda

Coda - effetto javascript

Il sito di CODA, l’editor per Mac, sarà già noto a molti. Gli effetti Javascript di questa pagina sono due, un elegante popup ed uno slider orizzontale. L’accessibilità è tutelata in parte: le tab restano navigabili anche con Javascript disabilitato, ma non è stata rivolta grande attenzione a questa possibilità.

Mancub

Mancub - screenshot

Questo sito è stata una rivelazione. Semplice ma accattivante, ha un effetto decorativo sul menu di navigazione che invita a giocarci e a soffermarsi più di un momento. E’ presente anche un effetto popup sui siti del portfolio, ed in questo caso con Javascript disabilitato si nota la cura dei dettagli. Le informazioni contenute nel popup appariranno infatti sotto gli screenshot. Ottimo lavoro.

Stragulp

Stragulp - effetto Javascript

Una segnalazione tutta italiana per un effetto slider realizzato con Mootools. Le potenzialità di questo framework mi hanno sempre interessato, anche in questo esempio l’animazione presente è fluida e piacevole da vedere.

Marius Roosendaal

Marius Roosendaal - effetto javascript

Un altro sito più che noto, recentemente rinnovato con un terzo foglio di stile disponibile nello style switcher. Anche in questo caso la libreria utilizzata è Mootools, con il celebre accordion che consente di sfogliare il portfolio.

Conoscete altri effetti Javascript interessanti da segnalare? Fatelo nei commenti, potrebbero emergere altre risorse notevoli.

Cosa manca nei CSS?

Mancanze e difetti più evidenti dei CSS, in un articolo aperto a opinioni e suggerimenti.

Senza dubbio i CSS sono uno strumento essenziale per ogni web designer, ma non sono esenti da difetti. Prendendo spunto da un recente post di Rockholderdesign, ho voluto riassumere quelle che secondo me sono le più gravi mancanze.

Ecco cosa che mi piacerebbe vedere implementato.

Selettori ascendenti

E’ una buona pratica l’uso dei selettori discendenti per evitare l’abbondanza di classi, ma al momento non esiste modo di selezionare il genitore di un particolare elemento.

Posizionamento verticale

Alcune azioni apparentemente intuitive sono fin troppo complicate con i CSS. Ad esempio il posizionamento orizzontale è elementare, ma centrare un elemento verticalmente non è così semplice.

Espressioni matematiche

Non è possibile usare formule per calcolare una dimensione, come ad esempio width: 100% – 5px;

Contenimento dei float

Non esiste una proprietà per far contenere ad un elemento un float (problema noto anche come auto-clear di un div). Ci sono degli hack, ma spesso portano a conseguenze indesiderate.

Background multipli

Attualmente è impossibile specificare una doppia immagine di sfondo su un elemento. La possibilità è prevista nei CSS3, e sarebbe di grande aiuto per evitare markup aggiuntivo.

Angoli arrotondati

I CSS permettono di utilizzare solo forme rettangolari. Sarebbe utile l’introduzione degli angoli arrotondati, così come quella di altre semplici forme facilmente gestibili dal foglio di stile.

Variabili

L’introduzione delle variabili sarebbe un vero passo avanti per i CSS. Poter dichiarare colori, bordi e altri elementi in maniera sintetica agevolerebbe il lavoro. C’è qualche speranza per il futuro, ma è ancora un’ipotesi lontana.

Colonne

Realizzare dei layout con 2, 3 o più colonne è ovviamente possibile, ma anche in questo caso non esistono dei moduli CSS appositi. Sarebbero sicuramente utili delle proprietà su misura per dividere uno spazio in colonne.

Maggiore coerenza tra i browser

Il punto fondamentale, non imputabile direttamente ai CSS. Ciò che crea più problemi tra gli sviluppatori è il differente supporto tra i vari browser esistenti. Alcuni come Safari e Opera si spingono fino ai CSS3, altri come Explorer non arrivano nemmeno alle specifiche dei CSS 2.1. Maggiore coerenza non farebbe male.

Alcuni di questi punti sono caso di studio per le future specifiche dei CSS, altri sono solamente delle ipotesi. Secondo voi cosa altro manca? Poche aggiunte faciliterebbero il compito di chi lavora ogni giorno con i fogli di stile: non sono problemi insormontabili e c’è sempre un modo per aggirarli, ma riuscire ad evitare hacks e markup aggiuntivo sarebbe un sogno.