Imagen compuesta por Aphinya Dechalert. Titulado

¿Cómo salir de Noobville e ir más allá de los tutoriales para principiantes como desarrollador?

una guía para mejorar la habilidad de una pista autodidacta

Los desarrolladores web hoy en día tienden a ser autodidactas y a ingresar al campo con el conocimiento suficiente para comenzar, pero no lo suficientemente peligrosos como para destronar a aquellos con títulos en informática.

Muchos desarrolladores autodidactas se quedan atrapados en un espacio conocido como noobville, no porque sean malos en la codificación, sino porque simplemente necesitan algo de orientación. Recuerdo haber estado en Noobville, hace una vez, hace unos 7 años y deseaba una guía que estableciera lo que necesitaba para mejorar.

Hubo muchas pruebas y errores, revelaciones relacionadas con la industria y trato con nuevas tecnologías a medida que salieron. Después de ver a mis juniors pasar por las mismas dificultades, decido escribir la guía que desearía que tuvieran cuando yo era el líder de su equipo.

Entonces, sin más preámbulos, les presento una guía para mejorar sus habilidades de desarrollo web.

La trinidad técnica

A menudo me gusta llamar a la pila central de front end la trinidad técnica. Consiste en HTML, CSS y JavaScript.

Comencemos con CSS

No hay nada lujoso que realmente necesite aprender en HTML, pero CSS puede complicarse un poco con el tiempo.

Comienza con una clase aquí y una clase allá. Lo siguiente que sabes es que has esparcido una docena de duplicados en toda tu aplicación. La gente habla sobre el olfato del código, pero eso está dirigido principalmente a JavaScript y otros lenguajes de programación "adecuados". CSS se deja de lado porque parece fácil.

Pero no lo es, especialmente una vez que llega a un cierto tamaño.

Cómo mejorar:

Mira en la arquitectura CSS modular. También hay un concepto que existe desde hace un tiempo llamado CSS orientado a objetos. Si. Es una cosa y puede ayudar a salvar su base de código de la locura a largo plazo.

Los preprocesadores como SCSS son buenas herramientas para abstraer su CSS en un formato mucho más legible para los humanos. Se puede argumentar que es solo azúcar de sintaxis, pero a veces, después de un largo día de sentirse salado hacia el código de espagueti de otra persona, te encantaría tener un poco de dulzura.

Qué para Google:

OOCSS, BEM, SMACSS, SCSS

También necesitamos tener un chat sobre JavaScript

Muchas personas recogen la trinidad pensando que no tienen que aprenderla correctamente. Está funcionando, ¿por qué meterse con eso?

Pero así es como se navega directamente en el iceberg y hunde el barco en el estilo más épico. Las aplicaciones se bloquean y se queman debido a la falta de conocimiento. Reaccionar y Angular no podrá salvarte porque son solo herramientas.

Una cosa es usar JavaScript. Es otro hablar JavaScript.

Cómo mejorar:

Aprende cómo funcionan los prototipos. Es una característica central de JavaScript que los principiantes suelen pasar por alto porque existe la idea errónea de que no es necesaria.

Examine los paradigmas de programación de JavaScript y las estructuras arquitectónicas. La cohesión del código y los diferentes pensamientos sobre el tema pueden iluminarlo sobre las ineficiencias de sus patrones y preferencias de codificación.

Qué para Google:

Prototipos de JavaScript, cohesión de código de JavaScript, responsabilidad única, expresiones regulares de JavaScript, OOP JavaScript, FP JavaScript, JavaScript procesal, secuencias de comandos de algoritmos JavaScript

Lista de verificación de paradigmas

Los dos paradigmas de programación más populares son OOP (orientado a objetos) y FP (programación funcional). Sin embargo, no son las dos únicas teorías y métodos de estructuración de código existentes.

Seguir de cerca es la programación procesal, declarativa e imperativa.

Necesitas verificarte en el arte de paradigmas de programación para expandir tu mente. Le dará la posibilidad de retroceder y ver el código como una serie de partes que se pueden usar de una manera específica.

Una vez que comprenda los paradigmas de programación, ya no verá el código como código. Hay un cierto sentimiento de iluminación que viene con la conciencia de tal conocimiento.

Su relación con el código cambiará y se convierte en algo más que simplemente producir declaraciones en las funciones para que las cosas funcionen.

Cómo mejorar:

Comience con OOP porque JavaScript se basa en prototipos, que es un paradigma de programación orientado a objetos. Una vez que te acostumbres a eso, comienza a buscar FP porque va bastante bien con los prototipos.

De hecho, domine el concepto de prototipos porque es la base central de la creación de código limpio en JavaScript. Ambas metodologías de pensamiento también se pueden transferir a marcos y bibliotecas como Angular, React y Vue.

Una vez que haya descifrado ambas teorías, asegúrese de continuar su viaje y explorar la programación procesal, declarativa e imperativa. No son tan populares, pero pueden darle una idea de los diferentes modos de pensamiento que se creó para solucionar un conjunto de problemas específicos. Una metodología encaja mejor que otras en ciertas situaciones. Aprender a reconocer esos escenarios requiere conocimiento y comprensión de las soluciones que se crearon para resolverlos.

Qué para Google:

OOP Funciones angulares, prototipos en acción, patrones de OOP y FP, principios SOLID con OOP y FP

Convenciones de código

Las convenciones de código es cómo los desarrolladores se mantienen en la misma página entre sí. También es una forma probada por el tiempo y el ser humano para mantener su código estructurado, uniformado y legible.

Al comenzar, a menudo tenemos nuestras propias ideas sobre cómo nombrar nuestras clases, archivos, tabulaciones o sangría de nuestro código. A veces, ni siquiera tenemos una estructura clara de cómo nombramos las cosas, desechando lo que parecía lógico en ese momento, solo para mirar hacia atrás y preguntarnos qué estaba pensando.

No conocer las convenciones del código es como ver a un niño pequeño usar su plato de comida: el niño no sabe nada mejor y cree que es lo mejor del mundo, dejando un gran desastre para que alguien más lo arregle.

Una cosa es ser la única persona que trabaja en una base de código. Las cosas se ponen difíciles una vez que te conviertes en parte de un equipo.

Cómo mejorar:

Una de las formas más fáciles de aprender las principales convenciones de formato es usar un IDE que admita el formato automático. En Visual Studio Code, hay una extensión llamada Prettier - Code formatter de Esben Petersen que formatea automáticamente su código de manera estandarizada cuando presiona guardar.

La belleza de Prettier es que no le importa cómo formatea el código porque lo resolverá al final. Si aún no se ajusta a las convenciones cuando se trata de muescas, ubicaciones de corchetes e inlineing su código, la salida que genera Prettier podría sorprender a su sistema, pero es un buen tipo de shock que debería comenzar a ayudarlo. la dirección correcta cuando se trata de escribir código con el formato correcto.

Pero Prettier no se ocupa de todo cuando se trata de convenciones. Deberá aprender las convenciones de nomenclatura, cuándo usar __ y en qué contexto. Estructuras de carpetas para su tipo de proyecto y qué tipo de agrupaciones de archivos para su biblioteca o marco elegido.

Qué para Google:

Convención de código JavaScript, convenciones de nomenclatura en JavaScript, convenciones de nomenclatura angular / React / Vue, Angular / React / Vue / lo que sea que esté utilizando encima de las convenciones de estructura de carpetas JavaScript, cómo instalar extensiones de código VS

Principios de diseño visual digital

Como desarrollador web, el camino hacia la creación de diseños digitales visualmente impresionantes ya puede estar pavimentado con maquetas y PDF de diseño. Sin embargo, la vida como desarrollador no siempre es tan simple y tener conocimiento de los principios del diseño visual puede ayudarlo a discernir su relación y estructura con su código.

