Virgo Frontend Monthly

Issue 024

Sziasztok!

Ismét jelentkezünk havonta megjelenő frontend témájú hírlevelünkkel!

Olvasnivaló

Kezdjük az ehavi számot egy ECMAScript proposallal: A Pattern Matching funkció már régóta elérhető pár funkcionális nyelvben, mint például az F# vagy a Rust. Idén áprilisban a funkció bekerült az ECMAScript Stage 0 státuszú proposaljai közé, erről itt olvashattok bővebben, példákkal és hasznos use-casekkel szemléltetve a funkciót, a pattycake npm package-en keresztül pedig ki is próbálható.

A MediaDevices API Chromeban és Firefoxban egyre inkább támogatott. Ezen API-n keresztül elérhetjük böngészőből a klienshez csatlakoztatott média eszközöket, mint például a kamerákat, vagy mikrofonokat. Így választható lehet akár az is, hogy egy telefonon az első vagy a hátsó kamera képét szeretnénk elérni, erről készült egy részletes tutorial Phil Nash jóvoltából.

Ahogy egyre támogatottabbak lettek, egyre több JavaScript fejlesztő használ tömbkezelésre egy egyszerű for vagy while ciklus helyett map, filter, vagy reduce tömbkezelő operátorokat. Ezek segítségével nagyon könnyen tudunk mellékhatás nélküli, pure function-öket létrehozni, és alkalmazni a funkcionális programozás alapjait JavaScript nyelven.

A progress HTML tag már a HTML5 megjelenése óta elérhető. Bár nem annyira gyakori a használata, mégis azt gondolhatnánk, hogy már egységesen és egyszerűen testreszabható a progress bar megjelenése és animálása. Pedig nem az. Hogy mennyire nem az, azt Jonathan Snook érezhetően frusztrációval teli cikke is nagyon jól bemutatja, és megoldást is ad arra, hogy a böngészők nagy részében egyedi progress bart készítsünk, külső library használata nélkül.

Mi a Virgonál mostanában egész sokat dolgozunk webshopok és egyéb ecommerce oldalak fejlesztésével, így a következő cikk számomra különösen érdekes volt. A már átadott projektjeinknél megfigyeltük, hogy sokkal kisebb a konverziós ráta a mobileszközök esetében, mint az asztali számítógépek használatakor. Ennek persze rengeteg oka lehet, minden felhasználó más és más, de egy kimondottan érdekes összefoglaló készült a jelenségről, megoldási javaslatokkal.

Nemrég megjelent a wikipedián egy új funkció: Ha a belső linkek fölé visszük az egeret, az adott cikkről egy összefoglalót láthatunk. Elsőre nem tűnik nagy dolognak a funkció implementálása, és hogy ez miért nem igaz, itt elolvasható. A funkció tervezésének folyamatát pedig a wikipedia a saját blogján tette közzé, érdemes ezt is átfutni az implementációs nehézségek mellett.

Kedves Fejlesztő, az internet nem rólad szól! címmel jelent meg egy hosszú, de olvasásra mindenképp érdemes cikk március végén. Érződik rajta kicsit a "régen minden jobb volt", viszont érdemes kicsit magunkba nézni, és feltenni a kérdést: egy adott technológia használata, vagy bonyolult megoldás szállítása a végfelhasználó, vagy a saját egónk érdekét szolgálja?

Ezt már mind vágod?

Senior frontendeseket keres a Virgo Systems. Jelentkezz!

Röviden

Egyre felkapottabb buzzword a "Serverless" szócska. Gyors összefoglalót olvashattok róla itt, akit mélyebben érdekel a téma, itt komolyabb tájékoztatást kaphat a dologról.

Múlt hónapban írtunk az ARIA feature-ök megfelelő használatának fontosságáról. A Firefox Nightly verziójába bekerült az Accessibility Inspector nevű, az oldal könnyű hozzáférhetőségének segítésére irányuló új fejlesztőeszköz. Akinek ez nem lenne elég, vagy nem szeretné csak emiatt telepíteni és használni a Firefox Nightly-t, annak pedig az aXe nyújthat segítséget.

A reszponzív e-mailek létrehozására a legtöbben már valószínűleg valamilyen framework-öt használnak. Aki új lenne a témában, annak ezt a gyorstalpalót tudom ajánlani, aki pedig épp framework-öt választ, az ne hagyja ki a Foundation-t és az MJML-t összehasonlító CSSTricks cikket sem.

Nagyon sok scrollozással kapcsolatos, nehezen megoldható problémával találkozhat, aki frontend fejlesztésre adja a fejét, ezekről a problémákról és lehetséges megoldásairól olvasható egy gyűjtés az Evil Martians oldalán.

Nemrég érkezett meg az Angular 5-ös verziója, azonban már úton van az Angular 6, az érkező feature-ök és bugfixek listája már elérhető.

A moment.js sok dátummal kapcsolatos problémára megoldást nyújt, viszont (én személy szerint) nem annyira szeretem használni a nagy mérete miatt (a lokalizációs beállítások sokat dobnak rajta). A dayjs nevű, mindössze 2kb méretű library alternatíva lehet, ha a moment.js bizonyos funkcióit hajlandóak vagyunk elengedni.

A babel-preset-env fájlban böngészőtámogatásként megadható last {n} versions opció nagyon kecsegtetően hangzik, azonban a működése nem feltétlenül felel meg az elvártnak (valójában pont azt csinálja, amit mond magáról, mégis nem várt működést tapasztalhatunk, ha ezt az opciót használjuk). A problémáról és a feloldásáról itt olvashattok bővebben.

És egy kis érdekesség a végére: A tone.js nevű framework segítségével zenét készíthetünk böngészőben. Nem hiszem, hogy sokan használnánk ezt a mindennapi munkánk során, de már a demo-kat végig kattintgatva is szerezhetünk magunknak pár boldog percet (már amennyiben érdekelnek a zenével kapcsolatos dolgok).

Végszó

Ezzel a végére értünk az április számnak, szívesen fogadjuk a visszajelzéseiteket az oldal alján található komment szekcióban.

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