</> html5advent.com · est. 2010
The modern web platform, decoded.
A plataforma web moderna, uma demo de cada vez.
Guias práticos e testados sobre HTML, CSS, JavaScript e as Web APIs do navegador - além do calendário Web Platform Advent com 24 demos front-end.
Guias →JavaScript
3- js JavaScript Promises: a practical guide Creating promises, then/catch/finally, chaining, and Promise.all/race/any/allSettled - with the common gotchas. Ler o guia →
- 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. Ler o guia →
- 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. Ler o guia →
CSS
8- css CSS anchor positioning: o que faz e porque a MDN ainda fala em disponibilidade limitada Prender um tooltip ou um menu ao elemento a que pertence, só com CSS. anchor-name, position-anchor, a função anchor() e os recuos position-try, com a ressalva honesta sobre o suporte. Ler o guia →
- css CSS contrast-color(): texto preto ou branco automático, e o seu limite real Deixar o navegador escolher um texto legível sobre qualquer cor de fundo. O que o contrast-color() devolve realmente, porque só dá preto ou branco, e como preparar um recuo hoje. Ler o guia →
- css O seletor CSS :has(): o seletor de pai, explicado A pseudo-classe relacional :has() estiliza um elemento com base no que contém ou no que o segue - o aguardado seletor de pai do CSS. Como funciona, exemplos reais e suporte dos navegadores. Ler o guia →
- css CSS Cascade Layers: how @layer makes specificity negotiable Order layers instead of escalating selectors - and the two places where the priority order inverts. Ler o guia →
- css Native CSS Nesting: the & selector and Sass differences Write nested CSS without a preprocessor - how the & selector works and which browsers support it. Ler o guia →
- 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. Ler o guia →
- css CSS Container Queries: style by container, not viewport container-type, @container and how container queries differ from media queries. Ler o guia →
- css The View Transitions API: smooth page transitions Animate between DOM states with startViewTransition, view-transition-name, same- and cross-document. Ler o guia →
Web APIs
9- apis O que é o MutationObserver? O terceiro observador, e a fila que o torna utilizável O IntersectionObserver vigia a visibilidade, o ResizeObserver o tamanho, o MutationObserver o próprio DOM. O que reporta, porque substituiu os Mutation Events, e o método que revela como funciona realmente a entrega. Ler o guia →
- apis O que é o ResizeObserver? O redimensionamento ao nível do elemento, e o erro de ciclo que toda a gente encontra O evento resize da window não diz nada sobre um elemento em concreto. O ResizeObserver diz. O que reporta, content box contra border box, e porque aparece na sua consola 'ResizeObserver loop completed with undelivered notifications'. Ler o guia →
- apis O que é um Web Worker? Uma segunda thread, e a cópia que decide se compensa Trabalho pesado numa thread própria, para deixar de bloquear a interface. A que tem acesso e a que não tem, porque o postMessage copia em vez de partilhar, como transferir um ArrayBuffer evita essa cópia, e em que difere de um Service Worker. Ler o guia →
- apis O que é o IndexedDB? A base de dados do navegador explicada Assíncrona, transacional e muito maior do que o localStorage. Como funciona o onupgradeneeded, porque as transações se fecham sozinhas, para que servem os índices e quando usá-lo em vez do Web Storage. Ler o guia →
- apis AbortController: cancelar fetch, tempos-limite e ouvintes de eventos Um único controlador cancela um fetch, um tempo-limite e uma pilha de ouvintes de eventos. Como funcionam o AbortController e o AbortSignal, porque um cancelamento manual e um tempo esgotado lançam erros diferentes, e o truque de limpeza que quase toda a gente ignora. Ler o guia →
- apis The Fetch API in JavaScript Make HTTP requests in the browser: GET, JSON, POST, error handling and aborting. Ler o guia →
- apis Service Workers: caching, offline and updates Registering a service worker, the install/activate lifecycle, the Cache API, offline pages and safe updates. Ler o guia →
- apis localStorage vs sessionStorage: the Web Storage API Lifetime and scope differences, size limits, storing JSON safely and the storage event. Ler o guia →
- apis The IntersectionObserver API: lazy-loading and scroll effects Lazy-load images, reveal on scroll and build infinite scroll - threshold and rootMargin explained. Ler o guia →
HTML
3- html O elemento HTML dialog: modais reais sem biblioteca O elemento HTML dialog oferece um modal de verdade: camada superior, página inerte, backdrop e tratamento do Esc, apenas com marcação simples. Veja showModal vs show, form method=dialog, returnValue, o atributo closedby e o hábito a evitar. Ler o guia →
- html A Popover API: popups, menus e tooltips nativos sem biblioteca O atributo HTML popover e a Popover API permitem criar menus, tooltips e cartões renderizados na camada de topo, com fecho ao clicar fora e Esc já tratados por si - sem biblioteca JavaScript. Ler o guia →
- 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. Ler o guia →
Hospedagem
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. Ler o guia →
- 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. Ler o guia →
- hosting · € Web hosting for developers: the criteria that matter SSH access, Git deploys, runtimes, databases and staging - and how shared, VPS and managed compare. Ler o guia →
- 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. Ler o guia →
- hosting · € PHP hosting explained: shared vs VPS, versions and performance Shared vs VPS, PHP versions and extensions, deployment, .htaccess and performance with OPcache. Ler o guia →
- 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. Ler o guia →
- 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. Ler o guia →
- 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. Ler o guia →
- 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. Ler o guia →
- 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. Ler o guia →
- 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. Ler o guia →
- 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. Ler o guia →
- 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). Ler o guia →
- 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. Ler o guia →
- 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. Ler o guia →
- 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. Ler o guia →
- hosting · € VPS vs servidor dedicado: qual o seu projeto precisa? Como um VPS e um servidor dedicado realmente diferem - desempenho, isolamento, escalabilidade, controlo e preço - e uma forma clara de decidir qual se adequa ao seu site ou aplicação. Ler o guia →
- hosting · € Quanto custa um VPS? Um detalhe honesto dos preços Quanto custa realmente um VPS por mês, o que faz variar o preço (RAM, vCPU, armazenamento, gerido ou não), os custos ocultos e preços de exemplo reais e datados. Ler o guia →
- 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. Ler o guia →