3 tipikus frontend fejlesztői “hiba”

A múltban teljesen átlagosnak számító dolog volt, hogy egy webes projekten csak egyetlen technikai személy dolgozott. Ő volt felelős mindenért: az elrendezés tervezésétől kezdve, a kódoláson át, a weboldal vagy webes alkalmazás teljes kivitelezéséig. Azonban a weboldalak és alkalmazások létrehozásának folyamata évek óta fejlődik, ezért a technológiák, a megfelelő eljárások és persze az egyes projekteken dolgozó fejlesztők száma is változott, mert a fejlesztési területek egyre inkább specializálódnak.

Ma már legalább egy backend feljesztő és egy frontend fejlesztő kell dolgozzon egy projekten optimális esetben. A valóságban azonban a frontend fejlesztő sokszor mégis hiányzik. Számos oka lehet ennek, de legtöbbször a projekt költségvetési korlátaihoz kapcsolódik. Cikkünket leendő backend fejlesztők számára is szánjuk, akik néha kénytelenek átvenni a frontend fejlesztő feladatainak egy részét.

1. Nem vagy nem megfelelően optimalizált képek

Ez egy nagyon gyakori frontend probléma. Amikor fejlesztőként helyi környezetben teszteled a munkád eredményét, ahol minden azonnal "letöltődik", akkor nagyon könnyű megfeledkezni a sávszélesség-használatról. Sajnos számtalanszor találni olyan képeket élő weboldalakon, amelyek akár 2-3 MB méretűek, de csak 200 x 300px-es méretben jelenítik meg őket. Ez nyilvánvalóan hiba, amely indokolatlanul lassítja a weboldalt. Egy ilyen méretű kép tipikusan legfeljebb 50-150 KB méretű lehet.

Képzeljük el azt a felhasználót, aki egy ilyen weboldalt látogat. Enyhe kifejezés, hogy frusztrált lesz. Látszólag minden különösebb ok nélkül csigalassúsággal töltődnek le a képek. Arról nem is beszélve, hogy ha mindezt mobilon, mobilnet használata közben tapasztalja a látogató, akkor elég gyorsan “elfogyaszthatjuk” látogatóink havi letöltési keretét…

Mindig ellenőrizni kell, hogy a képek optimalizáltak-e. Akár jpg, akár svg képekről van szó, számos - akár ingyenes - képoptimalizálási lehetőséget találhatunk online.

2. “Inline” stílusok használata

Inline stílust használni, valljuk be, kényelmes dolog - bizonyos esetekben. Nem kell foglalkozni azzal, hogy korábban már milyen CSS osztályokat használtunk. Elég “helyben” megadni a megfelelő CSS stílust, és már készen is vagyunk.

Persze, lehet olyan helyzet, amikor egy adott stílusra (kezdetben legalábbis) csak egyetlen ponton van szükség. Tegyük fel, hogy azt kéri a megrendelő, hogy egy bizonyos link színét változtassuk narancsszínűre. Ebben az esetben ezt a részletet tehetjük be CSS file-unkba:

a {
  color: #FF6400;
}

Azonban ezzel a megoldással minden link színe megváltozna a honlapon, miközben nekünk csak egyetlen helyen kellene ezt a link színt használni.

(Megjegyzés: Ha ez valóban jogos kérés, akkor ott a weboldal design koncepciójával is probléma lehet, de ez már más kérdés.)

Lényeg, hogy nem jó megoldás, ha mindenhol megváltozik a szín, mert nem ez volt a kérés. Ilyenkor szokták sokan az alábbi megoldást választani:

<a href="/valami" style="color: #FF6400;">Kattints ide!</a>

Egy esetben ez még esetleg rendben is lenne. Azonban, ha egyszer előjött egy ilyen “egyedi színváltoztatás” kérés, akkor valószínűleg több ilyen is előfordul majd. Ha pedig lusták vagyunk, és nem definiálunk erre az esetre egy külön CSS osztályt, akkor később problémáink lehetnek. Ráadásul, ha később már sok helyen használtuk az inline megoldást és utólag kell mindenhol mégis megváltoztassuk a színt, akkor saját dolgunkat nehezítettük meg, mert egyesével kell megtaláljuk az összes előfordulási helyét.

Javaslat: Kezeljünk mindent CSS file-ból. Szinte garantált, hogy máskor is szükség lesz arra, amiről most azt gondoljuk, hogy egyszer fordul csak elő.

3. NAGYBETŰS írásmód HTML-ben

Ízlés kérdése, hogy ki mennyire szereti a csupa nagybetűs írásmódot. Egyes vélemények szerint, ha SOKSZOR ÍRUNK DOLGOKAT CSUPA NAGYBETŰVEL, akkor az olyan, mintha folyamatosan “kiabálnánk” - írásban.

Mindenesetre reális helyzet, hogy címsorokat csupa nagybetűvel írjunk, pl. Ezt:

<h2>
    KEDVEZMÉNYEK, AJÁNLATOK
</h2>

A legtöbb esetben ez nem jó megoldás. Ehelyett érdemes a “text-transform” tulajdonságot választani:

.text-uppercase {
  text-transform: uppercase;
}

Miért volt nem jó megoldás az első opció?

A HTML és a CSS közötti felosztás a dokumentum szerkezetének és a megjelenítési rétegnek a szétválasztásáról szól. Az, hogy ez a cím nagybetűs, a megjelenítési réteghez tartozik, tehát ezt mindenképpen a CSS-ben kell megtennünk.

Természetesen vannak olyan esetek, amikor bizony ki kell írnunk CSUPA NAGYBETŰVEL a szöveget. Ilyen esetek lehetnek, amikor pl. valakitől idézünk, aki KIABÁL, és ezt szeretnénk érzékeltetni… :-)

***

Ha érdekel akár a frontend-, akár a backend fejlesztés, alábbi képzéseinket ajánljuk:

Junior frontend fejlesztő
Junior Java backend fejlesztő
Webfejlesztő
Webszerkesztés alapjai (Bevezetés a webfejlesztésbe)