16.04.2023 00:01 Nová, už desátá verze, nástroje pro audit webu Lighthouse mění způsob počítání Lighthouse Score. Přednost dostanou metriky Web Vitals. Metrika TTI naopak ze skóre a viditelných reportů úplně mizí. Obrázek: Zase je to trochu jinak. Jinak a lépe. Aktuální vliv metrik na celkové skóre je tedy následující: TBT = 30 % LCP = 25 % CLS = 25 % FCP = 10 % SI = 10 % Z mého pohledu je to dobře, protože to skóring alespoň trochu přibližuje principu tří metrik Web Vitas. Je to dobře i proto, že TTI je sice pro odborníka zajímavou metrikou, nicméně laika může svým specifickým výpočtem velmi zmást. TTI metrika „interaktivity po načtení”, takže je nahraditelná metrikou načtení v kombinaci s metrikou interaktivity . Jen pozor, aktualizace metrik nic nemění na faktu, že Lighthouse Score není zase tak dobrý indikátor rychlosti webu. Je totiž měřené na velmi specifických zařízení a ze specifických míst světa. Pro středoevropské prostředí bývá zbytečně přísná. Pokud je to možné, vždy dávejte přednost Web Vitals získanými přímo od uživatelů, z Chrome UX Reportu. Další novinky v Lighthouse 10 Můžeme se ale těšit i na další inovace v reportech Lighthouse: Audit Back/forward cache, velmi zajímavé nové vlastnosti Chrome, která dokáže weby u uživatelů vcelku slušně zrychlit. Audit bránění uživatelům vložit heslo ze schránky. Lighthouse 10 také přichází s deklaracemi typů TypeScriptu. Cokoli importovaného z Lighthouse by nyní mělo být typováno. Kdy se na to můžeme těšit? Už brzy se to objeví v Chrome 112, PageSpeed Insights, jejich API, a tedy i našem testeru na PageSpeed.cz. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
09.04.2023 04:15 V druhém díle podcastu natáčeném v lednu v Productboardu jsem s Honzou Sládkem z Contemberu a některým z vás v publiku přemýšleli nad vlivem novinek ve světě umělé inteligence na práci vývojářů. Rozebírali jsme samozřejmě ChatGPT od OpenAI, Github Copilot, ale padly i další tipy na nástroje jako Replit, Readwise nebo Serenade. Z publika přišly velmi zajímavé dotazy na etiku, legalitu, možnou nerovnost nebo zda to prostě není všechno jen přehnaný hype. Jsou tyhle novinky pro vývojáře hrozbou, pomocníkem nebo čím vlastně? Shodujeme se, že jde o příležitost. Příležitost zbavit se té méně záživné části práce, jako je třeba prototypování nebo rychlá dema. Jde zároveň o příležitost usnadnit si psaní menších částí kódu v jazycích, které zase tak dobře neznáme. Podcast Host: Honza Sládek Honza je Founder & CEO v Contemberu a CTO / UX designer v manGowebu. Dříve běhal orienťáky, vedl WebExpo a můžete si jej pamatovat jako spolupracovníka projektu Rekola pro sdílení kol. Honzu najdete na LinkedInu a Twitteru. Video O čem mluvíme? Honza a Contember, jak používají AI v podobě asistentky Ember? Co myslíme, když říkáme „AI”? GPT modely od OpenAI. Proč se teď AI/ML tak řeší? Jak to funguje při používání zvenčí, např. přes API? Problém s tím, že AI nemá paměť a vysokých nákladů na provoz Možnosti: brainstorming, pomoc s textem, kódem, psaní textů. Github Copilot a pomoc s psaním kódu a textů. ChatGPT a jak může pomoci vývojářům. Blížíme se k vizi Serenade, hlasovému psaní kódu? Viz starší díl. Replit a Ghostwriter: AI asistent přímo pro programátora. Co AI teda může vzít a dát vývojářům a webdesignérům? Pomoc od AI na začátku projektu, s MVP fází a prototypy. Chybovost a půjde ji v rámci vývoje AI vyřešit? Zákaz AI obsahu na StackOverflow a opět ta chybovost. Pomoc AI na konci procesu, sumarizace, dokumentace. Náklady a problémy s nimi. Disruption Theory Dotaz: Co Google a generovaný obsah? Mají se vyhledávače bát? Dotaz: Soukromí, bezpečnost a umělci přicházející o práci. Děti školou povinné a AI/ML, kniha AI dětem. Readwise a snadnější učení z textu. Dotaz: není to bublina a hype? Dotaz: co když AI začne dělat klientské změny nebo refaktoring? Dotaz: sociální nerovnost vzniklá trénováním AI na angličtině? Dotaz: rizika, legalita a kdo má právo řídit, co vrací AI? Fronta na autogramy. :-) Děkujeme za spolupráci Jiří Nečas, Productboard — Vladimír Příhoda, Productboard — Honza Michálek — Johana Kratochvílová, Signatura . Odebírejte podcast ze Vzhůru dolů Spotify – iTunes – Google Podcasty – TuneIn – Anchor – RSS podcastů. Nápad? Chyba? Připomínka? Pochvala? Pište nám na e-mail podcast@vzhurudolu.cz.
03.04.2023 15:45 V tomto rozhovoru s Petrou Nulíčkovou , se ponoříme do světa HR a LinkedInu ve vztahu k vývojářkám a vývojářům. Víme, že mnoho z nás má z oblasti hiringu rozporuplné pocity, proto jsme se rozhodli rozptýlit nedorozumění a nabídnout tipy a triky pro hledání lepší práce. Petra nám odhaluje svůj pohled na to, jaké to je být na „druhé straně“ náborového procesu, a jak se trh s vývojáři proměnil v důsledku pandemie covidu. Společně se pouštíme do diskuze o tom, jak účinně hledat dobrou práci a na co si dát pozor, když ptáčka lapají. Zvláštní pozornost věnujeme náboru talentovaných IT juniorů, kterým Petra poskytuje rady pro úspěšné hledání práce. Zaměřujeme se také na motivační dopisy – a říkáme, že dneska už je díky ChatGPT umí psát každý. Dále se bavíme o vývojářích a LinkedInu - jaký profil by měli mít a jak ho efektivně využívat, aby dosáhli svých profesních cílů. Petra přichází s tajnými tipy, jak se elegantně vyhnout nežádoucím pracovním nabídkám a jak si správně vytvořit profil na LinkedInu, který zaujme. Host: Petra Nulíčková Petra Nulíčková je současně šéfkou HR v investiční skupině Pale Fire Capital a náborářkou v Aukro.cz. Kromě toho působí v komunitě „Holky z marketingu“ a má za sebou bohaté zkušenosti z Alzy. Své rozsáhlé znalosti a rady sdílí na svém osobním webu a aktivně komunikuje s komunitou na svých sociálních sítích. Navíc je spoluautorkou projektu propousteni.cz, který se zabývá propouštěním ve firmách. petranulickova.cz – LinkedIn – Instagram O čem se bavíme? Robin a Martin zvou na WebExpo 2023 Jaké to je být na „té druhé straně“? Změnil se trh po covidu, když se v Silicon Valley hodně vyhazuje? Jak hledat práci a na co si dát pozor, když ptáčka lapají? Hiring juniorů Motivační dopis a jak na něj Vývojáři a LinkedIn, být tam a jaký mít profil? Jak odmítat nabídky? Jak si vyplnit profil na LinkedInu? Je karma zdarma? Video: Petřina přednáška „Když ptáčka lapají“ Petřina vyšla na jejím webu také v podobě článku. Ukázka: nabírání juniorních lidí v IT Děkujeme za spolupráci: Honza Michálek . Odebírejte podcast ze Vzhůru dolů Spotify – iTunes – Google Podcasty – TuneIn – Anchor – RSS podcastů. Líbil se vám tento díl? Prosíme vás o zhodnocení podcastu na vaší oblíbené platformě. Nápad? Chyba? Připomínka? Pochvala? Pište nám na e-mail podcast@vzhurudolu.cz nebo do komentářů.
02.04.2023 06:30 Dark mode je mezi uživateli, ale i ve webařské komunitě velmi populární. Hodí se na weby, kde uživatelé čtou nebo prostě tráví více času. V textu ukazuji svou cestu k tmavému režimu na Vzhůru dolů a sdílím některé nečekané zkušenosti. Dark mode na Vzhůru dolů. Pěkné to je, ale člověk se zapotí. Hlavní překvapení? Automatizovat to jde jen velmi málo. Podívejte se na video „Jak na dark mode?“. YouTube: youtu.be/mv8NBsUka4k Proč mít dark mode? Tmavý režim se v poslední době stal velmi populárním, protože jej většina uživatelů miluje. Jsou zde ale i racionální důvody: Ušetří baterii na mobilech, hlavně u OLED/AMOLED displejů, protože snižuje jas. Nevyzařuje tolik modré složky světla, která může ovlivnit spánek. Pomáhá lidem se zvýšenou citlivostí např. světloplachostí a přecitlivělostí na světlo. A navíc: je to cool. Jak na webu udělat tmavý režim? U webů je to dnes velmi jednoduché. Podpora v prohlížečích a v operačních systémech je prakticky stoprocentní. Dotaz prefers-color-scheme Prohlížečů se můžeme na preferenci uživatele snadno zeptat v CSS použitím dotazu na vlastnost média prefers-color-scheme: @media V JavaScriptu se dotážeme pomocí vlastnosti MediaQueryList.matches: window.matchMedia ").matches V JavaScriptu je samozřejmě možné rozchodit i ruční přepínání mezi světlým a tmavým režimem, které řada webů zavedla. Píše se o tom na JeČas.cz. U Vzhůru dolů se tmavý režim zapne automaticky, po přepnutí na úrovni systému. CSS proměnné Pro nastavení barev se velmi hodí použít CSS proměnné . Nejprve v CSS definujeme základní variantu barev: :root Následně tyto barvy upravíme pro tmavý režim: @media } Velmi se tudíž hodí mít alespoň základní barevné schéma uložené v autorských vlastnostech . O výhodách autorských vlastností pro tvorbu dark mode dobře psal Adam Kudrna. Ladění v prohlížečích V prohlížečích můžete mezi režimy barev přepínat pomocí vývojářských nástrojů. V Chrome DevTools to je v sekci Rendering. Ve vývojářských nástrojích Firefoxu k tomu slouží tlačítko Toggle Dark Mode. V Inspectoru Safari k tomu slouží nenápadná ikonka „Force Dark Appearance“ v záložce Elements. Pojďme se podívat, jak přemýšlet o samotné tvorbě barev. Tvorba barev pro dark mode Když jsem na tmavém režimu začal pracovat, poněkud naivně jsem se domníval, že vezmu stávající barvy uložené v SCSS proměnných, proženu je nějakým automatickým převodníkem do tmavého režimu a mám hotovo. Ne, takhle jednoduché to nebylo. Méně barev je více kodérovy radosti První problém byl v množství barev, které jsem na Vzhůru dolů používal. Do mého barevného schématu bylo potřeba opravdu hodně říznout. Tohle je současné barevné schéma ukládané do autorských vlastností, které obsahuje zhruba polovinu původních barev: :root ; --vd-text-color: rgb ); --vd-text-color-lighter: rgba , 0.8); --vd-text-color-lightest: rgba , 0.5); --vd-background-color: # ; --vd-content-bg-color: # ; --vd-border-color: rgba ); --vd-border-color-light: rgba , 0.5); --vd-highlight-bg-color: # ; --vd-highlight-neutral-bg-color: # ; --vd-link-color: # ; --vd-heading-color: # ; --vd-code-color: # ; --vd-code-color-1: # ; --vd-code-color-2: # ; --vd-code-color-3: # ; --vd-code-color-4: # ; --vd-bg-hover: rgba , 0.1); --vd-box-bg-color: # ; --vd-interactive-bg-color: # ; --vd-badge-color: # ; } @media ; --vd-background-color: # ; --vd-content-bg-color: # ; --vd-highlight-bg-color: # ; --vd-highlight-neutral-bg-color: # ; --vd-heading-color: # ; --vd-code-color: # ; --vd-code-color-1: # ; --vd-code-color-2: # ; --vd-code-color-3: # ; --vd-code-color-4: # ; --vd-box-bg-color: # ; --vd-interactive-bg-color: # ; --vd-badge-color: # ; } } Všimněte si, že některé barvy přebírám z SCSS proměnných, jiné se tvoří automaticky, například pomocí barevného schématu rgba . Aktuální počet používaných barev je oproti původnímu stavu výrazně menší. Web je teď barevně o něco jednodušší a snad i přehlednější a kontrastnější. Automatika nefunguje Druhý problém jsem si uvědomil záhy. Barvy není možné jen automaticky převést na světelné složky. Tvorba barev pro dark mode do určité míry odpovídá tvorbě zcela nového barevného schématu, které by pak mělo mít stejný „feeling“ jako původní schéma. O barvách toho zase tolik nevím, takže je možné, že se mi to zase tak nepovedlo. Ale věřím, že to není úplně špatné. Pokud jste na tom podobně, velmi doporučuji nastudovat pár zdrojů o tvorbě barevného schématu: Jak tvořit systematické barvy pro digitální produkty Funkce barev v designu 6 Simple Tips On Using Color In Your Design HSL barvy, planá naděje Pro automatické počítání tmavého režimu se jako možnost nejčastěji uvádí HSL barvy. Ty jsou vyjádřeny v modelu, kde je barva definována třemi hodnotami: Hue je úhel v kruhu barev. Hodnoty jsou v rozmezí 0–360°. Saturation je procentuální hodnota, která určuje jak moc je barva sytá. Hodnoty jsou v rozmezí 0–100%. Lightness je procentuální hodnota, která určuje jak světlá je barva. Hodnoty jsou v rozmezí 0–100%. Může se zdát, že stačí převést barvy světlého schématu do HSL… :root …a pak je automaticky překlopit do tmavého režimu tak, že invertujeme světlost: :root Vypadá to pak tak jako na obrázku: HSL by mohlo bylo super. Ale není to super. Pro některá jednodušší barevná schémata to může fungovat. Já to častečně použil například pro barev u ukázek kódu Jinde to je nepoužitelné, protože barvy vypadají špatně. Najednou máte pocitově jiné schéma než původní. Problém je totiž v tom, že HSL barvy nejsou optimalizované pro světlost vnímanou lidským okem a některé z nich prostě oku svítí více než jiné. Více o tom píše Jiří Chlebus odkazovaný výše nebo Lea Verou. V CodePenu můžete vidět, jak by to vypadalo u základních barev používaných na Vzhůru dolů: Ano, vidíte dobře. Vypadalo by to blbě. RGBa barvy Automatiky je možné občas dosáhnout i pomocí RGBa barvy. RGBa barva je vyjádřená v modelu RGB, ale s průhledností. Pokud s průhledností pracujete, můžete si do proměnné uložit právě jen RGB složku barvy: :root @media } V kódu pak uvádíte jen proměnnou a průhlednost, barva se vám mění podle použitého barevného schématu: .text Více najde v textu Theming with CSS variables in RGBA od Bence Szabo. Vyzkoušet si to můžete v mé ukázce, pokud si v prohlížeči nastavíte dark mode: V CodePenu je také vidět, že jsem se pokoušel prohlížeči barvu vnutit jako HEXa hodnotu, se kterými se mi pracuje lépe. A taky je vidět, jak jsem neuspěl. Učinil jsem také pár experimentů se osmimístným hexa zápisem, který by poloprůhlednost měl podporovat také: .text Podpora v prohlížečích už nějakou dobu je. caniuse.com/css-rrggbbaa Ale výsledek byl opět totožný se sedláky u Chlumce. Na osmimístné HEXa si prostě s autorskými vlastnostmi nepřijdete a pro dark mode zatím nejsou použitelné, viz Stack Overflow. LAB barvy, budoucí naděje Pojďme se ale od HSL přesunout k zajímavějšímu barevnému modelu – LAB. Jak můžete vidět na následujícím obrázku, zatímco u HSL je světlost vnímaná jinak, u LAB působí na naše oči podobně. Barvy LAB a dark mode. LAB je barevný model více stavěný pro lidské oko. V CSS je k dispozici jako LCH barvy. Podpora zatím není plná, ale dobrá zpráva je, že Safari už tyto barvy podporuje a Chrome se přidá ve verzi 111, takže za pár týdnů. caniuse.com/css-lch-lab Ke konverzi barev z HSL do LCH můžete použít tento nástroj. Automatický převod není vše, bez citu to nepůjde Pokud to dosud nebylo jasné, ještě to jednou akcentuji: ačkoliv kodérská čast mojí osoby by nejradši vytvářela barvy pro dark mode automaticky, realita je jinde. Musí se zde zapojit i designer nebo designerská část osobnosti. Vytvoření barev pro dark mode vyžaduje cit a znalost barev. Automatika jako HSL, LCH nebo třeba RGBa je použitelná jen v některých případech. Obrázky a logotypy Další, opět trošku nečekaný zásek, na mě číhal v případě obrázků a logotypů. Všechna tato média dosud koncipuji pro velmi světlé pozadí, ideálně bílé, a přepnutím do tmavé verze najednou začaly vypadat dost špatně. Na obrázku vidíte několik možných variant jak zobrazovat logotyp na tmavém pozadí: Logotypy v dark mode. Jednotlivé varianty z obrázku si vysvětleme: Základní verze logotypu pro světlé pozadí. Varianta logotypu pro tmavé pozadí, dle logomanuálu. Základní verze na tmavém pozadí s okraji. Jednobarevné negativní provedení logotypu. Pokud těch logotypů na webu máte hodně a zrovna tvoříte tmavý režim webu, můžete inklinovat k jednoduché variantě 3 – prostě ke stávajícím logům přidat světlé okraje. Nevypadá to ale dobře. Logotypy pak uživateli svítí do očí. Ideální je držet se varianty podle logomanuálu, takže varianty 2. Může se vám ale stát, že značka logomanuál nemá nebo je plnobarevná negativní verze pro vás nevhodná. Je možné převod logotypů do tmavého pozadí automatizovat? Ano, do určité míry to jde. Jednobarevné negativní logogypy Vezměte stávající logotyp a s pomocí CSS je upravte pro tmavé pozadí. Možnosti jsou zhruba tyto: Převod do odstínů šedi: filter:grayscale . Nemusí to ale odpovídat povoleným variantám logotypu. Odstranit bílé pozadí pomocí mix-blend-mode:multiply. Viz CodePen Ondřeje Konečného. Převést na inverzní barvy: filter:invert viz David Walsh. Jen pozor, u většiny logotypů toto změní barvy, což není ideální. Maximalizovat jas: filter:brightness . Všechny barvy v logotypu se stanou bílými. Víceméně to pak odpovídá variantě 4 podle obrázku. Toto je varianta, kterou jsem pro některé logotypy skutečně použil. Responzivní SVG je ideál Pokud máte logotypy v SVG, což doufám máte, úplně ideální varianta je samozřejmě podpora tmavého režimu přímo v SVG souboru. Jak jistě víte, SVG může být responzivní, takže podporuje i dotaz prefers-color-scheme: path @media } Tak a je to hotové. Tmavý režim je na webu: Připravte se na to, že dark mode obnáší více práce než jste očekávali. Ale myslím, že to stojí za to. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
