Virgo Frontend Monthly

Issue 006

Helló ismét, ebben a hónapban is sok érdekes és hasznos anyagot gyűjtöttünk, vágjunk is bele!

Olvasnivaló

Egy év jQuery nélkül. A blogpost címe sok magyarázatra nem szolgál, a benne található információkat mindenkinek magának kell megemésztenie, mérlegelnie. Persze azt már most leszögezhetjük, hogy nem minden helyzetben kell búcsút inteni kedvenc JavaScript libarynknek.

CSS-t írni nem túl bonyolult dolog, de jót, könnyen karbantarthatót már sokkal nehezebb. 8 tipp azért, hogy boldogabban nézzünk rá munkánkra akár hónapokkal később is.

Itt egy alapos elemzés az Imgur oldal új mobilverziójának frontend oldali teljesítményről. A háttérről bevezetőnek annyit, hogy Backbone-ról váltottak React-re.

Mindannyiunknak volt már feladata az, hogy különböző logókat kellett begyűjteni. Ez nem mindig hálás feladat, sok oldal nem készít branding csomagot, vagy ha igen, nem biztos hogy azt a főoldalon reklámozza. Lehet ezt elegánsan is csinálni úgy, hogy a látogatók szemét ne verjük ki, de a frontendesek életet megkönnyítsük? Az Invasion alkalmazás fejlesztőinek sikerült.

N dejs

Nem mehetünk el szó nélkül a hónap Node eseménye mellett. Ez a híres left-padstory. Röviden annyi történt, hogy egy fejlesztőt megkeresett a Kik nevű cég azzal, hogy nevezze át opensource kik nevű csomagját. A levélváltás egyik oldalról sem úgy történt ahogyan kellett volna, így a vége az lett, hogy a fejlesztő letörölte (unpublisholta) az npm oldaláról az összes saját készítésű csomagját. Ezek között volt a left-pad nevű is, amire mint kiderült a fél node-os világ dependált (még ha nem is tudtak róla). A buildek törtek, az emberek pánikoltak, a fél internet tönkremenet, legalábbis a bulvároldalak szerint. Az npm végül reagált, és visszállította a csomagot, majd új unpublish szabályokat vezetett be. Annyi hatása biztos volt a dolognak, hogy ezentúl talán jobban utána néznek a fejlesztők, miket húznak be.

A phpBB fórum motort sokan ismerik, ezt a nevet próbálja talán most meglovagolni a NodeBB, egy NodeJs-ben írt fórum motor. Külsőre nem tűnik rossznak, a fejlesztése is halad, aki szívesen próbál ki új dolgokat, tegyen egy próbát vele.

Ezt már mind vágod?

Senior frontendeseket keres a Virgo Systems. Jelentkezz!

Mélyvíz

Te még nem linteled a CSS-edet? Pedig kéne. Ez az a folyamat, amikor a forráskódunkat külső szoftver segítségével elemezzük, hogy a duplikációkat, szintaxis és stílus hibákat minél előbb javítsuk. Csapatban dolgozva ez különösen fontos, közös linter beállítással egységesebb lehet a kódunk. A Stylint egy JavaScriptben írt CSS/SASS linter, ami ígérete szerint gyorsabb társainál és hasonlóan jól konfigurálható.

A CSS körül sok dolog történt, szinte nap mint nap születnek új toolok, megoldások. Ebben a postban tömören, pár sorban össze van szedve a legfontosabb pár betűs rövidítés, amit egy frontend fejlesztőnek illik tudnia a témában.

Ingyenes lett a CSS-Tricks oldán a Lodge szekció, ahol videó tutoriálokon keresztül mutatnak be egy-egy témát. A négy anyag bármelyike garantált hétvégi kikapcsolódás lehet, csak győzzük kávéval és harapnivalóval gép előtt.

Kétféle ember van: aki gyűlöli a popovert, és aki nem. Ez pont az a funkció, amit lehet nagyon idegesítően és nagyon jól is használni. A Balloon egy remek kis tool a felbukkanó szövegek megjelenítésére, ráadásul pure CSS, azaz JavaScript kód nélkül működik.

Persze van olyan helyzet az életben, amikor a JavaScript nem nélkülözhető, ilyen például, amikor WYSIWYG editort kell beépíteni az oldalunkba. Természetesen választási lehetőségünk itt is van, már egyre több kisebb-nagyobb szoftver van erre a feladatra. Ha CKEditortól rémálmaink vannak, pillantsunk rá a MediumEditorra. Teljesen más megközelítés, ami a Medium.com oldalról lehet ismerős. Egy kicsi, egyszerű oldalra pont megfelelő lehet.

A target="_blank" nagyon régóta velünk van, és mondhati eszköztárunk alap, és megkerülhetetlen része. Ezért fájó az a nemrég talált hiba, ami az összes böngészőt érinti. Arról van szó, hogy az ilyen módon megnyitott oldalak vissza tudnak nyúlni abba az oldalba, ami nyitotta őket. A hiba az összes böngészőkészítőnek jelentve lett, tippelni lehet csak, hogy melyikben van már befoltozva.

Nem tudom, hogy van-e manapság ennél alaposabban összeállított SVG animációs cikk. Tényleg minden benne van amit tudni lehet róla.

A frontend menedzselése már kisebb projektek esetén is komoly odafigyelést igényel. Egy projekt nagyságának és komplexitásának növekedésével ezek a feladatok is nőnek. Ha mindezt még microservice architektúra mögé tesszük, kész rémálom is lehet az egész. Erről olvashatunk az Allegro blogján. Nem mondom hogy könnyű olvasmány, és hogy mindenki számára hordoz információt, de aki hasonló csónakban evez, mint ők, azok számára jó lehet.

CSS-t animálni szép és jó dolog. Viszont sokan nem tudják, hogy ez még nem jelenti automatikusan azt, hogy ezzel smooth, 60 fpssel futó animációt készítünk. Vannak olyan CSS tulajdonságok amelyek megváltoztatásával úgynevezett repaintet hajt végre a browser, ami erőforrásigényes és a felhasználói élmény csorbulásához is vezethet. A repaintless library használatával el tudjuk kerülni ezeket a hibákat.

A lazy loading a képeknél manapság már alap dolog, de tudjuk ezt még jobban is csinálni. Nekem először a Google képkeresőnél tűnt fel az a technológia, hogy a kép domináns színét kiszedik, és a box hátterének beállítják. Ezáltal lágyabb, finomabb lesz a töltődés. Ehhez a megoldáshoz azonban nem kell óriási szerverfarm, NodeJS és PHP segítségével is összedobható, akár házilag is. Akit érdekel a téma, ebben a cikkben merülhet el.

San Franciscóban nem csak az idő jó, hanem a programok is. A Fluent Conf-on legutóbb például a következő generációs CSS layoutokról volt egy jó előadás, ami összefoglalja a CSS-ben rejlő lehetőségeket.

Egyéb finomságok, röviden