Remélhetőleg mindenki kihasználta a januári -20 fokot, kirakta levegőzni az otthoni mainframe-t, és lebányászta az összes Bitcoint az égből. Havi összefoglalónk következik a frontend és holdudvara világából!

Az animációk használata a weben mindig is ingoványos talaj volt: a vérgagyi és a tényleges esztétikai pluszt hozó animációk között sokszor csak egy épelméjű easingen múlik a dolog. Az alábbi cikkben Sara Soueidan az SVG-k használatát járja körbe webes UI építésekor. Ja igen: ha még nincs, ne felejtsetek el felvenni egy tehetséges motion designert is a csapatba, 2017 úgyis erről szól majd :)

Ha már UI, akkor layout: valószínűleg az egész szakma egyszerre sóhajtott fel, amikor mindössze tíz éves késéssel, és úgy két évvel a flexbox-korszak beköszönte után, végre valahára megérkezett a clearfix hacket kiváltó css property: display: flow-root. Floatol még egyáltalán valaki a Balcsin kívül?

Layout után kódszervezés: Különböző mvc (*v*?) frameworkök, libek különböző metrikákon alapuló összehasonlításaival (virtual-dom sebesség, fájlméret, inicializálási idő, stb.) Dunát|Tiszát lehetne rekeszteni. Most azonban a fejlesztői élmény lesz terítéken, hiszen egyáltalán nem mindegy, hogy milyen lelkiállapotban megyünk be reggel az irodába, miután már fél éve gyúrjuk ugyanazt a kódot. A következő cikkben ezt próbálják nekünk megválaszolni a React-re és a Vue-ra vetítve.

Persze nem hagyjuk ki most sem a Reactes lowlevel tweakelést, a Netfix-es srácok bemutatják, hogy hogyan pörgették fel egy kicsit a UI-t, hogy TV-ken is fogyasztható maradjon az fps.

A webpack által hozott modul bundling gyökeresen különbözik az addig csak konfigból építkező grunt/gulp taszkrunnerektől - ez a build eszköz belelát az alkalmazásunkba, és az alapján dolgozik. Íme egy gyors tutorial a nemrég végre stable státuszba lépett 2-es verzióhoz.

Remélhetőleg tavaly már mindenki kidobta a legacy lint tooljait, és kizárólag ESLint-et használ. Találtunk egy jó kis plugint hozzá: caniuse-al összekötve warningol, ha túlságosan modern API-t próbálnánk használni.

E-mailt buildelni valószínűleg mindenki szeret - ha egy adott problémát végre cross-mailkliensen (patented szó!) sikerül megoldanunk, azt a megoldást valószínűleg évekig nem leszünk hajlandóak kidobni. Álljon itt mégis egy kis out-of-the box kitekintés, hogy mások mégis mit, hogyan oldanak meg. Maximum nem megy majd Lotus Notes-ban.

És ha már emailek: a Google+ bekapcsolta az új képtömörítési eljárását, a RAISR-t, és természetesen minden kisebb/szebb/gyorsabb lett. Tényleg jól néz ki, reméljük egyszer közkézre jut a dolog.

Mit lehet kihozni egy MVC frameworkből, ha 1 kilobájt alatt akarjuk tartani a méretét? Meglepően sokat. Introducing Hyperapp.

A post-$, no-dependency világból is szemezgettünk egy kicsit, és találtunk nektek egy kompakt, reszponzív, touch-barát carouselt - ha esetleg nem sikerülne meggyőzni az ügyfelet arról, hogy minden carousel maga az eredendő gonosz. Siema.

Valószínűleg nem én vagyok az egyetlen, akit az őrületbe kergetnek az oldal betöltése után pár másodperces késleltetéssel megjelenő, kihagyhatatlan ajánlatokat tartalmazó popupok. Szerencsére a felhasználói élmény rontását a Google-nél is komolyan veszik, így egy ideje az ilyen megoldások már pagerank rontással járnak. Bővebben itt, hazai esettanulmányok itt. Kínzó kérdés: az erről a hátrányról cikkező szakmai site-ok nagy része vajon miért használja mégis ezt a technikát?

Bizonyos szempontból jó egyetlen platformra fejleszteni - kevesebb tesztelés, kevesebb polyfill: több hajhagyma megmarad. Ugyanakkor lehetnek olyan komponenseink, melyek OS-szinten mégsem ugyanúgy működnek különböző platformokon (button tagek stílusainak legyalulása pár évvel ezelőttről, valaki?). Az Atom Editor a webkites motor miatt kezdettől fogva bugosan támogatta Windows alatt az AltGr-es billentyűkombinációkat - most viszont léptünk egyet előre: az új verzióban végre lehet magyar nyelvű billentyűzettel backslasht, és akár pipe-ot is írni snippetek nélkül! Miután túltettük magunkat azon, hogy egyesek Windows alól, magyar billentyűzettel fejlesztenek, még egy érdekesség: miért is vették ki végül az Atomból a Shadow DOM-os megoldásokat?. A cikk nyomokban Web Components-es tanulságokat tartalmaz!

