Vzhůru dolů

24.04.2024 10:30 V tomto díle se ponoříme do světa GraphQL s Michalem Sängerem z Trezoru. Probíráme v jakých situacích nemusí být „grafko“ ideální a naopak, kde jednoznačně našlo své místo. Prozkoumáme nástroje jako Relay a Apollo, podíváme se na složitosti kolem federace a Michal nabízí řadu zkušeností a zajímavých názorů na ekosystém kolem téhle technologie. Prostě GraphQL projdeme tak nějak sakum prdum. Doufáme, že se vám 52. díl podcastu bude líbit! Podcast Celá epizoda na videu Host: Michal Sanger Michal je milovník dobrého jídla a zkušený javascriptový vývojář, který sbíral ostruhy mimojiné v Kiwi.com a Pipedrive. S nadhledem říká, že se o GraphQL zajímá zhruba od roku 1990. Prostě dlouho. Nyní GraphQL a jiné technologie krotí Trezoru. LinkedIn – X – SangerNaTripu.cz K čemu jsme došli? GraphQL se výborně hodí pro mezivrstvu client/server, jakožto typované API. React ekosystém je pro to dělaný. Dále je skvělé pro sdílení API například pro mobilní web, nativní appku atd. Komunita, zdá se, naopak dochází k tomu, že GraphQL se nehodí pro potřeby veřejných API. Ani největší hráči do využití pro veřejná API nešli a například Github od toho ustupuje. Je to náročné na údržbu, ale důvodů je více. Další příkladem, kde se GraphQL neujalo je komunikace server/server. Backendisti ke GraphQL nemají zase tak blízko, a celkově je tato technologie pro tyto potřeby zbytečně komplikovaná. Podle Michala je nejlepší pojetí takové, že frontendisti si řeší jak frontend kód, tak GraphQL vrstvu, tedy nějakou formu přemapování dat z backendu. Frontend v tomto směru Michal bere jako „interního zákazníka“. Z klientských knihoven Michal upřednosťnuje Relay. Jak říká, „Relay je trochu své“, a nevýhodou je určitá komplexita zavádění. Vyplatí se prý ale do Relay zainvestovat čas a úsilí. Co se týká federace, podle Michala je to extra složitost, které nefandí. Říká, že ani Facebook nemá federaci. Určité alternativy nabídl Michal ve své nedávné přednášce na WebExpo. Michal ještě bonusově doporučuje podzimní konferenci GraphQLConf a newsletter GraphQL Weekly. O čem všem se bavíme? Martinův tip pro vynervované přednášející Robinův tip: Comic Agile Pozvánka na LIVE natáčení podcastu na WebExpo Představení Michala Sängera Co se dělo v GraphQL za posledních 5 let? Konsolidace Jaký způsoby využití jsou pro GraphQL vhodné a jaké méně Diskuze i „edge computingu“ pro data fetching Klientské knihovny: proč Relay a proč ne Apollo Proč Michal nemá rád federaci Facebook nemá federaciMichalova přednáška na WebExpu Defer, prioritizace a performance Subscriptions a proč jsou těžké Dotazy: tRPC vs GraphQL Dotazy: Dokumentace Děkujeme za spolupráci: Honza Michálek . Odebírejte podcast ze Vzhůru dolů Spotify – Apple Podcasts – Google Podcasty – TuneIn – RSS podcastů Nápad? Chyba? Připomínka? Pochvala? Pište nám na e-mail podcast@vzhurudolu.cz nebo kamkoliv jinam. Hlavně, aby se to k nám dostalo. Přejeme vám příjemný poslech!