Cuando puede comprender los principios de diseño digital, puede pensar con anticipación sobre cómo debe diseñar su código para que coincida. El conocimiento de los principios del diseño digital lo convierte en un desarrollador mucho más versátil que puede predecir excepciones al diseño y levantar la bandera. También mejora su relación con la creación de código fluido que puede satisfacer la multitud de requisitos de tamaño de pantalla.

Cómo mejorar:

Google presentó Material Design como una guía para crear productos intuitivos. Los seis principios clásicos del diseño también siguen siendo relevantes para las representaciones digitales, por lo que también podría pagar comprobarlo.

El diseño es una forma de arte y si no tiene la confianza suficiente para crear sus propias interfaces atractivas, entonces está bien mirar los diseños de otras personas y copiarlos. Trabaje en la recreación de clones visuales de sus sitios web e interfaces móviles favoritos. Hacerlo te ayudará a comprender los patrones utilizados, cómo interactúan y se implementan.

Qué para Google:

principios de diseño visual, diseño de materiales, awwwards, revista Smashing, diseño fluido, diseño adaptativo, primer diseño móvil

Necesitas aprender Git

No hay escapatoria, incluso si quisieras. Es el chico más grande y popular del bloque cuando se trata de control de versiones, compartir código y revisar cambios.

Si no sabes cómo usar git, estás en desventaja, especialmente cuando se trata de trabajar con un equipo. La mayoría de las veces, el conocimiento de git es uno de los principales indicadores del desarrollador principiante vs junior completo.

Cómo mejorar:

No te preocupes Git es fácil. Todo lo que necesita como mínimo es cómo crear una rama, escenario, empujar y retroceder. La fusión de las ramas de git se puede realizar a través de solicitudes de extracción, pero si necesita hacerlo en la consola, algunas consultas en Google deberían obtener el comando que necesita.

Puedes practicar creando una cuenta de GitHub, si aún no tienes una. Juega con los comandos y aprende cómo conectarlo a tu cuenta a través de la consola. En teoría, puede usar el cliente GitHub, que le dará una versión visual pero que anula el propósito de aprender a usar git. Aprender los comandos del terminal también puede ser útil y acelerar su flujo de trabajo en algunos casos.

Qué para Google:

git, comandos de flujo de trabajo git, aprenda git

Prueba unitaria 101

Las pruebas unitarias requieren un método de pensamiento completamente diferente cuando se trata de cómo se crea el código. Comienza con el resultado esperado en mente y asegura que las excepciones sean capturadas y tratadas.

La forma habitual en que las personas aprenden a codificar es de manera ad hoc con funciones experimentales aquí y allá, tratando las mutaciones de código a medida que se presentan. Un enfoque basado en pruebas comienza desde el final y funciona hacia atrás hacia el principio. Asegura que arquitectura su código antes de saltar clavando clavos en la madera.

Aprenda el arte del diseño y la arquitectura basados ​​en pruebas para asegurarse de que termina con un producto robusto que detecta entradas y salidas. Reduce los dirigibles humanos por error y atrapa insectos antes de que se escabullen por las grietas y críen su molesta cabeza en los lugares más desprevenidos.

Te obliga a dividir tu código en partes y a ayudar a verificar que una unidad de código específica funcione como se espera. Si algo cambia en su base de código, las pruebas deben detectar cualquier interrupción que provoque cambios, reduciendo así el tiempo requerido para rastrear el error y sus orígenes.

Cómo mejorar:

Hay múltiples marcos de prueba de unidades y bibliotecas disponibles como Jasmine, Mocha y Jest. Existe una gran posibilidad de que esté utilizando algún tipo de marco como Angular o biblioteca como React para construir el lado JavaScript de su código. Deberá buscar qué marco de prueba o biblioteca se utiliza en asociación con él.

Qué para Google:

principios de prueba de unidad, qué prueba de unidad no es (para ayudar a descartar conceptos erróneos comunes), Jasmine, Mocha, Jest, diferencias entre marcos de prueba de unidad y bibliotecas, patrones de prueba de unidad

Apilamiento completo con Node y una base de datos

