¿Mi función como ingeniero web front-end explicado?

Hola, mi nombre es Shaun Stone. Soy ingeniero web senior de interfaz de usuario de Londres, Reino Unido. Trabajo en la industria FinTech y amo lo que hago. En este artículo, quiero explicar un poco mi función. Para cualquiera que quiera seguir una carrera en desarrollo web, esto puede resultarle útil.

Cubriré: qué hacemos, cómo gestionamos nuestro trabajo, la trayectoria profesional, los idiomas y las herramientas que utilizamos. En conclusión, brindaré consejos sobre cómo ingresar a la industria del software. No se preocupe, no estoy vendiendo nada , un consejo que desearía tener cuando empecé. ?

Un ingeniero web front-end es responsable de implementar elementos visuales que los usuarios ven e interactúan con una aplicación web.

¿Creamos UI ?

Estamos enfocados en construir la UI (Interfaces de usuario) para los usuarios de nuestro sitio web o aplicación web. Consideramos algunas cosas:

  1. Accesibilidad: a menudo se pasa por alto en la web, diseñamos nuestras aplicaciones para atender a los usuarios con algún tipo de discapacidad. Esto podría deberse a algún deterioro cognitivo o destreza limitada. Alguien que tiene problemas con áreas en las que se puede hacer clic, como entradas de radio o casillas de verificación, es un ejemplo.
  2. Estética: los estilos de los elementos de nuestra interfaz de usuario, como los botones, las fuentes y el espaciado. Recientemente, implementamos un sistema de diseño que refuerza la coherencia en todos nuestros productos. Puede encontrar más información sobre sistemas de diseño aquí.
  3. Rendimiento: tenemos que pensar en el rendimiento de nuestras aplicaciones para mantener la velocidad de la página rápida. Esto implica reducir las solicitudes de red, mantener las imágenes y los archivos SVG optimizados mediante métodos como la compresión. Cuanto más rápido cargue esa página de registro, más posibilidades tendrá de que los usuarios se registren. Usamos Lighthouse by Google para comparar y recopilar métricas interesantes.
  4. Seguridad: Paramount. Pequeños errores en el código pueden resultar en la filtración de información privada, y hay gente hambrienta de ella. Por supuesto, es un tema enorme. Consulte Conceptos básicos de seguridad de la información de Mozilla:
  5. Calidad del código : utilizamos revisiones de código para comprobar el trabajo de los demás. Requerimos al menos dos aprobaciones antes de que nada pueda pasar a nuestras aplicaciones en vivo. Usamos estándares de codificación que deben seguirse en todo el front-end. Github nos permite hacer esto y más.

¿Gestión del trabajo?

Seguimos los principios ágiles del desarrollo de software, al igual que la mayoría de las empresas. Es una forma de planificar nuestro trabajo para las próximas dos semanas (un sprint). Durante ese proceso, refinamos los tickets que tenemos después de esas dos semanas.

Todo el trabajo restante que tenemos se almacena en lo que se llama un trabajo pendiente. Esta acumulación se llena con el trabajo que debemos hacer en el futuro.

Tener una hoja de ruta nos da una dirección clara de dónde queremos estar. Para ello, utilizamos una herramienta de gestión de proyectos llamada Jira de Atlassian.

Ceremonias ?

  1. La planificación del Sprint prepara al equipo para el éxito durante todo el Sprint. La reunión implica analizar la acumulación de trabajo pendiente y priorizar lo que debe completarse durante las próximas dos semanas. El equipo tiene que estimar cada historia para ver cuánto esfuerzo necesitamos. Basándonos en el esfuerzo involucrado, podemos medir la capacidad (cuánto se puede hacer frente al recurso de desarrollo disponible).
  2. El stand-up diario es una reunión muy breve con su equipo para explicar: ¿qué hizo ayer, qué estoy haciendo hoy y hay algo que me impida hacer mi trabajo? (bloqueo). Esto mantiene a todos informados. Que sea breve. Érase una vez, un stand-up me duró una hora…?
  3. La revisión del Sprint ocurre al final del Sprint. Mostramos a otras partes interesadas (miembro del equipo de Producto, usuarios de nuestro sistema) lo que logramos lograr. Hacemos esto haciendo una demostración del trabajo que hemos estado haciendo. Esto les da la confianza de que estamos progresando.
  4. La retrospectiva es una forma de reflexionar sobre lo que salió bien y lo que no. Esto trae problemas. De esos problemas creamos acciones. Una acción es una cosa para iniciar un proceso en el que podemos evitar que esa cosa negativa vuelva a suceder. Las cosas que salieron bien nos dan una idea de lo que nos hace trabajar mejor.

