Honza Javorek Honza Javorek

Týdenní poznámky: Optimalizace obrázků a Jamiroquai

Jak se mi daří v jednom člověku provozovat a rozvíjet junior.guru? Od posledních poznámek už utekl nějaký ten týden (16. 6. až 23. 6.), tak nastal čas se opět ohlédnout a utřídit si myšlenky.

Poznámky
Fotil Markus Spiske

O víkendu jsem byl s kamarády na chatě a vším, co jsem tam dělal, ať už to bylo požívání, běh, či tanec, jsem se zničil natolik, že jsem se z toho dostával až do úterního večera. Sešlo se to navíc s tím, že dceři rostly zuby, takže jsem nemohl nic v noci dospat a byla to úplná krize.

Do toho různí doktoři a jiné pochůzky. V pondělí jsem šel na první návštěvu k psychiatrovi kvůli diagnostice ADHD. Byl to fajn pokec, ale ještě budeme mít několik sezení, než vydá verdikt.

Ve čtvrtek jsme šli se ženou na Metronome festival. Cílem bylo sejít se s kamarády z Brna a vidět Jamiroquai, ale stihli jsme i Auroru a trochu Aiko. PSH jsme vzdali, protože budova, kde hráli, měla příšernou akustiku. Zvuk bolel v uších a ze slov nebylo rozumět nic, což zrovna u rapu celkem vadí.

Bylo to poprvé od narození dcery, co jsme se s manželkou takhle pozdě večer někam vypravili. Babička přijela z Moravy a statečně se pokusila o uspání dítěte, které bez nás ještě nikdy neusnulo. A povedlo se to! Nám se zase pro změnu povedlo vyhnout se nějaké té příšerné bouřce, která se řítila na Prahu z Německa.

Jamiroquai

Tím se uzavírá můj divoký červen, do něhož se mi z důvodů koordinace všelijakých termínů vložily prakticky veškeré aktivity, které jsem chtěl letos v létě dělat. Jsem z toho poměrně vyčerpaný a těším se, že budu mít konečně nějaký týden, kdy budu jen v práci nebo doma. Myslím, že junior.guru se těší taky, protože teď bylo celkem zanedbáváno 😞

Přednáška s Nelou

V úterý večer byla v klubu po dlouhé době opět přednáška. Poprvé jsem si ji chtěl vzít z nové kanceláře.

Minuty před začátkem jsem však zjistil, že byť mi jede Discord na chat, nejede mi na zvuk a video. Nepřipojí se. Naštěstí byl v kanceláři zrovna kamarád Míla s neomezeným internetem v mobilu a připojil mě přes LTE. Z toho jsem vzal nakonec celou přednášku. Co bych bez něj v tu chvíli dělal, to upřímně nevím. Takže Mílo, ještě jednou fakt díky!

Další den jsme to pak vyřešili. Discord potřebuje na volání nějaké porty, které byly blokované na místním routeru.

Nela měla pomalejší tempo vyprávění, ale jinak proběhlo všechno v pohodě. Přednáška to byla hezká, diskuze výživná. Záznam bude veřejný a dáme ho pak zase na stránku Psychika na cestě do IT, ale nejdřív musí Tinuki dokončit jeho stříhání ✂️

Nela

Optimalizace obrázků

Během týdne jsem se nepříjemně zamotal do optimalizace obrázků na junior.guru. Přemýšlím, že bych generované obrázky commitoval zpět do repozitáře, aby se tím kešovaly a nevytvářely pokaždé znova. Jednak se příliš nemění, občas akorát nějaký přibude, jednak jejich generování trvá dost dlouho.

Jenže aby nezabíraly v Gitu moc místa, chtěl jsem je mít co nejmenší. A to lze docílit jen optimalizacemi. Jde o celkem dost obrázků a bude jich jen přibývat, takže rozdíly jsou v MB, možná desítkách MB, a to už se po čase při git pull pozná.

Napadlo mě, zda bych se nemohl na všechny optimalizace vyprdnout a prostě použít třeba WebP, který má určitě vše už vyřešené. U screenshotů měl oproti JPEG celkem dobré výsledky, tak jsem to předělal. U generovaných PNG to ale nevycházelo líp a hlavně nejde WebP přetáhnout např. jako obrázek ke statusu na LinkedIn, což je pro mě problém.

