¿Cómo deberían los diseñadores aprender a programar? La terminal y los editores de texto (parte 1)

Como diseñador con muchos años de experiencia, a menudo animo a mis colegas e informes a adquirir algunas habilidades de codificación. Si bien muchos están abiertos a la idea, otros se resisten a la idea. Por lo general, escucho alguna variación de "No estudié diseño para convertirme en desarrollador". Si bien esta es una preocupación válida, me gustaría enfatizar dos puntos: una mejor comprensión de los materiales generalmente conduce a mejores resultados, y existe una distinción importante entre "codificación" e "ingeniería de software".

Esta serie de artículos de dos partes debería ser útil para cualquier diseñador que desee adquirir también algunas habilidades de codificación.

Comprender las materias primas

Al contrario de lo que algunos puedan pensar, el diseño no se trata de crear hermosas maquetas, se trata de brindar una experiencia intuitiva y funcional al usuario final. Eso simplemente no se puede hacer sin una comprensión de los componentes básicos de una solución. Una arquitecta no va a ser muy buena en su trabajo si no entiende los materiales que exigen sus planos y un diseñador no va a ser muy bueno si no entiende los materiales que hacen que sus diseños cobren vida. - el código. La experiencia con la codificación ayuda a los diseñadores a comprender qué es posible y qué no, y si sus diseños podrán o no realizar de manera efectiva las funciones deseadas.

También les aseguro a mis colegas que el conocimiento de la codificación no significa que uno tenga que convertirse en ingeniero. Los dos se refieren a conjuntos de habilidades diferentes, aunque relacionados. Como escribió recientemente Kyle Thayer, candidato a doctorado en la Universidad de Washington, el campo de la informática (o ingeniería) se trata de brindar a los estudiantes "una visión general del campo científico de la informática":

“El propósito de un título en Ciencias de la Computación es brindar a los estudiantes una visión general del campo científico de la computación. Si bien esto incluye algo de programación, la programación se realiza principalmente con el propósito de aprender sobre otras áreas (por ejemplo, sistemas operativos, algoritmos, aprendizaje automático, interacción humano-computadora). Un título en informática es un buen primer paso en el campo académico de la informática”.

—Kyle Thayer

Por el contrario, la codificación simplemente significa familiarizarse lo suficiente con un lenguaje de programación dado para completar una tarea. Pedirle a alguien que aprenda HTML básico o JavaScript no requiere que se convierta en un arquitecto de software de pila completa. A pesar de lo que algunos puedan pensar, bifurcar un repositorio y copiar y pegar las respuestas de Stack Overflow no lo convierte en un ingeniero de software, pero puede aumentar el valor que aporta como diseñador a un equipo de desarrollo de productos.

¿Qué pasa con el "código bajo"?

Algunos pueden decir que estamos entrando en un futuro de código bajo donde los diseñadores (y desarrolladores) pueden crear aplicaciones a través de la funcionalidad de arrastrar y soltar y una GUI (interfaz gráfica de usuario). Entonces, tomarse el tiempo para aprender un lenguaje de programación no “vale la pena”. La aparición de herramientas como Webflow, Modulz, FramerX, UXPin, etc., parece apoyar esta línea de razonamiento. Y esto puede ser muy cierto para muchas aplicaciones: es más fácil que nunca crear un sitio o una aplicación sin una sola línea de código. Sin embargo, si no comprende los principios subyacentes, limitará el valor que puede ofrecer con una aplicación de código bajo.

Tampoco estamos todavía en el punto en el que puede crear aplicaciones a escala empresarial con plataformas de código bajo. Como diseñadores tenemos que trabajar en el mundo en el que vivimos, no en el que imaginamos que se avecina.

Dicho esto, todos aportan una combinación única de habilidades a la mesa. El conocimiento del código no es una necesidad absoluta y solo debe fomentarse, no ser obligatorio.

¿Donde empezar?

