addEventListener
Escuchar clics de forma idiomática.
Biblioteca de snippets
Patrones cortos con etiquetas — HTML, CSS, JavaScript, React y Web Components para pegar y adaptar.
Ruta
Etiquetas
Anillo de foco visible
Estado :focus-visible sin quitar accesibilidad.
attachShadow
Abrir Shadow DOM e inyectar markup + CSS.
Badge en forma de píldora
Etiqueta redondeada para estados y tags.
Botón primario
Estilo base de CTA con hover.
Card con sombra suave
Elevación ligera para bloques de contenido.
CE en React
Usar la etiqueta en JSX tras registrar el elemento.
CE en Vue
Import side-effect + etiqueta en el template de Vue.
Centrar con Flex
Centro absoluto de un hijo en el contenedor.
Centrar con Grid
place-items centra en un único eje de cuadrícula.
Checkbox personalizado
Visual propio manteniendo el input nativo accesible.
classList en menú
Abrir/cerrar menú móvil.
Componente funcional
Función que devuelve JSX.
Componer con children
Slot de contenido en el componente.
Container query simple
Estilo basado en el ancho del componente.
createElement
Crear e insertar nodos en el DOM.
CSS en Shadow DOM
Estilos encapsulados con :host y ::slotted.
customElements.define
Registrar un Custom Element con nombre con guion.
dataset
Leer data-* como camelCase.
Debounce (esqueleto)
Retrasar la ejecución hasta que el usuario pause.
Desestructurar props
Firma limpia con destructuring.
Details / summary
Disclosure nativo sin JavaScript.
Dialog básico
Modal nativo con showModal().
Efecto glassmorphism
Vidrio esmerilado con backdrop-filter.
Espacio entre ítems con gap
Sustituye margins manuales por gap en flex/grid.
Export dual
Clase nombrada + register() + auto-register.
fetch JSON
async/await con comprobación de ok.
Footer pegado al pie
Footer al final del viewport aunque haya poco contenido.
Full bleed en contenedor estrecho
Sección que escapa de la columna y ocupa 100vw.
Guarda en define
Evitar error si el módulo se importa dos veces.
Imagen object-fit cover
Rellena el marco sin distorsionar — crop inteligente.
Label + input
Asociación explícita for/id.
Limitar texto a N líneas
Corte multilínea con -webkit-line-clamp.
Lista de chips
Grupo de tags compactas con wrap automático.
map con key
Lista con identificador estable.
Meta viewport
Viewport esencial para layout móvil.
Navegación sticky
Mantiene la barra arriba durante el scroll.
observedAttributes
Reaccionar a cambios de atributos HTML.
Ocultar al imprimir
Oculta nav, botones y anuncios con @media print.
Open Graph (stub)
Metas básicas para vista previa en redes.
package.json exports
Campo exports apuntando al ESM de la lib.
Picture + source
Imagen responsiva por media query.
preventDefault
Cancelar submit o navegación por defecto.
Proporción de medios
Mantén 16:9 (u otra) sin hacks de padding.
querySelectorAll + loop
Iterar NodeList con forEach.
Radio personalizado
Grupo de opciones con apariencia consistente y foco visible.
Render condicional
&& y ternario en JSX.
Reset mínimo
Inicio limpio sin borrar toda la UA stylesheet.
Scroll suave
Anclas con desplazamiento animado nativo.
Skeleton loading
Placeholder animado mientras carga el contenido.
Skip link
Saltar la navegación e ir al contenido.
Slot básico
Proyectar light DOM en el shadow con <slot>.
Store Zustand
create + selector.
Texto con gradiente
Rellena el texto con linear-gradient vía clip.
Texto solo para lectores de pantalla
Visually hidden accesible (sr-only).
time + datetime
Fecha legible con valor machine-readable.
Tipos de button
submit, button y reset con intención clara.
Toggle de clase
Alternar estado visual vía classList.
Tooltip solo con CSS
Pista al hover/focus usando attr() y un pseudo-elemento.
Truncar texto en una línea
Ellipsis cuando el texto supera el ancho.
Underline animado al hover
Línea que crece con transform — ligera y accesible.
useEffect al montar
Array de deps vacío + cleanup.
useMutation + invalidate
Mutar y refrescar la caché.
useQuery básico
queryKey + queryFn.
useState toggle
Boolean con setter funcional.
Variables para dark mode
Base de tema claro/oscuro con custom properties.
Vite lib mode
Fragmento de vite.config para library mode.