25 verkkokehitysvinkkiä taitojesi parantamiseksi

Usein sanotaan, että kokemusta ei voi korvata, mutta siihen on pikakuvakkeita. Puhuimme kokeneiden kehittäjien kanssa; ihmiset, jotka kamppailevat silmukoiden yli ja orjaavat määritteitä päivittäin. Tämä vihjeiden kokoelma tulee suoraan koodipinnalta.

Ylivuoto kuin riittämättömästi määritetty puskuri, taitotiedon googolplex on suodatettu tuomaan sinulle 25 hienoa ominaisuutta, temppuja ja vinkkejä. On olemassa avoimen lähdekoodin palveluja, joista kehittäjät hiljaa, mobiiliohjelmoinnin hakkerointi ja reagoivia kehitysvinkkejä.

Olimme kuulleet muutamia näistä tähtien salaisuuksista aiemmin, mutta monet olivat meille aivan uusia. Olemme varmoja, että löydät useamman kuin yhden tai kaksi työkaluvyön lisäämiseksi.

Koodaus

1. Tyhjennä luettelot

Kelluvien elementtien tyhjentäminen on osa jauhaa useimmille web-kehittäjille. Voimme silti jäädä kiinni. Esimerkiksi, kuinka tyhjennät kelluvat luetteloelementit asettamatta korkeutta? 'Vastaus tähän pieneen ongelmaan on todella yksinkertainen', sanoo Rhys Little of Plug and Play , 'Lisää vain seuraavat kaksi CSS-ominaisuutta mihin tahansa luettelosäiliöön, jossa on kelluvia luetteloelementtejä.'



display: block;overflow: hidden;

Jos tarkistat luettelosäiliön nyt minkä tahansa DOM-tarkastajan kanssa, huomaat, että korkeusattribuutti on laskettu automaattisesti - ja tämä korjaa ongelman.



2. Hiekkalaatikko

Jos haluat kehittää tekniikoita, CSS-vaikutuksia tai uudenlaisia ​​siirtymiä, tee se esimerkiksi hiekkalaatikkoprojektina. 'Kokeilun pitäminen ulkoisten vaikutusten häiritsemättömänä helpottaa koodin virheenkorjausta, jos jokin ei toimi odotetulla tavalla', sanoo luova johtaja Shane S.Mielke .

3. Verkkotarkastajat

Kehittäjät eroavat toisistaan ​​siitä, mikä verkkotarkastaja on paras, mutta he kaikki ovat yhtä mieltä siitä, että kamppailimme ennen kuin suosikkiselaimissamme oli niitä. Uusi asiayhteys S Paul Wilson huomauttaa, että voit esikatsella CSS-muutoksia suorana Chromessa tai Safarissa. Napsauta hiiren kakkospainikkeella elementtiä ja valitse 'Tarkasta elementti', Wilson sanoo. 'Kaikki sovellettu CSS näkyy oikeassa tarkastusruudussa. Voit muokata tai lisätä uusia elementtejä täältä nähdäksesi muutosten vaikutukset. '

Verkkotarkastaja ei ole oletusarvoisesti käytettävissä Macin Safarissa. Ota se käyttöön siirtymällä valikkorivin Asetukset> Lisäasetukset> Näytä kehitysvalikkoon.



4. Firebug ja sen ulkopuolella

Chromessa ja Safarissa on sisäänrakennettu verkkotarkastaja, mutta Mike Ballan , Digitaalinen suunnittelija, Meduusa seisoo alkuperäisen Firefox Developers -työkalupalkin vieressä. 'Se on täydellinen asia havaita nuo pienet CSS-ongelmat testattaessasi sivustoasi useilla näyttökokoilla', Mike sanoo.

'Firebug on juuri lisännyt mahdollisuuden näyttää useita näyttökokoja yhdellä selaimen välilehdellä - mikä tarkoittaa, että sinun ei tarvitse koskaan muuttaa selaimesi leveyttä testataksesi sivustoasi uudelleen.'

5. Yksi asia kerrallaan

Ben Howdle , Didlr: n kehittäjä osoitteessa wapple.net , sanoo, ettei hän voi tarpeeksi korostaa yhden vastuun periaatteen merkitystä. 'Koodisi jokaisella objektilla tulisi olla yksi toiminto. Jopa CSS: n kanssa. Älä laita kaikkia tyylejä .button-luokkaan. Jaa se .painikkorakenteeseen ja .painikekasvoon ja niin edelleen ... '

