Top 10 Web Development Best Practices

Spiega quale div stai chiudendo

Il più delle volte quando visualizzo il sorgente di un sito web, vedo, in fondo alla pagina, una lista quasi infinita di tag di chiusura </div>. In effetti, molti principianti pensano di dover semplicemente usare i div al posto delle tabelle per produrre codice di qualità. I div sono più puliti delle tabelle, ma senza una corretta organizzazione del codice, può essere altrettanto (o a volte più) disordinato del codice basato sulle tabelle.

Utilizzare l’indentazione è un buon inizio. Ma un consiglio che può sicuramente farvi risparmiare molto tempo è quello di commentare ogni tag div che state chiudendo, come mostrato nell’esempio qui sotto:

<div> <div class="first left"> ... </div><!-- #sub.first.left --></div><!-- #header -->

Utilizzare un CSS reset

A meno che non siate dei principianti o se siete stati in vacanza su un’isola deserta negli ultimi 6 anni, potreste già sapere quanto sia utile un CSS reset. Poiché per impostazione predefinita, i browser non applicano lo stesso stile di default agli elementi HTML, un reset CSS farà in modo che tutti gli elementi non abbiano uno stile particolare in modo da poter definire il proprio senza il rischio di molti problemi di rendering cross-browser.

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}/* remember to define focus styles! */:focus {outline: 0;}/* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;}/* tables still need 'cellspacing="0"' in the markup */table {border-collapse: collapse;border-spacing: 0;}

Fonte: https://meyerweb.com/eric/tools/css/reset/index.html

Non usare @import

I file CSS possono essere inclusi usando la direttiva @import. Questo può essere utile quando, per esempio, si vuole includere un foglio di stile in un altro. Un’altra pratica comune è quella di includere i file CSS nei documenti html usando quanto segue:

<style type="text/css> @import url('a.css'); @import url('b.css');</style>

Anche se funziona, la direttiva @import è molto più lenta dell’altro modo di includere i fogli di stile in un documento html:

<link rel='stylesheet' type='text/css' href='a.css'><link rel='stylesheet' type='text/css' href='proxy.css'>

Non farà la differenza sui siti web a basso traffico, ma se hai la possibilità di possedere un sito popolare, non sprecare il tempo dei tuoi visitatori usando @import.
Fonte: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

“Smush” le tue immagini

Essendo uno sviluppatore, ho sempre trovato che ottimizzare le mie immagini per il web non era facile. Ho provato il buon vecchio comando “Salva per il web” di Photoshop, ma la maggior parte delle volte, mi ritrovavo con immagini troppo grandi o senza una qualità sufficiente.
Di conseguenza, avevo la cattiva abitudine di usare immagini non ottimizzate sui miei siti web. Questo non è un problema quando non devi preoccuparti della larghezza di banda del tuo sito, ma dopo il mio recente passaggio sul mio server privato virtuale, ho dovuto fare attenzione alle dimensioni delle immagini.

In questo periodo, ho trovato uno strumento molto bello chiamato Smush It: Si inserisce l’url della vostra immagine non ottimizzata, e Smush It creerà un’immagine perfettamente ottimizzata per voi. È possibile risparmiare fino al 70% della dimensione del file, pur mantenendo la qualità originale. Come esempio, tutte le immagini della mia lista di editor di codice online sono state “smushate”.

Non mischiare i CSS con l’HTML

Come linguaggio di markup, l’uso giusto dell’HTML è quello di organizzare i documenti definendo un’intestazione, un piè di pagina, liste, blockquotes, ecc. Qualche tempo fa, gli sviluppatori web front-end usavano spesso attributi HTML ormai deprecati per dare stile a un particolare elemento.
Oggi, l’attributo style permette agli sviluppatori di inserire CSS direttamente in un documento html. Questo è molto utile per i test o quando si ha fretta. Ma l’attributo style è una cattiva pratica, che va completamente contro la filosofia CSS.

L’esempio seguente illustra come può diventare sporca e difficile da leggere una semplice linea di codice, con l’attributo style:

<a href="https://catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">Cats Who Code</a>

Non mischiare Javascript con HTML

Proprio come mischiare il codice html con i css è una cattiva pratica, non dovresti usare nessun Javascript nei tuoi documenti html. La seguente cattiva pratica illustra un evento onclick:

<a href="https://catswhocode.com" onclick="alert('I love this site!');">Cats Who Code</a>

Lo stesso risultato può essere ottenuto usando Javascript senza ostacoli. In questo esempio, sto usando il popolare framework jQuery:

$(document).ready(function() { $('#cwc').click(function() { alert('I love this website'); });});

Questo può sembrare un po’ più difficile all’inizio, specialmente per i principianti; ma non lo è assolutamente, e manterrà il vostro documento html pulito.

Lo sapete, IE fa schifo, e alcuni clienti fanno ancora più schifo richiedendovi di creare pagine web che sono compatibili con questo browser obsoleto. Per indirizzare versioni specifiche di IE, potete usare i ben noti hack di IE, come mostrato qui sotto:

height: 200px; /* normal browsers */_height: 300px; /* IE6 */.height: 250px; /* IE7 */*height: 350px; /* All IEs */

Questi hack sono estremamente utili a volte, ma non sono il modo migliore per indirizzare una versione specifica di IE, e faranno fallire la vostra validazione CSS.

Invece, dovresti usare il commento condizionale mostrato qui sotto per indirizzare IE6.

<link href="style.css" rel="stylesheet" type="text/css" /><!--> <link href="ie.css" rel="stylesheet" type="text/css" /><!-->

Posiziona il file Javascript in basso

Una pratica popolare della fine degli anni 90/inizio 2000 era quella di posizionare i file Javascript all’interno dei tag <head> e </head>. Il problema è che i tuoi file javascript saranno caricati per primi, e di conseguenza il tuo contenuto sarà caricato dopo.

Mettendo i file Javascript in fondo ai tuoi documenti, ti assicurerai che i file JS siano caricati solo quando il contenuto è stato correttamente visualizzato.

 ... <script type='text/javascript' src='jquery.js?ver=1.3.2'></script> </body></html>

Usa HTML semanticamente

HTML non è un linguaggio di programmazione. È un linguaggio di markup, usato per creare documenti strutturati denotando una semantica strutturale per il testo come titoli, paragrafi, elenchi e altro.
Se hai iniziato a creare siti web nei buoni vecchi anni ’90 o all’inizio del secolo, sai quanto fosse sporco il markup a quel tempo. Ma fortunatamente, si è evoluto.
Tra le altre cose, è importante usare gli elementi html in modo semantico. Per esempio, un menu di navigazione dovrebbe sempre essere una lista non ordinata:

<ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Blog</a></li></ul>

Testare MENTRE si costruisce per evitare problemi di cross-browser

Uno dei più grandi errori che ho fatto nello sviluppo di html, CSS e javascript, è stato quello di non testare le mie pagine su più browser mentre le scrivevo. Invece, scrivevo tutto il mio codice e lo visualizzavo solo in Firefox per vedere come veniva reso.
In teoria, questo dovrebbe essere buono. Ma come sapete, i problemi di cross-browser sono un grosso problema per gli sviluppatori front-end, specialmente a causa di IE. Se testate i vostri documenti su Firefox/IE/Chrome mentre li scrivete, i problemi di rendering cross-browser saranno molto più facili da risolvere. Ho perso ore a non farlo, quindi spero che questo consiglio finale vi aiuti a risparmiare il vostro tempo prezioso. Buona codifica 😉

.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.