01.
Inovatívne software riešenia
Transpiling
Keby ste chceli písať JavaScript naozaj univerzálne, museli by ste sa vzdať šikovnej funkcionality, ktorú pre projekt môžete potrebovať. Sú však metódy, pomocou ktorých viete váš kód tlmočiť do “reči prastarých”. Zjednodušene povedané, ide o preloženie modernej JavaScript syntax do všeobecne zrozumiteľnejšieho tvaru pre prehliadače. Pre transpilovanie kódu môžete využiť Babel.
Polyfilly
Niektoré funkcie sú istým browserom neznáme. Najčastejšie sú to Internet Explorer, súčasný Microsoft Edge a dokonca aj Safari. Polyfilly, po anglicky polyfills, sú JavaScript knižnice, ktoré doslova chýbajúce funkcie nahrádzajú, dopĺňajú. Pri práci s dátumami, animáciami, Shadow DOM atď. sú častokrát nutnosť. Je ich dobré aplikovať zvlášť a len vtedy, keď si web všimne, že užívateľovému prehliadaču daná súčasť chýba. Chceme totiž predísť zbytočnému kódu bežiacemu na pozadí.
Prácu je dobré zjednodušiť a zautomatizovať. Transpiling, autoprefixer, kompilácia kódu – o toto všetko a ešte viac sa vedia postarať voľne dostupné nástroje, najpoužívanejšie sú grunt, gulp a Webpack. Momentálne najtrendovejší PHP framework, Laravel, má webpack už v základnej inštalácii pripravený a nakonfigurovaný ako tzv. Laravel Mix.
Pre maximálnu efektivitu je dobré použiť CSS framework. Bootstrap 4 má modálne okná, slider, responzivitu, prácu s CSS premennými, desiatky ďalších komponentov, oblastí už vopred pripravených a vy vďaka jeho použitiu nemusíte nanovo objavovať Ameriku.
POZOR! Pre menšie ale veľmi špecifické projekty môže byť Bootstrap doslova zbytočný. Ako npm knižnica preto ponúka aj alternatívu pre importovanie len použitých súčastí. Ak potrebujete dajme tomu grid (rozloženie do stĺpcov) a CSS reset, viete ich načítať samostatne. Viac sa dozviete v dokumentácii Bootstrapu.
Príde QA tester do baru. Objedná si pivo. 2 pivá. 99999 pív. -4,3 piva. Celý nápojový lístok a pečeného dinosaura. Všetko prebehne, ako má. Po ňom príde do baru prvý skutočný zákazník, opýta sa, kde je WC. Celý bar okamžite pohltia plamene a všetci zahynú krutou smrťou.
Napriek známosti teoretických podkladov a toho, čo by sa malo diať, sa vždy nájdu chyby, ktoré nikto nečakal pri pripravovaní primárnych užívateľských procesov. Práve preto je kladený taký dôraz na testovanie.
Chyba môže byť spôsobená rôznymi faktormi, no v podstate viete aj tieto chyby roztriediť do kategórií:
Chyby špecifické pre prehliadač
Toto je niečo, s čím sa jednoducho musíte zmieriť a bojovať s tým neustálymi úpravami kódu. Práca s dátumami s Safari je podstatne striktnejšia, než v Chrome, nastavovanie transform: translate() pomocou prepočítavaných hodnôt spôsobí v Microsoft Edge nefunkčnosť animácie, Safari ako také dovoľuje scrollovať aj za hranice obsahu… Rozdielov je neúrekom, na ich opravy sa dlho čaká a kvôli tomu je toto testovanie tak nesmierne podstatné.
Ak ste v situácii, kedy chcete zacieliť CSS štýlmi výhradne IE, Edge, je to možné pomocou kontroly podporovaných CSS funkcií.
Chyby špecifické pre platformu
Tu by sa oplatilo spomenúť drop-downy, selecty. Teito prvky, ich vzhľad a funkčnosť sú ovplyvnené aj samotným operačným systémom.
Taktiež sú známe problémy, kedy notebooky s dotykovými obrazovkami detekčné nástroje vyhodnotia ako mobilné zariadenia.
Do tretice – ikony použité na webe je ideálne používať v SVG formáte, pretože obyčajná ikona 32px × 32px, ktorá vyzerá obstojne v tradičnom telefóne, bude rozmazaná na na displeji s väčšou hustotou pixelov aj napriek tomu, že rozlíšenie prehliadač vyhodnotí za rovnaké. Tento jav vieme dobre odpozorovať jednoducho pri Retina displejoch.
Chyby špecifické pre zariadenie
Keď pozriete na taký populárny iPhone X, hneď musíte prihliadať ako na vrchný výbežok, tak aj na “čiaru” na spodku obrazovky, ktorá je zas používaná pre prácu s gestami. Hoci je kľúčová pre používanie telefónu, môže, povedzme, prekrývať tlačidlo na konci stránky. Konkrétne s takýmito dizajnérskymi počinmi výrobcov viete bojovať vďaka CSS premenným prostredia. Tie vám vedia poskytnúť v počte pixelov údaj o tom, ako ďaleko od týchto prvkov je “bezpečná zóna”.
Cross-browser development vie byť naozaj výzva – v závislosti od špecifík projektu, požiadaviek klienta. Pokiaľ si tým však už niekoľkokrát prejdete, nielen detekcia chýb, no aj ich prevencia a riešenie sa stanú omnoho rýchlejšími.
Ak ste sa z minisérie čosi naučili alebo aspoň ste po prečítaní článkov dostali chuť pozrieť Pána Prsteňov, nezabudnite nám poďakovať formou lajku alebo zdieľania :-).