Pillow má option optimize, což jsem nevěděl, napověděl mi to při psaní GitHub Copilot. Moc velkou parádu to však neudělalo.

Hodně se mi líbil pngquant v kombinaci s oxipng. Prakticky nerozeznatelné PNG mělo místo 300 kB třeba jen 70 kB. Jenže se mi nějak nepovedlo to jednoduše dostat na CI. Vyžadovalo to instalaci přes apt-get, což je vždy opruz a čas buildu navíc, a taky se mi nepovedlo najít adekvátní balíček pro oxipng. Hledal jsem, zda by to nešlo udělat nějak nativně v Pythonu a našel toto:

  • pyoxipng
  • Pillow quantize(): image.quantize(method=Image.Quantize.LIBIMAGEQUANT)
  • Omezení palety pomocí Pillow: image = image.convert('P', palette=Image.Palette.ADAPTIVE, colors=256) Jenže jak je to jen 256 barev, tak to bylo dost hnusné.

Několik dní jsem se v tom motal a zkoušel různá řešní. Ten pyoxipng mi třeba fungoval krásně lokálně, ale na CI se záhadně zasekával.

Nakonec jsem to vzdal a obrázky se generují neoptimalizované. Budu jejich velikost muset řešit jinak. Buďto je zmenším před commitem lokálně, nebo je nebudu commitovat, ale využiju třeba CircleCI cache, nevím. Každopádně mám pocit, že na to, jaká je to blbost, jsem v tom utopil strašně moc času.

Aspoň se mi povedlo na několika místech výrazně zrychlit generování obrázků i jinak:

  • Místo dočasného adresáře pro každý generovaný obrázek se používá jeden jako sdílená keš.
  • Místo toho, aby se pokaždé kompilovaly SCSS soubory a kopírovaly se fonty, děje se to jen jednou.
  • Místo toho, aby se SCSS kompilovalo ručně, pak se ručně kopírovaly fonty a přepisovaly jejich cesty, dělá to teď speciálně nastavený esbuild.

Ten poslední bod mě potrápil, protože esbuild se rozbije o relativní cesty k fontům v balíčku @fontsource/inter. Procházel jsem nějaké pluginy, ale nakonec je řešením precompile přímo v rámci SCSS pluginu:

await esbuild.build({
  ...
  plugins: [
    sassPlugin({
      precompile(source, pathname) {
        if (pathname.endsWith('@fontsource/inter/index.css')) {
          return source.replaceAll('./files/', '../../node_modules/@fontsource/inter/files/')
        }
        return source
      },
    }),
  ],
})

Taky jsem při ladění nejrůznějších problémů dost překopal jak mi funguje logging. Objevil jsem třeba record_factory, pomocí níž si loguji z jakého procesu je záznam, ale pouze pokud není v tom hlavním. Zrušil jsem logování do souboru, protože ho nepoužívám, a přidal jsem si --debug do CLI, které zapne detailnější logování.

Další

  • Pomáhal jsem PyCon CZ týmu propagovat možnost přihlásit si na letošní konferenci přednášku nebo workshop. Výzvu jsem dal do asi desítky Facebookových skupin, ale zdá se mi, že nakonec ze všeho nejvíc frčí můj status na LinkedIn. Vyhodnocuji si z toho pro osobní účely, že Facebook je už asi opravdu mrtvý.
  • Sdílel jsem status Kateřiny Lesch o tom, že byla u nás v podcastu.
  • Přihlásil jsem se na podzimní půlmaraton v Blansku a nejspíš na jednu letní šifrovačku v Brně.
  • Opravil jsem nějaké malé chybky na junior.guru. Rozbité cesty k souborům, špatně generované adresy, atd.
  • E-maily, klubový Discord, Pyvec Slack. Od dovolené jsem ještě stále ve skluzu co se týče čtení klubu.
  • Během 8 dní jsem naběhal 19 km. Celkem jsem se hýbal 3 h a zdolal při tom 19 km. Detaily na Strava, jediné sociální síti, kde si napsání statusu musíte zasloužit.

Plánuji

  1. Věnovat se v klidu rodině a práci a nic dalšího 🙏
  2. Dohnat všechny možné resty z posledních týdnů.
  3. Nějak uzavřít překopávání toho, jak se buildí frontend junior.guru.

Zaujalo mě

Když na něco narazím a líbí se mi to, sdílím to na Mastodonu. Od posledních poznámek jsem sdílel: