Virgo Frontend Monthly

Issue 014

BÚÉK!

Üdvözlünk mindenkit 2017 első Monthly-jában! Remélhetőleg mindenki túltette magát a decemberi "50 link, amit feltétlenül el kell olvasnod idén (...mivel márciusra úgyis outdated lesz a fele)" jellegű gyűjteményeken, kipucolta szépen a könyvjelzőit, ugyanis most a szokásossal ellentétben két havi gyűjtéssel készültünk. Öveket becsatolni!

Olvasnivaló

Webapps vs natív apps. Majdnem akkora a harc az elmúlt években, mint az Android vs iOS, Chrome vs Firefox, piros vs kék. Még emlékszem arra az időre, amikor a bukdácsoló webappok miatt mindenki nekiállt natív appokat fejleszteni, illetve vízionálni, hogy csak az lehet a jövőbeli megoldás. Most viszont fordulni látszik a kocka, és egyre gyakrabban olvashatjuk azt a véleményt, mi szerint a böngészők jelentik a mobilweb jövőjét, nem pedig a natív appok. Egyébként tudjátok, mennyi natív fícsörhöz hozzáférhetünk már a mobilböngészőkön keresztül?

Ha pedig webapps, akkor a következő 3 betűs rövidítés, amire minden rendes frontendes gondol, az a PWA, vagyis a Progressive Web Apps. A böngészőben megvalósított alkalmazás előnye manapság már nem csak az, hogy nem szükséges hozzá három különböző platform fejlesztő, hanem a felhasználók "app install frusztrációja" is csökken. Felmérések szerint ugyanis az átlagos felhasználók havi három alkalmazást töltenek le csupán. Még ijesztőbb az, hogy a Play Store-ban lévő alkalmazások 60 százalékát soha nem töltötték még le. Webalkalmazás esetén nincs letöltési idő, nincs installálási idő, a jó PWA app gyors, kevés mobilnetet használ és offline is működik.

A HTTPS manapság már szinte alap funkciónak számít ha weboldalt készítünk. Új oldal esetén valószínűleg nem is okoz gondot a használata, de vajon egy meglévő site migrálása mennyire lehet nehézkes? A Guardian postjában olvashatunk arról, hogy ők milyen kihívásokkal találták szembe magukat.

Noha ez egy frontendes hírlevél, néha érdemes kikacsingatni más területekre is. A Python engem mindig érdekelt, de nem tudtam magamat rászánni, hogy alaposabban megnézzem. Valahogy túlságosan a JavaScript-re volt már ráállva az agyam. Éppen ezért örültem nagyon, amikor rátaláltam a Python for JavaScript Developers cikkre, ahol pontosan nekünk, frontendeseknek magyarázzák el a Python alapjait.

Ember.js React helyett? (2016|2017)-ben? Valaki kiszűrte volna bőngészőjében a Facebook-os, React-os linkeket az elmúlt években? Nem, nem ez történt, hanem inkább az, hogy nem akartak felülni a hype vonatra, és inkább megvizsgálták a lehetőségeket, majd azok alapján döntöttek. Noha én magam is hajlamos vagyok elveszni az árban és menni a tömeggel - lásd megszaporodó Vue.js-es linkek - de igazán jó látni, hogy vannak még más frameworkok is a piacon. Ezeket ráadásul még fejlesztik is, hasonlóan jó közösséggel, és alkalmasak valós problémák és feladatok megoldására is. Annak pedig, aki Reactozna is meg nem is, egy kis örülnivaló: mindenki kedvenc minimál React-klónja, a Preact háza táján lévő fejlesztéseknek köszönhetően tízszeresére gyorsult az initial render. Diff-eket nézni ér.

Mélyvíz