Hay una cantidad infinita de herramientas, idiomas, escuelas, guías y otros recursos disponibles para cualquier persona que tenga acceso a Internet. Entonces, ¿por dónde empezar? Un descargo de responsabilidad importante: de ninguna manera soy un experto ni nada parecido a un ingeniero de software, y las siguientes son ideas de mi experiencia personal, no un camino garantizado hacia el éxito.

Muchos de los diseñadores/desarrolladores que conozco generalmente han comenzado a piratear plantillas HTML y CSS en sitios como MySpace, Geocities, Tumblr, Neopets u otros. Ahora que me he fechado lo suficiente, para cualquiera que comience hoy, recomendaría comenzar en su shell de interfaz de línea de comandos (CLI) amigable.

La Terminal: Una Herramienta Esencial

La aplicación de referencia para los directores de Hollywood cuando hay un pirata informático en la pantalla, la terminal es simplemente una interfaz que le permite ejecutar acciones a través de una entrada de texto en lugar de la interfaz gráfica de usuario (GUI) a la que la mayoría de la gente está acostumbrada. Dejaré que los desarrolladores reales expliquen las complejidades y los procedimientos técnicos, pero para nuestros propósitos es lo suficientemente bueno saber que familiarizarse con la CLI es beneficioso por varias razones.

La terminal le da acceso a la estructura de archivos y carpetas de su computadora: de la misma manera que hace clic en Finder o Explorer, navega usando su teclado en la terminal. Definitivamente lleva algún tiempo acostumbrarse, pero desarrollar su modelo mental en esta área es fundamental para trabajar en código.

Como muchos diseñadores, uso el entorno macOS (anteriormente conocido como OS X), pero lo siguiente se aplica a otros sistemas operativos *nix (Linux, Unix) y también a Windows PowerShell. Si bien hay mucha superposición entre los diferentes sistemas operativos modernos, hay algunas diferencias que haré todo lo posible para resaltar.

Expresiones regulares

Una característica clave en una CLI es la capacidad de usar expresiones regulares (regex) en sus comandos. Piense en las expresiones regulares como operaciones de búsqueda booleanas (usando comillas para buscar frases exactas o el signo menos para excluir palabras) con esteroides: le permiten definir un patrón en una cadena de texto para que pueda realizar alguna acción en la salida. Estos son algunos ejemplos del mundo real:

