Aloitetaan havainnoimalla: Rakastan minua joitain kehyksiä. Vaihtoehtona pyörän täydelliselle keksimiselle tai nappulan muodostamisesta tyhjästä on vaikea voittaa, kun sinulla on all-in-one-ratkaisu perus HTML / CSS / JavaScript-tarpeisiin.
Ongelmana on se, mitä sanoin juuri siellä. Kehykset eivät todellakaan ole all-in-one-ratkaisu ovat ne? Kaikille, jotka olemme tehneet niistä modulaarisia ja helposti muokattavissa, toisinaan heillä ei ole juuri tarvitsemiaan tarpeita.
On mahdotonta sisällyttää kaikki mahdolliset HTML-koodinpätkät, elementtityylit tai javascript-toiminnot, joita mahdollisesti tarvitaan. Mutta sitten se voi olla myös hyvä asia.
Kehyksessä voi olla paljon asioita, joita emme vain tarvitse. Jotkut turhauttavimmista töistänne, jotka olivat mukana käsin etsimässä Bootstrapin massiivisia CSS-tiedostoja muuttamalla pieniä koodin muotoja, jotka tuhoavat minua.
Käytä vain Bootstrapin navigointipalkin komponenttia. Se on hienoa, se toimii virheettömästi, ja se näyttää hyvältä. Mutta jos yrität muuttaa tapaa, jolla se näyttää suurelta, sinun täytyy vaihtaa paljon tyylejä, ja kestää kauan löytää ne kaikki. Jos kyseessä on vain haluamasi sivun yläosassa oleva horisontaalinen linkki, voi olla helpompi koodata uusi tyhjästä.
Mutta hei, suosituimmat kehykset siellä, erityisesti Bootstrap, on paljon räätälöintityökaluja, eikö? Kyllä, ja se on hieno asia, mutta oletusasetukset eivät anna sinulle tarpeeksi tilaa työskennellä.
Yksinkertaisesti sanottuna, jos keskitymme luovuuteen, massiivinen kehys ei todennäköisesti ole tapa edetä. Toki voit hakata sen, mutta se vie paljon aikaa.
Yksi ongelma, johon olen joutunut: JavaScript-yhteensopivuus. Koska kaveri ei ole oikeastaan ohjelmoija, tämä oli tuskallista.
Erityisesti oli tämä kerta kun yritin integroida muutaman jQuery-laajennuksen säätiöön perustuvaan muotoon. Tämä ei ole kauppaedustaja yksin, mutta on enemmän aikaa viedä virheenkorjaus.
Tietenkin tämä oli jonkin aikaa viime vuonna. En rehellisesti tiedä, mitä tapahtuisi, jos yritin samaa versiota samojen puitteiden ja pluginsien uusista versioista, mutta silti on vielä harkittava.
Yhteenvetona on tilanteita, joissa kehykset eivät yksinkertaisesti ole vastaus. Tässä työkalupakki tulee, ja sinulla on oltava yksi.
Tämän artikkelin yhteydessä työkalupakki on itse kerätty ja jäsennelty työkalu, katkelmat, laajennukset ja resurssit, joiden avulla voit koodata hankesi paljon nopeammin. Ihmiset löytävät usein näitä resursseja ajan myötä ja liittyvät niihin. Se on henkilökohtainen asia, ja sinun on todella tehtävä oma.
yhtäläisyyksiä
erot
Työkalujen etuna puitteissa on sen selkeä monipuolisuus. Kuten aiemmin on todettu, hankkeet, joissa aiot työntää rajoja suunnitellusti, puitteet ovat usein liian hankalia.
Sama laatu on myös kehyksen romahdus pienissä ja keskisuurissa projekteissa. Rakennatko myynninedistämisen aloitussivun? Yhden sivun verkkosivusto? Yksinkertainen blogi? Sitten puitteet ovat luultavasti vain tarpeettomia. Sinun on parasta aloittaa tyhjästä ja tehdä projektin kaikki yksityiskohdat.
Haluan mennä niin pitkälle kuin sanoa - tämä on vain minun mielipiteeni -, että useimmat sisältöperusteiset verkkosivustot eivät tarvitse täydellistä kehystä. Poikkeus olisi massiivisille kohteille, kuten ars technica esimerkiksi. Jotain suurta asiaa varten kannattaa käyttää kehystä, mutta sinun pitäisi luultavasti kehittää sitä tyhjästä itsellesi vastaamaan verkkosivuston tarkkoja tarpeita.
Jos kehykset, kuten Bootstrap ja Foundation todella loistavat, ovat web-sovellusten kehittämisessä ja app-käyttöisillä verkkosivustoilla. Näissä hankkeissa suhteellisen jäykät rajoitteet ovat käteviä sen sijaan, että hidastaisit sinua.
Oma työkalupakki on kysymys ajasta, kärsivällisyydestä ja kokemuksesta. Tarkoitan, voisit vain mennä etsimään "web-suunnittelurähteitä". Saat tuhansia tuhansia osumia, ja muutamassa tunnissa voit ladata lisää bittiä koodia kuin koskaan voisit käyttää.
Mutta se ei ole työkalupakki. Se on kirjasto, jota et koskaan kosketa, koska sen lajittelu olisi liian pitkä. Olemme kiireisiä ihmisiä, joten olen ottanut enemmän orgaanista lähestymistapaa tähän: kun kohtaan ongelman, minä Googlen.
Leikkeet ovat usein liian pitkiä muistiin, joten jos löytäisin toistuvasti etsimän samaa asiaa, lisään sen työkalupakkiin. Sama koskee ohjelmistoja: jos tiedät, että käytät paljon, lisäät sen.
Tämä ei tarkoita sitä, että sinun ei pitäisi koskaan varata aikaa vain kokeilla uusia "leluja" ... sinun pitäisi. Jos kuulet tietyn resurssin, joka voisi muuttaa tapaa, jolla työskentelet paremmin, tarkista se kaikin puolin. Muista kuitenkin, että työkalusarjat pidetään paremmin suhteellisen pieninä. Sinun on keskityttävä pitämään vain mitä tarvitset vastaamaan tarpeisiin, joita kohtaat säännöllisesti.
Jälleen toistan, että työkalut ovat jotain, mitä sinun täytyy tehdä itse, vastaamaan omia tarpeitasi. Silti aion listata asioita työkalupakin, jotta saat paremman käsityksen siitä, mitä etsiä, kun luot oman.
CSS-esiprosessorit, kuten VÄHEMMÄN ja SASS tee kaksi asiaa:
Jos et ole vielä kokeillut koodausta CSS: llä esiprosessorilla, kehotan teitä tekemään niin nyt. Juuri nyt. Odotan.
Hyvin järjestetty luettelo kirjanmerkeistä voi olla erittäin hyödyllinen, kun tarvitset jotain, jota et voi tallentaa paikalliseen kiintolevyyn. Kirjataan sellaisia asioita kuin CSS3-generaattorit , sprite generaattorit , värimaailman luojia , ja muita työkaluja, jotka auttavat minua nopeasti saavuttamaan tehtäviä, jotka vievät vain paljon pidempään, kun teet ne käsin.
Grid-järjestelmät ovat niin 2000-lukuisia. Koska reagoiva web-suunnittelu on tullut todellinen asia, verkkojärjestelmät ovat yhä monimutkaisempia, jotta ne täyttäisivät lukemattomien laitteiden tarpeet.
Ja mitä jos tarvitset mukautetun verkkojärjestelmän? Voit osua yhteen monista online-reagoivista verkkojärjestelmän generaattoreista, mutta ne ovat rajalliset.
Ratkaisu tulee olemaan muodossa semantic.gs . Nyt kun sen oma kirjailija kutsuu sitä ruudukkajärjestelmäksi, valitsen sen kutsumaksi layout-moottoriksi, koska se ei ole yksi verkko. Se on CSS-esikäsittelyyn perustuva työkalu (voit käyttää sitä LESS, SASS ja Stylus) avulla. Sen avulla voit luoda haluamasi verkon, kiinteän leveyden tai reagoivan.
Sinun tarvitsee vain muuttaa joitain numeroita .less (tai SASS, jne.) -Tiedostoon ja mennä.
Emmet on kokoelma laajennuksia, jotka kääntävät lyhenteet koodiksi, sekä HTML että CSS.
Periaatteessa se muuttaa tämän:
div>ul>li*3>aTässä:
- https://github.com/purplefish32/sublime-text-2-wordpress" class=external rel=nofollow> tämä WordPressille . WordPressin mallipohjia ja toimintojen toimintoja.php voi olla vaikea muistaa, joten tämä on elämän säästäjä.
jQuery-laajennuksia
Kuten aiemmin sanoin, en ole todellinen ohjelmoija. Joten kun tarvitset kehittyneitä animaatioita tai käyttöliittymän toimintoja, mutta ei niin paljon, että ongelman arvoinen kehys otetaan käyttöön, käännyin yksittäisiin laajennuksiin.
Osa suosikeistani ovat:
- Scrollto.js : sileä vieritysohjelma.
- idTabs : kun tarvitset jonkinlaisen välilehden käyttöliittymän.
- supersized : kun tarvitset koko sivun diaesitystä.
- ResponsiveSlides.js : mitä nimi sanoo. Se on reagoiva kuva liukusäädin. Mitä muuta haluatte?
Ei ole koskaan liian aikaista, että sinulla on oma henkilökohtainen kirjastosi hyödyllisiä asioita.
Mitä työkaluja haluat nähdä työkalusivustossasi? Millä resursseilla et voi elää ilman? Kerro meille kommentit.
Esitetty kuva / pikkukuva, matematiikan työkalupakki Marc Kjerlandin kautta.