Alpine Darkmode Switcher

#dev

Ik heb al met diverse darkmode varianten op deze website geëxperimenteerd, maar voor deze recente versie had ik dit nog niet toegevoegd. Ik wilde graag een switch maken waar je als gebruiker ook zelf kunt kiezen welk thema je wilt tonen. Natuurlijk wilde ik dit doen in Alpine.js, maar het was er nog niet van gekomen. Tot dit weekend. Er staat nu een schattig lampje rechtsboven in de headerbalk.

Dit is de basis waarmee ik de waarde van de selectbox preference kan toevoegen aan de localstorage.

<div x-data="{ preference: localStorage.getItem('theme') }"
    x-init="$watch('preference', (val) => localStorage.setItem('theme', val))">

  <select x-model="preference">
    <option selected value="system">System Preference</option>
    <option value="light">Light Theme</option>
    <option value="dark">Dark Theme</option>
  </select>
</div>

Deze waarde wilde ik gebruiken als data-theme voor de html. In bovenstaand voorbeeld plaatste ik een div voor de select met onderstaande code:

<div data-theme="system" x-bind:data-theme="preference"></div>

Dit werkte perfect, maar ik liep al direct tegen een kleine uitdaging aan. Ik wilde bovenstaande oplossing niet toepassen op een div, maar op de html zelf. Hiervoor heb ik één regel aan $watch functie toegevoegd.

<html data-theme="system">
  <div
    x-data="{ preference: localStorage.getItem('theme')}"
    x-init="
      $watch('preference', (val) => {
        localStorage.setItem('theme', val);
        document.documentElement.setAttribute('data-theme', preference);
      });
    "
  >
  ....
  </div>
</html>

Nu was ik er bijna. Ik zag alleen in sommige situaties een kleine flash verschijnen. Na wat blogs te hebben gelezen, kwam ik uiteindelijk via Max Bock bij de oplossing. Hij had hetzelfde probleem (FODT) en plaatste hiervoor onderstaande regel net voor het sluiten van de </head>:

<script>
  localStorage.getItem('theme') &&
  document.documentElement.setAttribute('data-theme', localStorage.getItem('theme'))
</script>

Nu was het technisch helemaal naar wens en ben ik begonnen met stylen. Dit is met tailwind ook prima te doen. Zodra ik de opbouw hiervan wat netter heb uitgewerkt zal ik dit ook delen.

Ocean of Darkness

#muziek

Wauw, wat een heerlijke track heeft The War on Drugs afgelopen week tijdens The Tonight Show van Jimmy Falon gespeeld. Ik heb ze twee keer live mogen zien. Het was twee keer magisch. Daarna was ik wel een beetje WoD moe. Waarschijnlijk iets te veel naar geluisterd, maar dit is toch wel weer genieten:

Oja... en er komt een live album aan 🎉

De Giro haalt Milaan. En hoe! ✨

#wielrennen
afbeelding van

De Giro in oktober. Kan de mooiste ronde ook in deze drukke wielermaand weer voor een sensatie zorgen? Gaat de Giro Milaan wel halen nu de corona besmettingen weer oplopen? Het antwoord is één hele grote JA.

De EF Cycling Ducks kregen in de eerste dagen van de Giro alle ogen op zich gericht door de bijzondere outfits. Rapha en Palace hadden een creatieve chaos gecreëerd. Op het eerste gezicht zagen de tenues er eigenlijk niet uit, maar na een weekje was iedereen er aan gewend en werd het een ware hype. Er kwam een enorme run op de exclusieve, limited tenues. Ook de off-bike kleding was trouwens erg vet (maar ook heel duur).

In de eerste week werd ook vooral duidelijk dat Kelderman in topvorm was. Kruijswijk moest helaas wel een paar keer lossen en een goed klassement rijden zou lastig worden. Er vielen veel klassementsrenners uit (Lopez, Vlasov, Thomas). Na de eerste rustdag moest ook Yates de Tour verlaten. Yates was positief getest. Hij was helaas niet de laatste. Uiteindelijk trekken heel Jumbo-Visma en Mitchelton-Scott zich terug uit de giro ivm positieve besmettingen. Het is billen knijpen voor de wielerwereld en de supporters. Gaan we nog wel in Milaan komen? Nadat er ook nog een heel zwikje agenten positief wordt getest hoor ik een interview met Thomas de Gendt die zich niet meer prettig voelt en zich openlijk afvraagt of het wel verstandig is om nog te starten.

