A continuación, en esta Introducción a herramientas Frontend en Desarrollo Web pretenderé explicar breve y suficientemente algunas herramientas y conceptos que considero muy importantes a nivel de desarrollo web, como lo son los editores de texto, los navegadores web y la organización de tus proyectos. Considero muy importante considerar estos tres pilares en nuestro camino como programadores.

Puedes saltar directamente al subtema que más te interese en el índice a continuación:

• Editores de Texto
• Navegadores Web
• Organización de las carpetas de tus proyectos

Editores de Texto

Los editores de texto especializados en programación serán tus principales amigos en tu camino de programador, harán mucho más sencillo organizar tu código con sangrías o tabulaciones.

Los editores de texto como Visual Studio Code que es el que voy a recomendar para seguir este tutorial de Introducción a herramientas Frontend en Desarrollo Web, estos editores pueden ayudar a sugerir tramos de código según funciones que lleguemos a requerir.

Como ya se había indicado el Editor de Texto que voy a recomendar es Visual Studio Code ya que es totalmente gratuito, tiene una gran comunidad que le provee una buena cantidad de extensiones que permiten optimizar el código para necesidades que lleguemos a tener según el lenguaje con el que necesitemos trabajar.

Descarga e Intalación de Visual Studio Code

Lo primero es ingresar al siguiente enlace:

https://code.visualstudio.com/

Pulsamos la opción de descargar, normalmente recomiendo instalarlo con todos los parámetros por defecto, pero en lo personal yo prefiero habilitar todas las opciones disponibles que no vienen seleccionadas por defecto, como por ejemplo la opción de crear un enlace directo para el escritorio, agregar la opción abrir con Code, que permite solo seleccionar una carpeta y con clic derecho, abrir esta como un proyecto directamente en visual studio code, esta última opción es muy práctica para trabajar con proyectos y librerías que hayamos descargado.

Añadir a la PATH es una opción que ya viene seleccionada por defecto es que es muy útil para llamar a Visual Studio Code como servicio desde consola y poder abrir tramos de código específicos con VS Code Fácilmente.

Configuración de Visual Studio Code

Recomiendo elegir un tema obscuro, ya que vas a estar horas trabajando frente al ordenador y de este modo podrás cuidar tu vista y con el alto contraste con las letras podrás ver mejor las diferentes características de cada lenguaje y ser mucho más efectivo en tu proceso de programación.

Instalación de Plugins

Los plugins son herramientas que permiten optimizar tu proceso de desarrollo a nivel general, no solo sirven para esta Introducción a herramientas Frontend en Desarrollo Web sino que extiendes las opciones que ofrece Visual Studio Code, para que el proceso de desarrollo sea lo más efectivo posible.

La instalación de Plugins es súper sencilla basta con pulsar el icono de los cuadrados ubicado en la parte izquierda de la pantalla de inicio en Visual Studio Code y luego escribir en el buscador que se habilita lo que necesitemos.

A continuación muestro un breve listado de plugins que puedes utilizar en este caso para el desarrollo en Frontend:

Spanish Language Pack for Visual Studio Code

Este plugin te pone Visual Studio Code totalmente en español, honestamente no lo utilizo, no veo necesidad de cambiar el lenguaje, pero si te parece una buena opción esta es mejor forma de hacerlo.

Auto Rename Tag

Especialmente en html, requieres de etiquetas de apertura y cierre, esta extensión te permite con solo cambiar la etiqueta de apertura, se cambia automáticamente la de cierre.

Más adelante verás con más detalle la utilidad de esta extensión.

Color Highligh

Este plugin te muestra el color que estás ingresando visualmente, en HTML es posible poner el color White, Black, Yellow, cualquier color con su nombre en inglés, pero también es posible escribir colores en hexadecimal por ejemplo estos colores están con un # y un número, no es intuitivo para un humano que color en específico estoy utilizando, por esto, esta extensión se vuelve muy útil para nuestro trabajo en el Frontend.

indent-rainbow

Esta herramienta le pone colores a la indentación, haciendo más sencillo ver el espaciado y la organización del código.

Intellicode

Este código funciona muy bien con el auto completado, haciendo más fácil el proceso de ir escribiendo los códigos que vas necesitando por ejemplo para poner un favicon, un icono en la pestaña de la página, solo escribes la palabra link, y el sistema te muestra una opción que dice favicon, la eliges y ya tienes el código escrito para realizar el proceso sencillamente.

