UIT VANDAAG · TECHNIEK

Een agenda die bleef groeien

Uit Vandaag Twente-logo

VAN PERSOONLIJKE VRAAG NAAR DAGELIJKSE TOOL

Niet dubbel boeken, wel alles zien.

Uit Vandaag begon als een praktische oplossing voor een herkenbaar probleem: concerten, lokale evenementen en FC Twente-wedstrijden stonden verspreid over verschillende agenda’s. De eerste versie bracht die informatie samen voor Ronald Punt. Daarna kwam er bijna dagelijks iets bij, telkens vanuit een concrete vraag die tijdens het gebruik ontstond.

Start
31 juli 2026, als persoonlijke Twentse uitagenda.
Ritme
Automatische vernieuwing iedere zes uur, plus een wekelijkse e-maildigest.
Bereik
Concerten, cultuur, lokale evenementen, feestdagen en FC Twente in één tijdlijn.
Principe
Bronnen blijven leidend. Deze app helpt kiezen en plannen, niet gokken.

KORTE GESCHIEDENIS

Elke gebruiksdag leverde een volgend detail op

De eerste bouw bracht de evenementenbronnen, de agendaweergave en de iCalendar-download samen. Kort daarna kwamen betere filtering, een suggestieformulier, privacy-instellingen en een progressieve agenda die niet alles in één keer hoeft te laden.

Daarna werd de app steeds persoonlijker én robuuster: muzieksmaaktips uit een lokale bibliotheek, ticketlinks, een mobiele scrollervaring, maand- en jaarselectie, een Nederlandstalige e-maildigest en duidelijke podiumkleuren voor Metropool, De Cactus, Oogst en FC Twente.

Op 9 augustus 2026 kwam een praktische gebruikslaag erbij: deelbare filters in de URL, duidelijke agenda-acties voor één evenement en voor de volledige feed, een privacyverklaring, een pauzeknop voor de locatiecarrousel en een skiplink. Ook zijn de datums en tijden expliciet op Europe/Amsterdam afgestemd; importeurs bewaren echte UTC-tijden en behandelen bron-tijden niet stilzwijgend als UTC.

De technische opbouw

Docker Oracle Cloud OpenAI Codex Python

Veiligheid en betrouwbaarheid

Externe links worden beperkt tot HTTP(S), gescrapete tekst wordt als tekst gerenderd en de server stuurt onder meer CSP-, HSTS-, anti-framing- en no-sniff-headers. Het suggestieformulier valideert invoer, origin, tokens en aantallen. De verzendwebhook vereist een Bearer-token. De container draait als een eigen, niet-rootgebruiker.

Een kleine persoonlijke app hoeft niet zwaar te voelen. Wel moet hij veilig genoeg zijn om elke dag zonder gedoe zijn werk te doen.

Controle op 9 augustus 2026

Na de productie-uitrol is de publieke homepage getest met Lighthouse op een mobiel profiel: performance 99, toegankelijkheid 100, best practices 100 en SEO 100. SEOmator beoordeelde de technische basis en core SEO beide met 100; de totaalscore was 97 door optimalisatiekansen rond de grote vooraf gerenderde agenda, DOM-omvang en LCP-hints. De pagina is daarnaast geopend in Chrome op een Pixel 9-emulator met Android API 35.

Hulp bij het bouwen

Deze app is gebouwd en doorontwikkeld door Ronald Punt, met hulp van OpenAI Codex 5.6. Voor de interfaceontwikkeling is ook gebruikgemaakt van de open-source Impeccable-designguidance van Paul Bakus ↗. De keuzes over inhoud, functionaliteit en publicatie blijven bij Ronald.

Dit document blijft meebewegen

Bij elke wezenlijke wijziging aan functies, architectuur, databronnen, e-mail, deployment of beveiliging wordt deze pagina bijgewerkt. Zo blijft niet alleen de agenda actueel, maar ook het verhaal achter de techniek.

VERSIEGESCHIEDENIS

