25 webfejlesztési tipp a készségek fejlesztéséhez

Gyakran mondják, hogy a tapasztalat nem helyettesítheti - de vannak parancsikonok. Tapasztalt fejlesztőkkel beszélgettünk; olyan emberek, akik nap mint nap fáradoznak a hurkokon és rabszolgák az attribútumok felett. Ez a tippgyűjtemény egyenesen a kódlapról származik.

Túlcsordulva, mint egy nem megfelelően meghatározott puffer, a know-how googolplexjét kiszűrték, hogy 25 remek funkciót, trükköt és tippet kapjon. Vannak olyan nyílt forráskódú szolgáltatások, amelyekről a fejlesztők hallgatnak, a mobil programozási feltörések és az adaptív fejlesztési tippek.

Korábban hallottunk néhány ilyen csillagtitkot, de sok még a számunkra is vadonatúj volt. Biztosak vagyunk benne, hogy egy vagy kettőnél többet talál az eszköztár hozzáadásához.

Kódolás

1. Törölje a listákat

Az úszó elemek törlése a legtöbb webfejlesztő számára az őrlés része. Ennek ellenére mégis elkaphatunk. Például hogyan törölheti az úszó listaelemeket magasság beállítása nélkül? 'A válasz erre a kis dilemmára valójában nagyon egyszerű' - mondja Rhys Little Plug and Play , 'Csak adja hozzá a következő két CSS tulajdonságot bármelyik lebegő listaelemet tartalmazó listatárolóhoz.'

display: block;overflow: hidden;

Ha most ellenőrzi a listatárolót bármelyik DOM-ellenőrnél, akkor megállapítja, hogy a magasság attribútumot automatikusan kiszámították - és ez megoldja a problémát.



2. Homokozó

Ha például technikákat, CSS-effektusokat vagy új típusú átmeneteket szeretne fejleszteni, akkor sandbox projektként hajtsa végre. 'Ha a kísérletezést nem befolyásolja külső hatás, sokkal könnyebb a kód hibakeresése, ha valami nem a várt módon működik' - mondja a kreatív igazgató Shane S. Mielke .

3. Internetes ellenőrök

A fejlesztők különböznek abban, hogy melyik webellenőr a legjobb, de mindannyian egyetértenek abban, hogy még akkor is küzdöttünk, mielőtt kedvenc böngészőink rendelkeztek volna velük. Új kontextus ’S Paul Wilson rámutat arra, hogy a CSS-változásokat élőben megtekintheti a Chrome-ban vagy a Safari-ban. Kattintson jobb gombbal egy elemre, és válassza az „Elem ellenőrzése” lehetőséget, mondja Wilson: „Az összes alkalmazott CSS a jobb oldali ellenőrző ablaktáblán jelenik meg. Itt szerkesztheti vagy új elemeket adhat hozzá, hogy lássa a módosítások hatásait. '

A webellenőr alapértelmezés szerint nem érhető el a Mac Safari alkalmazásában. Engedélyezze a Beállítások> Speciális> Fejlesztés megjelenítése menüben a menüsoron.

4. Firebug és azon túl

A Chrome és a Safari beépített webellenőrrel rendelkezik, de Mike Ballan , Digitális tervező, Medúza az eredeti Firefox Developers Toolbar mellett áll. 'Tökéletes észlelni azokat a kis CSS-problémákat, amikor webhelyét több képernyős méretben tesztelik' - mondja Mike.

'A Firebug nemrégiben több képernyőméretet is megjelenített egy böngésző lapon - ami azt jelenti, hogy soha nem kell megváltoztatnia a böngésző szélességét, hogy újra tesztelje a webhelyét.'

5. Egyszerre egy dolog

Ben Howdle , a Didlr at. fejlesztője wapple.net , azt mondja, nem tudja eléggé hangsúlyozni az egységes felelősség elvének fontosságát. „A kódodban lévő minden objektumnak egy funkcióval kell rendelkeznie. Még a CSS-sel is. Ne helyezzen minden stílust egy .gomb osztályra. Ossza fel .gomb-szerkezetre és .gomb-arcra és így tovább ... '

