Atajos y trucos para usar Visual Studio Code desde la terminal en Mac (como una pro)

Posted on by marta
Visual Studio Code desde la terminal en Mac

Potencia tu flujo de trabajo con terminal y VS Code en Mac

Si ya sabes cómo abrir Visual Studio Code desde la terminal en Mac con code, ¡es hora de ir un paso más allá!

Aquí te comparto una selección de trucos y atajos útiles para exprimir al máximo la combinación de terminal + VS Code en macOS.

Estos tips te ayudarán a ahorrar tiempo y trabajar mejor con Visual Studio Code desde la terminal en Mac.

1. Crea alias personalizados para abrir proyectos

Si sueles trabajar en varios proyectos, puedes crear alias rápidos para abrir cada uno sin tener que navegar carpetas:

📁 Paso 1: Abre tu archivo de configuración
Dependerá de tu shell:

  • Zsh (por defecto en macOS):


	nano ~/.zshrc

Bash:


	nano ~/.bash_profile

📁 Paso 2: Añade tus alias


	alias portafolio="code ~/Proyectos/portafolio"
alias blogdev="code ~/Sites/martagonzalez.dev/blog"

Guarda el archivo y ejecuta source ~/.zshrc (o .bash_profile) para aplicar los cambios.

Ahora solo escribe portafolio y ¡listo!

2. Abre archivos individuales directamente

¿Sabías que también puedes abrir un archivo concreto?


	code index.html

Incluso varios a la vez:


	code index.html style.css app.js

3. Abre VS Code sin cargar ningún proyecto

Si solo quieres lanzar el editor sin abrir carpetas o archivos, basta con:


	code

Ideal para tomar notas rápidas o crear archivos nuevos.

4. Combina VS Code con Git desde la terminal

Visual Studio Code se lleva muy bien con Git. Si estás dentro de un repo, puedes hacer:


	code .gitignore

O incluso configurar que los diffs y merges se abran en VS Code:


	git config --global core.editor "code --wait"

5. Limpieza: cómo reiniciar VS Code desde la terminal

Si algo se queda pillado o quieres cerrar y reabrir el editor rápidamente:


	killall "Visual Studio Code"; sleep 1; code .

⚠️ Úsalo con cuidado, pero puede sacarte de un apuro.

💎 Bonus: otros comandos útiles de VS Code CLI


code --new-window            # Abrir en nueva ventana
code -r .                    # Reemplaza la ventana actual
code --diff file1 file2      # Ver diferencias entre archivos
code --disable-extensions    # Modo sin extensiones (ideal para debug)

A medida que te acostumbras a trabajar desde la terminal, verás que estos pequeños trucos se vuelven parte natural de tu día a día.
Y si además usas alias inteligentes, tu flujo de trabajo se vuelve mucho más ágil y profesional.

Si estás empezando y aún no sabes cómo abrir VS Code desde la línea de comandos, te recomiendo leer primero este artículo: cómo abrir Visual Studio Code desde la terminal en macOS.

¿Aún no tienes instalado Visual Studio Code? Puedes descargarlo gratis desde su sitio oficial y comenzar a potenciar tu flujo de trabajo desde la terminal en Mac.

El síndrome Baby Duck en UX: qué es y cómo impacta en tus decisiones de diseño

Posted on by marta

El síndrome Baby Duck en UX es un sesgo cognitivo que influye significativamente en cómo los usuarios perciben y adoptan nuevos productos digitales. Por ello, en este artículo exploraremos qué es, de qué manera impacta el diseño de interfaces y, además, qué estrategias puedes aplicar para minimizar sus efectos en la experiencia del usuario.

Síndrome Baby Duck en UX

¿Qué es el síndrome Baby Duck?

El síndrome Baby Duck en UX describe la tendencia de los usuarios a preferir las
interfaces y experiencias digitales con las que ya están familiarizados.
Cuando un diseño cambia drásticamente, los usuarios pueden rechazarlo,
incluso si la nueva versión es más eficiente o atractiva.

Origen del término

El nombre proviene del fenómeno de impronta observado en los patos bebés.
Al nacer, un pato sigue al primer objeto en movimiento que ve, generalmente a su madre.
De forma similar, en el ámbito digital, los usuarios desarrollan una
impronta digital con sus primeras experiencias de uso, lo que condiciona sus
expectativas futuras.

