La Esquina del Código
Un blog de Carlos Reyes Web
Volver al inicio5 consejos para ser más productivo como programador

5 consejos para ser más productivo como programador

Para un programador, es esencial hacer uso eficiente del tiempo que tiene asignado para sus proyectos, sean laborales o personales. Cualquier tip o herramienta que le permita acelerar las tareas más repetitivas será, por tanto, un instrumento de valor para solucionar sus problemas y ser más productivo. Por eso, en este artículo te compartiré cinco consejos que considero útiles para simplificar nuestras tareas como desarrolladores.

Utiliza atajos de teclado en el editor de código

Dejemos algo en claro: el periférico favorito de cualquier programador es el teclado. Utilizarlo al máximo te permitirá hacer del desarrollo un proceso más dinámico y práctico. Aprender los atajos de teclado más comunes, en especial los relacionados con el editor de código, te facilitarán operaciones como la manipulación de los archivos, la adición de comentarios, el uso de macros que inserten snippets y demás.

Te dejaré por aquí una referencia rápida con los atajos de teclado que más utilizo en Visual Studio Code, el editor de código más utilizado en la actualidad. Estos atajos funcionan en Windows, y pueden variar ligeramente dependiendo del sistema operativo:

Control + K Control + O                 ## Abre una carpeta.
Control + K F                           ## Cierra la carpeta o espacio de trabajo en cuestión.
Control + Shift + N                     ## Abre una nueva ventana del editor.
Control + /                             ## Comenta la línea seleccionada.
Shift + Alt + F                         ## Formatea el código.
Alt + Flecha arriba/abajo               ## Mueve la línea actual hacia arriba o hacia abajo
Shift + Alt + Flecha arriba/abajo       ## Copia la línea actual y la coloca por encima o por debajo.
Control + ` (backtick)                  ## Muestra/oculta la terminal integrada. Hace foco en ella.
Control + B                             ## Muestra/oculta el panel lateral izquierda. Útil para despejar la vista del código. 
Control + Shift + P                     ## Abre la paleta de comandos del editor.
Control + K Control + S                 ## Abre la lista de atajos de teclado.
Control + , (coma)                      ## Abre la configuración del editor.
Control + F                             ## Busca en el archivo actual.
Control + Shift + F                     ## Busca en todos los archivos del proyecto
Control + P                             ## Muestra el buscador de archivos.

Crea snippets de código personalizados

Crear un archivo nuevo con el código mínimo necesario para hacer una funcionalidad, puede llegar a ser repetitivo en ocasiones y, aunque algunos frameworks tienen líneas de comandos para automatizar esta tarea, otras herramientas dependen enteramente de que tú definas la estructura de archivos y carpetas. Por ende, antes que escribir cada archivo desde cero, lo mejor es crear plantillas de código (llamados snippets) que se insertan automáticamente al teclear una secuencia de caracteres concreta.

Inserción de un componente de React a través de un snippet en Visual Studio Code

Ejemplo de componente de React insertado con un snippet en Visual Studio Code

En Visual Studio Code, por ejemplo, también existen extensiones en el marketplace que agregan a tu editor plantillas comunes para casi cualquier cosa. Y si ninguna te acaba de convencer del todo, o no tiene lo que necesitas, siempre puedes crear tus propios snippets a través de la paleta de comandos. ¡Haz la prueba!

Utiliza los escritorios virtuales de tu sistema operativo

Tener dos pantallas te hace más senior que cualquier otro mortal con una sola pantalla, pero es que si además utilizas diferentes escritorios virtuales para separar contextos, ¡más temprano que tarde te convertirás en líder de tu equipo!

Separar tus múltiples ventanas en contextos diferentes te permite llevar tu multitarea a otro nivel. Puedes tener un escritorio en el que las únicas ventanas sean el editor de código y una instancia del navegador con la documentación adecuada, por ejemplo, mientras que en otro escritorio puedes tener aquellos programas y herramientas que complementan tu zona de trabajo, como el software de gestión de proyectos, la sala de chat de tu trabajo o el álbum más reciente de tu artista favorito en Spotify. Esto te permite tener menos ventanas abiertas en una misma barra de tareas, lo que te facilita cambiar de ventanas rápidamente y evitar perder el foco en tus tareas.

Puedes usar esa funcionalidad en Windows pulsando las teclas Windows + Tabulador. Esto te mostrará las ventanas y escritorios en uso. Prueba agregando unos cuantos, y después, cambia rápidamente entre estos usando la combinación de teclas Control + Windows + Flecha izquierda/derecha.

Tres escritorios virtuales de Windows

También puedes hacer los cambios de escritorio utilizando el ratón, pero, ¿en qué quedamos con los atajos del teclado?

Divide el trabajo en tareas más pequeñas.

Como no podemos comernos a la ballena de un solo bocado, nuestra mejor estrategia es ir un mordisco a la vez. Este mismo principio aplica para muchos aspectos en la vida y, en nuestro caso particular, nos viene como anillo al dedo, porque nos ayuda a trazar hojas de ruta, fechas de entrega y objetivos realistas. Dividir tu trabajo en tareas más pequeñas te ayudará a establecer prioridades y mantener el foco en aquello que debes implementar.

Para lograrlo, puedes utilizar un software de gestión de proyectos, que te proporcionan interfaces de usuario intuitivas y que te dan un vistazo más general de lo que debes hacer, o bien, puedes hacerlo de forma analógica a través de anotaciones, diagramas en papel o cualquier otra técnica de organización que conozcas.

Aprovecha las nuevas inteligencias artificiales a tu favor

Por último, para nadie es un secreto que las inteligencias artificiales actuales saben escribir código. De hecho, más que tomarlo como un tabú, debemos aprovecharlo como una ventaja para llevar nuestras ideas a la implementación de forma más rápida. Puedes pedirle a un chatbot, como ChatGPT, que genere un arreglo de datos falsos para hacer mock de tu API, contrastar tus ideas con las suyas, pedirle ayuda con un problema, o que te explique en términos simples el funcionamiento de un algoritmo concreto. Con esto puedes reducir notoriamente el coste de tiempo que requiere implementar funcionalidades triviales, o bien, solucionar rápidamente ese bug que llevas intentando corregir tres horas.

Por ejemplo:

Para el siguiente título y descripción, dame una página de Next.js que contenga todas las metaetiquetas necesarias en JSX. Incluye las de OpenGraph y Twitter. Extrae los valores del atributo "content" repetidos en constantes:

Título: 5 tips para mejorar tu productividad como programador Descripción: En este artículo te compartiré cinco tips que considero útiles para simplificar nuestras tareas como desarrolladores.

Esta es la respuesta de ChatGPT:

import Head from 'next/head';

const TITLE = '5 tips para mejorar tu productividad como programador';
const DESCRIPTION = 'En este artículo te compartiré cinco tips que considero útiles para simplificar nuestras tareas como desarrolladores.';
const IMAGE_URL = 'https://example.com/image.jpg';

const OG_TITLE = TITLE;
const OG_DESCRIPTION = DESCRIPTION;
const OG_TYPE = 'article';
const OG_IMAGE = IMAGE_URL;
const OG_URL = 'https://example.com/article';

const TWITTER_TITLE = TITLE;
const TWITTER_DESCRIPTION = DESCRIPTION;
const TWITTER_IMAGE = IMAGE_URL;
const TWITTER_CARD = 'summary_large_image';

const PAGE = () => (
  <>
    <Head>
      <title>{TITLE}</title>
      <meta name="description" content={DESCRIPTION} />
      
      {/* OpenGraph meta tags */}
      <meta property="og:title" content={OG_TITLE} />
      <meta property="og:description" content={OG_DESCRIPTION} />
      <meta property="og:type" content={OG_TYPE} />
      <meta property="og:image" content={OG_IMAGE} />
      <meta property="og:url" content={OG_URL} />
      
      {/* Twitter meta tags */}
      <meta name="twitter:title" content={TWITTER_TITLE} />
      <meta name="twitter:description" content={TWITTER_DESCRIPTION} />
      <meta name="twitter:image" content={TWITTER_IMAGE} />
      <meta name="twitter:card" content={TWITTER_CARD} />
    </Head>
    {/* Rest of the page content */}
  </>
);

export default PAGE;

Impresionante, ¿no?

Sin embargo, no todo es color de rosas aquí. Es importante considerar que, aunque parezca imposible, estos chatbots pueden arrojar resultados incorrectos, descontextualizados o, peor aún, alucinados. Por lo tanto, te sugiero verificar cualquier salida generada por una inteligencia artificial para evitar introducir problemas nuevos a tu proyecto.

Siéntete libre de aplicar cualquiera de estos consejos en tu flujo de trabajo y dale un giro de dinamismo y frescura a tus días de trabajo. Programar no tiene por qué ser monótono.

Compartir en Twitter