Website Functionaliteiten Showcase

Deze post demonstreert alle technische mogelijkheden die in deze website zijn ingebouwd. Een referentie voor toekomstige content en een showcase van wat mogelijk is met pure HTML, CSS en minimale JavaScript.

Code Blocks met Copy Functie

Voor technische content is het essentieel om code overzichtelijk te presenteren. Hieronder een voorbeeld van een Python functie:

def fibonacci(n: int) -> list[int]:
    """Genereer de eerste n Fibonacci getallen."""
    if n <= 0:
        return []
    if n == 1:
        return [0]

    fib = [0, 1]
    for _ in range(2, n):
        fib.append(fib[-1] + fib[-2])
    return fib

# Voorbeeld gebruik
print(fibonacci(10))
# Output: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

De code blocks ondersteunen elke programmeertaal. Hier een voorbeeld in JavaScript:

const debounce = (fn, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
};

// Gebruik voor search input
const search = debounce((query) => {
  console.log(`Zoeken naar: ${query}`);
}, 300);

En hier een voorbeeld van terminal commando's:

# Maak een thumbnail (400px breed)
convert origineel.jpg -quality 85 -resize 400x images/thumbs/thumbnail.jpg

# Maak een grote versie (max 1200px breed)
convert origineel.jpg -quality 85 -resize 1200x images/full/fullsize.jpg

Afbeeldingen met Modal

Afbeeldingen worden getoond als thumbnails voor snelle laadtijd. Klik om de volledige versie te bekijken in een modal overlay.

Website snelheid is cruciaal voor gebruikerservaring

Deze aanpak houdt de initiële paginagrootte klein (onder de 14KB regel) terwijl gebruikers toch toegang hebben tot hoge resolutie afbeeldingen wanneer gewenst.

Inline Code

Voor korte code referenties kun je inline code gebruiken. Bijvoorbeeld: gebruik const in plaats van let voor variabelen die niet veranderen.

Dark Mode

De website detecteert automatisch de systeemvoorkeur voor dark of light mode via prefers-color-scheme. Bij een eerste bezoek wordt de OS-instelling als startpunt gebruikt. Gebruikers kunnen daarna handmatig wisselen via de toggle rechtsboven — de keuze wordt opgeslagen in localStorage en geldt voor alle volgende bezoeken.

Responsive Design

Alle componenten zijn volledig responsive en werken op zowel desktop als mobiele apparaten. De layout past zich aan aan verschillende schermgroottes zonder horizontaal scrollen.

Performance

Deze website is geoptimaliseerd voor snelheid:

• Geen externe CSS of JavaScript bibliotheken
• System fonts voor directe tekstweergave
• Inline CSS voor single-request rendering
• Thumbnail afbeeldingen onder 50KB
• Totale paginagrootte onder 14KB (exclusief afbeeldingen)
• Cache-Control headers (5 min browser cache + stale-while-revalidate)
• Speculative prefetching van alle pagina's na het eerste bezoek

Gebouwd met Claude Code

Deze website is volledig gebouwd met Claude Code, de CLI van Anthropic. De code conventies en richtlijnen staan beschreven in het CLAUDE.md bestand in de repository, samen met een overzicht in de README.