Týdenní poznámky #61: Juniorka

Utekl další týden (2.8. — 6.8.) a tak stejně jako minule sepisuji, co jsem dělal a co zajímavého jsem se naučil. Především se snažím rozvíjet junior.guru. Nemám šéfa, kterému bych reportoval každý svůj krok, ale mám klub, a členy by mohlo zajímat, jestli se neflákám. Taky je to způsob, jak se sám doma nezbláznit a nepropadat pocitu, že je zase pátek a já jsem přitom nestihl nic udělat.

Poznámky
Fotka od Honzy Kahánka

Rozšiřujeme tým

Tento týden jsme společně s investorkou do našeho doposud dvoučlenného týmu vzali malou juniorku. Když jsem ji poprvé viděl, byl to nejkrásnější moment v mém životě. Strávíme teď asi hodně času jejím zaučováním, takže minimálně na několik týdnů se moje práce na JG zastaví, nebo výrazně zpomalí. Zkusím ale odpovídat lidem v klubu, to bych stíhat mohl. Aspoň budu psát kratší poznámky.

Ruka

Většina toho, co popisuji níže, se událo z kraje týdne. Po příchodu juniorky jsem neudělal už prakticky nic, ačkoliv jsem doma zatím sám. Sjíždím akorát YouTube videa o tom, jak se takové malé juniorky správně zaučují.

Styly pro obsahové stránky

Překlopil jsem do nového CSS stránky pro Zásady osobních údajů, Pravidla chování (ty jsem musel překlopit i z HTML do MkDocs), Obchodní podmínky. Chvíli jsem vymýšlel nějaký vymazlený způsob, jak udělat nadpis stránky, ale pak jsem to smazal a udělal tam prostě akorát čáru. Tyto stránky jsou předvojem toho, jak by jednou mohla vypadat příručka. Mají užší sloupec s textem, aby se to lépe četlo, a dal jsem víc prostoru mezi nadpisy druhé úrovně. Víc jsem si s tím zatím nehrál, ale neměla by to být finální podoba.

Při stylování právnických textů jsem narazil na číslování pomocí CSS, což jsem ani nevěděl že existuje, ale nakonec jsem si s tím nehrál, asi jsou na JG důležitější stránky, než text obchodních podmínek :)

Rychlost webu

Dával jsem novou stránku pro klub do Lighthousu a zkoumal chyby, abych je opravil dřív, než začnu podobné HTML a CSS používat i na zbytku webu. Hned zkraje jsem dostal velmi vysoké skóre a v podstatě nejpomalejší věcí na webu byly Google Analytics, lol.

Každopádně jsem se díval na to, jak správně použít a preloadovat fonty, protože ikony z Bootstrapu mám na webu jako font. Preloadování mi nefungovalo, dokud jsem patřičný tag nedal až za tag s připojeným CSS stylem. Nevím proč a beru to za šamanskou věc, která prostě pomohla, a kterou jsem vyčetl někde v 15. zoufalém komentáři na StackOverflow ¯\_(ツ)_/¯ Taky je blbé, že Bootstrap ten font načítá s nějakým URL parametrem zřejmě s hashem fontu, asi kvůli kešování, takže ten jsem si do HTML musel nějak načíst, abych tam mohl mít správné, plné URL toho fontu. No ale zdá se, že teď to funguje.

Další věc, na kterou jsem se podíval, byla optimalizace obrázků. Přečetl jsem si o tom něco na MDN a na Vzhůru Dolů, ale znělo to všechno komplikovaně a jako něco, co se mi řešit moc nechce. Pamatoval jsem si, že o obrázcích mluvil Aleš Roubíček na jediných Frontendistech, na kterých jsem byl osobně naživo. Přednášku jsem našel na jeho YouTubu, ale nejde tam moc vidět na slajdy, tak ty jsem si otevřel bokem ze SpeakerDecku. Uvažoval jsem původně, jestli si responzivní obrázky nepořešit nějak sám, nevygenerovat si je, atd., ale ta přednáška mě přesvědčila, že to dělat nemám a že mám použít Cloudinary.

Cloudinary vypadá jako dost složitá služba s milionem nastavení a zmateným webem i klientskou sekcí, takže jsem byl rád, že mi někdo ukázal, co mám hledat a jak to můžu použít jednoduše. Chtěl jsem se podívat, jak to používají přímo Topmonks, ale jejich web není udělaný k rozebírání, jejich HTML je v jednom řádku. Asi nic, co bych nepřekonal, jen jsem zavzpomínal na staré časy, kdy malému Honzovi stačilo zobrazit zdrojový kód stránky a Ctrl+C, Ctrl+V. Každopádně něco jsem pak vykoukal a pomohlo mi to. To, co používají a je to teda i v té přednášce, je Remote image fetch URL, což má hezkou dokumentaci, když víte, jak se to jmenuje. Sám bych to nikdy v Cloudinary nenašel, nakonec jsem byl vůbec rád, že jsem našel nastavení, jak to omezit pouze na doménu junior.guru. Pak stačilo chvilku si s tím hrát a udělat nějaká rozhodnutí ohledně toho, co vlastně chci.

