Virgo Frontend Monthly

Issue 016

Sziasztok!

Először is két változásról szeretnénk hírt adni nektek. Egyrészt meguntuk a hírlevél eddigi tagoltságát, így mostantól inkább szerzők szerint bontva (kettő is van :)), kicsit személyesebb szövegezésben olvashattok arról, hogy ki milyen újdonságokat talált az elmúlt ~30 napban, másrészt pedig mivel eddig 100/97-es performanciát hozott a landing oldalunk (köszi, Analytics cache header), ezért gondoltuk lassítunk egy kicsit, és beágyazzuk a Disqust. Kicsit ciki lesz ha egy év után sem lesz egyetlen komment sem, úgyhogy gyertek, beszélgessük meg az élet nagy dolgait! :)

Tamás

A hónap dobása nálam egyértelműen az, hogy a CSS Grid Layout támogatás végre beszivárgott az első stabil böngészőbe. Kis meglepetésre ez nem a Chrome (oda 1 verzió múlva jön, a Canary már most támogatja), hanem a Firefox 52. A srácok nem érték be a display támogatással, a devtoolba egyelőre a piacon egyedülálló Grid debug lehetőségeket is raktak. Ha nem tudnád miért jó a CSS Grids, itt egy elég látványos tutorial. Polyfillekből egyelőre nem találtam önmaguk szerint is vállalhatót, ha ismertek ilyet, nyomjátok a Disqusba a linket! ;)

A Chrome changelogjáról egyébként van videós changelog is, és már most készüljetek arra, hogy a következő update után hiába fogjátok keresni a Timeline és Profiles tabot - átnevezték őket Performance-re és Memory-ra. További devtool változások a link után. Pont múlt héten keresgettem egyébként egy kicsit up2datebb Chrome timeline profilozó tutorialt, hiszen a klasszik Paul Irish-es videók már legalább 3 évesek, így a mutogatott devtool már köszönőviszonyban sincs a jelenlegivel. Ezt találtam, használjátok egészséggel. Nyomokban még szórakoztató is, tényleg!

Ja igen, és van már Web Bluetooth APInk is Chrome alatt, íme egy case study egy fitnessz eszközzel való kapcsolódásról.

Ahány design, annyiféleképpen megálmodott datepicker. Érdemes-e viszont felülcsapni a böngésző natív datepickerjét? Ha többet tudunk költeni a UX-ra, mint ők, akkor valószínűleg igen. Viszont ahányféle platform, annyiféle natív datepicker, szóval a költségeket szorozzul fel nyugodtan ennyivel. Mobil/Desktop/Tablet, touch/egér/billentyűzet-barát, könnyen nemzetköziesíthető (n16ő?) és témázható ingyenlibről tud valaki? Na ugye... :)

Valószínűleg mindenkin keresztül próbált már egy régi kedves ismerős "csak netezésre" alkalmas géphez jutni - nekik dedikálom az alábbi oldalt. GPU legyen a talpán, amelyik nem kapcsol felszálló módba a megjelenítéskor. Viszont ha már WebGL, íme egy tutorial by fps az első lépésekhez, ha böngészős játékot akarnánk fejleszteni. Találtam még egy szexiséges onfocus effekteket összegyűjtő oldalt, és egyéb animációs practical dolgokat ui-pimpeléshez. Csapjuk be a user időérzékelését együtt!

Ha már videókártya-szaggatás, egy kis VR fun: aki gondolkozott már rajta, hogy mekkora felbontásban kell egy 360 fokos videót streamelni ahhoz, hogy az aktív viewport fullhd környékén legyen (Oculus-fanoknak 1080×1200x2 szem), az valszeg nem csodálkozik azon, hogy egy gamer pc is izzad a decode alatt. Amit ténylegesen nézünk, az ugyanis csak egy töredéke annak, ami a gépünkre érkezik, de mivel a user akármikor hátranézhet, valószínűleg nem úszhatjuk meg a teljes sphere streamelését (a fejforgáskor jelentkező minimális latency is már motion sicknesshez vezethet). A Facebooknál ezt egy kicsit körbejárták (éééérted, körbejárták), és jelenleg azt tesztelgetik, hogy a videó melyik részét küldhetik alacsonyabb felbontással / homályosan. Egy kicsit a lazyloados képek kisméretű blur-özött image placeholdereire hajaz.

Ezt már mind vágod?

Senior frontendeseket keres a Virgo Systems. Jelentkezz!

Szinte minden libet azzal reklámoznak, hogy fájlméretet alapján mennyire kompaktak. Van viszont a dolognak egy bootolási része is, amiről sokan elfeledkeznek, pedig - főleg régebbi mobiloknál - legalább ennyire fontos. Gondoljunk bele: ha 1 mp-t nyerünk fájlméret alapján egy alternatíva választásakor, de 3 mp-vel meghosszabbodik a load utáni ui-fagyasztó inicializálási idő, túl sokra nem mentünk vele. Ezt a problémát járja végig az alábbi cikk: Javascript Start-up Performance.

Alap pszichológia, hogy szinte minden performanciával kapcsolatos cikk végén elmarad a katarzis, hiszen többnyire egyértelmű és logikus dolgokról esik szó. Miért csináljuk mégis többnyire homlokegyenest? Ki tudja... A következő cikk a css-be "be-base-64-elt" fontok vs. klasszikus url-ezést járja körbe. Több változó van az egyenletben, mint amire az ember zsigerből gondolna.