Miért? Mert ha ezt nem teszi meg, és valami megszakad, akkor egy csekély idő telik el a kódon keresztül, és megtalálja, hogy melyik objektummal van a probléma - és hogy a hibát a DOM magasabb részéről örökölte-e.

6. Tudod kódolni?

Ben azt is gondolja, hogy a keretekre és a könyvtárakra való visszalépés nem mindig a legjobb válasz. 'Ha egy kis projektet kódol, és például mindig tartalmazza a jQuery-t, gondoljon arra, hogy' Meg tudom-e csinálni ezt a Vanilla JS-szel? '' Megtalálhatja, hogy valóban meg tudja csinálni JavaScript-ben, jobban és gyorsabban.

Projektmenedzsment

7. Szerezd meg Git

Ha nagy projekteken dolgozik, akkor robusztus verziórendszerre van szüksége. Sok fejlesztő esküszik a GitHubra, de van egy hátránya is, ha a projekted privát. A kódod a GitHub szerverein van tárolva, és nyilvánosan elérhető. Az emberek Plug and Play ajánlani GitLab .

'A GitLab nagyon hasonlít a GitHub-ra, de teljesen nyílt forráskódú, és szabadon beállítható saját szerverein' - mondja Rhys Little. „A GitLab legjobb beállítása a használat NGINX val vel Egyszarvú a teljesítmény és a sebesség javítása érdekében - de az Apache és az utasok is működni fognak.

'Ennek a megoldásnak az a legnagyobb előnye, hogy minden kódod minden egyes elkötelezéskor biztonsági másolatot tartalmaz, egy igazán hasznos diff nézővel, így láthatod, mi változott az egyes elkötelezettségeknél.'

8. Megjegyzett kód

Különösen a csapattagok ne feledje, hogy másoknak meg kell érteniük a kódot - használja fel erőforrásait és dolgozza át a fájljait. 'Ne légy lusta' - mondja Shane S. Mielke. „Mindig kommentálja a kódot, nevezze el a rétegeit, és rendezze a PSD-ket és az FLA-kat. Minél rendezettebb fájljai vannak, annál könnyebb Önnek vagy másoknak beugraniuk és megérteni, hol vannak a dolgok és hogyan működnek. '

9. Biztonságos webhelyet

Mielőtt élőben élne egy weboldallal, mindenképpen futtassa át ASafaWeb.com (ejtsd: A-Safer-Web). 'Ez a webhely, amelyet a Microsoft MVP Troy Hunt írt, az ASP.NET webhelyeit számos általános biztonsági kérdés után kutatja' - mondja a .NET dev Macs Dickinson . 'Ha valamelyik teszten nem sikerül, akkor tanácsot ad a probléma megoldására.'

10. Automatizálás

„Ne pazarolja az időt az egységtesztek telepítésével vagy manuális futtatásával. Automatizálja - mondja a Mac-ek - Az NAnt vagy az MSBuild kezelésére fordított idő jól eltöltött idő, mivel csökkenti az átugrandó karikák számát, amikor ez a határidő közeleg.

11. Csapatkövető

A csapat itt: Doboz nélküli tanácsadás használat Pivotal Tracker és Pivotal Booster a projektmenedzsmenthez és a szolgáltatás / hibakereséshez. 'Vannak más eszközök is erre, de a Pivotal Tracker az egyszerű, könnyű lehetőség' - mondta nekünk a csapat. 'Rendszeresen használjuk a projektek előrehaladásának nyomon követésére.'

12. Tökéletes képek

Pixel Perfect egy olyan eszköz, amelyet nem csomagolunk a kezdeti tervek összehasonlításához a tényleges kezelőfelülettel, amelyet a fejlesztési folyamat kiköp. 'Ez a kis Firefox plugin lehetővé teszi, hogy a tervek JPEG verzióját közvetlenül az oldal tetejére helyezhesse' - mondja az Unboxed csapata. 'Ellenőrizheti az utolsó képpontot, hogy minden felálljon!'

13. Pontozott vonalak