In de derde week gaat de aandacht weer volledig naar de koers. De jonge Almeida rijdt lang in het roze, maar het lijkt er voor Wilco steeds rozekleuriger (ghehehe) uit te zien. Hij lijkt de allersterkste klimmer van de klassementsrenners en kan in het hooggebergte die op het programma staan de trui proberen te veroveren. Het tijdperk Nibali lijkt toch ook echt wel afgelopen te zijn. Het zijn de jonkies die ook in de Giro uitblinken.

Donderdag begint het vuurwerk uiteindelijk op de Stelvio. Het wordt een superspannende dag waarin heel veel gebeurd. Hoofdrolspeler van de dag is uiteindelijk Rohan Dennis. Hij rijdt iedereen eraf op de Stelvio. Ook Kelderman kan niet volgen en moet eigen tempo gaan rijden. Alleen Hindley kan Tao Geoghegan Hart en Dennis op kop volgen. Sunweb moet snel beslissen of Hindley mee mag of Kelderman moet blijven ondersteunen. Ze kiezen niet en laten Hindley rijden. Kelderman verliest veel tijd, maar houdt wel net genoeg marge over om de roze trui aan het eind van de dag aan te mogen trekken. Wat was dit spannend!

Vrijdag stond een etappe van 258km op het programma, maar hier had alleen de koersdirecteur zin in. De etappe wordt ingekort.

Zaterdag moet Kelderman zijn trui nog verdedigen op de laatste bergrit. Ineos herhaalt het succesvolle ‘kunstje’ van donderdag en speelt de Rohan Dennis kaart bij de eerste beklimming. De superbenen van Wilco lijken op en kunnen niet meer volgen. Hindley is de enige die opnieuw kan volgen. Hindley en Tao staan op seconden bij elkaar, maar Hindley is de mindere tijdrijder. Op 4 km voor de finish probeert hij nog weg te rijden, maar Tao zit vol zelfvertrouwen in het wiel. Hij is enorm sterk en de Rohan Dennis coupe heeft hem heel goed gedaan. Hindley mag wel het roze aantrekken op de een na laatste dag.

Jai en Tao staan op de laatste dag in Milaan voor de tijdrit precies op dezelfde tijd. Tao is op papier de betere tijdrijder en moet dit kunnen afmaken, maar je weet maar nooit. Wilco mag eerst starten en rijdt een prima tijdrit waarmee hij zijn podiumplek veilig stelt. Derde in een grote ronde is iets om ook heel trots op te zijn. Wilco heeft een hele goede Giro gereden. Jai kan in de tijdrit ook niet boven zichzelf uitstijgen en moet genoegen nemen met een knappe tweede plaats in het algemeen klassement. Sunweb met twee man op het podium. Maar de hoogste podium plek gaat naar Tao Geoghegan Hart, een jonge Brit van 25 jaar, die doet wat hij moet doen en een veel snellere tijdrit rijdt als Jai. Wat een spektaculaire week. Op naar de Vuelta die al weer een kleine week bezig is. Lekker maandje dit zo.

LouLou wint La Doyenne... of toch niet 😜

#wielrennen
afbeelding van

Het was een heerlijke sportzondag met als toetje een spectaculaire finale om u tegen te zeggen in de klassieker Luik Bastenaken Luik. Matthieu van der Poel kon helaas niet mee en zat vlak achter de koplopers in de achtervolging. De smaakmakers van de Tour: Pogacar, Roglic, Hirschi en Alaphilippe mogen het met elkaar gaan uitvechten in de laatste kilometers. En Hoe!!!!

Het werd de finale die Hirschi eigenlijk zou hebben gewonnen. Maar door een gekke manoeuvre schiet hij uit zijn pedaal en verliest daardoor evenwicht en snelheid om verder te sprinten. Het werd ook de finale die Alaphilippe denkt te gaan winnen. De handen gaan van het stuur. Alaphilippe gaat rechtop zitten en steekt zijn handen in de lucht. Maar, terwijl Loulou juicht, zet Roglic zijn fiets net als eerste over de streep en wordt hij de winnaar van La Doyenne 2020.

Hoofdfoto credit: ASO/Thomas Maheux

Kijk nog een keer mee naar deze ontknoping:

Kat in het bakkie... of toch niet

#wielrennen
afbeelding van

Vandaag rijdt het peloton over des Champs-Élysées. Dat het hele wielercircus Parijs heeft gehaald is eigenlijk al een wonder. Sommige dagen stond het langs het parcours zwart van de mensen. Ondertussen stegen in Frankrijk de corona-besmettingen in een recordtempo. De besmettingen in de teambubbels bleven gelukkig uit. Geen enkele renner testte positief. Enkel tourbaas Prudhomme moest na de eerste rustdag een week in quarantaine.