Si solo tratas con la web, te convierte en un desarrollador web front-end. Sin embargo, tener conocimiento es cómo se crean las API y cómo interactúan las cosas con una base de datos puede ayudarlo a diferenciarse de un desarrollador puramente front-end.

Si bien no es un requisito previo para convertirse en un desarrollador web fantástico, puede diversificar sus habilidades y fortalecer su comprensión con una perspectiva de extremo a extremo. No solo eso, hace que sus habilidades sean más comercializables para posibles empleadores.

La mayoría de las empresas tradicionales manejan bases de datos relacionales basadas en MySQL, por lo que es bueno tener algún conocimiento y comprensión de cómo funcionan las tablas y las relaciones. Muchas nuevas empresas están optando por bases de datos sin tablas como MongoDB debido a los costos a largo plazo, la flexibilidad que brinda para el crecimiento potencial y la facilidad de implementación.

Node.js le brinda la capacidad de crear una interfaz de back-end entre su base de datos y traducirla en una API consumible para su front-end.

Cómo mejorar:

Cree un conjunto de API CRUD que se conecte a una base de datos si nunca antes ha encontrado Node.js. Crear, leer, actualizar y eliminar es el santo grial de casi todas las acciones posibles que pueden ocurrir. Finalmente, todo apunta a la base de datos y, si puede crear un conjunto de API que interactúa con él, está preparado para una gran cantidad de trabajo de back-end requerido.

Como Node.js está en JavaScript, la vida es mucho más fácil para usted de lo que hubiera sido hace una década, donde necesitará aprender otro idioma como Java o C ++ para crear tal cosa.

Qué para Google:

Node.js CRUD, conexión de nodo a la base de datos, patrones de API de nodo, MongoDB, diseño y arquitectura mySQL

Posibilidades de infraestructura

AWS, Google Cloud, Azure y Heroku son espacios potenciales que puede explorar en lo que respecta a infraestructura. Una cosa es poder crear una aplicación de principio a fin; otra es poder ponerla en algún lugar y ponerla a disposición del público.

Cuando se trata de AWS, aprovechar S3 para el alojamiento estático solo le costará centavos. También vale la pena señalar que AWS es el jugador más importante en soluciones en la nube y ofrece más de 90 servicios, cubriendo todo lo que pueda imaginar.

Gloogle Cloud y Azure siguen el mismo concepto, ofreciendo servicios equivalentes con precios competitivos.

Heroku es más como una caja en la que puedes poner lo que quieras, lo que puede ser una solución versátil si quieres poner tu aplicación en la web.

Cómo mejorar:

Elija uno de los servicios anteriores, cree la cuenta gratuita e implemente una aplicación que haya creado en la web. Explore cómo los diferentes servicios funcionan juntos y cómo dividir su aplicación de pila completa en partes para que quepan.

El uso de Heroku lo familiarizará con Docker y las herramientas de línea de comandos. El uso de AWS lo ayudará a acostumbrarse a su traje principal para soluciones web. Lo mismo ocurre con Google Cloud y Azure.

La infraestructura es una de esas cosas que solo necesita ensuciarse las manos para ver cómo encaja todo.

Qué para Google:

AWS / Azure / Google Cloud web stack / implementación, Heroku y Docker, implementaciones de Docker, canalización de entrega continua para AWS / Azure / Google Cloud / Heroku

Ultimas palabras

A veces es difícil aumentar la habilidad cuando no sabes lo que se supone que debes aprender. Espero que esta guía haya ayudado a ampliar su conocimiento sobre la variedad de temas necesarios para actualizar desde un nivel novato / junior.

En el mundo de la programación, la verdadera antigüedad no está determinada por el número de semanas, meses o años que una persona tiene en su haber. Está determinado por su profundidad y amplitud de conocimiento, cuán flexible y fluida es su mente en sus habilidades para aplicar y adaptar este conocimiento a los problemas, y sus habilidades para crear creativamente el código de la manera más eficiente, legible y sucinta.

Mantengámonos conectados y únase a mi increíble lista semanal de boletines de resumen web. Gracias por leer.

Aphinya