Az Unboxed intelligens, intuitív ötlettel követi az oldalak kódolásának előrehaladását. 'Néha a kezelőfelületen dolgozunk' hiányos 'vagy' toto 'CSS osztályt használunk, amely pontozott vázlatot ad azoknak az elemeknek, amelyek nem működnek vagy befejezetlenek' - mondja a csapat. 'Világosan láthatjuk, hogy mire van szükség, mielőtt életbe lépünk.'

Mobil

14. Aktív telefonszámok

'A legtöbb mobil eszköz képes hívásokat kezdeményezni, ezért használja ki ezt az oldal kódjában' - mondja Mike Ballan. Csomagolja be a számot a címke. A http: // protokoll helyett a „tel:” szót használja

Így nézhet ki:

0123456789

15. Magas vagy alacsony?

Készen áll a webhelyére a retina képernyőkhöz? Ne gondolja, hogy csak azért van rendben, mert a számok jelenleg az Ön oldalán állnak, mert ez nem marad örökké.

'Van néhány megoldás a képek váltására a képernyő felbontására adott válasz függvényében' - mondja Mike. „Ott van a JavaScript keretrendszer retina.js amely az Apple @ 2x elnevezési szokását használja a standard képek cseréjére nagy felbontású verziókkal.

'Nagy felbontású képeket is lehet szállítani iOS eszközökre a webkit-image-set használatával'. Itt van, hogyan:

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

16. Rögzített helyzet

Szeretne fix navigációt vagy kapcsolatfelvételi sávot használni a webhely alján? Ha mobilról van szó, akkor szem előtt kell tartanod, hogy csak néhány böngésző támogatja a „fix” osztályt. 'A Windows Phone 7 a' fix 'osztályt a' statikus 'helyére cseréli - ez nem jó dolog' - mondja Mike.

Íme a mobil operációs rendszerek listája, amelyek támogatják a CSS „fix” attribútumát:

  • Mobil Safari iOS5 és újabb
  • Android 3 és újabb
  • Blackberry 7.0 és újabb

Parancsikonok

17. Sprite engem

Az oldalak letöltésének felgyorsítása érdekében a gombokat, ikonokat és háttereket tekercsekké alakítsa. Több kép egyetlen fájlba való egyesítése csökkenti az ügyfél által a szerverre küldött kérelmek számát. 'Egyes fejlesztők a képeket típusok szerint csoportosítják' - mondja Rhys Little. 'Mások csak mindent egyetlen fájlba egyesítenek'.

Ezután a CSS háttér-helyzet attribútummal csak a kép kívánt részét jeleníti meg. A kép egyszer letöltődik, egyszer gyorsítótárba kerül, és egyszer kérték. Ha ez túl sok kemény munkának tűnik, használjon online eszközt SpriteMe hogy elvégezze a szamármunkát. Képeket keres az oldaladon, ezeket egyesítheti, és létrehozza az Ön számára a CSS-t.

18. Fehér tér

'A JavaScript és a CSS üres helyének, sőt funkcióneveinek csökkentése jelentősen lerövidíti az oldal betöltési idejét' - mondja Rhys. Azt javasolja, hogy egyesítse az összes JavaScript-et és CSS-t egy vagy két fájlba, majd adja át ezeket a fájlokat YUI kompresszor .

19. Műveletek

Még a tervezők is elfelejtik, hogy a Photoshop Actions milyen egyszerűvé teheti életüket. A fejlesztők nem felejtik el ezt: Photoshop webes munkafolyamat .

'A telepítés után rákattint bármelyik rétegre a Photoshopban, és megnyomja az F1 billentyűt' - mondja Paul Wilson. 'Ez megragadja a fóliát, és egy új dokumentumba helyezi, amely pontosan megadja a méretet, és megjeleníti a Mentés webre ablakot'.

Egyszerű hangzású szekvencia, de sokkal gyorsabbá teszi a háttérkészítést, a prototípus készítést és a sprite készítést

20. Ha akkor

Keir Whitaker nak,-nek Viewport Industries nem tud élni a Mac alkalmazás TextExpander nélkül: „Ez lehetővé teszi, hogy parancsikonokat rendeljen nagy szövegdarabokhoz. Például, ha ki akarom adni a WordPress ciklust a kódszerkesztõmbe, akkor egyszerűen beírom a // ciklust. Rendszeresen működik, és nagyszerű eszköz az időigényes kódstruktúrák, például a beágyazott listák felépítéséhez.