A client side logging egy szerintem gyakran elhanyagolt probléma, legalábbis magamról tudom: ritkán gondolok arra, hogy éles környezetben is logolni kellene a böngészős hibákat. Ez természetesen alkalmazás függő, egy vékony, jQueryt használó blognál nem valószínő, hogy kiritkus JS hibákat kellene elkapnunk, és megfognunk. A SitePoint cikkében elég alaposan összeszedik a lehetőségeket, ha arra akarunk vetemedni, hogy kliens oldali hibákat logolunk.

Meglehetősen kétes módszert alkalmazott a PornHub a hirdetéseiket blokkoló felhasználókkal szemben. Miután dedektálták, hogy a hirdetéseket blokkolva vannak, WebSocket segítségével injektáltak hirdetéseket az oldalba, amiket sem az Adblock, sem pedig a uBlock nem tudott megfogni. A kiskaput azóta több hirdetésblokkoló pluginben befoltozták, de még így is van jópár, ami kijászható ezzel a technológiával. Tanulság: mindig is a pornó vitte előre a fejlődést, nincs ez másként most sem. :)

Szuper, ha készítünk egy nagyon menő weboldalt, a legújabb kliens oldali libraryk illetve frameworkok felhasználásával, de vajon mit szól hozzá a Google? Ha nem csak magunknak építjük ezeket az oldalakat, akkor érdemes figyelembe venni, és utána járni annak, mennyire és milyen módon tudja bejárni a kereső a weboldalunkat. Szerencsére a technológia már tart ott, hogy a Google Bot megtekintés nem arról szól, hogy "le-wget-eljük" az oldalt, és a szövegeket kinyerjük belőle. A Google kereső robotjai már sokkal okosabbak ennél, és ami még jobb, nem is rejtik véka alá tudásokat. A Webmaster Tools segítségével ugyanis ellenőrizhetjük, mit és hogyanis is lát weboldalunkból a nagy testvér. A linkelt cikkben egy React-os oldalt nyúztak a Google botjaival, és igen hasznos dolgok "potyogtak" ki.

Az Immutable is az a szó, ami egyre gyakrabban jön szembe velünk az interneten. Ha még nem teljesen világos miről is van szó, akkor neked találták ki a "The Missing Immutable.js Manual" cikket.

A reaktív programozás többnyire mindenki bakancslistáján fenn van, Evan You a JavaScriptes alkalmazását veszi górcső alá.

Minden manapság mondernnek számító JS-es MVC framework/lib villantanivalója a kezelt Virtual DOM sebessége. De hogy mi is ez, és hogyan is működik belülről nézve? Ez a cikk a React/Preact kódjainak felhasználásával mutatja be az implementálás nehézségeit.

Ezt már mind vágod?

Senior frontendeseket keres a Virgo Systems. Jelentkezz!

Ha csak egy Webpack 2 bevezetőt olvasol el a héten, akkor ez legyen az. Ha lett volna egy hasonlóan egyszerű, de pontos bemutató annak idején, amikor a Webpack megjelent, akkor kevesebb tapétát kapartam volna le a falról.

Személyes kedvencem a havi linkcsokorból a Vuelidate, ami - amint azt a neve elárulja - Vue.js-hez írt validációs modul. A Vue-t én egyszerűsége miatt nagyon megkedveltem, és ez a validációs lib tovább viszi ezt.

Sokszor elfeleljtük, hogy a weboldalakat nem mindig online nézzük. És most nem a Service Workerre és az offline működésre gondolok. Vannak olyan helyzetek, amikor ki kell nyomtatni egy-egy oldalt, ha az erdőknek ez fáj is. Lehetőségünk pedig van rá, a CSS és a HTML is fel van készítve arra, hogy weboldalunkat kinyomtassuk. Sokkal valószínűbb, hogy mi nem készültünk fel rá. A linkelt postban elég alaposan körbe járják a témát, érdemes rászánni az egyik reggelünket és kávénkat.

Tudtad, hogy Jake Archibald reptereken random GitHub oldalakat tesztelget? Arra jött rá, hogy adott esetekben új ablakban nyitva hamarabb érkezik a kontent, mint ajaxosan töltve egy tab tartalmát. Részletek a katt után.