Ejemplos del síndrome Baby Duck

  • Usuarios que prefieren versiones antiguas de aplicaciones, a pesar de las mejoras en el diseño UX.
  • Rechazo al rediseño en interfaces de redes sociales populares.
  • Dificultades de adaptación a nuevos sistemas operativos o dispositivos digitales.

¿Cómo afecta el síndrome Baby Duck a la experiencia de usuario?

El síndrome Baby Duck puede generar resistencia al cambio y afectar la
percepción de un producto digital. Como consecuencia, esto impacta directamente en la
usabilidad y en la forma en que los usuarios interactúan con una interfaz digital.

Impacto en la usabilidad

  • Mayor curva de aprendizaje: los usuarios pueden sentirse perdidos si una interfaz cambia demasiado, lo que dificulta su adaptación.
  • Frustración y abandono: un cambio radical puede generar rechazo y hacer que los usuarios prefieran buscar alternativas.
  • Falta de adopción de nuevas funciones: en caso de que los cambios no estén bien explicados, los usuarios pueden ignorarlos o no aprovechar su potencial.

Relación con otros sesgos cognitivos

El síndrome Baby Duck está relacionado con otros sesgos mentales que influyen en nuestras decisiones:

  • Efecto de mera exposición: tendemos a preferir lo que ya nos resulta familiar, incluso si existen mejores opciones.
  • Sesgo de status quo: nos resistimos a los cambios, aunque estos sean beneficiosos.
  • Efecto Ikea: valoramos más aquello que hemos personalizado o aprendido a usar, lo cual refuerza el apego a interfaces anteriores.

Estrategias para minimizar el síndrome Baby Duck en UX

Si estás diseñando una nueva interfaz o renovando una existente, considera estas
estrategias de diseño UX para reducir la resistencia al cambio y mejorar la
experiencia de usuario.

Diseño progresivo y sensación de familiaridad

Mantén elementos reconocibles

Siempre que sea posible, evita cambiar radicalmente la interfaz de usuario.
En su lugar, modifica de forma progresiva aspectos como:

  • Colores y tipografía
  • Posición de botones clave
  • Flujo de navegación

Usa patrones de diseño conocidos

Además, aprovecha convenciones establecidas en diseño UX, como:

  • Menús en la parte superior o lateral
  • Iconos universales (por ejemplo, la lupa para buscar)
  • Botones con etiquetas claras y comprensibles

Comunicación y educación del usuario

Explica los cambios de manera clara

Para facilitar la adaptación, incluye guías interactivas, mensajes emergentes o pequeños tutoriales
que expliquen las novedades paso a paso.

Permite la transición gradual

Cuando sea viable, ofrece la opción de volver temporalmente a la versión anterior.
Esto ayuda a reducir la ansiedad y permite una adaptación más suave.

Pruebas de usabilidad y recopilación de feedback

Realiza tests con usuarios

Antes de lanzar un rediseño, prueba la nueva interfaz con usuarios reales para detectar posibles
problemas de adaptación o usabilidad.

Recoge y analiza feedback

Escucha las quejas y sugerencias de los usuarios y ajusta la interfaz según
sus necesidades y expectativas.

🐥 En resumen: lo que aprendimos del síndrome Baby Duck

🔍 Qué es:
Un sesgo cognitivo que nos lleva a aferrarnos a lo primero que aprendimos… incluso cuando ya no es lo mejor.

📉 Impacto en el diseño UX:

  • Frena la innovación
  • Provoca rechazo a cambios visuales o funcionales
  • Genera resistencia al aprendizaje de nuevas herramientas

💡 ¿Te has encontrado alguna vez rechazando un rediseño solo porque el anterior te parecía más cómodo?

A veces, lo familiar pesa más de lo que debería.

Para profundizar en el impacto cognitivo del síndrome Baby Duck en el diseño de interfaces, un estudio realizado por psicólogos de la HSE University ofrece una perspectiva académica valiosa. Este análisis no solo explica cómo se manifiesta este sesgo en el entorno digital, sino que también lo compara con otros sesgos cognitivos que influyen en la experiencia del usuario, como el sesgo de confirmación o la aversión a la pérdida.

