Okładka pokazuje
prawdziwy projekt

Koncepcje odeszły, gdy przyszła prawdziwa praca

We wczesnych wersjach strony głównej były karty koncepcji z okładkami od AI i etykietą „Koncepcja · nieopublikowana”. W ciągu tygodnia wszystkie trzy miejsca zajęły opublikowane projekty, a każda karta pokazała ilustrację z własnej strony projektu: kota z warsztatu Piaskot, kursor PPC4.biz i Archiego z KotoHosting.

Wygenerowana scena przedstawiona jako prawdziwy projekt obiecywałaby coś, co nigdy się nie wydarzyło. Wygenerowane obrazy wciąż mają tu swoje miejsce: wspólny portret na stronie „O nas” to scena od AI i podpis to mówi.

Okładka mówi językiem czytelnika

Kilka dni później strona realizacji stała się jedną siatką jednakowych kart, a każda okładka — zrzutem pierwszego ekranu działającej strony. Wiele z tych stron ma kilka języków, więc czytelnik widzi wersję najbliższą swojej: angielską na angielskiej stronie, polską, a gdy jej nie ma — angielską na polskiej, ukraińską na ukraińskiej. Rosyjskiej — nigdy, nawet jeśli strona wciąż ją ma.

Na karcie wystarczą do tego dwa atrybuty. data-src-uk lub data-src-pl wskazuje inny zrzut, data-href-uk lub data-href-pl — inny adres. Skrypt budujący wpisuje je do gotowego HTML każdego języka. W plikach źródłowych i w kopii offline to samo robi kilka linii JavaScriptu.

<img src="assets/img/work-kotohosting-en.webp" data-src-uk="assets/img/work-kotohosting.webp" …>
<a class="text-link" href="https://kotohosting.com/en/" data-href-uk="https://kotohosting.com/" …>

Strona w jednym języku nie potrzebuje niczego więcej: jeden zrzut i jeden adres służą wszystkim trzem wersjom naszej strony.

Zrzut jednym wywołaniem DevTools

Niczego do tego nie instalujemy. Edge lub Chrome działa bez okna, a tools/shoot-cover.cjs rozmawia z nim przez protokół DevTools ze zwykłego Node.js: od wersji 22 Node ma wbudowane fetch i WebSocket.

Strona otwiera się w oknie 1440 × 960 — w tych samych proporcjach 3:2 co nasze karty. Potem przeglądarka zapisuje ekran od razu do WebP i tym samym wywołaniem pomniejsza go o jedną trzecią, więc okładka 960 × 640 powstaje bez żadnej biblioteki do obrazów.

await send('Emulation.setDeviceMetricsOverride', { width: 1440, height: 960, deviceScaleFactor: 1, mobile: false });
// Entrance animations settle into their final state instead of being caught halfway.
await send('Emulation.setEmulatedMedia', { features: [{ name: 'prefers-reduced-motion', value: 'reduce' }] });
await send('Page.navigate', { url });
await loaded();
const shot = await send('Page.captureScreenshot', {
  format: 'webp', quality,
  clip: { x: 0, y: 0, width: 1440, height: 960, scale: 2 / 3 },
});

node tools/shoot-cover.cjs "https://koto-e.com/?nocache=1" assets/img/work-kotoecom.webp

• Dodaj jednorazowy parametr w rodzaju ?nocache=1: cache na serwerze lub w CDN może oddać starą wersję strony, a nieaktualny zrzut łatwo przeoczyć.
• Pilnuj wagi. Nasze okładki ważą około 40–47 KB. Fotograficzny pierwszy ekran przy jakości 82 miał 70 KB, więc zeszliśmy do 74 i 56 KB.
• Podmieniona okładka dostaje nową nazwę pliku. Obrazy są cache’owane na 30 dni, a skrypt budujący nie zmienia ich nazw.

Gdy nie ma jeszcze strony do pokazania

Nasza wtyczka do WooCommerce, Koto Shop, nie ma jeszcze publicznej strony. Jej karta dostała więc okładkę złożoną: dwa telefony z prawdziwymi ekranami zamówień wtyczki, zrobionymi na lokalnym stanowisku testowym z wymyślonymi zamówieniami, i Kotkę, która przygląda się z prawej.

Uczciwość opiera się tu na dwóch szczegółach. Ekrany pochodzą z wtyczki; ukryto tylko komunikat WordPressa o aktualizacji, bo nie jest częścią wtyczki. A karta nie udaje, że gdzieś prowadzi: zamiast linku mówi, że wersja publiczna jest w przygotowaniu.