Trayectoria profesional ↗️

Las empresas tienen sus propias trayectorias profesionales. Un patrón de progresión muy común como ingeniero de software es el siguiente.

Tenga en cuenta: esta es mi propia opinión y se basa en mis propias experiencias. El término "ingeniero" y "desarrollador" se utilizan indistintamente.

  1. Los desarrolladores junior tienen poca o ninguna experiencia. Necesitan ser guiados por miembros más experimentados del equipo para hacer su trabajo. Por lo general, harán muchas preguntas, pero pueden aprender mucho y estarán muy motivados para hacerlo. Su salario es de nivel de entrada.
  2. Los desarrolladores de nivel medio tienen una experiencia razonable. Pueden realizar determinadas tareas por sí mismos. Pero aún así, es necesario buscar orientación en los miembros senior de vez en cuando. Pueden ayudar a los jóvenes y también proporcionar buenas ideas a los miembros mayores.
  3. Los desarrolladores senior pueden entregar de principio a fin sin orientación. Conducen a otros a hacer lo mismo y a seguir buenas prácticas. Tienen la experiencia suficiente para saber cuándo pueden salir mal las cosas y cómo evitar esos problemas.

Pero cuando llegas a Senior, ¿es eso? No, no debería ser así. Hay dos caminos que puedes seguir.

4a. El líder tecnológico / desarrollador principal / arquitecto se le otorgaría al desarrollador central / de rango superior en el equipo que proporciona una visión técnica sólida y tiene el respeto de sus compañeros. Menos involucrado en el código y más en los fundamentos de los lenguajes y bibliotecas utilizados, el proceso de desarrollo y la infraestructura.

4b. Team Lead / Team Manager ahora está más enfocado en las personas del equipo. Su bienestar, la progresión de su carrera y tener una conversación uno a uno con cada miembro del equipo para asegurarse de que estén felices pero que también estén cumpliendo como se esperaba. Más reuniones resultarían en menos tiempo de desarrollo. Se requieren habilidades de gestión y no es una tarea fácil.

Después de eso, podría pasar a un rol más ejecutivo. Un ejemplo es un gerente de ingeniería. Esta persona gestiona varios clientes potenciales técnicos o de equipo. Otro ejemplo es el director de tecnología.

Las empresas suelen calificar su nivel de competencia según la cantidad de años de experiencia que tiene. Para mí, esto es una falacia. He trabajado con nuevos titulares que fueron etiquetados como más Junior, pero estaban bien informados y eran fuertes. Los candidatos deben tomarse por su valor nominal.

Idiomas para aprender?

  1. HTML es un lenguaje de marcado, la estructura de las páginas web.
  2. CSS es el lenguaje para describir la presentación de la web, tratando con colores, diseño, espaciado y más.
  3. JavaScript es el lenguaje de la web. Es un lenguaje del lado del cliente y mejora la interacción del usuario en una página web.

Invierta mucho tiempo en dominar estos tres idiomas. Tengo un ejemplo rápido de cómo funcionan juntos en este CodePen. ¡Diviértete!

Tenga en cuenta: este ejemplo está simplificado solo con fines de demostración.

Ver mi CodePen aquí

Si está a la altura, cree su propia versión con el nombre de la empresa que elija y publíquela en los comentarios.

Herramientas para usar? ️

  1. Usa Git para administrar las versiones de tu código. Permite a los equipos colaborar en archivos sin causar pérdida de trabajo.
  2. Utilice un entorno de desarrollo integrado (IDE) para escribir su código. Es un software que es como el Bloc de notas pero viene con más campanas y silbidos. Puede proporcionar sugerencias sobre cómo escribe su código y codifica por colores su texto para que sea más fácil de interpretar.

Consejo ?

Lo primero que debe hacer es crear una cuenta de Github. Al igual que Behance for Designers, este será un lugar donde podrá exhibir el código que escriba. Nos dará (a los empleadores) algo con lo que trabajar. Cuando dejé la Universidad, estaba buscando la oportunidad de construir algo, incluso si era gratis. Sabía que a largo plazo me beneficiaría.

¿Encontrar trabajo autónomo?

Uno de mis primeros proyectos independientes fue para una gran empresa. La aplicación que querían que creara costaba fácilmente entre 2 y 3000 libras esterlinas. Lo hice por un par de cientos de libras. Fue un robo total para ellos, pero ayudó en la entrevista para mi primer trabajo, eso es seguro.

¿Demuestra que tu trabajo existe?