19.04.2024 16:10 Pojďme si projít základní množinu znalostí o využití písma na webu, zmínit pár častých chyb a dvakrát podtrhnout hlavní pravidlo pro stavbu responzivního rozvržení stránky. Předtím ale ještě zmíním jeden účel písma, na který se často zapomíná. Tento text je ukázka z knihy Vzhůru do webdesignu. Písmo v nás vyvolává emoce Než se začteme, může nám typ písma sdělit informaci, co od webu očekávat. Jsem na webu seriózního magazínu, užitného webu typu e-shopu, nebo na stránkách Déčka, určeného pro děti? Asi je jasné, že tohle všechno je možné sdělit nebo zpochybnit mimo jiné i volbou písma. Je toho ale mnohem více. Pro potřeby předání základní úrovně typografických znalostí mně tady připadá lepší začít z druhého konce. Chybami. Časté typografické chyby Vypadají triviálně, ale weby jsou jich plné. Příliš dlouhé řádky, špatný kontrast a nesprávné znaky. 1) Příliš dlouhé řádky Wikipedie je smutným rekordmanem v délce řádku. Řádek by obecně neměl obsahovat více než 75 znaků, aby oči nepřeskakovaly na řádky sousedící. Ještě o tom budu psát. Wikipedie na počítačovém rozlišení obrazovky 2) Špatný kontrast a další technické parametry Novinky jsou nejen vysázené Georgií, patkovým písmem s vynikající čitelností pro delší texty, ale také velmi kontrastní barvou. Na českém webu jsou i výrazně horší weby než Zdroják, ale uvádím ho jako hůře čitelnou variantu díky kombinaci několika faktorů. Zdroják.cz má bezpatkové písmo s horším kontrastem a délkou řádků kolem 120 znaků Více o kontrastu barev píšu na Vzhůru dolů. vrdl.cz/p/kontrast 3) Nesprávné znaky Každé rozumné písmo má speciální symboly pro uvozovky , pomlčky nebo výpustku . Aktuálně.cz používá nesprávné znaky Není to žádná buzerace typografických snobů – prostě se to lépe čte. Typografický tahák od Beneš a Michl vám může velmi pomoci. vrdl.in/am9wu Ideální šířka a výška řádku Teď zpozorněte, protože zmíním jeden ze základních designérských principů dnešního webdesignu. Na příkladu Wikipedie jsem ukazoval, jak se může dlouhý řádek negativně projevit do celkové čitelnosti textu a webu. A není to jen problém Wikipedie. Platí totiž následující: 66 je ideální počet znaků na jedné řádce, 45–75 je pak vyhovující rozmezí. U webů, jako je právě Wikipedie, se čtenářům stává, že snadno ztrácejí aktuálně čtenou řádku. Rychlost čtení se tím snižuje. Jsou to pravidla, která zpopularizoval Robert Bringhurst ve své knize „The Elements of Typographic Style“ a která jsou průběžně potvrzována nejrůznějšími studiemi. Ale vyzkoušet si je můžete i sami na sobě. Na malých displejích však není možné optima dosáhnout. Doporučení pak říkají s ubývajícím počtem znaků na řádce snižovat i jeho výšku, protože oči častěji přecházejí z jedné řádky na druhou. Tady je jedno z možných řešení v CSS, které ukazoval Marko Dugonjić ve své přednášce „Responsive Web Typography“ na WebExpo 2014. vrdl.in/rwdtypo body p body p body p Toto nastavení předpokládá vysázení patkovým písmem a do jednoho sloupce. Drobně se samozřejmě může měnit podle parametrů písma. Jinak to bude pro nepatkové písmo, pro jiný kontrast, pro specifický charakter písma nebo počet sloupců. Nejlépe nám správnou volbu potvrdí poctivé uživatelské testování, ale pro začátek stačí nastavení písem testovat na různých zařízeních a různých lidech ve vašem okolí. Příliš malý řádkový proklad spojuje sousedící znaky, zhoršuje čitelnost slov a ve výsledku zpomaluje čtení. Příliš velký zase vypadá jako seznam samostatných položek a nutí uživatele přemýšlet, zda se jedná o souvislý text nebo o nějakou formu odrážek. Nicméně délka a výška řádku je první designérské pravidlo, na které bychom při návrhu rozhraní měli myslet. Postup návrhu pak ideálně vypadá tak, že zvolíme písmo, získáme obsah a až na těchto dvou nerozlučných přátelích postavíme systém pro layout stránky. Další zdroje o typografii Jasně, vnímáte mě dobře. Typografii mám za jeden ze zásadních stavebních kamenů přípravy vizuálu skoro každého webu. A myslím, že ze všech pěti prostředků grafického designu, které jsem zmiňoval, by právě typografii měli nejvíce rozumět i kodéři a vývojáři. Protože oni jsou často ti „sazeči“, kteří mohou mnohé ovlivnit. Kniha „On Web Typography“ Skvělá učebnice typografie od Jasona Santa Maria. vrdl.in/76nb2 Přednáška „Praktická typografie pro webové kodéry“ Dan Srb se hezky rozpovídal na jedné z akcí Frontendisti.cz. youtu.be/bJLGEMQ3rnM Online kniha „The Elements of Typographic Style Applied to the Web“ Bible od Roberta Bringhursta a spoluautorů. webtypography.net Lukáš Augusta Na DesignUI.cz má Lukáš pěkné články o typografii a také nástroj pro tvorbu typografické stupnice. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .