ZaRQuN – Diseño Gráfico, Web y Programación Blog sobre diseño grafico en general y curiosidades

jQuery vuelve a escena con su versión 4.0, y lo hace con una idea clara: adaptarse al desarrollo web actual. Esta nueva versión elimina soporte para navegadores antiguos y limpia muchas APIs legacy, lo que se traduce en un código más ligero y fácil de mantener.

No pretende competir con frameworks como React o Vue, sino seguir siendo una solución rápida y práctica para proyectos sencillos, scripts puntuales o mantenimiento de webs existentes. Si tu proyecto es moderno, jQuery 4.0 encaja sin problemas.

En resumen, un lavado de cara necesario para un clásico que se resiste a desaparecer

jQuery #jQuery4 #JavaScript #DesarrolloWeb #Frontend #WebDev #Programación #LibreríasJS #CódigoLimpio

Es el error clásico: abres tu web en el móvil y notas que puedes deslizar la pantalla hacia la derecha, dejando un espacio en blanco innecesario. Este «bug» visual suele romper la experiencia de usuario y ocurre porque un elemento es más ancho que el contenedor padre.

El Culpable: El Modelo de Caja (Box Model)

La mayoría de las veces, esto sucede porque añadimos padding o borders a un elemento que ya tiene un width: 100%. Por defecto, CSS suma esos valores, haciendo que el elemento mida más del 100%.

La Solución Rápida: box-sizing

La forma más eficiente de evitar que esto ocurra de forma global es aplicar la propiedad box-sizing: border-box;. Esto obliga al navegador a incluir el padding y el borde dentro del ancho total del elemento.

Añade esto al inicio de tu CSS:

*, *::before, *::after {
  box-sizing: border-box;
}

El «Truco Pro» para encontrar al infractor

Si después de aplicar lo anterior el scroll lateral persiste, es que tienes un elemento hijo «rebelde» (como una imagen grande o un texto sin saltos). Usa este snippet temporalmente para localizarlo visualmente:

CSS

/* Esto dibujará un borde rojo alrededor de cada elemento de tu web */
* {
  outline: 1px solid red !important;
}

Al recargar, busca qué caja roja se sale de los límites de la pantalla. Una vez lo encuentres, asegúrate de que ese elemento tenga un max-width: 100%;.

Aprender Git puede ser un dolor de cabeza al principio, sobre todo cuando empiezan a aparecer conceptos como ramas, merges, rebases o commits que no siempre se entienden solo leyendo documentación. Para eso existe Learn Git Branching, una web que convierte el aprendizaje de Git en algo mucho más visual y, sobre todo, práctico.

Esta herramienta funciona directamente desde el navegador y no necesitas instalar nada. A través de pequeños retos interactivos, vas ejecutando comandos Git y viendo en tiempo real cómo cambian las ramas, los commits y el historial del proyecto. Todo se representa con diagramas claros que ayudan muchísimo a entender qué está pasando realmente por debajo.

Lo mejor de Learn Git Branching es que va de menos a más. Empieza con los conceptos básicos y poco a poco te mete en situaciones más avanzadas como rebase interactivo, cherry-pick o manejo de ramas complejas, algo ideal si ya usas Git pero sientes que no lo dominas del todo.

Además, al ser completamente gratuito y estar disponible en varios idiomas, se ha convertido en un recurso imprescindible para estudiantes, desarrolladores junior y cualquier persona que quiera perderle el miedo a Git sin romper repositorios reales. Una forma divertida y muy efectiva de aprender una de las herramientas clave del desarrollo moderno.

#Git #LearnGitBranching #DesarrolloWeb #Programación #HerramientasGratis #AprenderGit #Desarrolladores

En el ecosistema del diseño actual, la línea que separa al diseñador del desarrollador es cada vez más delgada. Ya no basta con entregar un Figma; entender cómo se construye la interfaz es un superpoder. Visual Studio Code (VS Code) es el editor favorito de la industria, y con estas 10 extensiones, lo transformarás en tu mejor aliado creativo.

1. Polacode

Si escribes tutoriales o compartes snippets de código en redes sociales, Polacode es mágica. Te permite crear capturas de pantalla de tu código con un aspecto profesional, manteniendo el esquema de color que tengas configurado. Es el «Instagram» de tu código.

2. Color Highlight

Como diseñador, el color lo es todo. Por defecto, VS Code solo muestra el código hexadecimal. Color Highlight subraya el código con el color real que representa, permitiéndote identificar paletas visualmente de un vistazo.

3. SVG Preview

¿Cansado de abrir el navegador para ver si un icono SVG es el correcto? SVG Preview abre un panel lateral que renderiza el gráfico en tiempo real mientras editas sus nodos o propiedades.

4. Adobe XD / Figma Toolkit

