¿Qué programación o tecnologías front-end son esenciales para el diseño web hoy en día?

NPM: un administrador de herramientas / paquetes de compilación esencial que disminuirá en gran medida el tiempo de programación, cuando se combina con otras herramientas como Gulp / Grunt. Le permite instalar y compilar rápidamente diferentes paquetes js que puede usar a lo largo de su proyecto.

Gulp / Grunt: son herramientas de administración de tareas que automatizan algunos de los procesos que normalmente tendríamos que hacer por nuestra cuenta. Conversión de HTML, CSS, JS, código minificador, y mucho más.

Sass / Less: le permite escribir CSS mucho más rápido y administrarlo mejor que escribir CSS normal. Cuando se combina con otras herramientas de automatización (gulp-sass), convertirá automáticamente su SASS a CSS, por lo que no tendrá que hacerlo. Además de distribuirlo a la carpeta correcta (cuando está configurado correctamente).

Javascript de vainilla: siempre es un gran saber hacer. No importa qué bibliotecas o marcos pueda usar. Siempre se construirá a partir de JavaScript de vainilla. Esto lo ayudará a comprender mejor cómo funciona todo.

AngularJS / React / Vue: parecen ser algunas de las principales bibliotecas / marcos en este momento. No debe confundirse, las bibliotecas y los marcos son bastante diferentes. Pero en este caso, estos se considerarían marcos de todos modos. Estos le permiten separar mejor su código y crear componentes separados mucho más fácil, que finalmente caen en una aplicación completa (generalmente utilizada para aplicaciones de una sola página, Vue es la excepción, a menos que comience a usar Nuxt, que es básicamente la mejor pieza que falta) angular y reaccionar). Y, en general, los elementos creados con estos están más basados ​​en datos, en comparación con los sitios web estáticos o ligeramente dinámicos, que no deberían construirse como aplicaciones de una sola página.

Generadores de sitios estáticos: Hugo / Jekyll: le permiten crear rápidamente sitios web de varias páginas, agregando una pequeña cantidad de contenido. En la mayoría de los sitios basados ​​en usuarios, la página permanecerá igual y el contenido se generará estáticamente. Este es un buen escenario para utilizar uno de estos generadores.

Linters – jshint – y muchos otros para diferentes idiomas, etc.… le permiten hacer un seguimiento de si tiene algún error en su código. Solucione estos errores y lo ayude a mantenerse semántico cuando escriba su código.

Herramientas de integración continua: circleci | travisci: flujos de trabajo que le permiten integrar y seguir diferentes flujos de trabajo.

Espero que esto ayude. Esto es solo un conocimiento básico de trabajo. Puedo editar más tarde si me he olvidado de algo, etc.

Los padrinos (HTML (5) y CSS (3)). Con un buen dominio de estos dos, puedes hacer un buen trabajo, pero no tan bueno, ahí es donde debes permitir que su tío entre, JavaScript (también Vanilla JavaScript ) que te permitirá agregar interactividad a tus páginas web, algunas locuras animaciones, controles deslizantes y lo que tienes.

Nunca debe subestimar el poder de Bootstrap (un marco CSS) y Flexbox. Soy bastante nuevo en esto, pero también deberías consultar CSS Grids. Mucha gente olvida mirarlo. He visto algunos videos y es increíble.

Una vez que eres amigo de estos tipos, puedes comenzar a buscar en las bibliotecas de JavaScript, como JQuery, y en marcos como VueJS (hay mucho ruido sobre este tipo en estos días), ReactJS y otros sin problemas, tú eliges. Todos se basan en VanillaJS, por lo que si puede tener una buena comprensión del tío Vanilla, no tendrá problemas para usar cualquiera de estas bibliotecas y marcos.

¡Aclamaciones!

Hablando de lo que es esencial, su mismo viejo HTML y CSS sigue siendo la “única opción”.

Ahora, para mejorar la calidad y la interactividad de su interfaz, comenzará a mirar los marcos css como bootstrap y variantes de CSS como less y scss. Y luego los infinitos frameworks javascript como react, angular y vuejs.

  • HTML
  • CSS
  • Javascript
  • XML

Estos han sido productos básicos durante bastante tiempo, y probablemente no irán a ningún lado pronto. Se han creado tantos sitios sobre ellos que, incluso si surgiera una nueva tecnología, todo seguiría siendo compatible con HTML, CSS, Javascript durante tanto tiempo, el desarrollo de estas habilidades podría ser útil para toda una generación.

Prácticamente ya nadie usa HTML puro, pero probablemente no pueda encontrar un navegador a través de Mobile o Desktop que no lo admita bien.

El vueJS y ReactJS. Recomiendo ES6 para todos los desarrolladores front-end. A medida que se convierte en el idioma principal.