Wat er veranderde

  1. Lightbox beeldvullend en concertdatum gecontroleerd

    De lightbox toont foto’s nu beeldvullend op telefoon en desktop, met veegbewegingen om door het album te bladeren en het alvast laden van de buren. De tekst over Simple Minds in het Amsterdamse Bos is gecontroleerd aan de hand van concertarchieven en setlist.fm: het concert was op 10 juni 1986, met Simply Red en Ten Ten in het voorprogramma. Gun, in 1987 opgericht, kan daar dus niet bij zijn geweest.

  2. Agenda laadt door tijdens het scrollen

    De agenda toont nog steeds het aantal zichtbare plannen (“60 van 657 plannen zichtbaar”), maar laadt het volgende blok nu automatisch zodra de bezoeker dicht bij het einde van de lijst komt. Dat gebeurt met een IntersectionObserver die ruim vóór het einde ingrijpt, zodat er geen wachtmoment is. De knop “Toon volgende plannen” blijft als terugval voor browsers zonder die functie en voor toetsenbordgebruikers. Het bijschrift bij de Bitter Sweethearts-foto is gecorrigeerd.

  3. Foto’s, responsive afbeeldingen en een lightbox

    De pagina Muzieksmaak is geïllustreerd met eigen foto’s: een fotoalbum met 21 beelden van Simple Minds in het Amsterdamse Bos (1986) tot de Reggaeweide op Zwarte Cross (2026), plus losse illustraties bij de muzieklijnen. Bijschriften met plaats en datum komen uit de bestandsnamen en de EXIF-gegevens. Het script build_photos.py zet de originelen (JPEG, tot 24 megapixel) om naar WebP in drie breedtes (480, 960 en 1600 pixels, nooit opgeschaald); de pagina gebruikt overal srcset en sizes zodat een telefoon geen schermvullend bestand ophaalt, met vaste breedte en hoogte tegen verspringende lay-out en loading="lazy". Een klik opent een lightbox op basis van het native dialog-element, met pijltjestoetsen, Escape en focusherstel; zonder JavaScript opent de link gewoon het grote WebP-bestand. De originelen blijven buiten de Docker-image. Dezelfde foto’s en lightbox illustreren ook de pagina Disclaimer (Oogst, Metropool, De Cactus en een vrijwilligersportret); de ideeënbus-link daar verwijst nu naar Contact.

  4. Live-ervaringen op Muzieksmaak

    De pagina Muzieksmaak toont nu naast de muzieklijnen ook mijn eerste live concert (André Hazes, circa 1982, uit persoonlijke herinnering) en een greep uit mijn top concerten, van Pink Floyd in De Kuip tot Paul McCartney op Rock Werchter. De volle breedte van de nieuwe pagina’s Contact en Eredivisie is daarbij rechtgezet.

  5. Rustiger beginscherm met eigen pagina’s

    De voorpagina eindigt nu bij de agenda zelf: de footer is vervallen, zodat het stapsgewijs tonen van plannen niet langer wordt onderbroken door een lange reeks blokken eronder. Het suggestieformulier en de footertekst (over de agenda, disclaimer, privacy, privacy-instellingen en verwante projecten) staan op de nieuwe pagina Contact. De Eredivisie-stand is verhuisd naar een eigen pagina, die bij een mislukte opvraag nu een duidelijke melding toont in plaats van stilletjes te verdwijnen. Beide pagina’s staan in het menu, de sitemap en de offline app-shell. Ook het blok over de bewuste, persoonlijke selectie (bronnen, verversing en dubbele evenementen) staat nu op Contact; het tijdstip van de laatste verwerking wordt daar bijgewerkt. De formulierlogica zit voortaan in een eigen script, zodat de agenda-JavaScript alleen op de agenda draait. Stylesheet-, script- en service-worker-versies zijn vernieuwd.

  6. Offline compleet en persoonlijke festivaldata

    De techniekpagina zit nu in de offline app-shell. De deduplicatie behandelt De Cactus voortaan, net als Metropool en Oogst, als vertrouwde bron bij kleine titelverschillen met lagere-prioriteitsvermeldingen. Lowlands (20–22 augustus) en Zwarte Cross (15–18 juli) zijn als meerdaagse persoonlijke festivals voor 2027 toegevoegd; Oktoberfest München houdt daarbij eveneens een correcte meerdaagse iCalendar-einddatum. Meerdaagse items verschijnen op elke dag van het evenement in zowel de vooraf gerenderde als interactieve agenda. Feestdagen blijven op dezelfde dag vóór deze lage-prioriteitsitems staan. De officiële festivaldata staan op de twee-maandelijkse onderhoudslijst. De muzieksmaak is aangevuld met Bob Marley & The Wailers, Madness, The Specials en UB40.

  7. Leesbaarheid op Windows aangescherpt

    De doorlopende tekst op deze technische pagina gebruikt nu een Windows-vriendelijke systeemletter in plaats van de compacte interfaceletter. Koppen houden hun bestaande karakter, terwijl lange uitleg en de versiegeschiedenis rustiger en consistenter leesbaar blijven in Edge.

  8. Logo als vaste route naar de agenda

    Ook op Muzieksmaak, Techniek, Disclaimer en Privacy is het logo nu een link naar de agenda.

  9. Agenda altijd binnen handbereik

    Het beeldmerk bovenaan is nu een directe link naar de agenda. De aparte Type-filter is verwijderd; zoeken blijft beschikbaar voor vrije zoektermen, naast datum, plaats, maand, jaar en de snelle selectieknoppen.

  10. Metropool-podia en rustigere acties

    De Metropool-bron leest nu ook het specifieke podium uit de evenementpagina, zoals Muziekcafé, Saxion Stage, OOGST of Openluchttheater. De verwerking haalt die onafhankelijke detailpagina’s beperkt parallel op, met retries bij tijdelijke bronfouten. Op de agendakaarten zijn Info en Tickets gegroepeerd als hoofacties; Delen, Favoriet en Agenda staan eronder als rustige hulpfuncties. De snelle filters breken voortaan af naar een volgende regel in plaats van een horizontale scrollbar te tonen. De service-worker- en stylesheetversies zijn daarbij vernieuwd, zodat bezoekers de aangepaste interface direct ontvangen.

  11. Favorieten, vanavond, RSS en de Eredivisie-stand

    Elk plan heeft nu een sterretje om het te bewaren als favoriet, met een eigen filter die de selectie in de URL deelt. De nieuwe filter Vanavond toont alleen plannen die vandaag na 18:00 beginnen. Een compacte tabel met alle achttien Eredivisie-teams — inclusief gespeeld, winst, gelijk, verlies, punten, doelpunten voor en doelpunten tegen — staat sinds 14 oktober 2026 op een eigen pagina. Op desktop splitst de tabel zich in twee kolommen met een zichtbare scheidingslijn, op mobiel in één kolom. FC Twente is in elke kolom uitgelicht en de stand wordt via de sleutelloze ESPN-API bijgewerkt. De agenda is daarnaast als RSS-feed beschikbaar op /feeds/agenda.xml voor feedlezers en nieuwsapps.

  12. Weer per dag en verfijnde kop

    De dagkoppen tonen nu kort het verwachte weer voor Twente via Open-Meteo, zonder API-sleutel. De muzieksmaak en het bijbehorende matchbestand zijn uitgebreid met klassieke rock, metal en elektronica, waaronder The Rolling Stones, Jimi Hendrix, CCR, The Who, Depeche Mode, Sepultura, Iron Maiden, Cypress Hill, Faithless, The Chemical Brothers, Front 242, Foo Fighters en Nirvana. Het foutieve bandvoorbeeld 074 is van de pagina Muzieksmaak verwijderd. De menuknop en themaschakelaar bovenaan vormen nu één bedieningscluster met een zon/maan-pictogram, een subtiele animatie bij het openen van het menu en zachte themaovergangen. De hamburger vervormt daarbij in SVG-lijnen naar een kruis, geïnspireerd op de menu-animaties van Tamino Martinius.

  13. Betere planning, toegankelijkheid en prestaties

    Filters zijn deelbaar via de URL, de volledige iCalendar-feed kreeg duidelijke download- en abonnementsacties, en tijden worden consequent in de tijdzone van Amsterdam getoond. Er kwamen een privacyverklaring, skiplink en een pauzeknop voor de locatiecarrousel. Assets en HTML kregen passende cacheheaders en ETags; de ICS-feed gebruikt nu het juiste kalender-contenttype. De publieke site is gecontroleerd met Lighthouse, SEOmator en Chrome op Android.

  14. Muzieksmaak, leesbaarheid en navigatie

    De muzieksmaak is aangevuld met Live, Rage Against the Machine, Moloko, Faithless en klassieke rockacts. 074 is gecorrigeerd naar de voormalige Hengelose discotheek, niet een band. Actie- en deelknoppen kregen betere contrasten op gekleurde agenda-items. Ook is een toegankelijke hoofdmenu-knop toegevoegd. Duitse schlagers zijn als expliciete uitzondering toegevoegd vanwege het vierde Oktoberfest-bezoek in München. De overbodige teruglink is verwijderd nu het hoofdmenu overal beschikbaar is.

  15. Persoonlijke context en vindbaarheid

    De pagina Muzieksmaak kreeg een duidelijke toelichting op de concerttips. De agenda werd vooraf gerenderd voor betere vindbaarheid, terwijl filters en persoonlijke aanbevelingen interactief bleven.

  16. Betere service en robuustere verwerking

    De wekelijkse digest, suggesties en foutafhandeling zijn aangescherpt. De agenda behoudt bij tijdelijke bronproblemen de laatst bekende, bruikbare gegevens.

  17. Privacy en vertrouwen

    Privacy-instellingen, toestemming voor statistieken, disclaimer, beveiligingsinformatie en toegankelijke hulpteksten zijn toegevoegd. Daarmee werd de persoonlijke agenda ook transparanter in gebruik.

  18. Plannen en personaliseren

    Zoeken, datum- en maandfilters, iCalendar-downloads, thema-voorkeuren en de mobiele agendaweergave maakten de eerste versie praktischer voor dagelijks gebruik.

  19. De eerste agenda

    Uit Vandaag Twente ging van start als persoonlijke agenda voor concerten, lokale evenementen, feestdagen en FC Twente. Bronnen werden samengebracht in één tijdlijn, met een iCalendar-feed om afspraken niet dubbel te plannen.