Miksi? Koska jos et tee niin ja jotain rikkoutuu, sinulla on heck aikaa jäljittää koodisi läpi, löytää mikä objekti on ongelma - ja onko vika peritty DOM: n ylemmältä.



6. Voitteko koodata sen?

Ben uskoo myös, että paluu kehyksiin ja kirjastoihin ei ole aina paras vastaus. 'Jos koodaat pientä projektia ja sisällytät aina esimerkiksi jQueryn, ajattele:' Voinko tehdä tämän Vanilla JS: n kanssa? '' Saatat huomata, että voit tehdä sen JavaScriptin avulla paremmin ja nopeammin.

Projektinhallinta

7. Hanki Git

Jos työskentelet suurten projektien parissa, tarvitset vankan versiojärjestelmän. Monet kehittäjät vannovat GitHubin, mutta projektisi on yksityinen. Koodisi on GitHubin palvelimilla ja julkisesti saatavilla. Ihmiset Plug and Play suositella GitLab .

'GitLab on hyvin samanlainen kuin GitHub, mutta se on täysin avoimen lähdekoodin ja vapaasti asetettavissa omille palvelimillesi', Rhys Little sanoo. ”GitLabin paras kokoonpano on käyttää NGINX kanssa Yksisarvinen parantaa suorituskykyä ja nopeutta - mutta Apache with Passenger toimii myös.

'Tämän järjestelyn suurin etu on, että kaikki koodisi varmuuskopioidaan aina, kun teet sitoutumisen, todella hyödyllisen diff-katseluohjelman avulla, jotta näet, mitä jokaisessa sitoumuksessa on muutettu.'

8. Kommentoitu koodi

Erityisesti ryhmätyöntekijät, muista, että muiden ihmisten on ymmärrettävä koodisi - käytä resurssejasi ja käsittele tiedostojasi. 'Älä ole laiska', sanoo Shane S. Mielke. 'Kommentoi aina koodiasi, nimeä tasosi ja järjestä PSD: si ja FLA: t. Mitä järjestelmällisemmät tiedostosi ovat, sitä helpompaa sinulle tai muille on hypätä sisään ja ymmärtää missä asiat ovat ja miten ne toimivat. '

9. Suojaa sivustosi

Ennen kuin siirryt verkkosivustolle, muista suorittaa se läpi ASafaWeb.com (lausutaan A-Safer-Web). 'Tämä Microsoft MVP Troy Huntin kirjoittama sivusto etsii ASP.NET-verkkosivustoja useiden yleisten turvallisuusongelmien varalta', sanoo .NET dev Macit Dickinson . 'Jos epäonnistut jossakin testissä, se neuvoo sinua ratkaisemaan ongelman.'

10. Automatisoi

'Älä tuhlaa aikaa yksikötestien käyttöönottoon tai suorittamiseen manuaalisesti. Automatisoi se, sanoo Mac, 'NAnt: n tai MSBuildin käsittelemiseen käytetty aika on hyvin käytetty aika, koska se vähentää niiden vanteiden määrää, jotka sinun täytyy hypätä läpi, kun kyseinen määräaika lähestyy.'

11. Joukkueen seuranta

Joukkue paikassa Pakkaamaton konsultointi käyttää Pivotal Tracker ja Keskeinen tehosterokotus projektinhallintaan ja ominaisuuksien / vikojen seurantaan. 'Tähän on muita työkaluja, mutta Pivotal Tracker on yksinkertainen, kevyt vaihtoehto', tiimi kertoi meille. 'Käytämme sitä säännöllisesti edistymisen seuraamiseen projektien kautta.'

12. Täydelliset kuvat

Pixel Perfect on työkalu, joka on pakkaamaton käyttö alkuperäisten mallien vertaamiseen varsinaiseen käyttöliittymään, jonka kehitysprosessi sietää. 'Tämän pienen Firefox-laajennuksen avulla voit peittää suunnittelusi JPEG-version suoraan sivun yläosaan', sanoo Unboxed-tiimi. 'Voit tarkistaa viimeisen kuvapisteen, että kaikki on linjassa!'

13. Katkoviivat

Unboxedilla on älykäs, intuitiivinen idea seurata sivujen koodaamisen edistymistä. 'Joskus etupäässä työskennellessä käytetään' keskeneräistä 'tai' todellista 'CSS-luokkaa, joka antaa pisteviivan elementeille, jotka eivät toimi tai ovat keskeneräisiä', tiimi kertoo meille. 'Voimme selvästi nähdä, mikä tarvitsee työtä, ennen kuin menemme elämään.'

