100vw overflow bug (macOS)

#dev
afbeelding van

100vw staat voor de volledige viewport breedte. Dit is superhandig omdat het alleen rekening houdt met de browser en niet met de elementen waar het element zich in bevindt. Ik gebruik 100vw bijvoorbeeld voor de gekleurde achtergrond vlakken.

Wanneer men in macOS er voor kiest om de schuifbalken (ook wel scrollbars genoemd 😆) altijd te tonen (zie bovenstaande screenshot) verschijnt er een horizontale scrollbar bij het gebruik van 100vw. Aaaaaah!!!!

Er zijn eigenlijk twee oplossingen die ik (tot nu toe) heb kunnen vinden. De eerste is om in een bovenliggende element overflow: hidden te gebruiken. Dit is echter niet altijd mogelijk. Bijvoorbeeld als je zoals op mijn site gebruik maakt van sticky elementen.

Een andere oplossingen is met javascript. Dit soort fixen met javascript doe ik eigenlijk alleen als er echt geen andere mogelijkheid is. Tot op heden is die er volgens mij nog niet.

Zo bereken ik de breedte van de scrollbars:

const scrollbarWidth = window.innerWidth - document.body.clientWidth;
document.body.style.setProperty("--scrollbarWidth", `${scrollbarWidth}px`);

Nu kan ik --scrollbarWidth als variable gebruiken in CSS. Ik maak gebruik van TailwindCSS2 en overschrijf de class `.w-screen' op de volgende manier:

@layer utilities {
  @variants responsive {
    .w-screen {
      width: calc(100vw - var(--scrollbarWidth));
    }
  }
}

Als het goed is, is de horizontale scrollbalk nu verdwenen bij het gebruik van 100vw 🎉

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:

https://www.youtube.com/watch?v=Ppl4-1-a58k

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.

Kijk nog een keer mee naar deze ontknoping:

https://www.youtube.com/watch?v=G9juEMBTWZQ

Ook mooi:

https://www.youtube.com/watch?v=SYW5BXw2pKM

Hoofdfoto credit: ASO/Thomas Maheux