Fijn!

#muziek

Vanaf dit jaar ben ik begonnen met de Fijne Deuntjes playlist. Inmiddels heb ik al meer dan 250 volgers, krijg ik superleuke reacties en is het een feest om elke keer samen te stellen.

Ik ben altijd een muziekverzamelaar geweest. Als kind maakte ik radioshows door fragmenten met cassettebandjes aan elkaar te plakken. Op de middelbare school werden dit als snel mixtapes. Urenlang vinyl mixen tot ik eindelijk tevreden was met de set. Dan natuurlijk nog zelf een mooi hoesje ontwerpen en uitdelen op school. De vinylcollectie werd digitaal. Op Soulseek een netwerk opbouwen en collecties uitwissellen. En altijd te weinig hardeschijfruimte omdat de iTunes collectie zo groot werd. Mooie herinneringen!

Ik ben altijd muziek blijven verzamelen. Wel naar heel veel verschillende manieren gezocht (op Spotify en Apple Music) om dit goed te kunnen doen. Uiteindelijk kwam ik uit bij het bijhouden van een musiclog. Dit heb ik 4 jaar lang volgehouden. Nu was het tijd voor wat anders. Door de playlist openbaar te maken en een beetje te promoten kreeg ik al snel redelijk wat volgers. Het voelde weer net als vroeger toen ik mijn mixtapes uitdeelde.

Wintersport in Fryslân

afbeelding van

We hadden eigenlijk, zoals elk jaar, op de ski’s willen staan. Maar dat kan dit jaar even niet. Jammer, maar helaas.

Het is wel winter momenteel in Nederland en na een paar dagen sneeuw (met harde wind) en aanhoudende vorst kan er nu geschaatst worden. En hoe! De ijsbaan was hier redelijk vroeg open gegaan en de kinderen hadden de smaak direct te pakken. Ze hebben elke dag goed geoefend en waren niet naar huis te krijgen.

Uiteindelijk hebben we ook op natuurijs heerlijk kunnen schaatsen en prachtige tochten gemaakt. Elin en Fedde de laatste dag allebei op hun nieuwe schaatsen die ze van Beppe en Otto hadden gekregen. Wat een topdagen!

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 🎉