Matkapuhelin

14. Aktiiviset puhelinnumerot

'Useimmilla mobiililaitteilla on mahdollisuus soittaa puheluita, joten hyödynnä sitä sivukoodissasi', sanoo Mike Ballan. Kääri numero tag. Käytät protokollana http: // protokollan sijaan 'tel:'

Tältä voi näyttää:

0123456789

15. Korkea vai matala?

Onko sivustosi valmis verkkokalvonäyttöihin? Älä ajattele, että olet kunnossa vain siksi, että numerot ovat puolellasi juuri nyt, koska se ei pysy näin ikuisesti.

'On olemassa muutama ratkaisu kuvien vaihtamiseen riippuen näytön tarkkuudesta', Mike sanoo. 'Siinä on JavaScript-kehys retina.js joka käyttää Applen @ 2x-nimeämiskäytäntöä vaihtaakseen vakiokuvia teräväpiirtoversioilla.

'On myös mahdollista toimittaa korkean resoluution kuvia iOS-laitteille webkit-image-setin avulla'. Näin:

.header { background: -webkit-image-set( url(images/header.jpg) 1x, url(images/header_2x.jpg) 2x);}

16. Kiinteä asento

Haluatko kiinteän navigoinnin tai yhteystietopalkin sivustosi alaosassa? Kun on kyse mobiililaitteista, sinun on pidettävä mielessä, että vain harvat selaimet tukevat kiinteää luokkaa. 'Windows Phone 7 korvaa' kiinteän 'luokan staattisella - mikä ei ole hyvä asia', Mike sanoo.

Tässä on luettelo mobiilikäyttöjärjestelmistä, jotka tukevat kiinteää määritettä CSS: ssä:

  • Mobiilisafari iOS5 ja uudemmat
  • Android 3 tai uudempi
  • Blackberry 7.0 ja uudemmat

Pikanäppäimet

17. Sprite minua

Muuta painikkeet, kuvakkeet ja taustat spriteiksi nopeuttaaksesi sivujen lataamista. Useiden kuvien yhdistäminen yhteen tiedostoon vähentää asiakkaiden pyyntöjen määrää palvelimellesi. 'Jotkut kehittäjät ryhmittelevät kuvat tyypin mukaan', sanoo Rhys Little. 'Toiset vain yhdistävät kaiken yhdeksi tiedostoksi'.

Sitten käytät CSS: n tausta-sijainti-määritettä vain näyttämään haluamasi kuvan osa. Kuva ladataan kerran, se tallennetaan välimuistiin kerran ja sitä pyydetään kerran. Jos se kuulostaa liian kovalta työltä, käytä verkkotyökalua SpriteMe tehdä aasin työtä. Se etsii sivultasi kuvia, jotka se voi yhdistää ja tuottaa CSS: n sinulle.

18. Valkoinen tila

'JavaScriptin ja CSS: n välilyönnin ja jopa funktionimien pienentäminen lyhentää sivusi latausaikoja huomattavasti', Rhys sanoo. Hän ehdottaa kaikkien JavaScriptin ja CSS: n yhdistämistä yhdeksi tai kahdeksi tiedostoksi ja sitten tiedostojen välittämisen YUI-kompressori .

19. Toimet

Jopa suunnittelijat unohtavat, kuinka helppoa Photoshop Actions voi tehdä heidän elämästään. Kehittäjät eivät unohda tätä: Photoshop-verkkotyönkulku .

'Kun olet asentanut, napsautat mitä tahansa tasoa Photoshopissa ja painat F1-näppäintä', Paul Wilson sanoo. 'Tämä tarttuu kerrokseen, laittaa sen uuteen asiakirjaan, joka on tarkat mitat, ja tuo esiin Tallenna verkkoon -ikkunan'.

Yksinkertainen kuulostava sekvenssi, mutta se tekee taustan luomisesta, prototyyppien tekemisestä ja sprite-tekemisestä paljon nopeamman

20. Jos sitten

Keir Whitaker / Viewport Industries ei voi elää ilman Mac-sovellusta TextExpander: “Sen avulla voit määrittää pikakuvakkeita suurille tekstinpaloille. Esimerkiksi, jos haluan lähettää WordPress-silmukan koodieditorissani, kirjoitan yksinkertaisesti // -silmukan. Se toimii järjestelmänlaajuisesti ja on loistava työkalu aikaa vievien koodirakenteiden, kuten sisäkkäisten luetteloiden, rakentamiseen.