Miután az interneten körülbelül az első két hét volt az, amikor még senki nem akart senkit átverni, így ebben a hónapban sem nélkülözzük a security témakört. Kedvenc cikkem a The line of death volt ebben a hónapban, ami amilyen közhelyesen kezdődik, olyan izgalmas dolgokba torkollik. Fullscreen API-val, user agent alapján böngésző chrome-ot összerakni, és “oda-fakelni” az otpbank.hu-t csini zöld lakattal? Vaaaaaat? :)

“There are only two hard things in Computer Science: cache invalidation and naming things.” – Phil Karlton.
Böngészőbeli gyorsítótárazásáról és best practice-kről könyveket lehet megtölteni. Ez a témakör most egy újabb fejezettel bővült - a jelenlegi best practice, a hosszú elévülési idő és hashelt fájlnevek helyett megjelent Firefoxban a Cache-Control: Immutable. A Facebook már le is csapott rá.

Most, hogy egy hónap már elmúlt az új évből, lassan beérnek a tavalyi évet sommázó értékelések. A Stack Overflow tavalyi Developer Survey válaszain érdemes átfutni, értelmezésében segít nekünk - dobpergés - Craig Buckler! Van egy js rising stars lista is, ha attól tartasz, hogy lemaradtál tavaly valamelyik hype-ról. Itt biztos találsz valami tanulnivalót a szürke estékre.

Az Opera úgy tűnik, a kínai felvásárlás óta sem ül a babérjain. Most egy koncept böngészővel álltak elő, aminek folytatása ugyan aligha lesz, de megpróbálták 2016-os aggyal újragondolni a webezést. Az Opera Neon érdekes próbálkozás, szerethető és kevésbé szerethető, de mindenképpen gondolatébresztő fícsörökkel - azaz pont olyan, mint amilyennek egy koncept terméknek lennie kell. A youtube fülről kiemelhető videó például hatalmas fícsör!

Githubon végre megjelent a tagelés, el is nevezték gyorsan “topic”-nak. Ha elterjed, ezentúl jóval könnyebb lesz majd alternatívákat találni ugyanarra a témakörre.

Itt pedig egy jó kis összefoglaló következik a JavaScript történelmének alakulásáról. Nem elég bőbeszédű? Van mééég.

Erőteljes agytekeréssel jár, ha van egy szolgáltatásunk, ami köré API-t szeretnénk rittyenteni. Ki kell szakadnunk a saját nézőpontunkból, és egy, a belső működést jó esetben teljesen elfedő, ténylegesen use case irányokból felépített, időtálló API-t kell specifikálnunk, ami nem változik meg akkor sem, ha közben szétdúrjuk az implementáció belsejét. Az nginx blogon nagyon jó cikkek vannak a témakörben, íme egy két részes sorozat első része.

És ha már API: érdemes lehet rápillantani erre a jó kis API-gyűjteményre, hisz nem feltétlenül a legismertebb API a legjobb/legolcsóbb választás adott célokra.

A tavalyi év egyik legnagyobb meglepetése volt számomra a yarn megjelenése - valahogy nem tudtam elképzelni, hogy valaki energiát fektessen abba, hogy alternatívát fejlesszen az npm-nek. A lényeg mindenesetre az, hogy ha csak azért telepítetted fel, hogy az install időt rövidítsd, akkor van egy jó hírem: azt eddig is tudtuk ugyan, hogy az npm cachel (ott van a current user könyvtár bugyraiban, bárki megnézheti), de breaking, hogy a megfelelő beállításokkal akár még használni is hajlandó azt! Csak ki van kapcsolva by default. Hát nem nagyszerű korban élünk? :)

Itt most egy nem szokványos rovatunk következne, ugyanis kiosztanánk két wtf különdíjat. Mindkét jelöltben az a szép, hogy elvileg értékes szakmai tartalom, de egyszerűen valami apróság miatt annyira zavaró, hogy az ember el sem jut a szövegekig, inkább X-el egyet. Az első elég nagy kört ment a hírlevelekben, de úgy tűnik desktopon valamiért senki nem tesztelte. Valami okból indulás óta gigászi fontokkal jelenik meg a furamód pont, hogy webdesignról szóló tartalom. A másodiknál pedig valamiért úgy gondolták, hogy jó ötlet ráülni a kurzorbillentyűkre. Ezért lefelé nyíllal scroll helyett inkább semmit nem csinál (?), felfelé nyíllal pedig history.back() történik. Néha nagyon apró dolgokon múlik a bounce, érdemes a saját szájízünket nem ráerőltetni a látogatóinkra.

• Top 100 pens of codepen.io
• Mailchimp 2016 számokban
• webpack 2.2 elhagyta a beta-t
• 12 chrome devtool trükk
• A “bug” szó története @index
• chrome 56 újdonságok
• firefox 51 újdonságok (webgl2, ::placeholder)
• safari 10.1 újdonságok
• preact React helyett
• mozilla facelift, végre urlencode kell a névhez
• nodejs LTS security releases
• micromustache - gyors és egyszerű, mustache kompatibilis template nyelv
• Fidget Cube koppintás, avagy ha van egy hype-old projekted, ne dőlj hátra
• Vue.js + Laravel egyszerű chat implementálása