Virgo Frontend Monthly

Issue 018

Sziasztok!

Valószínűleg nincs fejlesztő, aki a projektjein ne használna valamilyen 3rd party üzenetküldő alkalmazást - Skype, Slack, HipChat, Hangouts, oldschoolabb arcok esetén IRC. A múlt havi HipChat megtörésnél ismét végigpörgeti magában emberfia, hogy milyen jelszavakat, eléréseket, bizalmas információkat, képeket küldözgetett át az alkalmazáson keresztül, és ismét megfogadja, hogy óvatosabb lesz a jövőben. Ami jó esetben maximum egy pár hét. Pedig a védekezés külső szervernél is egyszerű: nem küldjük át a teljes jelszót ugyanazon a csatornán, esetleg egy kicsit hozzáfűzünk, elveszünk belőle, számokat eggyel nagyobbra cseréljük, stb. Megszokás kérdése az egész, és ezek a "trükkök" körülbelül semmilyen erőfeszítést nem igényelnek.

Lássuk, mi történt még április-május környékén!

Tamás

Mozilláéknál változott egy kicsit a Firefox verziók kigörgetésének módja - megszűntették az Aurora channelt, ami eddig a Developer Version alapját képezte. Pánikra semmi ok, egy kiadással szegényebbek lettünk ugyan, de ezzel együtt gyorsult a release cycle. A stabil kiadásba pedig bekerült a Deves dark skin, CSS Mask támogatás, és egyéb más dolgok.

A Chrome háza táján is történtek izgalmas fejlesztések, a Firefoxszal együtt már ketten támogatják a clearfix hack natív kiváltását nyújtó flow-root display értéket, valamint a natív headless támogatás is elkészült, az automata teszt miatt kényszerből X-et futtató szerverek, és a CPU-használat után fizető gazdáik valószínűleg nagy örömére.

Most, hogy az ES6+ szabványosításával annyi új API-t kapunk, hasznos lehet tudni, hogy a régebbi böngészőmotorok mégis milyen performanciával futtatják ezek polyfilljeit. Hogy milyenekkel? Hát ilyenekkel!

Nagy számításigényű feladatoknál jó ötlet lehet a WebAssembly használata, a következő cikk ebbe a technológiába nyújt bevezetést. És ha már prociizzasztás, naná, hogy VR világokat már akár a React egy friss forkjával, a React VR-rel is leírhatunk!

Aki járt már úgy, hogy a böngészők renderje nem volt elég pixelpontos, és inkább canvasos ui-ban kezdett el gondolkozni, az első formnál biztos lepattant inkább a témáról. Hisz egy mezei input kezelésénél is már felfoghatatlanul sok dologba futna bele az ember - eventek, input eszközök, vágólap kezelése, és tengernyi egyéb probléma. A dom2texture egy tetszőleges html fragmentet canvason megjelenítő kísérlet, ami talán jól jöhet ilyen esetekben.

Ha egy-egy random fejlesztői smalltalk nálatok is túl sokszor köt ki a szokásos natív app vs webapp vonalon, íme egy újabb tool a fegyvertárba: egy Google-közeli PWA galéria.

Ezt már mind vágod?

Senior frontendeseket keres a Virgo Systems. Jelentkezz!

Amennyire várja mindenki az ES6 modulok megjelenését a böngészőkben (végre nincs több concat!), annyira lassan halad az implementálás, és ami elkészül, az sem túl crossbrowser. Jake Archibald időt és energiát nem kímélve szedte ízekre a különbségeket. És ha az ES6-nak ez az utolsó téglája végre bekerül a natív toolsetbe, lássuk mi következik utána: ízelítő az es2017 új lehetőségeiből.

A webpack kiadott egy saját CLI interfészt, amellyel a sokat használt dolgok ugorhatóak meg viszonylag könnyen, ilyen pl. a webpack 1-ről 2-re való migrálása a config fájlunknak.

És végül, de nem utolsósorban: ingyenes lett a Trace opensource projektek számára.

Dávid

Legyünk túl a szokásos havi Vue körökön. Megjelent a Vue 2.3.0, aka JoJo's Bizarre Adventure. Ami fontos és leginkább hasznos nekünk, az a vadi új SSR doksi, illetve a frissített Hacker News demo alkalmazás.

Örökzöld téma, hogyan rendezzük a CSS tulajdonságokat. Ahány ház, annyi szokás, de Criss 'CSS Tricks' Coyier azért összeszedte a legtöbb, említésre méltó variációt. A kedves verziómat viszont még is egy hozzászólásban találtam meg: Total chaos.

Éppen a szokásos havi szívjunk SVG-vel eseményemet tartottam, amikor rábukkantam a Boxy SVG-re, ami egy szuper vektoros grafikus szerkesztő program. Aboszulút multiplatform, hiszen a web szülte, és alapvetően az is az otthona. De aki szeretné, tudja futtatni kvázi asztali alkalmazásként is. Ha nincs kéznél Illustrator, Sketch vagy társai, esetleg egyszerűen nincs is szükségünk ekkora mammut szoftverekre, akkor mindenképpen jó társunk lehet a Boxy. Jah, és természetesen ingyenes.

Imádom azokat a sztorikat, amikor valakinek szüksége van egy eszközre és fogja magát, nekiáll, megcsinálja. A közönség pedig boldog, tapsol. Hát a Sizzy is így készült. A Sizzy tulajdonképpen megspórolja nekünk a fájdalmas huzogatást, amikor a készülő weboldalunkat több felbontásban tesztelni akarjuk. Persze nem helyettesíti a cross-browser-device éles teszteket, de sokat segíthet a hétköznapokban.