De Jumbo trein was heer en meester toen Roglic na etappe 9 de gele trui al mocht aantrekken. Klassementrenners waren in de bergetappe’s blij als ze konden volgen. Een spektakel van aanvallen bleef hierdoor uit. Er werd gekoerst om geen tijd niet te verliezen. Langzaam werden ze allemaal naar de klote gereden. Gesink sleurt het peloton op kop als we omhoog de bergen in rijden. Wout van (Buiten)Aert(s), de alleskunner, houdt Roglic uren uit de wind, maar heeft ook nog de power om twee etappes (etappe 5 en 7) op zijn naam te schrijven. Wat een machine!!! Tom Dumoulin moest in de eerste week op een klim lossen. Hij besloot niet meer voor zijn eigen klassement te gaan en in dienst van Roglic te gaan rijden. Het bleek de juiste keus. Zijn ogen glinsterden weer van koersvreugde en hij werd de ideale superknecht voor in de bergen. Alles liep op rolletjes. Het kon eigenlijk niet meer mis gaan. Jumbo Visma domineerde de koers dagelijks, maar er zat wel altijd een wit truitje met rugnummer 131 voorin.

Pogacar (21 jaar), niet moe te krijgen, verliest in de waaieretappe (etappe 7) bijna anderhalve minuut. Direct de volgende dag neemt hij revanche en demarreert op de Peyresoude. Pogacar verkleint direct zijn achterstand met 40 seconden. De dagen daarna blijft hij (bonus)seconden sprokkelen van zijn achterstand en wint hij ook nog een etappe. Pogacar koerst fris, onbevangen, hongerig en kan het wiel van Roglic gemakkelijk volgen. Hij is de enige van de klassementsrenners die een bedrijging blijkt voor Roglic. Op de Col de la Loze lijkt Roglic eindelijk een keer echt de betere van de twee en rijdt weg. Pogacar kan niet volgen. De achterstand blijft klein (15 seconden), maar Jumbo Visma voelt zich hierdoor wel oppermachtig. Het kan nu toch niet meer fout gaan?

Jumbo Visma is de sterkste ploeg, maar Sunweb is deze tour misschien wel de leukste. Ze zijn betrokken bij veel aanvallen. Sunweb heeft geen klassementsrenners in de selectie, maar wel een paar mooie smaakmakers. Als op een gegeven moment alles lijk te lukken wordt het pas echt leuk. Het is genieten wanneer stylist Hirschi weer ten strijde trekt. Hij weet één etappe heel overtuigend te winnen. Hirschi verkeert in een monstervorm. Er was bijna nog een kans, maar een uitglijder tijdens een afdaling verstoord dit feestje. Ook de twee etappe’s die Kragh Andersen op zijn naam weet te zetten zijn een genot om naar te kijken. Ik had alleen Cees Bol meer gegund dan een derde plek.

De dag voor Parijs staat een tijdrit op het programma. Pogacar heeft Roglic verslagen bij het Sloveens kampioenschap, maar het geel lijkt eigenlijk niet in gevaar te komen vandaag. Op de klim van la Planche des Belle Filles kiezen veel renners voor een fietswissel. Dumoulin doet dit niet. Dit lijkt niet de juiste keus. Pogacar heeft goede fietswissel. De voorsprong van Roglic verkleint, maar tot de fietswissel zit hij nog op een halve minuut. Ik verwacht dat hij het gas nu opentrekt, maar het wil niet. Roglic zit te harken op zijn fiets. De ellebogen staan naar buiten. De helm schuift naar achteren. Het kleine verzet wat Roglic gewoonlijk draait ziet er allesbehalve soepel uit. Al snel fietst Pogacar virtueel in het geel. Wat gebeurt hier?! Pogacar rijdt de tijdrit van zijn leven en fietst in een recordtempo la Planche des Belle Filles op. Alles valt in duigen voor Jumbo Visma op deze laatste rit om het geel. Veel tranen en verdriet. Na de duikeling in de sneeuw van Kruijswijk om het roze in de Giro van 2016, mislukt het nu ook in De Tour. Het is heel triest, maar Pogacar is de verdiende winnaar. Hij heeft aanvallend gereden en op het juiste moment (vandaag) fenomenaal toegeslagen. Deze knul van 21 jaar is de allersterkste en mag zich laten huldigen in de gele, bollen en witte trui. Gelukkig kan hij Bennet zijn groene trui niet meer afpakken ;)

Hoofdfoto via NOS (van Reuters)