Kisebb kihagyás után jelentkezünk újra havonta megjelenő hírlevelünkkel. Az elmúlt öt hónapban rengeteg dolog történt a frontend világában, ezeket meg sem próbáljuk belesűríteni egy hírlevélbe (a legtöbb újítás azóta úgyis outdated lett), inkább a frissebb változásokra koncentrálunk. Kezdjük is el!

Mindannyian találkoztunk már inkonzisztens dizájnnal. Aki azt mondja, hogy nem, az nagyon szerencsés, de valószínűbb, hogy hazudik. Rettentően frusztráló felvenni a 28-adik szürke színt, hát még nevet találni neki. A 18F digitális ügynökséget azzal bízta meg az USA kormánya, hogy egységesítsék a közel 30.000 szövetségi weboldal kinézetét, ami elég nagy feladatnak tűnik, tekintve, hogy nagyon kevés közös van a jelenlegi oldalakban. Az ügynökség elég részletesen leírja, hogy milyen problémákkal találkoztak a projekt során, milyen megoldásokat sikerült találni ezekre a problémákra, és milyen tanulságokat tudtak levonni ebből az óriási feladatból.

A Super Mario Bros játék idősebb, mint én, mégis gyerekkorom meghatározó élménye volt. Többek közt ezért is örültem meg, amikor rátaláltam erre a lejátszási listára. A videók részletesen végigvezetnek a játék implementálásán JavaScript nyelven, alapvető eszközök használatával. A videósorozat még nem teljes, de majdnem akkora élmény nézni, ahogy készül az alkalmazás, mintha elkezdenénk csinálni.

Nem mehet ki hírlevél vue.js-es hír nélkül. Ebben a számban az animációkra koncentrálunk. A cikk inkább tutorial jellegű, életszerű példákon keresztül mutatja meg, hogy milyen eszközöket ad a vue.js az animációkhoz és az áttünésekhez. Érdemes lehet előtte felfrissíteni a CSS3 transition-öket és animációkat.

Frontend fejlesztőként rengeteg mindenre kell figyelnünk, hogy az alkalmazásunk performanciája megfelelő legyen minden kliensnél. Azt hiszem, abban a legtöbb fejlesztő egyetért, hogy az npm egy nagyon jó dolog, de ha nem figyelünk, és ész nélkül használunk packageket mindenre, abból komoly performancia problémáink lehetnek (és biztonsági problémáink is, de ezt most hagyjuk). A használt packagek mérete mind hozzáadódik az alkalmazásunk méretéhez, így nagyon gyorsan nőhet nagyon nagyra a kliens által feldolgozandó fájlok mérete. Erről részletesebben mesél Martian Chronicles ebben a cikkben, és megoldást is kínál az alkalmazás méretének kordában tartásához.

És ha már performancia: nemrég ráakadtam egy új lazy load libraryre. Nem az első, és valószínűleg nem is az utolsó ilyen library, viszont különleges, abból a szempontból, hogy nem a scroll eseményre figyel, hanem az Intersection Observer API-t használja, így jelentősen kisebb számításigényű, mint a társai. Egy próbát biztosan megér, írjátok le disqussban a tapasztalataitokat!

Na még egy kis performancia. A Paint Timing API-nak köszönhetően JavaScriptből elérhetővé váltak az oldal rendereléséhez kötődő statisztikák, ezekkel az adatokkal könnyen felderíthetjük, hogy miért jelenik meg lassan az oldal, mivel tölt túl sok időt a böngésző. Főleg debuggoláshoz és hibafelderítéshez lehet hasznos, a cikkben felsorolt pár egyéb interfésszel együtt.

Igérem, ez lesz az utolsó performanciával foglalkozó cikkünk (a következő számig). A fontok betöltése kritikus szokott lenni a weboldal betöltésének sebességénél. Villog a szöveg, lassan tölt be az oldal, későn jelennek meg a szövegek, ez mind tapasztalható probléma, ha egyedi betűtípust használunk az oldalon. Az e-bay a saját technológiai blogján írta le, hogy milyen problémákkal szembesült az egyedi betűtípusok használatával kapcsolatban, és hogy milyen megoldást dolgozott ki rájuk.