1. Si tiene una lista larga de números de teléfono en una variedad de formatos, puede definir un script que le brinde un resultado consistente basado en una expresión regular, por ejemplo: (###) ###-#### para el Formato de números de teléfono de EE. UU.
2. Si desea cambiar rápidamente el nombre de un grupo de archivos a un caso específico, desde kebab-case a CamelCase o cualquier cosa intermedia.

Aquí hay algunos comandos de terminal básicos ^* para ayudarlo a comenzar:

1. cd significa "Cambiar directorio", escriba esto y luego una ruta de archivo o carpeta para ir; tenga en cuenta que puede escribir un nombre de carpeta, pero debe estar dentro de su carpeta actual para ir a ella.
2. ls enumera los archivos y carpetas en su carpeta actual.
3. pwd significa "Imprimir directorio de trabajo"; esto mostrará una lista de dónde se encuentra actualmente en su computadora.
4. mkdir y un nombre de carpeta crearán una carpeta en su directorio de trabajo.
5. usar cd con .. te lleva un nivel más arriba: si estás en /users/username/documents/2019 e ingresas cd ../.. terminarás en /users/username .
6. Sugerencia adicional: presionar la tecla Tab se completará automáticamente a medida que escriba una ruta de carpeta/archivo.

Nota : lo siguiente funcionará en la línea de comando de Windows ( cmd ):

• cd , cd .. , mkdir , tecla de tabulación para autocompletar ruta ( ls y pwd no funcionarán) .

La línea de comandos más moderna de Windows (Windows PowerShell) es compatible con todos ellos:

• cd , cd .. , ls , pwd , mkdir y Tab para autocompletar ruta.

Para obtener una lista completa de los comandos disponibles en PowerShell, consulte esta página de ayuda de Microsoft "Uso de nombres de comandos familiares".

Gestión masiva de archivos

Puede manipular archivos y carpetas en masa a través de la terminal; aquí hay algunas ideas:

1. Puede crear tres años de carpetas con subcarpetas para cada mes con un solo comando: usar mkdir -p y {list-of-years}/{list-of-months} creará carpetas para cada año con subcarpetas para cada mes. ¡Usa tu imaginación, estoy seguro de que puedes darle un buen uso a esto!
2. Puede limpiar rápidamente su escritorio usando mv Screen\ Shot* Screenshots : esto moverá todos sus archivos que comienzan con "Screen Shot" a una carpeta llamada "Screenshots".

Scripting y mantenimiento

Ahora que tenemos una idea del poder de las expresiones regulares y las opciones disponibles en la terminal, podemos comenzar a combinar esas cosas en scripts . Un script muy simple, pero poderoso y de uso común es el renombrador de archivos de Mike G:

 criteria=$1 re_match=$2 replace=$3 for i in $( ls *$criteria* ); do src=$i tgt=$(echo $i | sed -e "s/$re_match/$replace/") mv $src $tgt done

Lo que este script le permite hacer es definir el alcance ( criteria ), definir lo que le gustaría cambiar ( re_match ) y lo que le gustaría cambiar ( replace ), y luego ejecutarlo.

Hay muchos otros scripts que puede crear además de crear y renombrar archivos: el script de redimensionamiento por lotes de Vlad es un excelente ejemplo de las capacidades de ahorro de tiempo que puede crear usando scripts bash.

Consejos y trucos avanzados

Algo que he descubierto a lo largo de los años es que reiniciar regularmente mi computadora y reinstalar el sistema operativo ayuda a mantenerla relativamente ordenada y evita las ralentizaciones que todos experimentan después de años de detritos digitales que se acumulan en los discos duros. Para muchos, la perspectiva de limpiar una computadora y volver a configurar todo suena, en el mejor de los casos, como unos pocos días de trabajo y, en el peor de los casos, como una pesadilla imposible de la que quizás nunca se recupere.

Pero no tiene por qué ser así: al usar algunas herramientas de línea de comandos, una vez que haya realizado una copia de seguridad, borrado y reinstalado su sistema operativo, puede instalar no solo su lista de aplicaciones favoritas, sino también fuentes en cuestión de minutos usando Homebrew. (Homebrew es solo para Mac y Linux. Para Windows, pruebe Chocolatey, que es una alternativa sólida).

Si está interesado, hemos creado una guía de configuración fácil de seguir para que su computadora esté en buenas condiciones para la mayoría de los desarrollos. Nuestra guía es para macOS, pero Owen Williams también ha escrito una guía sólida para Windows.

Si no tiene tiempo para la serie completa de tutoriales de Wes sobre la línea de comandos, al menos le recomiendo la siguiente pila:

1. Oh mi ZSH
2. zsh-autosugerencias
3. zsh-resaltado de sintaxis
4. z-salto-alrededor

Elegir un editor de texto

Hay muchas opciones cuando se trata de elegir un editor de código: Sublime Text y VS Code (Visual Studio Code) son los dos con los que tengo más experiencia y que estoy usando actualmente.

Sublime Text fue uno de los primeros editores de texto que se hizo popular entre los desarrolladores front-end: fue el estándar de oro hasta hace unos años. Funciones como múltiples cursores, un poderoso administrador de paquetes y accesos directos altamente personalizables que le permitieron navegar rápidamente dentro y entre archivos y carpetas. Sin mencionar que era una aplicación increíblemente liviana y rápida que la convirtió en una elección fácil.

VS Code (Visual Studio Code) apareció en escena alrededor de 2015, la gente tardó un tiempo en cambiar de Atom y Sublime, pero VS Code se ha establecido como el editor favorito de muchos desarrolladores. Además de casi todas las características de Sublime, VS Code se diferenció con una terminal incorporada y una estrecha integración con Git. Además, Visual Studio Code tiene un rico ecosistema de complementos que le permite ampliar y personalizar su entorno para el deleite de su corazón.

Todo lo que quiere decir: no necesita ser un desarrollador para apreciar las características de un buen editor de código. Le he encontrado muchos usos en mi trabajo diario; dos, en particular, son la capacidad de usar múltiples cursores y el uso de expresiones regulares para buscar y reemplazar texto en carpetas de archivos. Echemos un vistazo más de cerca a ambos.

Edición con varios cursores

Imagínese su procesador de textos típico: ¿esa línea vertical parpadeante que muestra dónde irá el texto que está ingresando? ¡Ahora imagine la capacidad de agregar más de un cursor a esta ventana para que todo lo que escriba aparezca donde haya un cursor!

Es posible que esto no te sorprenda todavía, así que aquí hay un ejemplo que muestra algunas formas en que un editor de texto avanzado puede ayudarte a crear eficiencias diarias en tu flujo de trabajo.

Aquí tenemos una lista de nombres que necesitamos convertir en direcciones de correo electrónico; también nos gustaría ponerlos en minúsculas y luego ordenarlos alfabéticamente. Esto se puede hacer con unas pocas pulsaciones de teclas.

Una vez que pegue la lista, Cmd + Shift + P abre la Paleta de comandos (término elegante para un menú de búsqueda que le brinda todas las funcionalidades disponibles). Básicamente, puede escribir en este menú lo que desea hacer, casi cualquier cosa que pueda hacer con el texto está disponible aquí. Si no es así, es probable que haya un complemento o una extensión que pueda encontrar.

Podemos cambiar las mayúsculas y minúsculas y ordenar las líneas en cuestión de segundos; luego, al presionar Ctrl + Shift + las teclas de flecha, se agregan cursores, luego, lo que escribamos se agrega a cada línea; en este caso, estamos convirtiendo los nombres en direcciones de correo electrónico, pero su imaginación salvaje podría encontrar muchas otras formas de usar esto.

Podría estar diciendo: bueno, puedo hacer esto en Excel o Google Sheets, lo cual es cierto, pero descubrí que es mucho más rápido manejar este tipo de cosas en un editor de texto. Evita tener que escribir fórmulas y seleccionar cosas con el mouse.

¿Qué editor de código debo usar?

Soy diseñador, así que, por supuesto, mi respuesta es "depende".

• Si eres nuevo en estos conceptos, te recomendaría obtener una prueba gratuita de Sublime: sigue siendo una aplicación muy liviana y no consume demasiados recursos del sistema. Puede personalizar los enlaces de teclas de Sublime (palabra elegante para teclas de acceso rápido) y ampliar su funcionalidad integrada con complementos.
• Si ha estado usando Sublime, Atom u otro editor, también le recomiendo que consulte VS Code. El equipo de Microsoft realmente ha hecho un excelente trabajo al convertirlo en un editor de texto poderoso pero fácil de usar.

Personalmente, uso ambos editores: Sublime es rápido como un rayo y se abre en una fracción de segundo, lo que me permite pegar y manipular texto fácilmente. Pero cuando quiero hacer un trabajo más serio, uso VS Code. Es difícil superar el paquete todo en uno que ofrece VS Code: un vibrante ecosistema de complementos y extensiones, una potente paleta de comandos y una interfaz hiperpersonalizable significa que realmente puede personalizarlo. Sin mencionar el hecho de que Microsoft está muy incentivado para garantizar que sea una experiencia de primera clase para la productividad de los desarrolladores.

Conclusión, ¿y qué sigue?

En este primer artículo, habrá aprendido los conceptos básicos de la terminal, algunos trucos de productividad para comenzar y debería tener una mejor idea de qué editor de código elegir. En la siguiente parte, continuaremos con los temas de control de versiones, HTML y CSS, y una introducción a los principios de ingeniería.

¿Algo anda mal?

Hay una buena posibilidad de que algo en esta publicación sea oscuro, obtuso y/u obsoleto y me encantaría tener la oportunidad de mejorarlo. Deja un comentario a continuación, envíame un mensaje privado o @mencióname en Twitter para que pueda mejorar.