[{"@context":"https:\/\/schema.org\/","@type":"Article","@id":"https:\/\/www.senub.cz\/jak-merit-uspech-u-webovych-stranek-zavislych-na-javascriptu\/#Article","mainEntityOfPage":"https:\/\/www.senub.cz\/jak-merit-uspech-u-webovych-stranek-zavislych-na-javascriptu\/","headline":"Jak m\u011b\u0159it \u00fasp\u011bch u webov\u00fdch str\u00e1nek z\u00e1visl\u00fdch na JavaScriptu","name":"Jak m\u011b\u0159it \u00fasp\u011bch u webov\u00fdch str\u00e1nek z\u00e1visl\u00fdch na JavaScriptu","description":"Hodn\u011b jsem si to tady u\u017eil s\u00a0Hamlet Batistou b\u011bhem na\u0161\u00ed prezentace ohledn\u011b nov\u00e9 renezance JavaScriptu b\u011bhem SMX Advanced v\u00a0\u010dervnu. Mluvil jsem o n\u011bkter\u00fdch webov\u00fdch str\u00e1nk\u00e1ch z\u00e1visl\u00fdch na JavaScriptu, se kter\u00fdmi","datePublished":"2020-02-23","dateModified":"2020-02-23","author":{"@type":"Person","@id":"https:\/\/www.senub.cz\/author\/#Person","name":"","url":"https:\/\/www.senub.cz\/author\/","identifier":1,"image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/087c2e57f451bc02fa8017914855d7c40cf6c7d5dc1637b868e007adc26322d1?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/087c2e57f451bc02fa8017914855d7c40cf6c7d5dc1637b868e007adc26322d1?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"senub.cz","logo":{"@type":"ImageObject","@id":"\/logo.png","url":"\/logo.png","width":600,"height":60}},"url":"https:\/\/www.senub.cz\/jak-merit-uspech-u-webovych-stranek-zavislych-na-javascriptu\/","wordCount":983,"articleBody":"Hodn\u011b jsem si to tady u\u017eil s\u00a0Hamlet Batistou b\u011bhem na\u0161\u00ed prezentace ohledn\u011b nov\u00e9 renezance JavaScriptu b\u011bhem SMX Advanced v\u00a0\u010dervnu. Mluvil jsem o n\u011bkter\u00fdch webov\u00fdch str\u00e1nk\u00e1ch z\u00e1visl\u00fdch na JavaScriptu, se kter\u00fdmi jsem pracoval, o jejich unik\u00e1tn\u00edch v\u00fdzv\u00e1ch a d\u016fle\u017eitosti automatizovan\u00e9ho testov\u00e1n\u00ed a monitorov\u00e1n\u00ed \u0159e\u0161en\u00ed.\u00a0Tady jsou n\u011bkter\u00e9 ot\u00e1zky, kter\u00e9 byly polo\u017eeny \u00fa\u010dastn\u00edky prezentace a m\u00e9 odpov\u011bdi.\u00a0CO jste pou\u017eil k\u00a0testov\u00e1n\u00ed pom\u011bru \u00fasp\u011bchu vykreslov\u00e1n\u00ed (nap\u0159\u00edklad ve va\u0161\u00ed prezentaci?) \u00a0Nastavili jsme skript pro automatick\u00e9 monitorov\u00e1n\u00ed, kter\u00e9 kontroluje podstatn\u00fd po\u010det str\u00e1nek na jedn\u00e9 webov\u00e9 str\u00e1nce ka\u017ed\u00fd den n\u011bkdy v\u00a0osm r\u00e1no. Tento skript kontroluje spoustu element\u016f na ka\u017ed\u00e9 str\u00e1nce. Jeden z\u00a0t\u011bchto element\u016f, kter\u00fd kontrolujeme, je p\u0159\u00edtomnost jazykov\u00e9ho selektoru, nebo\u0165 jsme zjistili, \u017ee jazykov\u00fd selektor se neobjevuje, pokud p\u0159ed-kreslov\u00e1n\u00ed sel\u017ee. Jakmile v\u00edme, kolik str\u00e1nek ve skriptu je zkontrolov\u00e1no (po\u010det je stejn\u00fd ka\u017ed\u00fd den) a kolikr\u00e1t p\u0159ed-kreslen\u00ed selhalo (nebyl nalezen jazykov\u00fd selektor), m\u016f\u017eeme spo\u010d\u00edtat pom\u011br \u00fasp\u011b\u0161n\u00fdch vykreslen\u00ed.\u00a0Pokud nem\u00e1te \u017e\u00e1dn\u00e9 monitorovac\u00ed \u0159e\u0161en\u00ed, m\u016f\u017eete bezpochyby pou\u017e\u00edt nap\u0159\u00edklad n\u00e1stroj ScreamingFrog, abyste dos\u00e1hli podobn\u00e9ho v\u00fdsledku.\u00a0\t\tnastavte vykreslov\u00e1n\u00ed \u201epouze na text\u201c a p\u0159epn\u011bte u\u017eivatele-agenta na Google Chytr\u00fd telefon.\t\tPou\u017e\u00edvejte vlastn\u00ed vyhled\u00e1v\u00e1n\u00ed nebo vlastn\u00ed extrakci k\u00a0c\u00edlen\u00ed na element, kter\u00fd nen\u00ed p\u0159\u00edtomn\u00fd, kdy\u017e proces p\u0159edkreslov\u00e1n\u00ed sel\u017ee\t\tProch\u00e1zejte str\u00e1nku (nebo alespo\u0148 podstatn\u00fd vzorek str\u00e1nky)\t\tOpakujte proch\u00e1zen\u00ed n\u011bkolikr\u00e1t b\u011bhem n\u00e1sleduj\u00edc\u00edho t\u00fddne\t\tSpo\u010d\u00edtejte po\u010det p\u0159\u00edpad\u016f, kdy monitorovan\u00fd element byl p\u0159\u00edtomen, a spo\u010d\u00edtejte pom\u011br \u00fasp\u011b\u0161n\u00fdch vykreslen\u00ed.\u00a0M\u00e1te n\u011bjak\u00e9 tipy ohledn\u011b zvl\u00e1d\u00e1n\u00ed dynamick\u00e9ho vykreslov\u00e1n\u00ed, kdy\u017e va\u0161e webov\u00e1 str\u00e1nka pou\u017e\u00edv\u00e1 extern\u00ed A\/B testovac\u00ed n\u00e1stroje, kter\u00e9 maj\u00ed vrozen\u00e9 vykreslov\u00e1n\u00ed na stran\u011b u\u017eivatele? \u00a0Cht\u011bl bych, aby Google vid\u011bl pouze jednu verzi webov\u00e9 str\u00e1nky. To znamen\u00e1, \u017ee bych nab\u00eddl star\u0161\u00ed verzi internetov\u00fdm vyhled\u00e1va\u010d\u016fm, dokud by ta nov\u00e1 verze nebyla otestov\u00e1na a schv\u00e1lena jako permanentn\u00ed. U\u017e tady \u010din\u00edte detekci u\u017eivatele-agenta, proto\u017ee pou\u017e\u00edv\u00e1te dynamick\u00e9 vykreslov\u00e1n\u00ed, tak\u017ee m\u016f\u017eete zablokovat p\u0159id\u00e1v\u00e1n\u00ed A\/B testovac\u00edho k\u00f3du na str\u00e1nce, kdy\u017e p\u0159ijde po\u017eadavek od bota internetov\u00e9ho vyhled\u00e1va\u010de a p\u0159id\u00e1te A\/B testovac\u00ed k\u00f3d pouze tehdy, pokud str\u00e1nka p\u016fjde u\u017eivateli.\u00a0M\u016fj design \/ v\u00fdvoj\u00e1\u0159sk\u00fd t\u00fdm se \u010dasto pt\u00e1, jestli bychom mohli pou\u017e\u00edt JavaScript ke skryt\u00ed obsahu, kter\u00fd je viditeln\u00fd p\u0159i kliknut\u00ed \u010di p\u0159i p\u0159ejet\u00ed kurzorem. Pro po\u010d\u00edta\u010dov\u00e9 verze, jak\u00e9 jsou alternativy, kter\u00e9 bychom nam\u00edsto toho mohli implementovat? Nebo jsou tu v\u016fbec n\u011bjak\u00e9? \u00a0Nezn\u00e1m v\u016fbec detaily p\u0159\u00edpadu, ale, obecn\u011b, CSS m\u016f\u017ee zvl\u00e1dnout \u00fakony vzta\u017en\u00e9 k\u00a0p\u0159ech\u00e1zen\u00ed kurzorem. Pro p\u0159\u00edpady kliknut\u00ed, ur\u010dit\u011b byste se m\u011bli ujistit, \u017ee k\u00fd\u017een\u00fd obsah je v\u00a0p\u016fvodn\u00ed HTML odpov\u011bdi. Ur\u010dit\u011b nechte na\u010d\u00edtat obsah dynamicky skrze JavaScript pot\u00e9, co u\u017eivatel klikne.\u00a0Pokud je ale obsah va\u0161\u00ed ot\u00e1zky viditeln\u00fd ve v\u00fdchoz\u00edm pohledu a vy jej chcete skr\u00fdt po interakci, tak to je v\u00a0po\u0159\u00e1dku. Google neklik\u00e1 nebo nep\u0159ej\u00ed\u017ed\u00ed kurzorem nad elementy str\u00e1nky.\u00a0M\u00e1m p\u0159esn\u011b tu samou novou implementaci jako spole\u010dnost White \u2013 s\u00a0kryt\u00edm. Dlouho m\u011b to dr\u00e1\u017edilo, nebo\u0165 str\u00e1nky, kter\u00e9 migrovaly na tuto novou implementaci, nejsou v\u016fbec v\u00a0dobr\u00e9m stavu, jako u p\u0159edchoz\u00edch verz\u00ed. M\u016f\u017eete potvrdit, \u017ee jste nezaznamenal \u017e\u00e1dn\u00e9 probl\u00e9my s\u00a0kryt\u00edm a \u017ee nen\u00ed \u017e\u00e1dn\u00e1 pot\u0159eba se t\u00edm zab\u00fdvat \/ m\u011bnit to? \u00a0Ka\u017ed\u00e1 webov\u00e1 str\u00e1nka je odli\u0161n\u00e1, tak\u017ee m\u016f\u017eu mluvit jenom o t\u00e9, se kterou jsem se setkal. Nevid\u011bli jsme \u017e\u00e1dn\u00e9 podstatn\u00e9 zlep\u0161en\u00ed pot\u00e9, co jsme odstranili p\u016fvodn\u00ed kryt\u00ed:0, ale byla to str\u00e1nka s\u00a0masivn\u00edm firemn\u00edm provozem.\u00a0 Obecn\u011b \u0159e\u010deno, pokud va\u0161e webov\u00e1 str\u00e1nka nez\u00edsk\u00e1v\u00e1 p\u0159\u00edli\u0161 mnoho firemn\u00edho provozu a spol\u00e9h\u00e1 se z\u00a0valn\u00e9 v\u011bt\u0161iny na ne-firemn\u00ed provoz, ur\u010dit\u011b bych \u0161el do toho a odstranil kryt\u00ed:0 d\u0159\u00edve ne\u017eli pozd\u011bji. Pokud v\u011bt\u0161ina va\u0161eho organick\u00e9ho provozu poch\u00e1z\u00ed z\u00a0firemn\u00edch po\u017eadavk\u016f, tak bych tomu p\u0159i\u0159adil daleko men\u0161\u00ed prioritu, ale stejn\u011b bych se do toho pustil n\u011bkdy v\u00a0budoucnosti.\u00a0Jak m\u016f\u017eete bl\u00ed\u017ee spolupracovat s\u00a0v\u00fdvoj\u00e1\u0159i u t\u011bchto kontrol, pokud jsou vzd\u00e1len\u00e9, nebo v\u00a0Indii, s\u00a0opravdu velk\u00fdm \u010dasov\u00fdm rozd\u00edlem? \u00a0\u010casto pracuji s\u00a0lidmi z\u00a0\u00fapln\u011b jin\u00e9ho m\u011bsta nebo i kontinentu a jedna v\u011bc, kter\u00e1 alespo\u0148 pro m\u011b v\u017edycky fungovala, tak je Skype\/Slack hovor. Probud\u00edm se brzy r\u00e1no nebo z\u016fstanu vzh\u016fru d\u00e9le a \u010dek\u00e1m na hovor, sp\u00ed\u0161e ne\u017e abych si vym\u011b\u0148oval s\u00a0druhou stranou zdlouhav\u00e9 e-maily. Hovor pom\u00e1h\u00e1 daleko l\u00e9pe pochopit pracovn\u00ed tempo a v\u00fdzvy, zat\u00edmco dostanu \u0161anci vysv\u011btlit celou \u0159adu d\u016fvod\u016f, pro\u010d automatizovan\u00e9 testov\u00e1n\u00ed by m\u011blo b\u00fdt na m\u00edst\u011b a mohu se tak zab\u00fdvat i jejich okam\u017eit\u00fdmi ot\u00e1zkami.\u00a0Jakmile je v\u0161echno jasn\u00e9 pro ob\u011b strany ohledn\u011b toho, co vlastn\u011b d\u011bl\u00e1me, st\u00e1le pokl\u00e1d\u00e1m za d\u016fle\u017eit\u00e9 vytvo\u0159it l\u00edstek se stroh\u00fdmi, ale p\u0159esn\u00fdmi po\u017eadavky a krit\u00e9ria akceptov\u00e1n\u00ed, abych se vyhnul jak\u00e9mukoliv nedorozum\u011bn\u00ed.                                                                                                                                                                                                                                                                                                                                                                                        3\/5 - (1 vote)        "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Jak m\u011b\u0159it \u00fasp\u011bch u webov\u00fdch str\u00e1nek z\u00e1visl\u00fdch na JavaScriptu","item":"https:\/\/www.senub.cz\/jak-merit-uspech-u-webovych-stranek-zavislych-na-javascriptu\/#breadcrumbitem"}]}]