21. Päivitetty

Keir on myös fani CodeKit 'Jos käytät Macia, CodeKit on pakollinen', hän sanoo. 'Selaimen uudelleenlatausominaisuus on pelkästään pienten kustannusten arvoinen. Se soveltuu erinomaisesti myös kuvien optimointiin sekä Sassin ja JavaScriptin kokoamiseen.

22. Teillä kaikilla on postia

'Se on kokopäiväinen työ, joka ylläpitää sovelluksesi postitustoimintoa, joten säästä itsellesi päänsärky ja ulkoista se', sanoo UX Developer Will Grant . Palvelut, kuten SendGrid tai Mandrill, käsittelevät toimitettavuutta, roskapostisuojausta, palautumisraportteja - paljon. 'Nämä asiat ovat erittäin halpoja tai jopa ilmaisia ​​ensimmäisten tuhansien sähköpostiviestiesi yhteydessä.'

Reagoivat sivustot

23. Mediakyselyt

'Reagoivien sivustojen rakentamisen yhteydessä mediakyselyt ovat prosessin selkäranka', Mike Ballan sanoo. 'Ne vastaavat laitteen mediatyyppiä ja näyttävät ilmoittamasi CSS: n'. Esimerkiksi:

body { text-color:#000000; }@media only screen and (min-width:1200px) {body { text-color:#FF0000; }}

Yläpuolella oleva koodi sieppaa näytön tarkkuudet vähintään 1200 kuvapistettä ja käyttää punaisen värin kaikkeen sivun tekstiin. Jos näytön koko on alle 1200 kuvapistettä, se näyttää mustan tekstin.

Toistaiseksi niin yksinkertaista - mutta kokeneet kehittäjät tietävät, että tämä prosessi voi pian tulla hankalaksi, kun kamppailet miellyttämään kaikkia ihmisiä koko ajan.

'Käytä CSS-kehystä, kuten hämmästyttää ”Sanoo Mike. Se korvaa tarpeen kirjoittaa miljardi erilaista mediakyselyä yksinkertaisilla, semanttisilla luokilla

24. Painavampi valinta

Jos tarvitaan raskaampaa kehystä Twitterin käynnistyshihna tai ZURB: n säätiö saattaa tehdä temppu.

25. Sammuta asiat

'Kun teet reagoivia sivustoja, et todellakaan halua käyttäjien pystyvän kaksoisnapauttamaan ja zoomaamaan, koska kaiken sisällön pitäisi olla näkyvissä', sanoo Mike Ballan. 'Tätä varten sinun on lisättävä koodi, joka poistaa käyttäjän zoomauksen käytöstä. ja skaalaus ”.

Tämän koodin avulla myös iOS-laite näyttää sivustot tyylikkäästi, kun iPadia tai iPhonea käännetään.

Asiantuntijamme olivat:

Keir Whitaker, Bath-pohjaisen perustaja Viewport Industries , on työskennellyt Carsonified and Smashing Magazinen kanssa.

Rhys Little kotoisin Plug and Play Southampton tarjosi joitain parhaita CSS-vinkkejä.

Shane S.Mielke on suunnittelija ja luova johtaja asiakkaiden kanssa, mukaan lukien LucasArts, Nintendo ja Sony Pictures Studio.

Paul Wilson, on lääketieteen tohtori Uusi asiayhteys Skotlanti, joka on erikoistunut ketterään projektikehitykseen Ruby on Rails -sivustolla.

Mike Ballan on digitaalinen suunnittelija Meduusa kuka on yhtä kiinnostava XHTML: n ja CSS: n kanssa kuin Photoshop.

Macs Dickinson on Walesin .NET-kehittäjä, joka asuu Yorkshiressä. Hän on @MacDickinson Twitterissä.

parhaat monitoritarjoukset musta perjantai 2017

Ben Howdle on osa tiimiä, joka on juuri päättänyt kehittää Didlr: tä wapple.net . Se on piirustussovellus verkko- ja mobiililaitteille.

Joukkue paikassa Pakkaamaton konsultointi ovat projektinhallinnan mestareita ja Ruby on Rails -kehittäjiä.

Will Grant on käyttäjäkokemus (UX) ja teknologiakonsultti Bitcala .