Herramientas básicas e indispensables en el camino a Front End Developer

No existe una «guía definitiva» sin embargo si existe un conjunto de herramientas básicas e indispensables en el camino a Front End Developer, herramientas que puedes usar como novato o como experto.

Son ese conjunto de herramientas que me han servido, que son mi básico e indispensable en el día a día.

No considero saberlo todo, por el contrario, si consideras que falta alguna no dudes en escribirme.

Vale la pena aclarar que no caeré en la batalla (pendeja!) de este software es mejor que el otro, o este framework es mejor que aquel. Cada software, sistema y framework es mejor según el uso, según la necesidad, según el caso.

Conocimiento Indispensable

Herramientas básicas e indispensables en el camino a Front End Developer

El road map es indispensable tenerlo claro

La ruta de un Front End Developer hoy es muy amplia y compleja, yo aún voy recorriendo ese camino.

Sin embargo he tenido oportunidad de ir explorando y ver las opciones de mayor demanda en el mercado y lo que no puedes dejar de saber, este no pretende ser un listado definitivo, debes tener presente que la tecnología evoluciona a una velocidad brutal, pero si es un listado muy completo, de nuevo son herramientas básicas a indispensables en el camino de Front End Developer.

 

 

  • HTML
    • Etiquetas y atributos
    • Estructura Semántica
  • CSS
    • Grid
    • FlexBox
    • Animaciones
    • Gradientes
    • Preprocesadores
      • Sass
      • Pug
    • Sprites
    • Frameworks CSS
      • Bootstrap
      • Bulma
  • Javascript
    • Fundamentos del lenguaje
    • React
    • Vue
    • Node (para NPM y servidores, además puede ser tu enlace con Back End)
  • Control de Versiones
    • Git y Github
  • Imágenes
    • Editores de Imágenes
  • Terminal y Línea de comandos
    • CMD y Power Shell en Windows
    • Git desde la línea de comandos
    • Fundamentos de linux desde la línea de comandos
  • SEO
    • Escritura para internet
    • Optimización de carga de contenidos.
  • Ejecutores de tareas
    • Gulp
    • Grunt
    • La terminal

No saltes a Javascript sin conocer y tener un buen fundamentos de HTML y CSS de esa forma podrás manipular el DOM más fácilmente, saber cuando y donde funcionan las animaciones.

Editor de Texto y otro software

Hoy en día hay muchos editores del Texto inteligente para programadores, es más regularmente puedes escribir más de un lenguaje en los mismos. Son herramientas muy importantes en el camino de todo aprendiz de Front End.

Algunos con más o menos ventajas, todo se ajustará según el proyecto y las necesidades. De nuevo todas son herramientas básicas e indispensables, pero selecciona la que prefieras.

Y comencé en su momento con Notepad++ y me gusto, luego, me pase a Sublime Text y lo amé.

Con el paso del tiempo descubrí Atom y no fue mucho de mi agrado, más adelante y por mucho tiempo use Brackets y estuve mucho tiempo enamorado del editor, a mi gusto muy potente y descubrí muchos plugins que potenciaban el trabajo.

Por último y por el momento el que más me gusta es Visual Studio Code.

Se ha vuelto el más aclamado, claro es que había sido usuario de Windows. pero todos estos son editores multiplataforma que puedes ir conociendo.

Por ahora estoy explorando prepros como un compilador de Sass y pug además de ser multiplataforma es muy bueno, ya sea.

Aquí puedes ver otros programas que uso en mis ejercicios y prácticas Front End.

Navegadores

Herramientas básicas e indispensables en el camino a Front End Developer

Los navegadores en el camino a Front End Developer

 

Google Chrome es el Rey, pero no dejes de lado a Firefox, Opera, Edge y claro Safari, recuerda que a pesar de los estándares aún hay que asegurarse que se vea bien en todos los navegadores.

Chrome tiene las herramientas del desarrollador y eso puede ser muy util con el HTML, CSS y la consola con JS.

 

 

Hardware

Realmente con una computadora básica es suficiente para comenzar, sin embargo, al paso del tiempo necesitas un segundo monitor, además de aumentar en un 20% tu productividad, te permitirá escribir de un lado el código y de otro ir viendo los cambios en tiempo real.

Un buen teléfono también será útil pues tendrás que probar el funcionamiento del sitio en móviles.

Además una silla cómoda, teclado y mouse inalámbrico.

Sistema Operativo

No puedo dar el conjunto de herramientas básicas en el camino a Front End sin mencionar sistema operativo.

Mis inicios fueron con Windows y todo funcionó bien.

Hay que reconocer que Microsoft ha hecho un gran trabajo en la integración de la terminal y el Sub-System Linux. de tal forma de correr linux desde Windows, pero no es igual.

No tengo Mac, y aun cuando tuviera, creo que siempre es necesario usar Windows.

Sin embargo por el momento estoy usando Ubuntu. La idea aprender mucho de la terminal y ejecución de tareas en la misma.

Ahí sucede la magia.

En resumen:

Es mi experiencia, no es ley, aquí puedes ver el “road map” recomendado por FreeCodeCamp. Es una muy clara y amplia idea del inicio y las herramientas básicas e indispensables en el camino a Front End.

 

Y tú ¿Cuáles utilizas?