Para aquellos de ustedes que buscan ingresar al mundo del desarrollo web con su primer trabajo de desarrollo, la cantidad de cosas que se espera que sepas puede ser abrumador: HTML, CSS, JavaScript, control de versiones, herramientas de compilación, marcos, la línea de comandos. La lista continua …
¡Pero nunca temas! En esta publicación, me gustaría ofrecerle un poco de orientación describiendo diez habilidades que lo ayudarán a conseguir su primer trabajo de desarrollo en 2020. Para cada habilidad, sugeriré un proyecto práctico para comenzar y señalarle para apropiarse de recursos en Premium de SitePoint para leer más
Vamos a sumergirnos
1. Conozca su editor de código
Como programador, pasarás mucho tiempo en el editor de tu elección. Es por eso que debe hacer el esfuerzo de aprender qué puede hacer y cómo configurarlo correctamente. El tema de qué editor usar puede convertirse rápidamente en controvertido, pero si recién está comenzando, le animo a que consulte Código VS (o VSCodium si te importa la privacidad).
VS Code se entrega con muchas características interesantes, como Abreviaturas de Emmet, Intellisense, varios atajos de teclado y Integración Git. Tambien hay cientos (si no miles) de extensiones que puede instalar para personalizar su flujo de trabajo.
Idea del proyecto
Instale VS Code en su máquina y comprométase a usarlo. Dedique un tiempo a buscar extensiones populares para el idioma de su elección e instale al menos tres de ellas. También deberías instalar Más bonita y configúrelo para formatear su código al guardar, así como ESLint, que mostrará errores de alineación de JavaScript en la consola de VS Code. Para obtener puntos de bonificación, puede imprimir el hoja de referencia de atajos de teclado para su plataforma e intente memorizar dos o tres atajos por semana.
OTRAS LECTURAS
A modo de referencia, recomendaría Visual Studio Code: herramientas de edición y depuración de extremo a extremo para desarrolladores web. Esta guía actualizada cubre todos los componentes esenciales de VS Code, incluidas las funciones de edición del espacio de trabajo, la funcionalidad avanzada, como la refactorización de códigos y la vinculación de teclas, y la integración con Grunt, Gulp, npm y otras herramientas externas. Capitulo dos, que le presenta la interfaz de usuario y Capitulo nueve, al trabajar con extensiones, debe ser de particular interés.
Si está creando una aplicación web, es solo cuestión de tiempo hasta que encuentre formularios HTML. Son una gran parte de la experiencia web y pueden ser complicados. Por ejemplo, debe hacerlos accesibles y asegurarse de que se reproduzcan bien en diferentes navegadores y pantallas más pequeñas. También puede ser un desafío diseñarlos consistentemente sin romper su usabilidad.
Los formularios son una parte crítica del viaje de un visitante en su sitio. Incluso si su visitante se vende por lo que tiene que ofrecer, un formulario roto o incluso mal diseñado podría ser suficiente para que abandone el barco. Eso significa que pierdes la conversión.
Idea del proyecto
Crea y diseña un formulario de contacto. Concéntrese en la alineación de los campos del formulario, un destacado CTAy asegúrese de que el formulario tenga una buena vista previa en todos los navegadores y dispositivos. Intente incluir varios controles de formulario, como <select> elementos y casillas de verificación, manteniendo el diseño simple y elegante.
También te gustaría subir tu formulario terminado a CodePen, una comunidad en línea para probar y mostrar fragmentos de código HTML, CSS y JavaScript creados por el usuario. Al solicitar un trabajo, una cuenta de CodePen bien curada podría servir como una mini cartera.
OTRAS LECTURAS
Patrones de diseño de formulario ofrece diez recetas para diferentes tipos de formularios: formularios de registro, formularios de reserva, formularios de inicio de sesión y más. Aprenda de los profesionales y descubra cómo hacer que sus formularios sean atractivos y accesibles para todos. Si está buscando un comienzo rápido con este proyecto, le recomiendo leer la primera parte del primer capitulo, que cubre elementos como etiquetas, marcadores de posición, estilos y tipos de entrada.
3. Conozca la validación del lado del cliente
No llegarás lejos como desarrollador web en 2020 sin conocer JavaScript: es uno de los lenguajes de programación más populares del mundo y, francamente, una habilidad imprescindible.
En la parte frontal, se utiliza para una amplia variedad de tareas, como crear elementos interactivos para páginas web (controles deslizantes, mapas, gráficos, menús, widgets de chat, etc.) y, en general, mejorar la experiencia del usuario. Una característica bastante agradable del lenguaje es que puede manipular el DOM, para ofrecer a los usuarios comentarios instantáneos sobre una acción sin necesidad de volver a cargar la página. Esto hace que las páginas web se sientan más ágiles y más receptivas.
Idea del proyecto
En este proyecto, debe tomar el formulario de contacto que creó en el paso dos y aumentarlo con la validación del lado del cliente.
Usando el tipos de entrada correctos te llevará mucho camino hasta allí, pero también tratarás de agregar alguna validación personalizada. Debe mostrar mensajes de error de forma intuitiva y evitar el uso de cuadros de alerta. Y si todo eso suena demasiado fácil, ¿por qué no agregar un campo que haga una pregunta para asegurarse de que el usuario no sea un bot?
OTRAS LECTURAS
Si es nuevo en el mundo de la programación de JavaScript, o simplemente desea una referencia rápida y fácil de escritorio, consulte JavaScript: Novato a Ninja, 2a Edición. Esta introducción paso a paso a la codificación en JavaScript le mostrará cómo resolver problemas del mundo real y desarrollar aplicaciones web más completas. Deberás prestar especial atención a Capítulo Ocho, que le muestra cómo usar JavaScript para interactuar con un formulario HTML.
4. Hacer un convertidor de divisas usando la API Fixer
En el pasado, JavaScript tenía fama de ser un lenguaje de juguete, bueno para menús y animaciones, pero no mucho más. Y si bien ese podría haber sido el caso a principios de la década de 2000, en 2020 nada podría estar más lejos de la realidad.
Hoy en día, aplicaciones completas están escritas en JavaScript. Se introducen y desarrollan nuevas herramientas y marcos a un ritmo rápido, y el lenguaje en sí ha sufrido grandes cambios desde la llegada de ES2015 (también conocido como ES6). Es importante estar al tanto de estos cambios y tener una buena idea de lo que JavaScript es capaz de hacer y de dónde encaja en la imagen del desarrollo web en su conjunto.
Idea del proyecto
Crea una aplicación que permita a los usuarios convertir una moneda a otra. Los usuarios deben ingresar una cantidad, seleccionar la moneda real, seleccionar la moneda deseada y luego la aplicación debe obtener el tipo de cambio del API Fixer. La interfaz de usuario debe actualizarse dinámicamente sin ningún tipo de actualización de página.
Utilice las funciones modernas de JavaScript donde pueda. Complete el proyecto utilizando JavaScript de vainilla o una biblioteca como Reaccionar para manejar las actualizaciones de la interfaz de usuario.
OTRAS LECTURAS
JavaScript: mejores prácticas es una colección de artículos que analizan el JavaScript moderno y cómo ha evolucionado el lenguaje para permitirle escribir código limpio, mantenible y reutilizable. Yo recomendaría leer el "Anatomía de una aplicación JavaScript moderna,Uso de la sintaxis JavaScript moderna y Control de flujo en JavaScript moderno.
5. Diseñe su propio sitio web de cartera
En su carrera como desarrollador web, es probable que se encuentre trabajando junto a un diseñador en el mismo proyecto. Y si bien el diseño y el desarrollo pueden considerarse disciplinas separadas, tener una comprensión firme del proceso de diseño facilitará esa relación y lo mantendrá en una buena posición con sus colegas.
O tal vez quiera hacerlo solo como autónomo, llevando proyectos desde el diseño hasta la implementación. En este caso, un sitio web de aspecto genérico no es suficiente. Deberá ofrecer al cliente un diseño llamativo pero también altamente funcional que lo ayude a alcanzar sus objetivos comerciales.
Idea del proyecto
Diseñe su propio sitio web de cartera: su lugar en Internet para presentarse y mostrar sus habilidades. Dedique un tiempo a investigar qué hace un buen diseño de portafolio, luego simule un diseño propio ya sea con lápiz y papel, o usando un herramienta de alambre de su elección.
En cuanto al diseño, preste atención al diseño, los colores que usará y la tipografía. En cuanto al contenido, considere qué páginas necesitará (pista: podría incluir un formulario de contacto) y cómo presentarse tanto a usted como a su trabajo. Existen muchos sitios en Internet que le dará consejos sobre qué incluir.
OTRAS LECTURAS
Ok, lo entiendo. El diseño es difícil. Pero no necesita ser ...
Los principios del hermoso diseño web es un libro fantástico si estás luchando con el proceso de diseño. Le guiará a través de un diseño de ejemplo, desde el concepto hasta la finalización, y le enseñará una serie de habilidades prácticas en el camino.
Comience en el Capítulo Uno leyendo sobre lo que hace buen diseño y tómalo desde allí. Personalmente, leí el libro de principio a fin en una semana, pero también podría leer los otros capítulos y aprender sobre diseño, color, textura, tipografía e imágenes a su gusto.
6. Codifique su propio sitio web de cartera
JavaScript no es la única tecnología que evoluciona rápidamente; También hay muchos cambios en el mundo de CSS. Los avances en el lenguaje significan que ahora podemos hacer fácilmente diseños complicados, declarar variables en nuestro código CSS, crear animaciones, aplicar CSS condicionalmente (usando @apoya) y más: cosas que, en el pasado, habríamos recurrido a los hacks (o JavaScript) para lograr.
Si está escribiendo CSS en 2020, debe conocer todas estas técnicas modernas y cuándo usarlas, especialmente Flexbox y CSS Grid para crear diseños. También debe tener una idea de las herramientas modernas de CSS (como Houdini), preprocesadores y los marcos de abundancia que tenemos a nuestra disposición.
Idea del proyecto
En el proyecto anterior, diseñó el sitio web de su cartera. Ahora es el momento de ensuciarse las manos y codificarlo. Use CSS moderno para diseñar el sitio y tómese el tiempo para investigar algunas de las unidades de medida introducidas más recientemente, como vw y vh. Estos serán muy útiles si, por ejemplo, desea incluir una imagen de presentación en pantalla completa.
Además, incluya el formulario de contacto que creó anteriormente y use CSS para agregar un par de animaciones mínimas. Por ejemplo, podrías animar el Enviar botón cuando el usuario se desplaza o hace clic en él.
OTRAS LECTURAS
CSS Master, segunda edición le muestra cómo escribir CSS mejor y más eficiente, y aprovechar la gran cantidad de nuevas funciones CSS de vanguardia disponibles para el desarrollador front-end. También aprenderá a dominar las herramientas que mejorarán su flujo de trabajo.
Presta especial atención a Capítulo Cinco que te ayudará a crear diseños complejos utilizando el recientemente introducido multicolumn, Flexboxy Grid módulos.
7. ¡El rendimiento importa! Audite su sitio con Lighthouse
Hoy en día hay pocas excusas para un sitio web lento. Las personas son impacientes. Nadie quiere esperar 15 segundos para que se carguen sus imágenes de alta definición. Sus usuarios solo quieren acceder directamente a su contenido.
E incluso si las cosas te parecen bien, no olvides cómo vive la otra mitad. No todos tienen un MacBook pro de gama alta con una conexión Ethernet de 100 Gbit. Muchos de sus visitantes navegarán por su sitio en un teléfono inteligente, posiblemente en una red 3G débil. Es su trabajo como desarrollador web proporcionar todos de sus visitantes con la mejor experiencia posible que su tecnología les permitirá.
Idea del proyecto
Google Chrome se envía con una herramienta fantástica llamada Lighthouse , que realiza auditorías en una página para rendimiento, accesibilidad, mejores prácticas y SEO. Le ofrecerá una variedad de consejos sobre cómo abordar cualquier problema que encuentre.
Debe ejecutar esta herramienta en su sitio de cartera recién creado y hacer todo lo posible para asegurarse de que cada categoría esté en verde. Lighthouse le permitirá generar informes para las versiones móvil y de escritorio de su sitio. Debe verificar ambos.
Si no ha creado un sitio de cartera, ejecútelo en un sitio diferente de su propiedad.
OTRAS LECTURAS
El libro práctico y corto. Rendimiento web Jump Start proporciona consejos, sugerencias y mejores prácticas para mejorar el rendimiento y la capacidad de respuesta de su sitio. Estos van desde cambios rápidos de configuración de cinco minutos hasta revisiones importantes del sitio web. Entra en algunos detalles sobre realizar auditorías con Lighthouse, así como Chrome DevTools en general. Los capítulos posteriores del libro serán útiles para abordar cualquier problema que destaquen las auditorías.
8. Conozca su terminal
Como desarrolladores web, la línea de comandos se está convirtiendo en una parte cada vez más importante de nuestro flujo de trabajo. Lo usamos para instalar paquetes desde npm, para probar puntos finales de API, para enviar confirmaciones a GitHub y mucho más. Si puede demostrar familiaridad con la línea de comando a un posible empleador, eso sin duda aumentará sus posibilidades.
Otra ventaja de poder usar el terminal es que abre la puerta a las secuencias de comandos. Esto le permitirá automatizar varias tareas mundanas (como la manipulación de archivos o la implementación de un sitio) que, a la larga, podría ser un verdadero ahorro de tiempo.
Idea del proyecto
Instalar y familiarizarse con el Bash Shell. Esto vendrá como estándar en macOS y en muchas distribuciones de Linux. En Windows, deberá habilitar algo llamado subsistema de Windows para Linux, sobre el que puede leer esta página.
Comprométete a usar Bash durante toda una semana y úsalo para realizar cualquier tarea que puedas. Esto podría incluir navegar en su sistema de archivos, trabajar con archivos, editar archivos, leer registros, iniciar servicios o instalar programas. También debe investigar los alias, que son accesos directos para los comandos de uso común.
Consejo: si ya te sientes cómodo con Bash, quizás quieras probar Zsh como alternativa. Entro en eso esta página.
OTRAS LECTURAS
Si dejar la comodidad de su GUI lo hace sentir mal, eche un vistazo a Guía de inicio rápido de Bash. Este libro le dará una introducción completa a Bash, lo familiarizará con su estructura de comandos y lo pondrá al día rápidamente con algunos comandos esenciales.
Para los valientes, los capítulos posteriores del libro lo presentan a los scripts de shell y demuestran cómo incluso las construcciones de programación simples en el shell pueden acelerar y automatizar cualquier tipo de trabajo diario de línea de comandos.
9. Ponga sus proyectos bajo control de versiones
Ahora que tenemos algo de conocimiento terminal bajo nuestros cinturones, es hora de mirar Git - software de control de versiones utilizado para rastrear cambios en el código fuente durante el desarrollo. Gracias a su función de ramificación, Git facilita la colaboración de varias personas en un proyecto. También hace que sea un obstáculo para que pueda volver a colocar su código en un estado anterior si se da cuenta de que, sin darse cuenta, ha introducido un error.
Prácticamente cualquier puesto que solicite esperará que conozca el control de versiones. Ahora es un buen momento para adquirir ese conocimiento.
Idea del proyecto
Instale Git en su máquina y familiarícese con sus comandos básicos. Ponga la aplicación de conversión de moneda que creó en el proyecto cuatro bajo control de versiones, luego cree un GitHub cuenta y subirlo para que el mundo lo vea (desde la línea de comandos, por supuesto).
Para aquellos que no están familiarizados con GitHub, es una plataforma basada en la web donde los desarrolladores pueden almacenar sus proyectos e interactuar con otros desarrolladores de ideas afines. Cuando venga a solicitar empleo, será ventajoso tener una cuenta de GitHub a la que pueda dirigir a posibles empleadores.
OTRAS LECTURAS
Dirigido a desarrolladores de nivel principiante con poca o ninguna experiencia en Git, Saltar Inicio Git lo guiará a través de la configuración, así como los comandos básicos y los pasos que conforman un flujo de trabajo de Git exitoso.
Asegúrese de revisar Capitulo dos, que cubre repositorios remotos y cómo enviar su código a GitHub.
10. Cree su aplicación de primer nodo
Como aludí antes, JavaScript está en todas partes. Alimenta la mayoría, si no todas, las aplicaciones front-end, pero también puede ejecutarse en el servidor bajo la apariencia de Node.js. Tener al menos algo de conocimiento sobre cómo escribir JavaScript en el servidor (incluido el modelo de ejecución de Node) es una habilidad deseable al ingresar al mercado laboral actual.
Idea del proyecto
Vamos a tomar un rumbo ligeramente diferente con este, ya que me gustaría señalarle a mi tutorial "Cree una aplicación simple para principiantes con Node, Bootstrap y MongoDB.
Comenzando desde cero, demuestro cómo crear una aplicación web sencilla con Node.js, pero en lugar de centrarme en el resultado final, me concentro en una serie de cosas que es probable que encuentres al construir un mundo real aplicación Estos incluyen enrutamiento, creación de plantillas, manejo de formularios, interacción con una base de datos e incluso autenticación básica.
Para este proyecto, debe seguir junto con mi tutorial, adaptando el resultado final para satisfacer sus necesidades. También debe mantener su código bajo control de versiones y llevarlo a su perfil de GitHub.
OTRAS LECTURAS
No tanto leer, como un recurso: el Foros de SitePoint. Este es un proyecto potencialmente difícil de abordar, por lo que si se atasca, no dude en pasar y pedir ayuda.
Conclusión
Así que ahí lo tienes: diez habilidades que te ayudarán a conseguir tu primer trabajo de desarrollo en 2020. Aunque no es exhaustivo, espero que esta publicación te ayude a orientarte en el mundo cambiante del desarrollo web y te dé una idea de qué aprender a continuación.
Y no olvides que leer tutoriales es genial, pero no hay sustituto para construir cosas. Su próximo empleador estará más impresionado con una cuenta activa de GitHub que con una lista de lo que ha leído.
Fuente: https://www.sitepoint.com/first-dev-job-projects/?utm_source=rss
