</> html5advent.com · est. 2010
The modern web platform, decoded.
The modern web platform, one demo at a time.
Practical, tested guides to HTML, CSS, JavaScript and browser Web APIs - plus the Web Platform Advent calendar of 24 front-end demos.
Guides →JavaScript
3- js JavaScript Promises: a practical guide Creating promises, then/catch/finally, chaining, and Promise.all/race/any/allSettled - with the common gotchas. Read the guide →
- js async/await in JavaScript: a practical guide How async/await relate to promises, try/catch, awaiting in loops, and the serial-vs-parallel gotcha. Read the guide →
- js What is the event loop in JavaScript? How single-threaded JavaScript stays responsive: the call stack, the task and microtask queues, and why promises run before setTimeout. Read the guide →
CSS
8- css CSS anchor positioning: what it does, and why MDN still says limited availability Tether a tooltip or a menu to the element it belongs to, in CSS alone. anchor-name, position-anchor, the anchor() function and position-try fallbacks, plus the honest support caveat. Read the guide →
- css CSS contrast-color(): automatic black or white text, and its one real limit Let the browser pick readable text over any background colour. What contrast-color() actually returns, why it only ever gives you black or white, and how to fall back today. Read the guide →
- css The CSS :has() Selector: the Parent Selector, Explained The :has() relational pseudo-class styles an element based on what it contains or what follows it - the long-awaited CSS parent selector. How it works, real examples, and browser support. Read the guide →
- css CSS Cascade Layers: how @layer makes specificity negotiable Order layers instead of escalating selectors - and the two places where the priority order inverts. Read the guide →
- css Native CSS Nesting: the & selector and Sass differences Write nested CSS without a preprocessor - how the & selector works and which browsers support it. Read the guide →
- css CSS Grid vs Flexbox: which to use (and when to use both) Flexbox is one-dimensional, Grid is two-dimensional. The honest difference, a side-by-side comparison, and why real layouts use both together. Read the guide →
- css CSS Container Queries: style by container, not viewport container-type, @container and how container queries differ from media queries. Read the guide →
- css The View Transitions API: smooth page transitions Animate between DOM states with startViewTransition, view-transition-name, same- and cross-document. Read the guide →
Web APIs
7- apis What is a Web Worker? A second thread, and the copy that decides if it is worth it Heavy work on its own thread so it stops blocking the interface. What it can and cannot reach, why postMessage copies rather than shares, how transferring an ArrayBuffer avoids that copy, and how it differs from a Service Worker. Read the guide →
- apis What is IndexedDB? The browser database explained Asynchronous, transactional and far bigger than localStorage. How onupgradeneeded works, why transactions close on you, what indexes are for, and when to use it instead of Web Storage. Read the guide →
- apis AbortController: cancelling fetches, timeouts and event listeners One controller cancels a fetch, a timeout and a pile of event listeners. How AbortController and AbortSignal work, why a manual abort and a timeout throw different errors, and the cleanup trick most people miss. Read the guide →
- apis The Fetch API in JavaScript Make HTTP requests in the browser: GET, JSON, POST, error handling and aborting. Read the guide →
- apis Service Workers: caching, offline and updates Registering a service worker, the install/activate lifecycle, the Cache API, offline pages and safe updates. Read the guide →
- apis localStorage vs sessionStorage: the Web Storage API Lifetime and scope differences, size limits, storing JSON safely and the storage event. Read the guide →
- apis The IntersectionObserver API: lazy-loading and scroll effects Lazy-load images, reveal on scroll and build infinite scroll - threshold and rootMargin explained. Read the guide →
HTML
3- html The HTML dialog element: real modals without a library The HTML dialog element gives you a true modal - top layer, inert page, backdrop and Esc handling - from plain markup. Here is showModal vs show, form method=dialog, returnValue, the closedby attribute and the one habit to avoid. Read the guide →
- html The Popover API: native popups, menus and tooltips without a library The HTML popover attribute and the Popover API let you build menus, tooltips and cards that render in the top layer, with light-dismiss and Esc handled for you - no JavaScript library needed. Read the guide →
- html Web Components: Custom Elements, Shadow DOM and templates Build reusable HTML elements with Custom Elements, encapsulate styles with the Shadow DOM and clone templates. Read the guide →
Hosting & deploy
19- hosting · € Choosing the best VPS for hosting a web project The criteria that matter (RAM, CPU, storage, bandwidth, location, price) and when a VPS beats shared hosting. Read the guide →
- hosting · € Static website hosting: deploy an Astro, Vite or HTML site What static hosting is, how a CDN serves your build, and deploying with a custom domain and free HTTPS. Read the guide →
- hosting · € Web hosting for developers: the criteria that matter SSH access, Git deploys, runtimes, databases and staging - and how shared, VPS and managed compare. Read the guide →
- hosting · € How to host a Node.js app: VPS, PaaS and serverless Deploy a Node.js app via VPS, managed PaaS or serverless - with PM2, a reverse proxy and env vars. Read the guide →
- hosting · € PHP hosting explained: shared vs VPS, versions and performance Shared vs VPS, PHP versions and extensions, deployment, .htaccess and performance with OPcache. Read the guide →
- hosting · € VPS hosting explained: what it is and how to choose What a VPS is, how it differs from shared and dedicated hosting, the criteria that matter, and who it fits. Read the guide →
- hosting · € Cloud hosting explained: when it makes sense for a web project What cloud hosting really means, how it differs from a single VPS or shared hosting, and the projects it suits. Read the guide →
- hosting · € Managed WordPress hosting: what it is and who it’s for What managed WordPress hosting includes, how it compares to shared hosting and a self-managed VPS, and its pros and cons. Read the guide →
- hosting · € Web hosting for a small business: what to look for The criteria that matter for a small business - uptime, support, email, security, room to grow - and how to judge any host. Read the guide →
- hosting · € Cheap VPS hosting: how to get value without cutting corners How to read low-priced VPS plans honestly, which corners are safe to cut, and what separates value from a false bargain. Read the guide →
- hosting · € Running WordPress on a VPS: when and how When a VPS beats shared or managed hosting for WordPress, the criteria that matter, and the LEMP stack you need. Read the guide →
- hosting · € Hosting for a WooCommerce store: the requirements that matter The performance, resources and scalability a WooCommerce store needs, and how shared, managed and VPS hosting compare. Read the guide →
- hosting · € Hosting a Laravel app: VPS, requirements and deployment Why a VPS fits Laravel, the server requirements that matter, and a real deployment walkthrough (Composer, .env, Nginx, queues). Read the guide →
- hosting · € Best hosting for Next.js: managed platforms vs a VPS Static export vs a server-rendered app, why SSR/ISR and API routes need a Node.js runtime, and an honest comparison of managed platforms versus self-hosting on a VPS. Read the guide →
- hosting · € Contabo review: is it a good VPS for web projects? An honest, no-hype look at Contabo as a VPS host - its resource-for-the-price positioning, the trade-offs, and who it suits. Read the guide →
- hosting · € VPS vs cloud hosting: which one fits your project? How VPS and cloud hosting differ on performance, scaling, reliability and price - and how to decide which model fits your web project. Read the guide →
- hosting · € VPS vs dedicated server: which one does your project need? How a VPS and a dedicated server really differ - on performance, isolation, scaling, control and price - and a clear way to decide which one fits your website or app. Read the guide →
- hosting · € How much does a VPS cost? A real price breakdown What a VPS actually costs per month, what drives the price (RAM, vCPU, storage, managed vs unmanaged), the hidden extras, and real dated example prices. Read the guide →
- hosting · € How to host an Astro site: static and SSR options Static vs server (SSR) output, how adapters work, the build commands, and how to choose a host for each. Read the guide →