Humus — magazyn z podcastem, wideo i przed/po w treści

Założenie

Magazyny online rzadko są jednocześnie piękne i szybkie. Zwykle wybiera się jedno: duże zdjęcia, wideo i odtwarzacze za cenę wolnej strony albo lekką stronę bez multimediów. Humus to demo, które pokazuje, że nie trzeba wybierać.

To fikcyjny magazyn o ziemi, wodzie i czasie, wzorowany na Emergence Magazine: siedem formatów (esej, reportaż, podcast, film, fotoreportaż, wiersz, praktyka), sześć tematów i pięć palet kolorów, które redakcja wybiera do każdego tekstu. Nagłówek może być zdjęciem na cały ekran, wideo albo samą typografią.

Co redakcja wstawia do tekstu

W Sanity tekst składa się z akapitów, śródtytułów, cytatów i list oraz z 12 bloków: zdjęcia w czterech szerokościach, galerii, cytatu wyróżnionego, odtwarzacza audio, klipu wideo, porównania przed/po, sekwencji zdjęć przewijanej z tekstem, wiersza, liczb ze źródłem, osi czasu, ramki i separatora. Przypis na marginesie dodaje się jak link, do zaznaczonego fragmentu.

Pola pilnują jakości: zdjęcie bez tekstu alternatywnego, wideo bez kadru albo nagranie bez długości nie przejdą walidacji. Lista autorów i źródeł zdjęć pod tekstem układa się sama.

Podcast i audio

Odtwarzacz rysuje falę dźwięku z danych zapisanych w Sanity, więc przeglądarka nie musi dekodować nagrania, żeby ją pokazać. Ma przewijanie o 15 sekund, pięć prędkości i listę rozdziałów, które redakcja wpisuje jako czas i tytuł. Bieżący rozdział podświetla się w trakcie słuchania.

Gdy czytelnik przewinie dalej, odtwarzacz zmienia się w mały pasek przy krawędzi ekranu. Naraz gra tylko jedno nagranie, a sterowanie działa też z ekranu blokady telefonu (Media Session).

Wideo, przed/po i przypisy

Klip wideo pokazuje najpierw kadr i nie pobiera filmu, dopóki ten nie ma zagrać. Gra tylko wtedy, gdy jest na ekranie, ma przycisk pauzy i nie startuje sam przy ograniczonym ruchu, oszczędzaniu danych ani wolnym łączu. Na telefonie wideo w nagłówku czeka na dotknięcie, co oszczędza około 2 MB danych.

Porównanie przed/po to natywny suwak przeglądarki położony na obrazie, więc działa myszą, palcem, klawiaturą i z czytnikiem ekranu. Przypisy na szerokim ekranie stoją na marginesie obok zdania, a na węższym otwierają się w tekście po dotknięciu numeru, bez JavaScriptu.

Lekka strona

Każdy tekst to gotowy, statyczny HTML. Każda strona ładuje około 3 KB JavaScriptu, a skrypt bloku dochodzi tylko wtedy, gdy ten blok jest w tekście: odtwarzacz to 1,2 KB, wideo 0,7 KB.

Zdjęcia są w WebP, w rozmiarach dobranych do ekranu, z dominującym kolorem w tle, zanim się wczytają. Z listy do tekstu przechodzi się płynnym przejściem (View Transitions) bez routera w przeglądarce, a przy ograniczonym ruchu przejście się wyłącza.

Lighthouse na komputerze (pomiar z 2 listopada 2026): 100 za wydajność, dostępność, dobre praktyki i SEO, a w symulacji telefonu wydajność 99. Magazyn ma kanał RSS w każdym języku i dane strukturalne artykułów, z nagraniem przy podcastach.