Live Server

Esta extensión te habilita un servidor desde Visual Studio Code en tu navegador por defecto, con el que muestra los cambios que vayas haciendo en tiempo real, es muy muy útil esta opción y por eso es muy popular Live Server entre los usuarios de VS Code.

Existe una infinidad de Plugins muy útiles que por el momento no se abordarán en el presente tutorial, pero que sin duda a medida que avancemos se irán integran en el curso.

Navegadores Web

Los Navegadores Web son el universo donde la magia de lo que hacemos como desarrolladores sucede, constantemente estaremos interactuando con estas herramientas, que incluso tienen opciones específicas para programadores como los son por ejemplo la consola, la vista de móviles desde el ordenador entre otras más.

Cada navegador tiene sus propias herramientas de desarrollo, por esto, para las especificaciones de este curso utilizaremos Google Chrome, que podrás descargar del siguiente enlace si por algún motivo aun no lo tienes en tu ordenador:

https://www.google.com/chrome/

El motor de Render

Es un sistema interno que define los límites de lo que un navegador puede hacer, lo que podemos y no podemos implementar según el navegador depende de este motor de render.

Existen tres principales motores de render que utilizan los navegadores más conocidos y estos son WebKit de Safari, Gecko de Firefox, Blink de Chrome, entre otros más.

Más información en el siguiente enlace:

https://es.wikipedia.org/wiki/Motor_de_renderizado

Navegadores Evergreen

Estos navegadores se actualizan constantemente de manera automática, cada cierto tiempo que haya nuevas actualizaciones, te envían notificaciones de instalación y es necesario reiniciarlos, por esto debemos buscar que nuestro código sea mayormente compatible al menos en nuestros navegadores Evergreen para maximizar la compatibilidad de nuestras funcionalidades.

Para más información sobre los Navegadores Evergreen puedes acceder al siguiente enlace, donde se encuentra el libro High Performance Browser Networking, donde se habla con mucho más profundidad del tema desde la página 272.

https://www.oreilly.com/library/view/high-performance-browser/9781449344757/

Organización de las carpetas de tus proyectos

Un solo archivo no es un proyecto, en el desarrollo de tus aplicaciones Frontend o Backend, necesitarás trabajar con diferentes archivos, la gran recomendación sobre esto, es que todos tus archivos se encuentren dentro de una misma carpeta, para que subir estos archivos a un servidor o enviarlos a otro desarrollador, será una tarea sencilla y sin errores asociados.

Se recomienda que los nombres tanto de los proyectos, como de los archivos sean sencillos, declarativos, en lo posible estos nombres consten de una sola palabra, sin mayúsculas, sin acentos, sin espacios cuando haya la necesidad de más palabras, si no te gusta la opción de omitir espacios puedes utilizar guiones, se recomienda en mejor medida que no sea guion al piso, si en algún momento tu proyecto se va a convertir en una página web publicada, el SEO, la optimización del proyecto en los buscadores, será mejor si no se utiliza el guion al piso, sino guiones normales.

Gestión de Repositorios

La gestión de repositorios es la versión avanzada de la organización de las carpetas, puedes llevar la organización de tus archivos al siguiente nivel, fijando puntos en el tiempo a los que volver cuando sea necesario, trabajar a nivel de ambientes productivo y de desarrollo, trabajar en colaboración con otros desarrolladores de manera eficaz y escalable.

Para todo esto existe GIT que es una avanzada herramienta que permite realizar todo lo que he dicho y aún más cosas, Git es un sistema de control de versiones de código abierto Git se ha diseñado teniendo en cuenta el rendimiento, la seguridad y la flexibilidad.

Con Git puedes administrar tu información a nivel avanzado, Git se integra perfectamente con GitHub o GitLab, para llevar la configuración de repositorios a un nuevo nivel, GitHub es un portal especializado en alojar código que permite trabajar en equipo a través de Internet.

Para más información sobre Git puedes acceder al siguiente enlace:

https://git-scm.com/doc

Comandos GIT más comunes

A continuación les comparto los comandos de Git más comunes que sin duda necesitarás en la gestión de tus proyectos según lo que requieras realizar:

Comenzar un nuevo proyecto

git init
git clone
git config

Confirmar cambios:

git add
git commit

Trabajar con ramas

git branch
git checkout
git merge

Cambios de sincronización

git pull
git push

Comandos de ayuda:

git log
git status
git diff