Nem gondoltam volna, hogy valaha lelkesedni fogok egy táblázatos oldalért, de a SpreedSharet imádom. A lényeg, hogy ide összeszedték az internet bugyrából az legjobb, közösségi alapokon szerkesztett táblazatokat. Nem tudod hirtelen mire lenne szükséged, vagy egyáltalán bármikor kellene neked ilyen? Garantálom, hogy 2 perc alatt talász rajta hasznos dolgot, és elkap az "úristen eddig hogy tudtam enélkül élni" érzés.

A Laravelt szerintem sokan szeretik, köztük én is, sajnos már-már túlságosan. Így szinte mindent el lehet nekem vele adni. Még egy Ember.js könyvet is. De viccen kívül, az Ember For Artisans egy jó, és ingyenes ebook, az Ember frameworkről, nem csak Laraveles lelkeknek.

Úgy tűnik nagyobb tempóra kapcsol az Edge. Eddig a Microsoft új böngészője a Windows 10 alverzióval együtt frissült, hamarosan azonban elválhatnak útjaik, és az Edge saját, és remélhetőleg gyakoribb frissítési csatornát kap. Reménykedhetünk tehát, hogy ahogy a Firefox és a Chrome, úgy az Edge esetén is felpörögnek a fejlesztések. (Én titkokban abban is reménykedek, hogy egyszer az iOS-ből is kiveszik a Safarit, és ő is gyakoribb frissítéseket kap.)

A flexbox remek technológia, de sajnos nem olyan egyszerű a használata és megtanulása, mint a float: left. Tanulni, és olvasgatni viszont nem mindneki szeret, éppen ezért kellenek az olyan innavatív megoldások, mint a flexboxzombies.com, ahol amolyan Walking Dead módban tanulhatjuk meg a flexbox használatát. Ingyen, bérmentve, játék közben okosodhatunk. Imádom!

Kétféle ember van. Van aki szereti a framework összehasonlításokat, és van aki nem. Én az előbbi vagyok, rácsapok minden hasonló, akár clickbait című postra. Az Ionic 2 vs ReactNative vs NativScript című cikk is ezért került ide be. Annak aki ismeri őket már alaposan nem bizts, hogy érdekes az írás, de aki csak ismerkedik velük, azoknak jó lehet. Azt persze már megtanultam, hogy a cikkben szereplő "oh csak npm install -g" tipusú kijelentéseket helyén kell kezelni, és elsőre úgyse fog minden stimmelni :)

Amikor a Sakura-ról olvastam először a Redditen, a fejemhez kaptam, és kb azt mondtam: bakker, miért nem nekem jutott ez eszembe. A Sakura ugyanis egy extrém minimál css framework. A lényeg, hogy zero class elgondolású, azaz kifejezetten csak a html tagekre van benne formázás. Azokra az esetekre jöhet jól, amikor nem számít a szépség, vagy kinézet, nem akarunk BEM-ezni vagy OCSS-el szenvedni, csak gyorsan összerakni valamit, ami ráadásul nem is néz ki rosszul. A maga nemében szerintem zseniális.

A Samsung az új zászlóshajójával, a Galaxy S8 -al együtt mutatkozott be DeX, vagyis a Desktop Experience mód. Ez lényegében annyit tud, hogy van egy eszköz, amibe a telefont belehelyezve kvázi asztali számítógépként tudjuk használni a mobilunkat. Kapunk USB egér és billentyűzet lehetőséget, HDMI kimentet, és egy teljesen vállalható "asztali" megjelenést. Ez megoldás szinte ordít a jól megtervezett, progresszív webalkalmazásokért. Az átméretezhető, reszponzív webappokat egyszerűen tudjuk használni, szinte mintha asztali alkalmazásokat futtatnánk egy PC-ről. Miközben ezek weboldalak, egy telefonon, ami a zsebünkben is elfér. Ha ez nem a jövő, akkor semmi.

Az Electron appokról két dolog jut eszembe mindig. Milyen szuper, hogy mi, weboldal fejlesztők is tudunk asztali appokat fejleszteni, és hogy milyen kár, hogy egy sima egyszerű kis kód is 100 megabyte-ot szakít ki a háttértárból. Ez a dolog nem csak az én tarkómat fúrta, hiszen egy Pauli Olavi Ojala nevű fejlesztő megalkotta az Electrino-t, ami 99 százalékkal kisebb kódot eredményez, mint az Electron. Hogyan? Hát úgy, hogy fogta, és kidobta az Electronba gyógyított böngészőt, mivel mind Mac OS, mind Windows alatt van rendes beépített browser, ami képes futtatni az alkalmazásunkat. A munka persze még nincs kész, és nem is több eddig egy Hello Word demonál, de ha minden igaz fokozatosan megpróbálják lefedni az Electron főbb API-jait, azért, hogy kisebb alkalmazásokat be lehessen csomagolni Electrinoval.

TIL rovatunk következik, főszerepben az emoji. Te tudtad, hogy van egy maximális font méret, aminél ha nagyobbat adsz meg, nem fognak látszódni Androidon a cuki kis figurák?

Éééés a végére egy komoly gyomros, a Prepack. A Facebooknál nem nagyon van szabadidő, vagy épp ellenkezőleg rengeteg szabadiővel bírnak a fejlesztők. Máshogy nem tudom elképzelni, hogyan születhetnek mindig újabbnál újabb, nagy volumenű fejlesztések. A legújabb őrület a Prepack, ami egy egyelőre erősen kísérleti stádiumban lévő, JavaScript optimalizáló tool. A lényege, hogy aggreszívan képes tömöríteni, átírni a kódunkat, ezáltal csökkentve a kódbázis méretét. Erre pedig egyre jobban szükségünk lesz, hiszen a különböző libaryk és frameworkök egyre nagyobbak lesznek. Éles használatra még nem alkalmas a szoftver, de játszani már lehet vele.

Végszó

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