21. Frissítve

Keir is rajong CodeKit 'Ha Mac számítógépet használ, akkor a CodeKit elengedhetetlen' - mondja. 'A böngésző újratöltési funkciója önmagában megéri az alacsony költségeket. Képoptimalizálásra, valamint a Sass és a JavaScript összeállítására is kiváló.

22. Mindannyian kaptatok levelet

'Ez egy teljes munkaidős munka, amely fenntartja az alkalmazás levelezési funkcióját, így spóroljon meg magának egy fejfájást és kiszervezze azt' - mondja az UX fejlesztője Will Grant . Az olyan szolgáltatások, mint a SendGrid vagy a Mandrill, kézbesítést, spam elleni védelmet, visszafordulási jelentéseket kezelnek - sok. 'Ezek a dolgok rendkívül olcsók, vagy akár ingyenesek is az első néhány ezer levélben.'

Reszponzív webhelyek

23. Média lekérdezések

„Reszponzív webhelyek készítésekor a média lekérdezések jelentik a folyamat gerincét” - mondja Mike Ballan. „Megfelelnek az eszköz média típusának, és megjelenítik a bejelentett CSS-t”. Például:

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

A fenti kód 1200 képpontos vagy nagyobb felbontással rögzíti a képernyő felbontását, és a vörös színt alkalmazza az oldal összes törzsszövegére. Ha a képernyő mérete kisebb, mint 1200 képpont, akkor fekete törzsszöveget jelenít meg.

Eddig ilyen egyszerű - de a tapasztalt fejlesztők tudják, hogy ez a folyamat hamarosan nehézkessé válhat, amikor folyamatosan küzdesz azért, hogy minden embernek örömet szerezz.

„Használjon egy CSS keretrendszert, mint például meghökkent - mondja Mike. Ez egymilliárd különféle média lekérdezés egyszerű, szemantikai osztályokkal történő felváltását váltja fel

24. Nehezebb választás

Ha nagyobb súlyú keretre van szükség, akkor A Twitter Bootstrap vagy A ZURB Alapítványa talán megteszi a trükköt.

25. Kapcsolja ki a dolgokat

„Reszponzív webhelyek készítésekor nem igazán akarja, hogy a felhasználók duplán koppintsanak és nagyítsanak, mivel minden tartalmának láthatónak kell lennie” - mondja Mike Ballan. „Ehhez hozzá kell adnia egy olyan kódot, amely letiltja a felhasználói zoomolást és méretezés ”.

Ez a kód lehetővé teszi az iOS-eszköz számára a webhelyek elegánsabb megjelenítését az iPad vagy az iPhone forgatásakor is.

Szakértőink a következők voltak:

Keir Whitaker, a Bath-alapító társalapítója Viewport Industries , dolgozott a Carsonified és a Smashing Magazine-nal.

Rhys Little innen: Plug and Play Southampton felajánlott néhány legfontosabb CSS-tippet.

Shane S. Mielke tervező és kreatív igazgató olyan ügyfelekkel, mint a LucasArts, a Nintendo és a Sony Pictures Studio.

Paul Wilson, a Dr. Új kontextus Skócia, amely az agilis projektfejlesztésre szakosodott a Ruby on Rails-en.

Mike Ballan digitális formatervező a Medúza aki az XHTML és a CSS használatával ugyanúgy jár, mint a Photoshop.

Macs Dickinson egy walesi .NET fejlesztő, aki Yorkshire-ben él. Ő @MacDickinson a Twitteren.

Ben Howdle annak a csapatnak a tagja, amelyik most fejezte be a Didlr fejlesztését wapple.net . Ez egy rajzalkalmazás webes és mobil eszközökhöz.

A csapat itt: Doboz nélküli tanácsadás a projektmenedzsment és a Ruby on Rails fejlesztők mesterei.

Will Grant felhasználói élmény (UX) és technológiai tanácsadó Bitcala .