Deník vývoje

Doteď platilo, že co se mělo na webu změnit, musel někdo z nás přepsat v administraci. To končí. Spustili jsme sekci Správa — kapely a kluby teď mohou spravovat svůj profil samy: upravit popis, fotky, kontakty, otevírací dobu i odkazy na hudbu, a změny si rovnou publikovat. Redakce zároveň dostala nové nástroje: zakládání klubů a záznamů Hudebního adresáře přímo z webu, včetně vychytávek jako výběr GPS souřadnic kliknutím do mapy nebo hledáním adresy. A protože se adresář rozrůstá, výrazně jsme rozšířili "Specifikace" všech osmi odvětví — u zvukaře se teď dozvíte i dojezd a reference, u studia třeba software a minimální blok natáčení.

Web už dávno není jen statický magazín a seznam koncertů. Rozhodli jsme se udělat z něj domov pro celou hudební scénu. Představili jsme plnohodnotný Hudební adresář, kde najdete každé nahrávací studio, zvukaře i hudebniny. A k tomu jsme přidali možnost zakládat "Komunity", díky kterým se můžete s ostatními snadno domluvit na spolujízdě na fesťák nebo založit fanklub.

Uživatelské profily dostaly svou pravou tvář. Nasadili jsme kompletní "Mega Login" systém a umožnili vám vytvářet přátelství. Pokud vás na koncertě zaujme jiný fanoušek, můžete se přidat do přátel a psát si soukromé zprávy, nebo mu napsat veřejný vzkaz na jeho Zeď. Hudba spojuje a náš web už taky!

První ostré nasazení Příběhů a GDrive galerií ukázalo, že ďábel tkví v detailu. Upravili jsme proto logiku tak, aby byl hned jako první krok vyžadován název kapely (aby nebyly Příběhy anonymní). Taktéž jsme učesali galerie v samotných článcích a doladili ikony a rozestupy.

Víme, že ty nejlepší momenty zachycujete vy, fanoušci, přímo v kotli. Přidali jsme proto Příběhy (Stories), po vzoru mobilních aplikací. Můžete vyfotit kapelu na stagi a sdílet to s ostatními přímo na vrchu naší homepage. Současně s tím jsme poskládali úvodní stránku tak, abyste měli ihned po ruce ty nejnovější reportáže.

Sedli jsme k datům a zjistili, že občas web načítá drhnoucím způsobem na starších mobilech. Během jednoho odpoledne jsme udělali masivní audit výkonu. Zrušili jsme vizuální hračičky, co brzdily grafiku, nasadili skvělé lazy-loading načítání a odstranili blokující CSS styly. Web je odteď absolutní blesk.

Náš redakční foťák se nezastaví, ale nahrávat stovky fotek přímo do článků se dříve rovnalo noční můře. Vymysleli jsme revoluční řešení: napojili jsme náš redakční Google Disk přes API přímo do webu. Teď stačí fotky uložit tam a web si už zbytek vyřeší sám. Úplně stejně revolučně jsme přepracovali to, jak vypadají velké letní festivaly.

I drobnosti tvoří prémiový zážitek. Pohráli jsme si s navigační lištou, která je nyní prosklená (skrz ni je vidět fotka pod ní) a jakmile sjedete kousek dolů, chytne hranu a podbarví se. Vyhráli jsme si s posuvníky (Carousels), které už nedrhnou, ale lehounkým přetažením prstu se plynule svezou na další fotku.

Od začátku děláme projekt z vlastní kapsy. Pořád se nás lidi ptali, jak můžou přispět. A protože PayPal požíral obří poplatky, zahodili jsme ho a implementovali nativní QR kód generátor přímo pro české bankovnictví. Díky tomu je příspěvek otázkou pěti vteřin a my na Síni slávy můžeme ukázat, kdo že jsou naši praví hrdinové!

Náš cíl? Neudělat to jen o redakci, ale o všech lidech v plzeňském kraji. Program koncertů i klubů teď může obohatit úplně každý. Nasadili jsme samoobslužné formuláře. A to nejlepší? Když nám pošlete zprávu nebo odešlete formulář, upozorní nás to ve zlomku vteřiny přes robota rovnou na náš redakční Telegram!

Když spravujete tak gigantickou databázi, snadno do ní proklouznou "mrtvé" duše a prázdné profily. Prošli jsme všechny kapely, napojili je na oficiální Spotify API, postahovali třicetivteřinové ukázky a všechny neověřené či "hluché" profily jsme raději pro veřejnost skryli, ať vidíte jen to funkční.

Pod povrchem webu se udála revoluce s názvem Vercel. Původní serverový rendering jsme přenesli do nejmodernější distribuční sítě na světě. Tzv. Incremental Static Regeneration (ISR) znamená to, že si servery občas "předžvýkají" stovky našich profilů, a když na web pak kliknete vy, načte se to ne za vteřiny, ale v absolutních milisekundách.

Lidi se u nás chtěli nejen informovat, ale chtěli se mezi sebou propojit – kapela hledá zkušebnu, kytarista hledá band. A tak se zrodila Hudební Inzerce. A aby nás nějaký internetový zloduch nezasypal botama a nestrhl web kvůli této rychlosti updatů, zavedli jsme absolutní kontrolu kódu přes GitHub (tzv. CI/CD) a speciální captcha kódy. Do toho jsme ještě stihli obalit články na úvodu fantastickými animacemi.

Když už jsme měli data o každé kapele a klubu, chtěli jsme, aby to nevypadalo jako výpis ze Zlatých stránek. Vyvinuli jsme vizuálně nádhernou kartu "PostBoxFuture" s kouřovým podkladem a odznáčkem. Mapbox ukázal kluby v krásné barevné mapě a vyrobili jsme Paginaci (stránkování), jakou nikde jinde nenajdete.

Celý tento přepis si žádal vlastní manuál – vytvořili jsme plnohodnotný "Styleguide", který definoval každý font a každou barvu. Implementovali jsme Tmavý režim (Dark mode) jako výchozí, aby v noci nebolely po koncertech oči. A jako třešničku jsme přidali dokonale plynulý paralaxní efekt u obrovských hlaviček článků.

Zcela historicky nejzásadnější den projektu. Původní React verze webu, ačkoli na ní projekt prožil své dětství, prostě nevydržela naše plány. Proto se zrodil Nuxt. Všechno, co zde dnes čtete, bylo možné pouze díky tomu, že jsme v tento den překlopili infrastrukturu z Next.js do moderního Vue/Nuxt enginu.