Share
Una volta che hai programmato per un po ', inizi a dare qualcosa per scontato. Dimentichi quanto sei intelligente davvero. Quante centinaia di scorciatoie da tastiera abbiamo memorizzato? Quante lingue abbiamo imparato? Quanti quadri? Quanti hack? Dire che il web design / sviluppo è un settore estremamente difficile lo sta mettendo alla leggera. Successivamente, aggiungi il fatto che gran parte di ciò che conosci oggi sarà considerato obsoleto in pochi anni.
Oggi esamineremo una serie di suggerimenti e trucchi che aiuteranno i principianti ad accelerare i tempi di sviluppo e a codificare in modo più efficiente. Vedrai un mix di rapidi suggerimenti per risparmiare tempo e trucchi di codifica specifici per aumentare l'efficienza dell'applicazione web.
Quando utilizzi lo strumento "Salva per Web" in Photoshop, possiamo comprimere le nostre immagini al fine di ridurre le dimensioni dei rispettivi file. Ma, lo sapevate che la compressione può essere presa anche oltre senza sacrificare la qualità? Un sito chiamato Smush. Rende il processo un gioco da ragazzi.
Il team di Smush. Utilizza una varietà di strumenti.
* Le voci elencate sopra sono state prese dalla pagina delle FAQ di SmushIt .
Quindi, appena prima di implementare un nuovo sito web, esegui l'url attraverso il loro servizio per ridurre tutte le tue immagini, velocizzando così il tuo sito web. Attenzione: il servizio può convertire i file GIF in PNG. Potrebbe essere necessario aggiornare di conseguenza i file HTML e CSS. Mentre siamo sull'argomento, il 99% delle volte, salvare come PNG è la decisione migliore. A meno che non utilizzi una GIF animata di cattivo gusto, considera il formato PNG come best practice.
Molti IDE offrono un pannello "snippet di codice" che consente di salvare il codice per un uso successivo. Ti ritrovi a visitare lipsum.com troppo spesso per prendere il testo generico? Perché non salvarlo come uno snippet? In Dreamweaver, premere "Maiusc F9" per aprire la scheda snippet. È quindi possibile trascinare lo snippet appropriato nella posizione appropriata. Questa funzionalità mi consente di risparmiare molto tempo nel corso di una settimana.
Hai scaricato la libreria jQuery e stai lentamente cercando di cogliere la sintassi. Lungo la strada, si colpisce un intoppo e rendersi conto che non è possibile capire quale sia il valore di $ someVariable è uguale a. Facile, basta ...
console.log ($ someVariable);
Ora carica Firefox - assicurati di avere installato FireBug - e premi F12. Ti verrà presentato il valore corretto.
Ora - moltiplicalo per l'infinito e portalo nelle profondità di sempre e ancora non ti renderai conto di quanto possano essere utili Firebug e console.log (). :)
Creato da Chris Pederick, questo plugin per Firefox incredibilmente utile ti offre una miriade di opzioni. Molti di voi che guardano i miei screencast sanno che sono un fan dell'uso dell'opzione "Modifica CSS" per regolare i miei stili in tempo reale. Altre opzioni utili includono ...
Barra degli strumenti di sviluppo Web
Questa è una procedura che non tutti eseguiamo abbastanza. Anche se non sempre è fattibile, è possibile che molte volte acceleri il tuo sito posizionando i tag dello script vicino alla chiusura
etichetta....
La maggior parte dei browser attuali può scaricare un massimo di due componenti in parallelo per ciascun nome host. Tuttavia, quando si scarica uno script, non possono verificarsi altri download. Il download deve terminare prima di andare avanti.
Quindi, quando possibile, ha perfettamente senso spostare questi file nella parte inferiore del documento per consentire agli altri componenti (immagini, css, ecc.) Di caricare prima.
Se la perfomance è di primaria importanza per il tuo sito Web, ti suggerisco caldamente di valutare la possibilità di comprimere i tuoi file CSS e Javascript appena prima della distribuzione. Non preoccuparti di farlo all'inizio del tuo sviluppo. Causerà solo più frustrazione che aiuto Tuttavia, una volta che l'arco è stato legato, comprimili quei bambini.
Altri due strumenti utili per l'imballaggio del codice JavaScript sono YUI Compressor e JSMin.
Inoltre, hai la possibilità di comprimere il tuo HTML, anche se non lo consiglierei. La riduzione del file è trascurabile.
Non molto tempo fa, Jon Hobbs-Smith di tvidesign.co.uk ha pubblicato un articolo fantastico che fornisce dettagli su 25 consigli di jQuery. Assicurati di aggiungere questa pagina ai segnalibri! Ecco alcuni dei miei preferiti.
Accentsconagua
if ($ ('# myDiv) .length) // questo codice verrà eseguito solo se esiste il div con un id di #myDiv. Molte persone non si rendono conto che, quando accede a elementi dom, la funzione jQuery accetta un secondo parametro: "contesto". Considera quanto segue ...
var myElement = $ ('# someElement'); Questo codice richiede a jQuery di attraversare l'intero DOM. Possiamo migliorare la velocità utilizzando un contesto come secondo parametro.
var myElement = $ ('# someElement', $ ('. someContainer')); Ora stiamo dicendo a jQuery di cercare solo all'interno dell'elemento .someContainer e di ignorare tutto al di fuori di esso.
Quando si accede agli ID con jQuery, la libreria utilizza il metodo tradizionale "getElementById". Tuttavia, quando si accede alle classi, jQuery deve utilizzare i propri metodi per attraversare la dom (non esiste un metodo nativo "getElementByClass"). Di conseguenza, ci vuole un po 'di più!
Revisione di tutti i 25 consigli!
Se hai la scelta tra $ _GET o $ _POST quando effettui chiamate AJAX, scegli la prima.
"Il team di Yahoo! Mail ha scoperto che quando si utilizza XMLHttpRequest, POST viene implementato nei browser come processo a due fasi: prima invia le intestazioni e poi invia i dati. Quindi è meglio utilizzare GET, che richiede solo un pacchetto TCP da inviare ( a meno che tu non abbia molti biscotti). " - Developer.Yahoo.com
Ricorda: non usare ciecamente $ _GET. Assicurati di sapere esattamente cosa stai facendo prima. Ad esempio, in nessuna circostanza dovresti mischiare l'accesso al database e alla querystring. Non molto tempo fa, uno dei miei amici di Twitter mi ha inviato un'immagine di un sito web dal vivo contenente una query MYSQL nell'URL. NON FARE QUESTO! :)
Sia che stiate usando PHP, ASP.NET, Mootools, jQuery - o una combinazione di tutti loro, prendete in considerazione l'uso di framework quando appropriato.
Per esempio:
Tuttavia, se sto creando un sito complicato che richiede un CMS completo e un accesso ai dati complicato, darò un'occhiata a uno dei framework della mia lingua preferita.
Ricorda: fai in modo che le strutture lavorino per te; Non il contrario. Sii intelligente quando prendi queste decisioni.
YSlow è un servizio meraviglioso che controlla il tuo sito Web per garantire che sia il più efficiente possibile. Il team di Yahoo Dev, non molto tempo fa, ha creato una serie di linee guida, o best practice, che dovrebbero essere seguite durante lo sviluppo - molte delle quali sono dettagliate in questo articolo, in realtà.
C'è un ottimo screencast di YSlow che dimostra molte tecniche di risparmio di tempo. Consiglio vivamente di vederlo quando ne hai la possibilità.
I designer / sviluppatori più esperti saranno d'accordo con me; se dovessi andare sul menu della barra degli strumenti ogni volta che volevo apportare una modifica al mio sito o al mio design, sarei perso. Ho usato le scorciatoie da tastiera per così tanto tempo che non conosco più la posizione corretta per questi comandi. So solo che "Shift X" apre il pannello corretto.
All'inizio, può sembrare una conoscenza sprecata. Ma ti assicuro che non lo è. Ti consiglio di eseguire una ricerca su Google per "scorciatoie da tastiera X" - dove X è uguale al tuo software (ad esempio Photoshop). Stampa il grafico e posizionalo accanto al tuo computer. Nelle prossime settimane, esercitati a toccare il tuo mouse il meno possibile. Questa è una cosa che separa i professionisti dagli hobbisti.
Affrontiamolo; non tutti i siti web devono essere un'applicazione enorme e complicata. A volte, vogliamo semplicemente mostrare il nostro portfolio - probabilmente la maggior parte del tempo per alcuni! In questi casi, perché non creare un semplice "modello" che contenga tutto il necessario per iniziare.
All'interno della mia cartella di modelli, ho annidato le cartelle "JS" e "CSS".
Inoltre, ho un file "index.html (php)" che contiene alcuni frammenti di codice che uso sulla maggior parte dei miei progetti. Non è niente di stravagante, ma fa risparmiare tempo!
Documento senza titolo
Come puoi vedere, faccio riferimento ai miei file CSS e Javascript, al file jQuery di Google, creo la funzione jQuery document.ready () e apro il div "contenitore" standard.
È piuttosto semplicistico, ma RISPARMIA TEMPO. Quindi, ogni volta che crei un nuovo sito web, copia semplicemente la cartella "modello" e scava.
In generale, tutti i tuoi CSS e Javascript devono essere rimossi dalla pagina e inseriti nei rispettivi file esterni.
Se hai solo alcuni stili di base, puoi fare un'eccezione. In questi e solo in quei casi, potrebbe essere utile includerli nella pagina HTML.
AJAX è di gran moda in questo momento - soprattutto perché è finalmente diventato relativamente user-friendly, grazie alle librerie Javascript. In alcuni casi, è necessario avere un modo per determinare se lo script è stato chiamato con Javascript. Ci sono alcuni giorni per portare a termine questo compito.
Un modo sarebbe quello di aggiungere una coppia chiave-valore univoca con Javascript quando si invia il POST. È quindi possibile utilizzare PHP per determinare se esiste una determinata chiave. Se lo fa, sappiamo che Javascript è abilitato.
Un modo migliore sarebbe utilizzare una funzione PHP integrata chiamata "HTTP_X_REQUESTED_WITH". Illustrare…
se isset ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) // scrivi del codice e stai certo che Javascript è abilitato. else // Fai qualcosa di diverso per compensare gli utenti che hanno disattivato JS.
Non molto tempo fa, Google ha iniziato a ospitare script popolari come jQuery. Se utilizzi una tale libreria, ti consigliamo vivamente di collegarti alla CDN di Google piuttosto che utilizzare il tuo script.
API librerie AJAX
Sono un grande fan di Google Chrome. Si apre estremamente velocemente e processa Javascript più velocemente di qualsiasi altro browser - almeno per ora (penso che l'ultima versione di Firefox potrebbe aver raggiunto)..
Tuttavia, non mi vedrai lasciare Firefox in qualsiasi momento presto. Il numero di plugin utili disponibili per il browser è sbalorditivo. Ecco una lista dei miei preferiti.
Allo stesso modo in cui è bello odiare Microsoft in questo momento, sembra che al momento sia popolare per le persone attaccare coloro che usano gli IDE durante lo sviluppo. Questo è semplicemente sciocco.
In molti casi, l'uso di un IDE avanzato è fondamentale, specialmente quando si lavora in lingue OOP. Ora, se stai semplicemente creando un piccolo modello HTML, programmi come Notepad ++ e Coda funzioneranno splendidamente. In realtà, consiglierei il loro utilizzo in questi casi. Non aggiungere il gonfio extra se non ne hai bisogno. Tuttavia, quando sviluppi applicazioni avanzate, sfrutta un IDE.
Questo dovrebbe farlo per ora. Speriamo che alcuni di questi (forse tutti!) Ti aiuteranno a diventare un designer e uno sviluppatore migliori. Quali sono alcune delle tue scorciatoie preferite? Lascia un commento qui sotto e facci sapere!