Kihagyhatatlan CSS framework sorozatunkban pedig végül egy olyan új CSS frameworköt ajánlanánk, amit azok fognak szeretni, akik nem találják a Bootstrap 4-ben az $enable-flex: true kapcsolót - Bulma. (Na jó, nincs gonoszkodás - a vertical kitöltés tényleg jópofa dolog.)

Minden node-al foglalkozó fejlesztőcég életében előbb-utóbb eljön a pillanat, amikor túllépve a privát csomagokon, teljes értékű privát, saját hostolású, kereshető npm repót szeretne. Jó hír: A verdaccio pont erre van!

Böngészők

Jó hír a sticky header fanoknak: Chrome-ba visszatért a performancia okok miatt már egyszer visszadobott position: sticky (ha találtok egy olyan polyfillt, ami tekintettel van az anchorra ugrásra, vagy a natív input hibaüzikre, plz let us know). Ja, és az új Chrome már a frissropogós Web Bluetooth API-t is támogatja!

Most, hogy lassan kipörögnek a legacy IE-k, natív lehetőségek tárháza nyílik meg a jQuery-ben ragadt fejlesztők előtt. Melyek a legérdekesebbek, ha IE11 a támogatott platformok alja?

A formok validálása egyszerűbbé vált egy kicsit, bővült a validációs programozható felület webkit alatt.

Fellélegezhetnek a Linux userek, az Adobe a platform hosszú ideig tartó hanyagolása után végre megerőltette magát, és kiadott egy új Flash release-t. Wait... what??

Mozgalmas év volt a JS-hívők számára a 2016-os év, valószínűleg a 2017-es sem lesz másmilyen. A dacból csak évi egy cikket bevállaló olvasóinknak kedveskednénk a SitePoint 2016-os évet sommázó cikkével.

Egyéb

A cikk címe most valóban helytálló: "Végleg lezárt egy korszakot az internet.". Azt történt ugyanis, hogy a StatCounter (webes forgalmat monitorozó cég) adatai szerint a mobil eszközökről napjainkban már többen interneteznek, mint asztaliról.

Kellenne egy szerver 2 órára? Biztos volt már sokszor olyan szintuáció, hogy jó lett volna gyorsan egy másik gépen kipróbálni az alkalmazást, kitenni demózni 1-2 órára. Manapság a VPS-ek persze olcsók, de ha az év 365 napjában nincs rá szükségünk felesleges fenntartani egyet. A Dply szolgáltatás pont erre az 1-2 órára ad nekünk szervert, teljesen ingyen. Válaszhatunk több fajta operációs rendszer közül, az első 2 óra teljesen ingyenes, ha esetleg még használnánk egy kicsit már pár dollárért több napra nyújthatjuk a szolgáltatást.

A Slack az új IRC, és ami igaz az igaz, megkönnyíti a kommunikációt a csapatban dolgozók számára. És ha azt gondoltuk volna, hogy egy Comodore 64-en nem tudunk csetelni, akkor bizony tévedtünk.

Ha hírlevél vagy weekly, akkor Mailchimp. Egyértelműen a legjobb választás, mi is ezt használjuk. A Mailchmip 2000 feliratkozóig teljesen ingyenes, utána azonban már meredeken emelkednek az árak. A cron.weekly hírlevél gazdája kicsit sokalta az évi 600 dolláros várható költséget, és egy kis utána járással töredékére tudta szorítani a költségeket a self hosted Sendy alkalmazás és az Amazon SES kombinációjával.

Aki szeretett volna bigdata módra szűrögetni a Stack Overflow nem éppen elenyésző mennyiségű adatbázisából, most végre kiélheti magát. (vagy pszt, töltsétek le az egész pakkot, is csináljatok vele, amit akartok :))

Orosz Gergely blogját érdemes követni, első kézbeli információkat lehet olvasgatni arról, hogy milyen az élet a nyugati startupoknál. Mi most az Uberes tapasztalatait emelnénk ki.

Röviden