DOM

Custom Elements

Met de web components-API definieer je eigen HTML-tags, zoals <user-card>. Je gebruikt speciale functies (connectedCallback, attributeChangedCallback) en maakt je eigen element customElements.define(). Combineer dit met Shadow DOM voor afschermen en hergebruik zonder framework.

AAA

Frontend

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.

AAA

Frontend

JavaScript Query Library

jQuery is een library die DOM-manipulatie, events, animaties en AJAX vereenvoudigt met goede cross-browser compatibiliteit. Het gebruik nam af door modern JavaScript en frameworks, maar blijft aanwezig in legacy-projecten en eenvoudige sites. Iconisch is de $()-selectorsyntax.

A

Frontend

React JavaScript Library

React is een component-gebaseerde JavaScript-library voor interactieve UIs. Het gebruikt een virtuele DOM voor efficiënte updates, JSX (JS + XML) en hooks voor state en lifecycle. Het ecosysteem is uitgebreid (React Router, Redux, Next.js) en React is dominant voor SPAs.

AA

Frontend

Shadow root

Een shadow root is het rootknooppunt van een shadow DOM-boom, aangemaakt via de attachShadow()-methode met mode 'open' of 'closed'. In open mode is de shadow root toegankelijk via JavaScript — in closed mode niet. De shadow root encapsuleert markup en styles zodat ze niet lekken naar of vanuit de rest van het document.

AAA

Frontend

Shadow DOM

Shadow DOM is een browserstandaard voor het afschermen 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.

AAA

Concepten

Cross-Site Scripting

XSS injecteert kwaadaardige client-side scripts in pagina's die anderen bekijken. Varianten zijn stored XSS (in database), reflected XSS (via URL) en DOM-based XSS. Voorkom dit met inputvalidatie, output-encoding/escaping, een strikte Content Security Policy en het sanitiseren van invoer.

A

Beveiliging

Webpagina-rendering

Rendering is het proces waarbij de browser HTML, CSS en JavaScript omzet naar pixels op het scherm. De browser bouwt de DOM- en CSSOM-boom, combineert ze tot de render-tree, berekent de layout en schildert de pixels. Rendering kan server-side (SSR), client-side (CSR) of via static generation (SSG) plaatsvinden. Render-blocking resources vertragen dit proces.

A

Performance

Vue JavaScript Framework

Vue is een flexibel framework dat je stap voor stap kunt gebruiken. Het combineert sterke punten van React (virtual DOM, components) en Angular (templates, directives). De leercurve is mild en de documentatie uitstekend. Single File Components (.vue) zijn een kernfeature.

AA

Frontend