Ismét jelentkezünk havonta megjelenő frontend témájú hírlevelünkkel!

Egy oldal betöltési idejének felépítése a JavaScript elterjedésével és teljesen megszokottá válásával kicsit megváltozott. Ahhoz, hogy használhatóvá váljon az oldal, nem elég letölteni a szükséges forrásokat, azok nagy részét fordítani és futtatni is kell. Az ehhez szükséges idő készülékenként egészen eltérő lehet, de kis odafigyeléssel, és a betöltés működésének megértésével sokat csökkenthetünk a betöltés idején.

SmooshGate néven indult útjára még valamikor márciusban egy JavaScript proposalt érintő botrány. Az Array.prototype.flatten metódus inkompatibilisnek bizonyult a webbel egy legacynak számító library miatt, ezért a proposal szerzője viccesen megjegyezte, hogy flatten helyett smoosh lehetne a függvény neve. Ez eldöntött tényként száguldott végig a webfejlesztő világon, annak ellenére, hogy erről szó sem volt. A problémát azóta feloldották, kicsit ironikusan a flatten függvény átkeresztelésével flat-re (nem smooshra!). Erről, és a TC39 működéséről is bővebben írt a Google a fejlesztői fórumán.

A Microsoft Edge 17-es verziója már támogatja a Push API-t és a Service Workereket. Ennek örömére kaptunk egy tutorialt a Microsofttól, amiben szépen, lépésről lépésre leírják, hogy hogyan is valósítható meg egy egyszerű webes push notification. A példakód elérhető githubon is, akinek túl színes-szagos lenne a Microsoft példája, rengeteg más forrásból is szemezgethet hasonló ismertetőket a témában, tekintve, hogy a szükséges technológiák támogatásának növekedésével egyre népszerűbb a téma a blogok körében.

Teljesen megszokottá vált az internethasználók körében, hogy egy form kitöltésekor az Enter megnyomására a form elküldésre kerül. Ennek a gomb type attribútumához van köze. Sokan elfelejtik, akár framework fejlesztők is, hogy alapértelmezetten a button type-ja "submit", és nem "button", ami egy formon belül nem kívánt eredményekkel járhat. Ennek valószínűleg az lehet az oka, hogy régen gyakoribb volt a gombok submitra történő használata, mint a JavaScripttel felül definiált működés, és a sok már létező és működő weboldal miatt ez az alapértelmezés nem felüldefiniálható (ld. SmooshGate, fent), így a type default értéke egy ideig biztosan submit marad.

A régebbi böngészők támogatása mindig is fájdalmas munka volt, amit senki nem szeret elvégezni. Ahogy a kétezres évek elején az Internet Explorer 6-nak, jelenleg a Google Chrome-nak van hatalmas tábora a böngészők piacán, és ez Chome-only weboldalak létrejöttét kezdte el generálni. Az oldalak többsége persze fektet energiát a különböző böngészők támogatására. Ennek talán legismertebb módja a modernebb funkciók polyfillezése, de az alapvető funkcionalitás megőrzésére sokszor más módszerek is rendelkezésünkre állnak.

A Bootstrap 4-es verziója már flexbox alapú grid rendszert használ a régebbi, float-os megoldás helyett. A Sitepoint-on részletes információt kaphatunk egy-egy Bootstrap komponens működéséről a Bootstrap Tools rovat cikkei közt, így több, mint elegendő szinten megismerhető például az imént említett grid rendszer, vagy akár a Bootstrapben található form komponensek is.

A webfejlesztést a közvélemény kreatív munkának tartja, de ez nem volt mindig így. Egy időben ha landing page-et kellett fejleszteni, nagyjából kétféle struktúra jöhetett szóba. Ez ma már nem így van, az új eszközökkel rengeteg új lehetőség nyílt a designerek és a frontend fejlesztők előtt, hogy szabadjára engedhessék kreativitásukat. Az igazi kérdés a kommentek közt keresendő: Jójó, de működik Internet Explorerben is?

Senior frontendeseket keres a Virgo Systems. Jelentkezz!

A JavaScript teljes mértékben a webes világ részévé vált. Chris Ashton megpróbálta egy napig JavaScript nélkül használni az internetet, az oldalakat pedig működésük szerint értékelte is. Ez kicsit unfairnek tűnik, tekintve, hogy olyan oldalak is szerepelnek a listán, amik olyan funkcionalitást adnak a böngészőben, ami 15 éve elképzelhetetlen lett volna. Nem biztos, hogy elvárható ezektől az oldalaktól, hogy energiát fektessen a készítőjük a JavaScript nélküli működés támogatásába.

Az Edge 17-es verziójával nem csak Push támogatás érkezett, de elsőként kezdték el támogatni a Scrren Capture API-t. A Microsoft blogon olvashattok részletesen egy példaalkalmazásról, és a további tervekről is az API-val kapcsolatban.

Az új Edge verzióval a fejlesztői eszközök is frissültek. Érkeztek új funkciók, és jövőbeli tervek is, ezekről is részletesen olvashattok a Microsoft blogján. A mostani frissítéssel egészen nagy csomagot kaptunk a redmondi cégtől, reméljük sikerül megtartaniuk ezt az új irányt, és továbbra is rendszeres frissítések érkeznek majd a Visual Studio Code-hoz és a Mirosoft Edge-hez is.

Az ember általában érzi, hogy radio gombokat, vagy legördülő menüt érdemes-e egy opció beállításához a felhasználó elé rakni. Ha nem szeretnétek csupán a józan eszetekre hallgatni, hanem szabályokkal is alá szeretnétek támasztani a megérzéseiteket, részletesen is olvashattok a témáról. Vigyázat, UX-es tartalom.

A hónapban megjelent az npm 6.1-es verziója. A 6-os verzióval érkező npm audit nagy segítséget nyújt a dependenciákból adódó sebezhetőségek felderítésére, és azóta mintha a package készítők is jobban odafigyelnének a sebezhetőségek minimalizálására. A 6.1-es verzióval az npm audit egy --fix kapcsolóval bővül, így már javaslatokat is kaphatunk a felderített sebezhetőségeink kijavítására. Ezeket persze átnézni és főleg kijavítani elég nagy munka lehet, főleg egy régebbi, sok dependenciával rendelkező projekten, de sok esetben egész biztosan megéri kijavítani ezeket a hibákat, egy új projekten, folyamatában odafigyelni ezekre pedig lényegesen könnyebb feladatnak tűnik.

A táblázatok megjelenítése reszponzív módon hordoz egy kis kihívást magában, főleg, ha a duplikált tartalmakat is minimalizálni szeretnénk a DOM-ban. Biztos mindenki játszadozott már a Bootstrap-es reszponzív táblázattal, talán ki is egészítette, vagy újra is írta azt, ha a görgethető táblázatnál többre volt szüksége. Ez általában tartalomduplikációval jár, de egy kis hack-kel ez is elkerülhető.

Ezzel a végére értünk a májusi 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!