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

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

Si estás buscando una formación sólida, gratuita y con certificación para aprender Python, probablemente esta sea una de las mejores opciones disponibles ahora mismo. Los cursos desarrollados por Cisco Networking Academy, reconocidos a nivel mundial, ofrecen un recorrido completo para comenzar desde cero y avanzar hacia un nivel intermedio, con contenidos de alta calidad y totalmente en español.

Lo mejor: son gratuitos, tienen certificado final, y permiten aprender a tu propio ritmo.

A continuación, te cuento qué incluye cada uno y por qué vale la pena aprovecharlos.

1. Python Essentials 1 – Nivel Principiante

Perfecto si comienzas desde cero o tienes conocimientos básicos. Este curso cubre:

• Introducción a Python y la programación
• Variables, estructuras de control y ciclos
• Operadores y tipos de datos
• Fundamentos de programación estructurada
• Primeros ejercicios prácticos

Duración aproximada: 30 horas
Certificado: Sí
Nivel: Principiante

Es ideal para dar tus primeros pasos con bases sólidas y desarrollar la lógica necesaria para avanzar al siguiente módulo.

2. Python Essentials 2 – Nivel Intermedio

Recomendado una vez que dominas lo básico. Este curso profundiza en conceptos esenciales para desarrollar programas más complejos:

• Funciones avanzadas
• Módulos, paquetes y entornos
• Manejo de excepciones
• Programación orientada a objetos (POO)
• Trabajos prácticos y desafíos reales

Duración aproximada: 40 horas
Certificado: Sí
Nivel: Intermedio

Aquí consolidarás tus habilidades y te prepararás para proyectos más profesionales o incluso para iniciar tu camino hacia certificaciones internacionales.

Ir a los cursos: Python

Google Antigravity: el IDE de próxima generación impulsado por IA

En noviembre de 2025, Google presentó Antigravity, un entorno de desarrollo integrado (IDE) revolucionario que pone a los agentes de inteligencia artificial en el centro del proceso de codificación. Esta herramienta redefine cómo los desarrolladores interactúan con el código, gracias a su arquitectura “agent-first” que permite que varios agentes autónomos trabajen simultáneamente sobre el editor, la terminal y el navegador.

¿Qué hace especial a Antigravity?

1. Agentes autónomos y multi-superficie
   A diferencia de los asistentes de código tradicionales, los agentes de Antigravity no solo sugieren líneas: pueden planificar tareas complejas, escribir código, ejecutar comandos en la terminal e interactuar con el navegador para probar funciones.
2. Modelo IA avanzado
   Antigravity está potenciado por Gemini 3 Pro, el modelo más reciente de Google, y también admite otros modelos como Claude Sonnet 4.5 y GPT-OSS.
3. Artefactos para la verificación
   Cada agente genera “artefactos”: listas de tareas, planes de implementación, capturas de pantalla y grabaciones de navegador que documentan lo que han hecho. Esto permite a los usuarios verificar fácilmente el progreso y las intenciones del agente.
4. Retroalimentación intuitiva
   Los desarrolladores pueden dejar comentarios sobre los artefactos, ya sean textos o imágenes, de forma similar a cómo se editan documentos en Google Docs. Esa retroalimentación se incorpora al agente sin detener su ejecución.
5. Gestión de múltiples agentes
   Antigravity incluye una vista “Manager” —una especie de centro de mando— que permite orquestar múltiples agentes trabajando en paralelo en diferentes espacios de trabajo.
6. Aprendizaje continuo
   Los agentes no solo ejecutan tareas: aprenden de cada interacción, incorporando patrones de código, estrategias y comentarios en una base de conocimiento para mejorar con el tiempo.
7. Pruebas automáticas en navegador
   Gracias al control del navegador, un agente puede probar la interfaz web, verificar que los cambios funcionen correctamente y generar reportes visuales.
8. Gratuito (en vista previa)
   Antigravity está disponible de forma gratuita durante su fase de “public preview” para Windows, macOS y Linux, con límites de uso “generosos” para Gemini 3 Pro.

¿Por qué importa para los desarrolladores?

• Productividad: al delegar tareas complejas a agentes, los desarrolladores pueden dedicar más tiempo al diseño, la arquitectura y la innovación.
• Colaboración más fluida: con artefactos y feedback, la colaboración entre humanos y agentes es más transparente y efectiva.
• Confianza: los artefactos y la trazabilidad permiten verificar la acción de los agentes, lo que reduce la opacidad habitual de algunas IA.
• Escalabilidad: la capacidad de manejar múltiples agentes a la vez facilita proyectos grandes y complejos sin perder el control.
• Innovación en pruebas: la integración navegador-terminal-editor abre la puerta a ciclos de testeo más avanzados y automatizados.

Desafíos y críticas actuales

• Algunos usuarios reportan problemas de límite de uso: la cuota se refresca cada 5 horas, lo que puede resultar restrictivo para usuarios intensivos.
• Hay quienes mencionan bugs de interfaz, como zonas “no clicables” en la ventana de la aplicación.
• Se trata de una versión muy nueva, por lo que aún hay margen para pulir la experiencia y añadir más modelos o funciones.

¿Quién debería probar Antigravity?

• Desarrolladores que buscan automatizar flujos de trabajo complejos sin sacrificar control.
• Equipos o startups interesados en adoptar herramientas de IA de vanguardia.
• Personas curiosas sobre el futuro de los entornos de desarrollo colaborativos con IA.
• Educadores y entusiastas de la IA que quieren explorar cómo los agentes pueden cambiar la forma de programar.

Google Antigravity es más que un IDE: es una plataforma que materializa una visión ambiciosa del desarrollo asistido por IA, donde los agentes no solo ayudan, sino que actúan como verdaderos operadores autónomos. Su enfoque “agent-first”, la capacidad de generar artefactos verificables, y su integración con múltiples modelos de IA lo convierten en una de las apuestas más interesantes para el futuro del software. Si estás buscando explorar cómo la IA puede mejorar tu productividad o transformar tu forma de trabajar, Antigravity merece sin duda una oportunidad.

Tags:
#Google #Antigravity #IA #Desarrollo #Programación #IDE #Gemini3 #AgentesIA #Automatización #InnovaciónTech