Od dziś bestes-wetter.de działa produkcyjnie – moja druga witryna w rodzinie CARECOM i świadomy kontrast wobec świata doradztwa i fotografii tutaj, na carecom.de. Rzecz dotyczy tego, co na zewnątrz: dalekich wędrówek, jak przejście przez Alpy z Garmisch do Sterzing, miast zwiedzanych pieszo oraz sprzętu, który pochodzi nie z folderu, lecz z gór. Ambicja zawarta jest już w haśle: uczciwie przetestowane, starannie udokumentowane.
Ponieważ jest to strona architekta i programisty oprogramowania, chcę opowiedzieć nie tylko o tym, co powstało, ale też rzucić kilka spojrzeń na to, jak. Pod maską to aplikacja Blazor Web App na .NET 10 – renderowana po stronie serwera, z interaktywnymi wyspami tam, gdzie się to opłaca – ale spokojnie, nie będzie to white paper.
Jedna baza dla wielu witryn
bestes-wetter.de stoi na tej samej podstawie co carecom.de – na wspólnej bibliotece Razor Class Library, którą wyodrębniliśmy podczas budowy carecom.de. Baner cookie, wielojęzyczność, zestaw narzędzi SEO z mapą witryny i hreflang, wysyłka poczty przez MailKit: wszystko to leży w jednym miejscu i jest jedynie na nowo ubierane dla każdej witryny. Obecnie ta baza nosi już kilka siostrzanych witryn – każda nowa powstaje szybciej niż poprzednia, a jedno ulepszenie fundamentu przynosi korzyść wszystkim naraz. Właśnie dlatego opłaca się czysty rozdział fundamentu od fasady.
Treść pomyślana jako dane
Relacja z trasy to coś więcej niż ciągły tekst. Ma etapy, przewyższenia, trasę, datowane zdjęcia i tu i ówdzie poradę dotyczącą sprzętu. Dlatego każdy artykuł leży jako lekki plik metadanych XML obok czystego tekstu Markdown. Tekst renderowany jest przez Markdig, rozszerzony o własne bloki kontenerowe: :::leg dla etapu wraz z dystansem, profilem wysokości i mapą, :::product-card dla rekomendacji sprzętu, :::pros-cons dla uczciwego rozważenia. Pisanie pozostaje blisko czystego tekstu, a efekt mimo to jest ustrukturyzowany i czytelny maszynowo. A ponieważ tekst artykułu nie zmienia się już w czasie działania, każda treść jest parsowana dokładnie raz, a gotowy HTML jest następnie serwowany z pamięci podręcznej.
Mapy i obrazy, które trzymają tempo
Trasy chcą być widziane na mapie. Zajmuje się tym Leaflet – ale nie w głównym pakiecie, lecz ładowany na żądanie, gdy tylko strona rzeczywiście zawiera mapę. Biblioteka jest hostowana samodzielnie na własnym serwerze, a inicjalizacja zaczepia się nie tylko o pierwsze załadowanie strony, ale też o Enhanced Navigation Blazora – dzięki czemu mapy pojawiają się niezawodnie również po kliknięciu w obrębie aplikacji. Przy zmianie strony osierocone instancje map są ponownie sprzątane; w przeciwnym razie Leaflet pozostawia po sobie nasłuchiwacze resize i pętle animacji, które później wchodziłyby w drogę.
Zdjęcia z kolei istnieją w kilku rozdzielczościach jako WebP i są serwowane przez srcset, tak aby smartfon nie pobierał wariantu desktopowego. Zanim pojawi się ostry obraz, maleńki, rozmyty podgląd trzyma jego miejsce – zdjęcie wtapia się miękko, zamiast wyskakiwać gwałtownie. Drobiazgi, które razem czynią różnicę między „ładuje się" a „po prostu jest".
Dwa języki od samego początku
Witryna mówi po niemiecku i angielsku, i to nie jako doklejony później dodatek. Teksty interfejsu leżą jako XML i są przez generator źródeł Roslyn odlewane podczas kompilacji w bezpieczny typowo kod C# – każdy klucz tekstowy staje się w ten sposób właściwością, a literówka wychodzi na jaw już przy kompilacji, a nie dopiero u odwiedzającego. Na zewnątrz odpowiednie sygnały hreflang mówią Google, by rozpoznawał wersję niemiecką i angielską jako równorzędne rodzeństwo, a nie brał ich za zduplikowaną treść.
Rekomendacje, które linkuje renderer
Niektóre rekomendacje sprzętu zawierają linki partnerskie – otwarcie zadeklarowane. W Markdownie znajduje się tylko neutralny względem źródła symbol zastępczy jak amazon:<id-produktu>; dopiero przy renderowaniu ArticleRenderer zamienia go w gotowy link partnerski, wraz z rel="sponsored" i celem w nowej karcie. Korzyść jest własnej roboty: kto pisze tekst, nie musi zajmować się parametrami śledzenia, a zmiana partnera to kwestia konfiguracji, a nie szukania-i-zamieniania przez wszystkie artykuły.
Zajrzyj koniecznie
Najprzyjemniej oczywiście doświadczyć tego wszystkiego na samej rzeczy. Każdy, kto ma ochotę na góry, miasta i dobrze udokumentowany sprzęt, jest serdecznie zaproszony na bestes-wetter.de. A kto chciałby wiedzieć, jak taką stronę można zrealizować dla własnego przedsięwzięcia: właśnie po to jest CARECOM Consulting.