Da circa tre mesi ho terminato un progetto che mi ha visto impegnato sul fronte client. In questo progetto ho imparato l'importanza di scrivere codice CSS riusabile. Infatti, in un'email che ho ricevuto dal responsabile del progetto, mi veniva segnalato il fatto che, pur essendo il codice CSS ottimo, avevo scritto degli stili troppo legati alle singole pagine, con una visione più statica che dinamica del progetto. (more...)

Continua a leggere Scrivere codice CSS riusabile

Categoria: CSS

Avevo salvato la segnalazione tra i bookmark in attesa di una prova sul campo e ieri ho finalmente trovato il tempo per approfondire l'utilità  di Zen Coding. "Un nuovo modo per scrivere HTML e CSS" recita la descrizione del progetto, perché di questo si tratta. Zen Coding è nella sua funzione primaria un motore per abbreviazioni. In pratica, possiamo scrivere codice HTML e CSS (ma anche XML/XSL) nella forma e nella sintassi abbreviate definite nella documentazione ufficiale (elementi HTML, selettori HTML, proprietà  CSS) e poi espandere il tutto nella forma estesa, perdonatemi la banalità , con un solo click (o con la pressione di una combinazione di tasti). (more...)

Continua a leggere Le magie di Zen Coding

Categoria: Web Standards

Abbiamo segnalato su queste pagine molte delle soluzioni per la generazione automatica di codice CSS3 presentate in questo post di SitePoint. Mancava all'appello CSS3 Generator. Come gli altri tool consente, tramite la sua interfaccia, di impostare i parametri fondamentali per proprietà  come box-shadow, border-radius, etc., di avere un'anteprima (la funzione sicuramente più comoda di questi strumenti) e di copiare/incollare il codice generato nel nostro foglio di stile.

Continua a leggere Un (altro) generatore di codice CSS3

Categoria: CSS

Tags: ,

Una porzione di codice Javascript potrebbe essere sottoposta ad un trattamento di bellezza: perché il codice è stato scritto male, perché per ragioni specifiche (vedi bookmarklet) si è costretti a scriverlo in un modo che poco favorisce la leggibilità , perché è stato compresso con uno dei tanti packer disponibili, perché è stato offuscato. Dato che non ho avuto bisogno e l'ho trovato utile, mi piace segnalare a chi non lo conoscesse questo Javascript beautifier, un tool online che serve a riformattare e indentare propriamente il codice Javascript che si inserisce nella grande textarea che è il cuore del servizio. Disponibili anche alcune opzioni di configurazione, come la possibilità  di fissare il livello di indentazione.

Continua a leggere Javascript beautifier

Categoria: Software e Servizi

Qual è il migliore approccio nella definizione dei selettori all'interno di un foglio di stile? Di quali fattori tenere conto? Va bene privilegiare la leggibilità  e l'usabilità  del codice sacrificando, almeno entro limiti accettabili, le performance nel rendering della pagina? Possono essere così sintetizzati gli spunti di discussione che può suscitare un post come questo di Cory Schires. Il nostro si esprime a favore della pratica dell'annidamento profondo dei selettori CSS. (more...)

Continua a leggere Sull’efficienza dei selettori annidati

Categoria: CSS

Tags: , ,

Se c'è una cosa che non sopporto degli sviluppatori è che spesso, quando scrivono anche la più piccola libreria JavaScript, ci si mettono d'impegno per farti buttare almeno un'ora di tempo per capire come usarla. Se leggete i commenti degli utenti alla libreria SyntaxHighlighter, noterete il ricorrere di parole come 'doesn't work' e 'can't make it work' (in italiano: non funziona, non so come farla funzionare). Questo è solo uno dei tanti casi in cui sarebbe bastato aggiungere dei file di esempio nel download per facilitare il lavoro degli sviluppatori che andranno ad usare la libreria, esattamente come succede per i plugin di jQuery (sia benedetta la community di jQuery!). (more...)

Continua a leggere Come rendere inusabile il proprio codice (o quasi)

Categoria: Scripting

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

Quando qualcuno mi ha chiesto un'opinione su certi tool online per l'ottimizzazione del codice CSS, ho sempre messo in guardia il mio interlocutore su un aspetto: il fatto che molti di essi riscrivono il codice disponendo le singole dichiarazioni su un'unica riga. Eh sì, perché se avessi espresso il mio voto nel sondaggio promosso da CSS Tricks sarei sicuramente tra i 3868 favorevoli alla riga multipla. Cioè, non capisco davvero i vantaggi della riga singola, specie quando regole e dichiarazioni sono complesse. Se qualcuno vuole illuminarmi, mi illumini.order cialis no rx

Continua a leggere CSS: su più righe o a riga singola?

Categoria: CSS

Avendo a disposizione tante e ottime soluzioni per la formattazione del codice potrebbe esserci da parte nostra la tentazione di dimenticare le basi. E le basi, nel caso in questione, sono rappresentate da un uso corretto dell'elemento HTML pre. Su Perishable Press è stato pubblicato un bel tutorial che mostra le varie opzioni di cui disponiamo per formattare al meglio questo elemento con i CSS. Le opzioni presentate sono tre: l'uso di width per evitare spiacevoli effetti sul layout in presenza di righe troppo lunghe grazie alla barra di scorrimento orizzontale; l'uso di proprietà  CSS come white-space e word-wrap per evitare la comparsa della barra orizzontale facendo sì che righe troppo lunghe vengano spezzate automaticamente; la possibilità  di espandere in larghezza il box con il testo preformattato in conseguenza dell'hover sul box stesso da parte dell'utente. La seconda soluzione, anche se non ottenuta con i CSS, è quella adottata, tra gli altri, su A List Apart. Nella terza mi sono imbattuto qualche volta recentemente, verificando che spesso l'autoespansione del box è ottenuta con l'ausilio di jQuery o altri script. Tutto sommato mi pare che la prima sia quella più semplice ed efficace, una barra orizzontale in questi casi non disturba. Quale dei tre approcci preferite?

Continua a leggere Tutto sull’elemento <pre>

Categoria: CSS

Tags: , ,

àˆ solo l'ultimo strumento di questo tipo in cui mi imbatto e ve lo segnalo più che altro per discutere sulla reale utilità  di tali soluzioni. Si chiama Styleneat e consente la formattazione e l'ottimizzazione del codice CSS sulla base delle regole impostate dall'utente. àˆ possibile, tra l'altro, organizzare selettori e proprietà  in ordine alfabetico, disporre il codice su una sola riga o su più righe, etc. L'operazione può essere svolta incollando il codice nell'area di testo, uploadando il file o inserendo l'URL.

Continua a leggere Organizzare automaticamente un CSS

Categoria: CSS