Virgo Frontend Monthly

Issue 020

Sziasztok!

Az idei év utolsó számában összeszedtük nektek a novemberi és decemberi újdonságokat a frontend világából, emellett pedig egy kis visszatekintést szeretnénk adni az idei évre, hogy hogyan is áll a frontend 2017-ben.

Olvasnivaló

A BEM (Block Element Modifier) metodológiát valószínűleg már mindenki ismeri többé-kevésbé. Rengeteg szoftverfejlesztő cég építi fel eszerint a HTML és CSS struktúráit. Ha esetleg még nem találkoztál a BEM-mel, itt bővebb információt találhatsz róla. Ennek a módszertannak egy kicsit kicsavart, és atomic designnal kevert változata jelent meg nemrég Daniel Tonon jóvoltából, ami első olvasásra elég hasznosnak és használhatónak tűnik.

Nem új keletű dolog, (igaziból meglepően régi feature), de CSS-ben lehetőségünk van számlálót készíteni, bizonyos selectorokon belül inkrementálni a számláló értékét, majd ezt az értéket a tartalomban felhasználni. Minden böngésző támogatja (IE8+), évek óta jelen van, én őszintén szólva még nem használtam sehol, de most Laki Ádámtól kaphatunk három use-case-t, ahol hasznunkra válhat, ha ismerjük ezt a funkciót.

A nagy méretű képek betöltése mindig is problémát jelentett, főleg a lassú internetkapcsolattal rendelkező eszközökön. Felhasználóként rossz élményt nyújt másodpercekig egy fehér hátteret bámulni, amíg a böngésző letölti és kirendereli a képet. Ezzel a problémával a Facebook is szembesült a nagy cover fotóknál, és megoldást is találtak a problémára. Itt egy működő példán végigvezetve láthatjuk, hogyan is működik a dolog.

A GIF-ek egyre nagyobb népszerűségnek örvendenek az interneten. Vannak oldalak, amik arról szólnak, hogy feltöltött GIF-eket nézegethetünk és oszthatunk meg, egyre gyakoribb, hogy szöveg helyett mozgóképekkel reagálunk mások gondolataira. A GIF formátumú fájlok viszont nagyon rosszak performancia szempontból, túl nagy fájlméretűek a rövid GIF-ek is. A Safari új technology previewjában tudunk mp4 formátumú videót használni az image tageken, ezzel rengeteget adatmennyiséget spórolhatunk a GIF formátumhoz képest.

Az utóbbi hónapokban egyre többet lehetett olvasni a GraphQL nevű query nyelvről és a köré épülő egyre gazdagabb ökoszisztémáról. Ha még nem olvastál a témában, érdemes megnézni ezt a kis bevezetőt, illetve elolvasni ezt a REST és a GraphQL közti összehasonlítást.

Nemrég készült egy két részes bevezető az offline weboldalfejlesztés világába. A cikksorozat végigvezet minket a tervezéstől egészen az implementálásig, melynek végéhez érve elkészül egy offline is működni képes weboldal. Sajnos a Service Workerek támogatottsága még most, 2017 végén is elég alacsony, de a Safari technology preview-jába és a 17-es Edge-be is úgy néz ki, hogy már kapunk támogatást hozzájuk.

A HTML5-tel megjelenő form validációk sok terhet levesznek a fejlesztők válláról, azonban az egységes, natív hibaüzenetek rontják a weboldal egységességét és a felhasználói élményt. December elején egy Virgo-s projekten is előkerült ez a probléma, az itt leírtakhoz hasonló megoldást alkalmazva azonban egy egyszerű és jól működő validációt tudtunk szállítani.

Megjelent a Font Awesome 5! Átdolgozásra kerültek a régi ikonok, rengeteg új ikon érkezett, támogatja, hogy SVG-ként is használni lehessen az ikonokat a régi betűtípusos módszer helyett, és még sok más is érkezett az új verzióval, mindenképp érdemes átfutni az újdonságokat.

Ezt már mind vágod?

Senior frontendeseket keres a Virgo Systems. Jelentkezz!

A yarn megjelenése óta konkurenciát biztosít az npm-nek. Nemrég megjelent egy új, turbo névre hallgató NPM kliens, azt ígérve, hogy több, mint ötször gyorsabb, mint az npm és a yarn. További információ érhető el a kliensről ebben a kommentben, kíváncsian várjuk az észrevételeket, tapasztalatokat a Turboval kapcsolatban, illetve hogy van-e értelme és helye egy újabb csomagkezelőnek.

Nagyon kevés fejlesztő szeret debuggolni. A feladat kezdetekor csak egy probléma van előttünk, rosszabb esetben még ötletünk sincs, hogy mi okozhatja a helytelen működést, így nem tudunk becsülni egy ilyen jellegű feladatra, amikor elkezdjük a hiba okának felkutatását, nem látjuk a feladat végét. Nagyon jó tanácsokat olvashatunk ebben a cikkben az ilyen jellegű feladatok elvégzéséhez és minél egyszerűbb megoldásához.

Visszatekintés

Idén több, mint 28,000 fejlesztő vett részt a State of JavaScript kérdőív kitöltésében. Az eredményeket már kiértékelték a készítők, rengeteg kérdésre választ kaphatunk belőle, mindenképp érdemes átfutni.

Hasonló címmel született egy összefoglaló cikk a JavaScriptről 2017-ben. Hat szakértőt kérdeztek meg többek között arról, hogy milyen új dolgokat használtak 2017-ben, mik a legnagyobb problémák a JavaScripttel jelenleg, milyen funkciókat várnak a leginkább 2018-ban. A cikk itt elolvasható. És a jövő évhez érve: nemrég került fel a youtube-ra egy érdekes beszélgetés a JavaScript frameworkök jövőjéről. A 36 perc soknak tűnhet, de a videó végére érve nagyon kevésnek érződik.

És végezetül egy kis visszatekintés. Nem 2017-re, hanem 1995-re, amikor a JavaScript bemutatkozott. Korabeli véleményeket és nyilatkozatokat olvashatunk az akkor új technológiáról, az IT ipar akkori vezető személyeitől.

Végszó

Ezzel a végére értünk a decemberi számnak, szívesen fogadjuk a visszajelzéseiteket az oldal alján található komment szekcióban.

Találkozunk egy hónap múlva, sziasztok!