Sok embert lesokkolhatott, amikor tavaly, úgy 4-5 évvel a megjelenése után a Grunt végre elérte az 1.0-ás verziót. Ha valakinél eddig kimaradt, valszeg már nem éri meg túlságosan elmélyedni benne, hiszen egyre több plugin keresi bőszen az új maintanerét, azaz kezd kifutni a technológia. De hogy milyen alternatívak vannak és voltak a Grunton túl? Íme egy kis összefoglaló a frontend tooling evolúcióról.

Végül egy tipográfia mail-kurzust ajánlanék figyelmetekbe, hisz alap szinten frontendesként is ismernünk kellene, mit is kell CSS-be öntenünk. BetterWebType for the win! Dizájnereknek és programozóknek külön szövegezéssel.

Frissítés: Megjött a Chrome update, tehát két stabil böngészőben már van Grids, yeaah!

Dávid

Tudom, tudom, a Promise-t már annyiszor emlegettük, hogy lassan a cégnél a backend fejlesztők is álmukból felkeltve tudják, miről van szó. De ezt a posztot muszáj megmutatnom, annyira imádnivaló. Burgereken keresztül, rendkívül szemléletesen és viccesen magyarázza el. Ha csak egy Promise cikket akarsz elolvasni...

A másik kedvenc témám a Vue.js. Engem megfertőzött, de gondolom, nem vagyok vele egyedül. Ajánlottunk már több bevezető cikket a témában, de a CSS-Tricks friss posztja szerintem kihagyhatatlan annak, aki még csak érdeklődik a téma iránt. Szintén Vue.js, és szintén bevezető poszt, csak kicsit rövidebb, és célirányosabb: ha van 2 percünk, nézzük meg, hogyan is működik egy egyszerű Event Bus Vue-ban.

Ígérem, ez az utolsó Vue.js linkem a hónapban. A A GitLab és a Vue (igen, ők azok, akiknek sikerült törölni az éles adatbázisukat, és kb. az összes backup megoldásuk csődöt mondott, majd élő streamban közvetítették a helyreállítást) továbbra is elkötelezett a Vue mellett, és nagy - nagy tervük, hogy fokozatosan lecserélnek mindent egy egészségesebb, tisztább kódra.

Óriási hiányosságot pótolt a Google az AMP oldalak terén. Korábban ugyanis ha például egy Google találati oldalról egy AMP-os linket nyitottunk meg, nem tudtunk rámenni a cikk "eredeti" verziójára. Az AMP persze tényleg gyors, rommá cachelt és optimalizált, de néha az ember beáldozná a sebességet cserébe az eredeti oldalért. A hajtépésnek annyi, végre elérhetjük az eredeti URL-t is az AMP dokumentumból.

Webpack leírásból sem elég soha. A most ajánlott posztban egyszerűen, viszont nagyon őszintén beszélnek a Webpackről, és arról hogy nem vagy vele egyedül, ha még hónapok után is azt gondolod, hogy ezt a hülyeséget kár erőltetni. De ha kitartó vagy, hidd el ki fog sütni a nap a webpack config fájl sorai között.

Smooth, Vanilla, No dependencies. Ezekre a szavakra gerjed mindenki, ha arról van szó, hogy be kell húzni valamit. Az egyszerű jQuery pluginek kora szerintem már lejárt, ha fontos a minőség, akkor majdnem annyi energiát kell befektetni a megfelelő plugin megtalálásába, mintha mi írnánk meg. A Zenscroll valami ilyesmi, amit bátrabban használok, ha kell. Ráadásul hazánk fia írta.

A Dwitter egyszerre beteg, rémisztő, csodálatos és imádnivaló. Arról van szó, hogy 140 karakterben ki mit tud alkotni, pár "beépített" JavaScript függvénnyel. Majdnem mint a Vim Golf.

Mi történik, amikor az unatkozó, ámde élelmes fejlesztő és a deep learning találkoznak? Hát például készül egy olyan alkalmazás, ami felismeri, ha a főnököd közelít, és átváltja a monitorod képét. A BossSensor zseniális, a főnök helyében én biztos megjutalmaznám az alkalmazottat.

Ha a StackOverflow csinál valamit, arra mindenki odafigyel. Most például az oldal fejlécét designolták át, és szerencsénkre kellő részletességgel le is írták, hogy pontosan mit, miért csináltak. Kávé mellé tökéletes olvasmány.

Lezajlott a hónapban a Laracon Online, ami egy teljes mértékben online konferencia volt. Mind az előadók, mind pedig a hallgatóság a világháló segítségével tartotta a kapcsolatot. Nekem nagyon szimpatikus volt az egész, jó előadások, olcsó ár, később visszanézhető felvételek és diák. Persze nem azt mondom, hogy ne járjunk konferenciákra, fontos az ilyen jellegű kapcsolat építés, de nagyon jó, ha ilyenre is van lehetőség.

Végszó

Ezzel a végére értünk a márciusi szösszenetünknek. Használjátok az új kommentelési lehetőséget, írjátok meg hogy mi tetszik vagy mi nem, túl hosszúak vagyunk-e, esetleg milyen témakör érdektelen - rátok bízzuk!

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