Korábban azt írtam, hogy nem mehet ki hírlevél vue.js nélkül. Az előző számokat visszaolvasva hasonló benyomásom volt a Visual Studio Code editorról is. Mivel ez az editor nekem személyes kedvencem, annak ellenére, hogy Microsoft termék, ebben a számban is helyet kap egy kapcsolódó bejegyzés. Megjelent ugyanis az 1.17-es verziója. Sok újdonságot hiába vártok, a leglátványosabb módosítás talán az, hogy a Sublime után ők is ikont cseréltek, illetve hogy a macOS támogatás bővült az editorban.

Ha már a Microsoftnál tartunk: talán nagyobb jelentőségű, hogy a redmondi vállalat bejelentette , hogy a Microsoft Edgeből Android és iOS applikáció is készül. A Play Store-ból már tölthető is az előzetes verzió. Az iOS-es verzió természetesen a WebKit engine-t fogja használni, az Androidos verzió pedig Chromium alapú lesz. Reméljük, hogy ezek az újdonságok egy jól használható mobil böngészőt fognak eredményezni, és nem az "Android 5.0.2-n nem működik Edge-ben", és hasonló mondatok fognak szaporodni.

Az Apple szeptemberben bemutatta a legújabb mobilos operációs rendszerét, az iOS 11-et. Ahogy megszokhattuk, ezzel együtt frissült a mobilos Safari böngésző is. Ahogy az iOS11, a Safari frissítése sem hozott sok újdonságot, de érdemes lehet átolvasni.

Bár azt ígértem az elején, hogy az újdonságokra fogunk koncentrálni, a Node 8-as verziójának megjelenése mellett azért nem mehetünk el szó nélkül, főleg úgy, hogy nem sokára LTS verzió lesz belőle. Számomra az egyik legérdekesebb újdonság a NodeJS 8-ban a promisify volt, és bár a gyártók azt írják, hogy az LTS státuszig érdemes várni vele, egy-egy otthoni projekten hasznos lehet kipróbálni.

Nem kifejezetten webfejlesztőknek szól, de nagyon hasznos lehet ez a tipográfiáról szóló cikk. Gyorsan végig lehet futni rajta, mégis sok hasznos információt megtudhatunk belőle a megfelelő betűméretekről, sorközökről, igazításokról.

Új betűtípusvariációk használata egy létező projekten általában fájdalommal jár. Rossz érzés három sornyi tartalom miatt több tíz kilobyte-tal növelni a letöltendő adatok mennyiségét, úgyhogy inkább a designerhez futunk, és megpróbáljuk közösen kitalálni, hogy hogyan lehetne a már meglévő betűtípusokkal megoldani a felmerült problémát. A variable font (egyelőre nem sikerült jó magyar elnevezést találni rá, ha ti tudtok, írjátok meg disqusson) nem teljesen újkeletű dolog, már tavaly ilyenkor cikkeztek róla ilyen-olyan blogok. A koncepció megértését nagyban segíti ez az Adobe szakembereivel készült interjú, a használatáról pedig itt olvashattok részletesebben.

A CSS egy hibás koncepció. A CSS nem egy hibás koncepció. A CSS nem programozási nyelv. A CSS programozási nyelv. Ahány blogon olvasunk a CSS-ről, mint nyelvről, annyi féle álláspontot találunk róla. Azt már bebizonyították, hogy a CSS nyelv Turing teljes (tényleg), a webfejlesztő világ álláspontja azonban meglehetősen különbözik arról, hogy a CSS jó-e, vagy sem, hogy hogyan kell jól használni, kell-e használni egyáltalán. Ezeket a vitákat én mindig vallásháborúként értelmeztem, hasonlóan gondolok a separated CSS vs. CSS-in-JS vitára is. Erről a harcról olvashatunk egy nagyon jó cikket, bár igazi feloldás nem érkezik a problémára.

Ezzel a végére értünk az októberi számnak, reményeink szerint a következő számra nem kell öt hónapot várnotok. Nyugodtan használjátok az oldal alján található kommentelési lehetőséget, minden visszajelzést szívesen fogadunk!

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