Muchas herramientas de diseño tienen sus propias extensiones oficiales. Estas permiten inspeccionar variables de diseño, tokens de color y assets directamente en el editor, evitando el constante «alt-tab» entre aplicaciones.
Adobe XD
Figma Toolkit

5. Google Fonts

Explorar tipografías sin salir del editor es posible. Esta extensión te permite buscar y previsualizar familias de Google Fonts directamente en tu archivo CSS o HTML, facilitando la toma de decisiones tipográficas.

6. Live Server

La regla de oro del UI: itera rápido. Live Server crea un servidor local que actualiza tu navegador automáticamente cada vez que guardas un cambio. Es lo más parecido al «Preview» de Figma pero en código real.

7. Tailwind CSS IntelliSense

Si usas Tailwind (el framework de CSS más popular), esta extensión es obligatoria. Ofrece autocompletado inteligente de clases, lo que te ayuda a mantener la consistencia del diseño y a aprender las utilidades de espaciado y color rápidamente.

8. Image Preview

Al pasar el cursor sobre la ruta de una imagen o un asset, Image Preview muestra una miniatura en el margen o al hacer hover. Ideal para no perderse cuando gestionas cientos de iconos o imágenes de producto.

9. Material Icon Theme

El orden visual ayuda a la productividad. Materian Icon Theme cambia los aburridos iconos de carpetas y archivos por otros basados en el sistema de diseño de Material Design, haciendo que tu estructura de proyecto sea mucho más intuitiva.

10. Better Comments

Un buen diseño necesita documentación. Better Comments te permite categorizar tus anotaciones en el código por colores: alertas (rojo), consultas (azul), tareas pendientes (naranja) o notas importantes (verde).

#UIDesign #WebDesign #VSCode #Productivity #Frontend #DiseñoGrafico #WebDevelopment #UIUX #CodingForDesigners #Figma #TailwindCSS

Bruno es una alternativa ligera y muy bien pensada a herramientas como Postman o Insomnia. Su principal diferencia es que no usa la nube, no requiere cuentas ni sincronizaciones externas y guarda todas las colecciones de APIs de forma local, como archivos de texto plano. Esto hace que trabajar con Git sea algo natural y que compartir o versionar cambios sea tan sencillo como en cualquier proyecto de código.

Está pensado para desarrolladores que quieren velocidad, privacidad y control total, sin interfaces sobrecargadas ni dependencias innecesarias. Soporta peticiones HTTP, GraphQL, gRPC y WebSockets, además de contar con CLI y extensión para VS Code, lo que lo convierte en una herramienta muy cómoda para el día a día.

Si trabajas con APIs y te gusta tener todo bajo control, Bruno es una opción muy a tener en cuenta.

Comparado con herramientas tradicionales

#Bruno #APIs #OpenSource #DesarrolloWeb #PostmanAlternative #HerramientasDev #Git #Programación

¿Alguna vez has exportado un icono perfecto desde Figma, pero al ponerlo en tu web parece que tiene vida propia y no se alinea con el texto? No es un error de tu código, es un problema de Bounding Box (caja contenedora).

El Problema: El icono «flota» o no se centra

En Figma, los diseñadores suelen crear iconos dentro de marcos cuadrados (por ejemplo, 24x24px). Si el dibujo del icono no ocupa todo ese espacio o no está centrado dentro de su marco, al exportarlo como SVG e insertarlo en tu HTML, heredará esos espacios vacíos asimétricos.

La Solución en Figma (Antes de exportar)

Antes de pasar el diseño a desarrollo, asegúrate de:

1. Flatten Shapes: Selecciona el icono y pulsa Cmd + E (Mac) o Ctrl + E (Windows) para simplificar los vectores.
2. Constraints: Asegúrate de que el vector esté centrado horizontal y verticalmente dentro de su frame.
3. Outline Stroke: Si el icono usa bordes (strokes), conviértelos a esquemas (Shift + Cmd + O) para que el tamaño de exportación sea exacto.

La Solución en CSS (Si ya está en el código)

Si no puedes volver a Figma, puedes corregir la alineación visual usando este «truco» de alineación flexible:

.icon-container {
  display: inline-flex;
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  vertical-align: middle; /* Alineación respecto al texto contiguo */
}

svg {
  display: block; /* Elimina el espacio reservado para descendentes de texto */
  width: 1em; /* Escala el icono proporcionalmente al texto */
  height: 1em;
}

Tip Pro: Si el icono sigue viéndose «caído», usa transform: translateY(-1px); para un ajuste óptico fino. A veces, la geometría no coincide con la percepción del ojo humano.

