Sociální média umožňují (v rámci boje o uživatelovu pozornost) postovat bohaté příspěvky. V případě Twitteru jde o tzv. Twitter Cards, které umožňují nahradit odkaz požadovanými metadaty. Mezi ně patří název, popisek a obrázek. Můžete si dokonce vybrat, jestli chcete čtvercovou ikonu nebo pořádnej 2:1 billboard. No a protože jsem attention whore , rozhodl jsem se pro ten větší formát…

Jenže se mi nechce lozit po fotobankách a hledat nějakou bechderoucí fotečku, která s mými tématy bude asi těžko souviset. Takže jsem musel vymyslet něco jinýho. Docela se mi líbí, jak na feedu vypadaj vložený prezentace ze Speakerdecku. A protože se mi vyloženě líbí, jak vypadaj moje prezentace, tak jsem se rozhodl, že to obšlehnu. Aby se na první pohled dalo poznat, že nejde o prezentaci, ale o blog, rozhodl jsem se pro jinou barvu pozadí. Ale bílá futura zůstává. :)

Tak, nápad by byl, teď už jen jak ho realizovat?

Nejprve jsem si říkal, že bych mohl udělat šablonu ve Figmě a přes jejich API generovat obrázky. Jenže se mi nechce (zatím) učit se jejich API a zavádět vzdálená volání do generátoru, když jsem se jim tak šikovně vyhnul u obsahu. Ok, tak zkusím generovat obrázky pomocí Clojure. To se mi zase nechce low level komponovat bitmapa a navíc, jak dostanu Futuru na integrační server? Přes SVGčko? Sakra…

No, jsem přece web developer. Fonty dostanu přes Typekit Adobe Fonts, stejně jako na webu. Vytvořím tedy kompozici v HTML a obrázky budu típat pomocí Puppeteera! Doplnil jsem do generátoru webu, aby připravil JSON s daty, které budu potřebovat pro generování obrázků. Pak jsem napsal script, kterej otevře stránku a ve smyčce, projde data z JSONu, vloží je do DOMu a udělá screenshot. Není to úplně nejrychlejší řešení, ale 30 s na cca 470 článků není taky úplně nejhorší čas.