Kode

Når værktøjssæt er bedre end rammer

Lad os starte med en observation: Jeg elsker mig nogle rammer. Som et alternativ til helt at genopfinde hjulet, eller ved at trykke en knap fra bunden igen, er det svært at slå at have en alt-i-en-løsning til dine grundlæggende HTML / CSS / JavaScript-behov.

Problemet er, ja det er det jeg sagde lige deroppe. Rammer er virkelig ikke en alt-i-en-løsning er de? For alt det, vi har lavet dem modulære og nemme at tilpasse, nogle gange har de bare ikke det, vi har brug for.

Det er umuligt at inkludere alle mulige HTML-kodestykker, elementstil eller javascript-funktion, som man eventuelt kunne have brug for. Men så kan det også være en god ting.

En ramme kan have mange ting, vi bare ikke har brug for. Nogle af mine mest frustrerende arbejde nogensinde involveret manuelt at søge gennem Bootstraps massive CSS-filer for at ændre en lille smule kode, der blev ødelæggende på mit design.

Bare tag Bootstraps navigationsbjælke komponent for eksempel. Det er fantastisk, det virker perfekt, og det ser godt ud. Men hvis du forsøger at ændre den måde, det ser ud på nogen større måde, skal du ændre mange stilarter, og det tager et stykke tid at finde dem alle. Hvis det kun er en vandret liste over links øverst på siden, du ønsker, kan det være nemmere at kode en ny fra bunden.

Men hej, de mere populære rammer derude, især Bootstrap, har mange tilpasningsværktøjer, ikke? Ja, og det er en god ting, men standardindstillingerne giver dig ikke nok plads til at arbejde.

Kort sagt, hvis dit fokus er på kreativitet, er en massiv ramme sandsynligvis ikke vejen at gå. Sikker på, du kan hacke det, men det vil tage meget tid.

Et andet problem, jeg har kørt ind: JavaScript-inkompatibiliteter. Som en fyr, der ikke er virkelig en programmør, var det smertefuldt.

Specifikt var der denne gang, da jeg forsøgte at integrere et par jQuery-plugins i et design baseret på Foundation. Dette er ikke en aftale breaker alle på egen hånd, men det er mere tid brugt debugging.

Det var selvfølgelig noget tid sidste år. Jeg ved ærligt ikke, hvad der ville ske, hvis jeg prøvede det samme med de nye versioner af samme ramme og plugins, men det er stadig noget at overveje.

Sammenfattende er der tidspunkter, hvor rammerne simpelthen ikke er svaret. Det er her, hvor værktøjssætet kommer ind, og du skal have en.

Så hvad er et værktøjssæt, og hvordan er det anderledes end en ramme?

Et værktøjssæt i sammenhæng med denne artikel er et selvindsamlet og kureret sæt værktøjer, uddrag, plugins og ressourcer, der giver dig mulighed for at kode dine projekter så meget hurtigere. Folk vil ofte finde disse ressourcer over tid og blive knyttet til dem. Det er en personlig ting, og du skal virkelig lave din egen.

ligheder

  • Værktøjssæt og rammer er begge stort set opbygget af kode designet til at hjælpe dig med at komme i gang.
  • Deres job er at gøre dit liv lettere, men de kan ikke og bør ikke gøre alt for dig.
  • De skal begge vedligeholdes og opdateres for at afspejle de nyeste teknologier i spil.

Forskelle

  • Værktøjssæt udarbejder ikke nogen form for konstruktion eller struktur, rammer ofte.
  • Værktøjssæt består normalt af ting, der kommer fra helt forskellige kilder.
  • Det er ikke kun kode, værktøjer kan indeholde software, bogmærke links, og så videre.
  • Værktøjssæt har normalt ikke nogen "standardfiler", så du kan vælge og vælge.

Så hvornår skal jeg bruge hvilket?

Fordelen ved et værktøjssæt over en ramme er dens ren alsidighed. Som nævnt tidligere, i projekter, hvor du har til hensigt at skubbe grænserne designmæssigt, er en ramme ofte alt for besværlig.

Den samme kvalitet er også rammens fald i små til mellemstore projekter. Opretter du en salgsfremmende destinationsside? Et websted med en side? En simpel blog? Derefter er en ramme kun nok unødvendig. Du er bedre at starte fra bunden og gøre alle detaljer i projektet din.

Jeg ville gå så langt som at sige - det er bare min mening - at de fleste indholdsdrevne hjemmesider ikke behøver en fuldt udbygget ramme. Undtagelsen ville være for massive steder, som ars technica for eksempel. For noget så stort skal du bruge en ramme, men du bør nok udvikle den fra bunden selv for at opfylde hjemmesidets nøjagtige behov.

Hvor rammer som Bootstrap og Foundation virkelig skinner er i webapplikationsudvikling og app-drevne hjemmesider. Det er i disse projekter, at de relativt stive begrænsninger kommer til nytte, i stedet for at bremse dig ned.

Sådan laver du din egen værktøjskasse.

At lave din egen værktøjskasse er et spørgsmål om tid, tålmodighed og erfaring. Jeg mener sikkert, du kunne bare gå og lave en søgning efter "webdesign ressourcer". Du vil få tusindvis af hits, og i løbet af et par timer kan du downloade flere bits kode, end du nogensinde kunne bruge.

Men det er ikke et værktøjssæt. Det er et bibliotek, du aldrig kommer til at røre ved, fordi sortering gennem det ville tage alt for lang tid. Vi har travlt med mennesker, så jeg har taget en mere økologisk tilgang til dette: Når jeg støder på et problem, jeg Google det.

Uddrag er ofte for lange til at huske, så hvis jeg finder mig gentagne gange på jagt efter det samme, tilføjer jeg det til min værktøjskasse. Det samme gælder for software: hvis det er noget du ved, du vil bruge meget, tilføjer du det.

Det er ikke at sige, at du aldrig bør afsætte tid til bare at eksperimentere med nogle nye "legetøj" ... du skal. Hvis du hører om en bestemt ressource, der kan ændre den måde, du arbejder til det bedre, skal du undersøge det hele. Men husk at værktøjssæt er bedre holdes forholdsvis små. Du bør fokusere på at holde kun det, du har brug for for at imødekomme de behov, du møder regelmæssigt.

Mit værktøjssæt

Igen vil jeg gentage, at værktøjssæt er noget, du skal gøre dig selv for at opfylde dine egne behov. Jeg vil stadig liste de ting i min toolkit for at give dig en bedre ide om hvad du skal kigge efter, når du opretter din egen.

En CSS forprocessor

CSS forprocessorer som MINDRE og Sass gør to ting:

  1. De udvider CSS grundlæggende funktionalitet med variabler, mixins, indlejrede selektorer mv.
  2. De gør kodning af CSS hurtigere.

Hvis du ikke allerede har forsøgt kodning af CSS med en forprocessor, opfordrer jeg dig til at gøre det nu. Lige nu. Jeg venter.

bogmærker

En velorganiseret liste over bogmærker kan være meget gavnlig, når du har brug for noget, som du ikke kan gemme på din lokale harddisk. Jeg bogmærker ting som CSS3 generatorer , sprite generatorer , farveskema skabere , og andre værktøjer, der hjælper mig med hurtigt at udføre opgaver, der tager lige så meget længere, når du gør dem for hånd.

Semantic.gs: en layoutmotor

Rutenettet systemer er så 2000'erne. Helt siden reagerende webdesign blev en faktisk ting, er netværkssystemer blevet stadig mere komplekse for at imødekomme behovene hos utallige enheder.

Og hvad hvis du har brug for et brugerdefineret gittersystem? Du kan slå op på et af de mange online-responsive netværksgeneratorer, men de er begrænsede.

Løsningen kommer i form af semantic.gs . Nu, mens sin egen forfatter kalder det et gittersystem, vælger jeg at kalde det en layoutmotor, fordi det ikke er et gitter. Det er et værktøj, der er baseret på CSS-forbehandling (du kan bruge den med mindre, SASS og Stylus), og det giver dig mulighed for at generere ethvert net, som du gerne vil have, fast bredde eller lydhør, på flugt.

Alt du skal gøre er at ændre nogle tal i en .less (eller SASS, etc) fil, og gå.

Emmet - tidligere kendt som Zen Coding

Emmet er en samling af plugins, der forkorter forkortelser til fulde linjer af kode, både i HTML og CSS.

Det drejer sig grundlæggende om dette: 

div>ul>li*3>a

Ind i dette 

  • https://github.com/purplefish32/sublime-text-2-wordpress" class=external rel=nofollow>  dette til WordPress  .  WordPress 'skabelon funktioner og muligheder for functions.php kan være svært at huske, så dette er en livredder. 
      jQuery-plugins 
      Som jeg sagde før, er jeg ikke en rigtig programmør.  Så når nogen form for avanceret animation eller brugergrænsefladefunktionalitet er påkrævet, men ikke så meget for at skabe en ramme, der er værd at besværet, vender jeg mig til de enkelte plugins. 
      Nogle af mine favoritter er: 
    • Scrollto.js  : et glat rulningsskript 
    • idTabs  : for når du har brug for nogen form for fanebladet brugergrænseflade. 
    • supersized  : for når du har brug for et helt diasshow. 
    • ResponsiveSlides.js  : hvad navnet siger  Det er en følsom billedskyder.  Hvad mere kan du have? 
      Det er aldrig for hurtigt at have dit eget personlige bibliotek af nyttige ting. 
      Hvilke værktøjer vil du gerne se i dit værktøjssæt?  Hvilke ressourcer kunne du ikke leve uden?  Lad os vide i kommentarerne. 
      Fremhævet billede / miniaturebillede,   matematikerens værktøjskasse billede  via Marc Kjerland. 
    


        
    
                        neil stevens

OdWebDesign.Net