👉 HSE Psychologists Examine Baby Duck Syndrome – HSE University

📚 Si quieres seguir explorando cómo tomar mejores decisiones de diseño, echa un vistazo a esta guía:👉 De wireframe a prototipo en Figma paso a paso

Dot Coding: Qué es y cómo aplicarlo en el desarrollo web

Posted on by marta

La notación por puntos (también conocida como dot notation o codificación con puntos) es una práctica común, aunque no siempre reconocida formalmente, en el desarrollo web moderno. Su finalidad es clara: mejorar la legibilidad, la organización y el mantenimiento del código mediante el uso de puntos (.) como herramienta estructural. Esta técnica es clave en lenguajes como JavaScript, en metodologías CSS y en la definición de rutas en aplicaciones web.

Además, si te interesa optimizar tu flujo de trabajo, puedes explorar estas técnicas efectivas para depurar tu código en menos tiempo, que complementan perfectamente el uso de notación por puntos.

Gráfico sobre notación por puntos en desarrollo web, mostrando ejemplo de dot coding y código JavaScript

En este artículo aprenderás qué es la notación por puntos, cómo aplicarla, buenas prácticas, errores a evitar y cómo puede ayudarte a escribir código más limpio y profesional.

Para ampliar tu comprensión sobre estructuras de código, te recomendamos leer esta guía de objetos en JavaScript por MDN.

¿Qué es la notación por puntos?

La notación por puntos se refiere al uso de puntos para representar relaciones jerárquicas y facilitar la comprensión del código. Es un recurso sintáctico y semántico que permite acceder a propiedades, definir convenciones de nomenclatura o estructurar rutas URL. Esta sintaxis con punto también es útil para escribir código más organizado y predecible.

Principales aplicaciones

1. Notación de objetos en JavaScript (y otros lenguajes)

La dot notation es esencial en JavaScript para acceder a propiedades de objetos. También se conoce como acceso por puntos y se usa ampliamente en lenguajes como Python y Java:

const usuario = {
  nombre: "Marta",
  edad: 30
};
console.log(usuario.nombre); // "Marta"

2. Convenciones de nombres en CSS (BEM, ITCSS)

Metodologías como BEM utilizan el punto para mejorar la estructura semántica del CSS, permitiendo una escritura jerárquica de clases:


.boton {
  background-color: blue;
}
.boton__icono {
  width: 20px;
}
.boton--activo {
  background-color: red;
}

Aquí, los puntos estructuran el código CSS de manera clara, separando bloques (boton), elementos (boton__icono) y modificadores (boton–activo).

Más en BEM.

3. Rutas y URLs jerárquicas

Frameworks como Next.js y Laravel permiten el uso de puntos para representar jerarquías en rutas, una práctica útil para definir URLs estructuradas:

Ejemplo en Next.js:

/perfil/[usuario].js → /perfil/martagonzalez

O en APIs REST, donde los puntos pueden representar estructuras jerárquicas:

GET /usuarios.marta.datos

Esta forma de estructurar las rutas contribuye a una arquitectura más clara y predecible.

Ver Next.js.

Beneficios

  • Legibilidad mejorada: El uso consistente de puntos ayuda a entender la estructura del código.
  • Organización clara: Ideal para mantener el orden en proyectos medianos y grandes.
  • Facilita el mantenimiento: Simplifica la localización de errores y la actualización de funcionalidades.

Buenas prácticas

  • Utiliza dot notation solo donde sea semánticamente coherente y aporta claridad.
  • Apóyate en metodologías como BEM o en guías de estilo para mantener la coherencia del código CSS.
  • Mantén una nomenclatura clara, predecible y bien documentada para facilitar la colaboración en equipo.

Errores comunes a evitar

  • Abusar del uso de puntos en nombres que no requieren jerarquía, lo que puede llevar a confusión.
  • No documentar adecuadamente la estructura de nombres o rutas empleadas.
  • Combinar la notación por puntos con otras convenciones sin una lógica clara o coherente.

La notación por puntos es una estrategia simple pero poderosa para mejorar la calidad del código en proyectos web. Adoptarla puede marcar una gran diferencia en la claridad, organización y escalabilidad de tus desarrollos.