Siempre que reviso los CV, por lo general, si dice que hiciste un curso en Udemy y eso es todo, eso no será suficiente. Quiero ver prueba de tu trabajo. Para cada proyecto en el que ha trabajado, incluso si fue un proyecto personal o para un miembro de la familia, es algo que se puede incluir en el CV. Estas afirmaciones de experiencia deben estar respaldadas con evidencia real, ya sea un enlace al video de demostración o un enlace a la página real.

¿Primer trabajo? ¡Excelente! ?

Ahora está reuniendo una pequeña colección de trabajos. Impresionas a una pequeña empresa y comienzas tu primer trabajo. Serás un junior y las personas que te rodean tienen mucho que enseñarte de forma gratuita. Según mi experiencia, aprender de sus compañeros es la mejor manera de aprender y, por supuesto, mucho más barato. La mayoría de los cursos en línea ayudan al principio y es bueno seguirlos con moderación. Debería poder elevar sus habilidades a través de una experiencia comercial real en el futuro.

Probarte a ti mismo ?

Demuestra que te apasiona tu trabajo y que quieres mejorar las cosas de forma proactiva. Cada trabajo que consigas tendrá buenas y malas cualidades. Intente descubrir cómo mejorar las cosas malas y tome las cosas buenas a bordo para cualquier empresa futura. En un nuevo trabajo, si es posible, enséñeles las cosas buenas que ha aprendido anteriormente y trate de arreglar las nuevas cosas malas. Si siente que ya no está aprendiendo, cambie las circunstancias para que así sea. Tus habilidades siempre deben ser relevantes en la industria, de lo contrario, te quedarás atrás. Es triste pero cierto.

Vendete a ti mismo ?

Siempre encuentre excusas para agregar a su LinkedIn. Explique lo que hizo en su trabajo (roles y responsabilidades). Documente como un diario antes de que se olvide de él. Agrega una foto profesional y un resumen sólido. Esto es lo que tengo actualmente. Ha evolucionado a lo largo de los años.

Hasta la fecha tengo más de 7 años de experiencia en la creación de aplicaciones web. He trabajado en automoción, finanzas, juegos en línea y he estado expuesto a la creación y el mantenimiento de aplicaciones web a medida para varias empresas involucradas en: reparación de automóviles, entretenimiento digital, gases industriales, venta minorista y servicios de comparación de banda ancha. Algunos de mis intereses clave incluyen escribir ficción y no ficción, construir e integrar API, automatizar tareas repetitivas, crear juegos móviles y animaciones con Haxe, Unity o JavaScript / HTML5 canvas.

Además de leer muchos libros técnicos, he escrito el mío llamado Automatización con Node.js. Leí artículos sobre plataformas como Sitepoint, CSSTricks, Egghead, PHPArchitect y Smashing. Asisto a conferencias como PHP London y estoy atento a los canales de desarrollo de Facebook y Google. Siempre estoy abierto a nuevos enfoques y busco consejos y trucos que pueda aplicar a mi propio trabajo, que también puedo compartir con mis compañeros.

¿Es una industria de ritmo rápido?

El mundo del front-end se mueve muy rápido. Las bibliotecas / marcos siempre parecen aparecer año tras año. Verá que muchos roles requieren experiencia en React (creado por Facebook), Angular (por un empleado de Google) o Vue (por un tipo inteligente llamado Evan You). Hay muchos más, pero no entraré en detalles ahora.

Intente comprender estas bibliotecas, ya que tienen una gran demanda. Trabajo con React en mi función y he invertido mucho tiempo en dominar su uso. Estas bibliotecas y marcos son una capa que se encuentra sobre el lenguaje JavaScript. Primero conviértase en un profesional de JavaScript.

¿Construir cosas?

Motívese para trabajar en un proyecto en su propio tiempo. Durante años estuve muy interesado en proyectos de desarrollo de juegos personales. Aprendes mucho durante el proceso. Un día pensé al azar en el trabajo: "¿No sería una buena idea tener un juego como Battleships, pero con conejos?" Lo sé bien ... pensamiento extraño .

Así que encontré un artista, le dije lo que quería y luego me puse a trabajar en una prueba de concepto. Para jugar, colocas cinco conejitos y cinco trampas, luego te sientas y miras. No arruinaré la sorpresa. Juego aquí.

Eso es todo por ahora. Si alguna vez quieres más consejos, ¡no dudes en contactarme! ¡Gracias por leer y buena suerte! Deje caer algunas palmadas si lo desea. ?

Todo lo mejor,

Shaun Michael Stone. ✌️