Jedna věc, kterou jsem chtěl podchytit, byla fallback na můj neoptimalizovaný obrázek, pokud by Cloudinary selhalo, nebo bych byl prostě ve vlaku na špatném připojení a chtěl vyvíjet web, nebo bych chtěl načíst obrázek, který ještě není deploynutý na webu a Cloudinary si jej nemá odkud stáhnout. TopMonks mají v kódu něco jako onerror="this.onerror = null; this.src = ..., což jsem zkoušel, akorát s obrázkem z vlastního serveru, ale nefungovalo mi to. Nakonec mi zafungovalo až this.src = this.srcset = a možná by stačilo i this.srcset =.

Nakonec jsem si vytvořil tohle makro v Jinja2, které za mě všechno tohle řeší. SVG vkládám starým způsobem, bitmapy novým a s použitím Cloudinary. Musel jsem kvůli tomu překopat trochu zase makra a Markdown, abych mohl jedno makro používat v MkDocs jak v šabloně, tak v samotné stránce, kde mám Jinja2 taky.

Teď mám v tom Lighthousu fakt pěkný skóre. Kazí mi to především ty Google Analytics :D Pokud chcete Cloudinary taky použít, jděte přes tenhle odkaz, dostanu za vás nějaké dobro.

Další poznámky

  • Domluvili jsme se s Credo Ventures. Poslal jsem fakturu a nahodil logo na web. Ceník už se tak nějak ustálil a byť jej mám stále v Google Docs, položky z něj jsem si přepsal do ceníku ve Fakturoidu, ať nemusím pokaždé vymýšlet popisky na fakturu a přepisovat ceny.
  • Zapisoval jsem si feedback od lidí na novou stránku klubu, abych věděl, co musím ještě opravit a doladit.
  • Počet klubu přesáhl 200, tak jsem tuto radostnou novinu sdílel na sociálních sítích. Protože jsem tušil, že přijde juniorka, pověnoval jsem se z kraje týdne sociálním sítím celkově a naházel do fronty nějaké další statusy, hlavně upoutávky na přednášky a další tipy.
  • Zkoumal jsem, jak přesně funguje navigace v MkDocs a jak ji mohu co nejvíc využít. Překopal jsem nějaké věci a teď mám v konfiguraci navigace prakticky všechny stránky, které v MkDocs mám. Do šablony je vypisuji trochu složitěji, vyzobávám si z toho navigačního stromu vždy jen něco, ale to nevadí. V Jinja2 se dá udělat leccos, hlavně díky filtru selectattr(). Asi by to šlo předfiltrovat v Pythonu, ale teď mi to asi vyhovuje takto, stejně se to do budoucna nebude moc měnit.
  • Domluvil jsem se s Danem Srbem, že pokud nebudu moct, zaskočí u přednášek v klubu jako uvaděč a moderátor.
  • Animované podtržení části textu v záhlaví nové stránky klubu poskakovalo sem a tam, ale povedlo se mi to nakonec opravit. Bylo to chybějícím width a height v HTML u ilustračního obrázku.
  • Poslal jsem červencový newsletter.
  • Koukal jsem trochu do čísel a došla mi jedna věc. Původně jsem JG dělal tak, že příručka a rady pro juniory přitáhnou lidi, tito lidi půjdou na nabídky práce a inzerce nabídek práce mě bude živit. Teď je to tak, že lidi chodí z Googlu aj. vyhledávačů na nabídky práce, díky tomu objeví zbytek JG, příručku a rady, a díky tomu časem třeba skončí i v klubu, což mě živí. Takže úplně naopak. Vyplývá z toho ovšem, že inzeráty práce má rozhodně dál smysl rozvíjet a investovat do nich energii a čas, a to nejen proto, že je to samozřejmě velmi užitečná služba pro juniory. Je to i nečekaně silný SEO nástroj, který na web dostává spoustu lidí.
  • V souvislosti s předchozím bodem mě napadlo, že má možná Google rád moje inzeráty, protože jsem před časem všude natlačil sémantické značení, které se Google botovi mocinky líbí, ale kdo ví.
  • Během 7 dní od 31.7. do 6.8. jsem při procházkách nachodil 4 km. Celkem jsem se hýbal 2 hodiny a zdolal při tom 4 kilometry.

Co plánuji

Dvě věci, které bych chtěl zvládnout udělat příště:

  1. Zaučovat juniorku.
  2. Zvládnout v klubu přednášku s Petrem Viktorinem a propagovat další přednášku, s Ivanou Hučkovou.

A co vy?

Pokud byste čistě náhodou měli dojem, že jste oproti mě za uplynulý týden vůbec nic nestihli, tak mám pro vás skvělou zprávu! V klidu se na ten dojem můžete vykašlat. Není zač!

Co mě zaujalo

Když si něco přečtu nebo poslechnu a líbí se mi to, sdílím to na Pocketu. Od posledních poznámek jsem sdílel toto:

Vygenerováno pomocí pocket-recommendations.