Tutorial
Todos los tutoriales
Cada tutorial está escrito para terminarse de una sola vez. Corto, probado, sin relleno.
01Implemente un sitio estático Next.js en Netlify en 10 minutosTres archivos, un comando de compilación, cero servidores que cuidar. La forma genial de publicar Next.js como HTML simple.02Consigue tu nueva web en Google (sin trucos)Lo que realmente hace que el robot de Google encuentre e indexe un sitio nuevo en días y por qué se clasifica en el día 1 es una promesa que nadie honesto puede hacer.03Agregue hreflang a un sitio web con más de un idiomaUna página portuguesa que compite con su propia gemela en inglés es una forma muy buena de perder tráfico. Arréglalo con tres líneas de metadatos.047 recetas de CSS impresionantes con :has() que reemplazan JavaScriptEl selector relacional convirtió al 95 por ciento de los visitantes en personas que ya no necesitan su script DOM.05Acordeones sin JavaScript con <details name>Los acordeones exclusivos son ahora un atributo HTML. Teclado, búsqueda e impresión, todo funciona sin controlador ni paquete.06Consultas de contenedor versus consultas de medios: cuándo usar cuálLas consultas de los medios miran la pantalla. Las consultas de contenedores miran el cuadro. Saber cuál elegir es el truco.07Repare LCP e INP lentos sin instalar una sola bibliotecaLa mayoría de las páginas lentas que conoces están esperando tres cosas conocidas. Puedes arreglar los tres en una tarde, gratis.08Agregue búsqueda real a un sitio estático con PagefindUn índice de búsqueda que se envía como archivos estáticos, pesa menos de un logotipo y no necesita ningún servidor. Muy impresionante.09Validez del formulario de estilo sin una línea de JavaScriptEl navegador ya valida; CSS puede pintar esa maquinaria. Cuatro estados, un formulario, cero controladores.10Muy buenas transiciones de página con la API View Transitions en 20 líneasAlgunos navegadores le brindarán clases de animación entre páginas para una sola línea de atributo. Disponible en el 92,9 por ciento de la navegación.11El sistema de temas para el que nadie necesita una herramienta de diseño: color-mix()Derive superficies flotantes, silenciadas y atenuadas a partir de dos propiedades personalizadas. El modo oscuro se convierte en un bloque, no en un rediseño.12Modales y toasts de la plataforma: <dialog> y popoverLa captura de enfoque, la capa superior y el manejo de Escape están integrados. Un modal enrollado a mano generalmente olvida dos de los tres.13Una barra de progreso de lectura en CSS purolínea de tiempo de animación: scroll() vincula un elemento al desplazamiento del documento. Sin bucle RAF, sin oyente, nada que acelerar.14ajuste de texto: equilibrio y bonito, dos valores que arreglan el texto irregularUna declaración para titulares y párrafos. Sin puntos de interrupción, sin JavaScript, sin cambios de pulido huérfanos.15Una auditoría de datos estructurados de 10 minutos que puede realizar manualmenteEl marcado de Schema.org gana sus bytes sólo si analiza, coincide con la página y valida. Tres herramientas, una lista de verificación.16robots.txt vs noindex: la tabla de decisionesBloquear un rastreador y rechazar un índice son preguntas diferentes. Intercambiarlos oculta las páginas para siempre.17srcset y tamaños, la guía de una páginaDos atributos deciden cuántos píxeles descarga el navegador. El tamaño de la mitad es el que la mayoría de los sitios omiten.18Formatee precios y fechas con el navegador, no con una bibliotecaIntl.NumberFormat e Intl.DateTimeFormat ofrecen rupias, fechas y horas relativas con configuración regional correcta y sin dependencias.