Iniziamo con un'osservazione: mi piacciono alcuni quadri. In alternativa al reinventare completamente la ruota, o allo styling di un pulsante da zero, ancora una volta, è difficile trovare una soluzione all-in-one per le vostre esigenze HTML / CSS / JavaScript di base.
Il problema è, beh, è quello che ho detto proprio lassù. I quadri in realtà non sono una soluzione all-in-one, vero? Per tutto ciò che li abbiamo resi modulari e facili da personalizzare, a volte semplicemente non hanno ciò di cui abbiamo bisogno.
È impossibile includere tutti gli snippet HTML, lo stile degli elementi o la funzione javascript che potrebbero essere necessari. Ma poi, può anche essere una buona cosa.
Un framework potrebbe avere un sacco di cose di cui semplicemente non abbiamo bisogno. Alcuni dei miei lavori più frustranti hanno mai riguardato la ricerca manuale attraverso i massicci file CSS di Bootstrap per modificare un po 'di codice che stava causando il caos sul mio progetto.
Ad esempio, prendi il componente della barra di navigazione di Bootstrap. È fantastico, funziona perfettamente e sembra buono. Ma se provi a cambiare il modo in cui sembra in grande stile, devi cambiare un sacco di stili e ci vuole un po 'per trovarli tutti. Se si tratta solo di un elenco orizzontale di collegamenti nella parte superiore della pagina che si desidera, potrebbe essere più semplice codificarne uno nuovo da zero.
Ma hey, i framework più popolari là fuori, Bootstrap in particolare, hanno un sacco di strumenti di personalizzazione, giusto? Sì, ed è una cosa grandiosa, ma le opzioni di default non ti danno abbastanza spazio per lavorare.
In parole povere, se il tuo obiettivo è la creatività, un quadro imponente non è probabilmente la strada da percorrere. Certo, puoi hackerarlo, ma ci vorrà molto tempo.
Un altro problema che ho incontrato: incompatibilità JavaScript. Come un ragazzo che non è davvero un programmatore, questo è stato doloroso.
Nello specifico, c'è stata questa volta in cui ho provato ad integrare un paio di plugin jQuery in un progetto basato su Foundation. Questo non è un rompicapo tutto da solo, ma è più tempo dedicato al debugging.
Certo, questo era un po 'di tempo l'anno scorso. Onestamente non so cosa succederebbe se provassi la stessa cosa con le nuove versioni dello stesso framework e plugin, ma è ancora qualcosa da considerare.
In sintesi, ci sono volte in cui le strutture semplicemente non sono la risposta. È qui che arriva il toolkit e dovresti averne uno.
Un toolkit, nel contesto di questo articolo, è un insieme di strumenti, snippet, plug-in e risorse auto-raccolti che consentono di codificare i progetti molto più rapidamente. Le persone troveranno spesso queste risorse nel tempo e si affezioneranno a loro. È una cosa personale e devi davvero crearne una tua.
Analogie
differenze
Il vantaggio di un toolkit su un framework è la sua pura versatilità. Come affermato in precedenza, nei progetti in cui si intende spingere i confini in termini di progettazione, un quadro è spesso troppo macchinoso.
Quella stessa qualità è anche la rovina del quadro in progetti di dimensioni medio-piccole. Stai costruendo una pagina di destinazione promozionale? Un sito web di una pagina? Un semplice blog? Quindi un framework è probabilmente solo inutile. È meglio partire da zero e rendere ogni dettaglio del progetto tuo.
Direi che - è solo la mia opinione - che la maggior parte dei siti web basati sui contenuti non hanno bisogno di un quadro completo. L'eccezione sarebbe per i siti di massa, come ars technica per esempio. Per qualcosa di così grande dovresti usare un framework, ma dovresti probabilmente svilupparlo da zero per soddisfare le esatte esigenze del sito web.
Dove i framework come Bootstrap e Foundation brillano davvero nello sviluppo di applicazioni Web e nei siti Web basati su app. È in questi progetti che i vincoli relativamente rigidi sono utili, invece di rallentare.
Creare il proprio kit di strumenti è una questione di tempo, pazienza ed esperienza. Voglio dire, certo, potresti semplicemente andare a cercare "risorse per il web design". Avresti ottenuto migliaia e migliaia di visite e in un paio d'ore potresti scaricare più porzioni di codice di quante tu possa mai usare.
Ma quello non è un kit di strumenti. Quella è una libreria che non toccherai mai, perché la sua selezione richiederebbe troppo tempo. Siamo persone impegnate, quindi ho adottato un approccio più organico a questo: quando incontro un problema, lo faccio su Google.
Gli snippet sono spesso troppo lunghi per essere memorizzati, quindi se mi ritrovo a cercare ripetutamente la stessa cosa, lo aggiungo al mio toolkit. Lo stesso vale per il software: se è qualcosa che sai che userai molto, lo aggiungi.
Questo non vuol dire che non si dovrebbe mai mettere da parte il tempo per sperimentare semplicemente alcuni nuovi "giocattoli" ... dovresti. Se senti parlare di una particolare risorsa che potrebbe cambiare il tuo modo di lavorare in meglio, controlla assolutamente. Ma ricorda che i toolkit sono meglio mantenuti relativamente piccoli. Dovresti concentrarti a mantenere solo ciò che ti serve per soddisfare i bisogni che incontri regolarmente.
Ancora una volta, ripeterò che i kit di strumenti sono qualcosa che devi fare da te, per soddisfare i tuoi bisogni. Comunque, ho intenzione di elencare le cose nel mio toolkit per darti un'idea migliore di cosa cercare mentre crei la tua.
Pre-processori CSS come DI MENO e SASS fai due cose:
Se non hai ancora provato a codificare CSS con un pre-processore, ti invito a farlo ora. Proprio adesso. Aspetterò.
Un elenco di segnalibri ben organizzato può essere molto utile quando hai bisogno di qualcosa che non puoi salvare sul tuo disco rigido locale. I segnalibri come cose Generatori CSS3 , generatori di sprite , creatori di combinazioni di colori e altri strumenti che mi aiutano a svolgere rapidamente compiti che richiedono molto più tempo quando li fai a mano.
I sistemi a griglia sono così anni 2000. Da quando il responsive web design è diventato una realtà, i sistemi di grid sono diventati sempre più complessi per soddisfare le esigenze di una miriade di dispositivi.
E se avessi bisogno di un sistema di griglia personalizzato? Potresti trovare uno dei tanti generatori di sistemi a griglia reattivi online, ma sono limitati.
La soluzione si presenta sotto forma di semantic.gs . Ora, mentre il suo autore lo chiama un sistema a griglia, scelgo di chiamarlo un motore di layout, perché non è una griglia. È uno strumento basato sulla preelaborazione CSS (puoi usarlo con LESS, SASS e Stylus) e ti consente di generare al volo qualsiasi griglia che ti piace, a larghezza fissa o reattiva.
Tutto quello che devi fare è cambiare alcuni numeri in un file .less (o SASS, ecc.), E andare.
Emmet è una raccolta di plugin che trasformano le abbreviazioni in linee complete di codice, sia in HTML che in CSS.
Fondamentalmente, questo si trasforma:
div>ul>li*3>aIn questo:
- https://github.com/purplefish32/sublime-text-2-wordpress" class=external rel=nofollow> questo per WordPress . Le funzioni template di WordPress e le opzioni per functions.php possono essere difficili da ricordare, quindi questo è un salvataggi.
plugin jQuery
Come ho detto prima, non sono un vero programmatore. Quindi, quando è richiesto qualsiasi tipo di animazione avanzata o funzionalità dell'interfaccia utente, ma non tanto per creare un quadro che valga la pena, mi rivolgo a singoli plugin.
Alcuni dei miei preferiti sono:
- Scrollto.js : uno script scorrevole.
- idTabs : per quando hai bisogno di una sorta di interfaccia utente con schede.
- Supersized : per quando hai bisogno di una presentazione di una pagina intera.
- ResponsiveSlides.js : cosa dice il nome È un cursore di immagine reattivo. Cosa si può volere di più?
Non è mai troppo presto per avere la tua libreria personale di cose utili.
Quali strumenti vorresti vedere nel tuo toolkit? Di quali risorse non potresti vivere senza? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine del toolkit del matematico via Marc Kjerland.