Claude Code in Action es un curso creado por Anthropic que muestra cómo integrar la inteligencia artificial en el desarrollo de software de una forma práctica y realista. A través de Claude Code, un asistente de programación basado en IA, los desarrolladores pueden interactuar con su código usando lenguaje natural, automatizar tareas repetitivas, corregir errores, refactorizar proyectos y aplicar cambios reales directamente en su base de código. El curso se centra en enseñar cómo usar Claude Code dentro del flujo de trabajo diario, desde la configuración inicial hasta integraciones más avanzadas con proyectos existentes, control de versiones y automatización. Es una formación pensada para programadores que quieren aumentar su productividad y entender cómo la IA puede convertirse en una herramienta clave en su día a día, más allá de simples sugerencias de código.

#ClaudeCode #InteligenciaArtificial #Programación #IA #DesarrolloWeb #Productividad #Anthropic

Si alguna vez has tenido que implementar un sistema de subida de archivos en una web, sabes que puede convertirse en un pequeño dolor de cabeza. Formularios poco atractivos, cargas lentas o falta de compatibilidad… y ahí es donde FilePond entra en escena para salvar el día.

FilePond es una librería JavaScript pensada para crear experiencias de subida de archivos rápidas, modernas y muy fáciles de usar. Lo mejor de todo es que es ligera, flexible y extremadamente personalizable, lo que la hace perfecta tanto para proyectos pequeños como para aplicaciones más grandes.

Una de sus grandes ventajas es que funciona de forma asíncrona, permitiendo subir archivos sin recargar la página. Además, ofrece características que hoy en día casi damos por obligatorias: vista previa de imágenes, validación de archivos, límites de tamaño, reordenación mediante drag & drop y compatibilidad con múltiples frameworks como React, Vue, Angular o Svelte.

Otro punto fuerte de FilePond es su sistema de plugins. Gracias a ellos puedes añadir funciones como compresión de imágenes, recorte, conversión de formatos o incluso detección automática de archivos duplicados. Todo esto sin complicarte la vida y manteniendo el rendimiento de la web.

Y si te preocupa la integración con tu backend, FilePond también lo pone fácil. Funciona perfectamente con APIs REST, subida directa a servidores o incluso servicios en la nube. Básicamente, tú decides cómo y dónde se suben los archivos.

En resumen, FilePond no es solo un input para subir archivos, es una solución completa para mejorar la experiencia del usuario y darle un toque profesional a cualquier formulario.

#FilePond #JavaScript #Frontend #SubidaDeArchivos #WebDevelopment #UX #LibreríasJS #DiseñoWeb

Si alguna vez has necesitado datos del clima para una web, una app o simplemente para experimentar con proyectos personales, Open-Meteo puede convertirse en tu mejor aliado. Y lo mejor de todo: es gratis, rápida y sin necesidad de registro.

Open-Meteo es una plataforma de código abierto que ofrece datos meteorológicos basados en modelos numéricos de predicción del tiempo. En palabras simples: te da información confiable sobre el clima sin pedirte tarjetas, correos ni procesos complicados.

Uno de sus puntos más atractivos es la facilidad de uso. Solo necesitas hacer una petición a su API y listo. Puedes obtener datos como temperatura, lluvia, viento, humedad, nieve, radiación solar y mucho más. Todo esto con respuestas claras en formato JSON, perfectas para trabajar en cualquier lenguaje de programación.

Otro detalle que enamora a los desarrolladores es que no tiene límites estrictos de uso para proyectos normales. Esto la hace ideal para estudiantes, startups, proyectos personales o incluso aplicaciones en producción que no quieren depender de servicios de pago desde el inicio.

Además, Open-Meteo se apoya en modelos meteorológicos reconocidos a nivel mundial, como ECMWF o GFS, lo que garantiza datos bastante precisos. Y si te preocupa la transparencia, su enfoque open source permite entender de dónde viene la información y cómo se procesa.

En resumen, si buscas una API del clima que sea:

• Fácil de implementar
• Gratuita
• Sin registro
• Con datos confiables

Open-Meteo definitivamente merece un lugar en tu lista de herramientas favoritas.

#OpenMeteo #APIClima #DatosMeteorológicos #DesarrolloWeb #Programación #OpenSource #WeatherAPI #Tecnología

UDEMY pone de forma gratuita este curso de TypeScript, donde aprenderás todo lo que necesitas saber para Dominar el Lenguaje.

Lo que aprenderás

• Aprenderás todo lo relacionado con JavaScript y TypeScript
• Aprenderás Fundamentos básicos de JavaScript
• Aprenderás a implementar Funciones en TypeScript
• Conocerás los tipos de variables que se pueden definir en TypeScript
• Conocerás los Objetos literales en TypeScript
• Aprenderás sobre la programación orientada a objetos (POO)
• Conocerás las interfaces y para que se utilizan en TypeScript
• Aprenderás a utilizar los NameSpace en Typescript