localStorage is een Web Storage-API voor permanente key-valueopslag (strings, ~5-10 MB) zonder einddatum. Data blijft staan na het sluiten van de browser en is per origin. De API is synchroon (setItem/getItem/removeItem) en biedt geen encryptie. Gebruik het voor voorkeuren en cache;voor meer capaciteit is IndexedDB beter.; Frontend;Media Query;Media Query;Met media queries pas je styles conditioneel toe op basis van eigenschappen als schermbreedte, -hoogte, oriëntatie of resolutie. Het is de kern van responsive design. Voorbeeld: @media (min-width: 768px) { … }. Je kunt ook features testen zoals prefers-color-scheme of hover.;Responsive design Frontend;Meta Tags;Meta Tags;Meta-tags zijn HTML-tags in de met metadata over de pagina. Ze zijn niet zichtbaar voor gebruikers, maar wel voor bots en browsers. Je gebruikt ze voor SEO (description), social sharing (Open Graph, Twitter Cards), viewport, charset, author en robots. De title is essentieel voor SEO.;HTML, Open graph, SEO Frontend;Next.js;Next JavaScript Framework;Next.js is een React-meta-framework van Vercel met SSR, SSG, API-routes, file-based routing en automatische code splitting. Het biedt een sterke developer experience en productie-optimalisaties out-of-the-box. De App Router is de nieuwste architectuur en is de standaard voor moderne React-apps.;API, Code splitting, React, Routing, Vercel Frontend;React;React JavaScript Library;React is een component-gebaseerde JavaScript-library voor interactieve UIs. Het gebruikt een virtuele DOM voor efficiënte updates, unidirectionele dataflow, JSX (JS + XML) en hooks voor state en lifecycle. Het ecosysteem is rijk (React Router, Redux, Next.js) en React is dominant voor SPAs.;DOM, JavaScript, Next.js, XML Frontend;robots.txt;robots.txt;robots.txt is een tekstbestand in de root dat crawlers vertelt wat ze wel of niet mogen indexeren. Het bevat regels als User-agent, Disallow en Allow en kan ook de sitemaplocatie aangeven. Let op: het is geen beveiliging. Voor echte bescherming gebruik je authenticatie of noindex.; Frontend;SessionStorage;SessionStorage;sessionStorage lijkt op localStorage, maar data leeft alleen tijdens de sessie van één tab. Het verdwijnt bij het sluiten van de tab, maar blijft bij een refresh. Elke tab heeft een eigen opslag. Ideaal voor tijdelijke data, zoals formulierstate of wizard-stappen.;Localstorage Frontend;Shadow DOM;Shadow DOM;Shadow DOM is een browserstandaard voor het encapsuleren van markup, styles en gedrag binnen een component. Dit voorkomt style-lekkage en naamconflicten en levert voorspelbaar gedrag op. Het wordt gebruikt met Web Components en biedt shadow roots, slots en scoped CSS.;CSS, DOM Frontend;Sitemap;Sitemap;Een sitemap is een XML-bestand (sitemap.xml) met een overzicht van alle pagina’s van je site. Zoekmachines kunnen zo efficiënter indexeren. Het bevat URL’s, last-modified, update-frequentie en prioriteit. Vooral nuttig voor grote, nieuwe of dynamische sites. Dien in via Search Console.;URL, XML Frontend;Svelte;Svelte JavaScript Framework;Svelte is een innovatief framework dat op compile-time werkt. Er is geen virtual DOM: frameworkcode verdwijnt in de build-stap. Dit levert kleine bundles en een snelle runtime op. Componenten combineren HTML, CSS en JS in .svelte-bestanden. SvelteKit lijkt qua rol op Next.js.;CSS, DOM, HTML, Next.js Frontend;Tailwind CSS;Tailwind Cascading Style Sheets;Tailwind is een utility-first CSS-framework waarbij je classes zoals ‘flex’, ‘pt-4’ en ‘text-center’ direct in HTML gebruikt. Het is sterk aanpasbaar via een config en verwijdert ongebruikte CSS met tree-shaking. Het levert snelle ontwikkeling op, maar kan de HTML voller maken.”