Snippets JavaScript

Utilidades de frontend en JavaScript moderno (vanilla) que funcionan en cualquier sitio: landing estática, proyecto PHP, WordPress o app con React/Vue. Sin dependencias, listas para pegar en tu app.js o importar como módulos.

Temario

Fetch wrapper con manejo de errores — timeouts, JSON, errores HTTP y token.
Debounce y throttle — buscadores en vivo y eventos de scroll eficientes.
Validación de formularios — mensajes en español y accesibles.
Formato de moneda y fechas (Intl) — pesos, porcentajes, "hace 3 días".
Copiar al portapapeles — con aviso visual y respaldo.
Lazy loading — imágenes, iframes y secciones con IntersectionObserver.
Modo oscuro persistente — respeta el sistema y recuerda la elección.
Leer y modificar query params — filtros compartibles por URL.
Cookies — leer, crear y borrar, más un aviso de cookies.

Cómo usarlos

Opción 1: script clásico. Copia las funciones a tu archivo y cárgalo al final del body:

html

<script src="/js/utilidades.js" defer></script>

Opción 2: módulos ES. Añade export delante de cada función y luego impórtalas:

html

<script type="module">
  import { debounce } from '/js/utilidades.js';
</script>

Compatibilidad

Todo el código usa características soportadas por todos los navegadores modernos (Chrome, Edge, Firefox, Safari de los últimos años). No necesitas Babel para un sitio normal.

Requisito previo: Curso de JavaScript.