Imatge escrita per Aphinya Dechalert. Títol:

Com sortir de Noobville i anar més enllà dels tutorials per a principiants com a desenvolupador?

una guia per a la formació continuada des d’una pista autodidacta

Actualment, els desenvolupadors web solen ser autodidactes amb el coneixement suficient per començar. Tot i això, no són prou perillosos com per destronar els informàtics.

Molts desenvolupadors autodidactes es queden atrapats en una àrea anomenada noobville, no perquè siguin mal programats, sinó perquè només necessiten orientació. Recordo haver estat a Noobville fa uns set anys i desitjar un guia que m’expliqués el que necessitava aprendre.

Hi va haver moltes proves i errors, revelacions sobre la indústria i el maneig de les noves tecnologies, quan van sortir. Després de veure com els meus júniors passaven les mateixes lluites, decideixo escriure la guia que m’agradaria tenir quan era el seu líder d’equip.

Així doncs, sense més, us presento una guia per millorar les vostres habilitats de desenvolupament web.

La trinitat tècnica

Sovint anomeno la pila central principal a la tècnica Trinity. Està format per HTML, CSS i JavaScript.

Comencem per CSS

No hi ha res d’especial que necessiteu aprendre en HTML, però el CSS pot resultar una mica complicat amb el pas del temps.

Comença amb una classe aquí i una classe allà. A continuació, heu escampat una dotzena de duplicats repartits per tota la vostra aplicació. La gent parla d’olors de codi, però principalment s’orienten a JavaScript i a altres llenguatges de programació “reals”. CSS falla perquè sembla fàcil.

Tot i això, no és així, sobretot quan s’arriba a una mida determinada.

Com millorar:

Mireu l’arquitectura CSS modular. També hi ha un concepte que existeix des de fa temps: CSS orientat a objectes. Sí. Això és una cosa i, a la llarga, pot ajudar a salvar la vostra base de codi de la bogeria.

Els preprocessadors com SCSS proporcionen bones eines per fer abstractes de CSS en un format molt més llegible. Es pot argumentar que només és sucre sintàctic, però de vegades, després d’un llarg dia sentint-se salat pel codi d’espaguetis d’una altra persona, us encantaria tenir una mica de dolçor.

Què passa amb Google:

OOCSS, BEM, SMACSS, SCSS

També necessitem un xat mitjançant JavaScript

Molta gent pren la Trinitat pensant que no necessita aprendre-la correctament. Funciona, per què preocupar-s’hi?

Però és així com navegues directament cap a l’iceberg i enfonses el vaixell amb l’estil més èpic. Les aplicacions es bloquegen a causa del desconeixement. React i Angular no us poden salvar, ja que són només eines.

Una cosa és utilitzar JavaScript. És una manera diferent de parlar JavaScript.

Com millorar:

Esbrineu com funcionen els prototips. Aquesta és una característica bàsica de JavaScript que els principiants sovint passen per alt, ja que hi ha una idea errònia que no és necessari.

Mireu els paradigmes i les estructures arquitectòniques de programació de JavaScript. La cohesió del codi i diverses consideracions sobre el tema us poden informar sobre les ineficiències en els vostres patrons i configuracions de codificació.

Què passa amb Google:

Prototips de JavaScript, cohesió de codis de JavaScript, responsabilitat individual, expressions regulars de JavaScript, JavaScript de POO, JavaScript de FP, JavaScript de procediment, scripting d'algorisme de JavaScript

Llista de comprovació del paradigma

Els dos paradigmes de programació més populars són OOP (orientat a objectes) i FP (programació funcional). No obstant això, no són les úniques teories i mètodes per estructurar el codi que existeixen.

Tot seguit, hi ha programació processal, declarativa i imperativa.

Cal conèixer l’art de programar paradigmes per expandir la vostra ment. T’ofereix l’oportunitat de fer un pas enrere i veure el codi com una sèrie de peces que es poden utilitzar d’una manera específica.

Un cop hàgiu entès els paradigmes de programació, el codi ja no apareixerà com a codi. Hi ha una certa il·luminació que comporta ser conscient d’aquest coneixement.

La vostra relació amb el codi canviarà i serà més que emetre instruccions dins de les funcions perquè les coses funcionin.

Com millorar:

Comenceu per OOP perquè JavaScript es basa en prototips que representen un paradigma de programació orientat a objectes. Un cop aconseguit, FP és un bon lloc per mirar, ja que és bo per prototipar.

De fet, domineu el concepte de prototipatge ja que és la base central per crear codi net a JavaScript. Les dues maneres de pensar també es poden transferir a marcs i biblioteques com Angular, React i Vue.

Un cop hàgiu entès les dues teories, continueu i exploreu la programació procedimental, declarativa i imperativa. No són tan populars, però ofereixen informació sobre diferents mentalitats dissenyades per solucionar problemes específics. Un mètode funciona millor que un altre en determinades situacions. Reconèixer aquests escenaris requereix un coneixement i comprensió de les solucions dissenyades per solucionar-los.

Què passa amb Google:

Funcions trigonomètriques OOP, prototips en acció, mostres OOP i FP, principis SOLID amb OOP i FP

Convencions de codi

Amb les convencions de codi, els desenvolupadors es queden a la mateixa pàgina. També és una manera comprovada pel temps i comprovada per la gent de mantenir el codi estructurat, uniforme i llegible.

Al principi, sovint tenim idees pròpies sobre com podem sagnar les nostres classes, fitxers, pestanyes o espais al nostre codi. De vegades ni tan sols tenim una estructura clara sobre com anomenar les coses, cosa que semblava lògica en aquell moment: només mirar enrere i preguntar-nos què pensàveu.

Si no coneixeu les convencions del codi, veureu un nen petit portant el plat. El nen petit no en sap res millor i creu que és el més gran del món.

Una cosa és ser l’única persona que treballa en una base de codi. Quan formes part d’un equip es fa difícil.

Com millorar:

Una de les maneres més fàcils d’aprendre les convencions de format de claus és fer servir un IDE que admeti el format automàtic. Hi ha una extensió a Visual Studio Code anomenada Prettier Code Formatter per Esben Petersen que format automàticament el vostre codi de manera estandarditzada quan feu clic a Desa.

El més bell de Prettier és que no importa com formateu el codi, perquè al final ho farà per vosaltres. Si encara no seguiu les convencions a l'hora de sagnar, parèntesi i enganxar codi, la sortida que Prettier genera pot ser un xoc per al vostre sistema, però és un bon xoc hauria de ser la direcció correcta a l’hora d’escriure codi formatat correctament.

Però a Prettier no li importa tot el que té a veure amb la convenció. Heu d’aprendre les convencions de denominació de quan i en quin context s’hauria d’utilitzar __. Estructures de carpetes per al tipus de projecte i quin tipus d’agrupacions de fitxers per a la biblioteca o el marc triat.

Què passa amb Google:

Convenció de codi JavaScript, convencions de denominació de JavaScript, convencions de denominació Angular / React / Vue, Angular / React / Vue / qualsevol cosa que feu servir a més de les convencions d’estructura de carpetes JavaScript, com s’instal·len les extensions de codi VS

Principis de disseny digital visual

Com a desenvolupador web, el camí cap a la creació de dissenys digitals visualment impressionants ja es pot obrir amb maquetes i PDF de disseny. Tot i això, la vida com a desenvolupador no sempre és tan fàcil. Conèixer els principis del disseny visual us ajudarà a comprendre millor la relació i l’estructura amb el vostre codi.

Quan pugueu entendre els principis del disseny digital, podeu preveure com heu de dissenyar el vostre codi en conseqüència. Conèixer els principis del disseny digital et converteix en un desenvolupador molt més versàtil que pot predir excepcions de disseny i enarborar la bandera. També millora la vostra relació amb la creació de codi fluid que satisfaci les nombroses necessitats de mida de pantalla.

Com millorar:

Google va llançar Material Design com a guia per crear productes intuïtius. Els sis principis clàssics de disseny segueixen sent rellevants per a les reproduccions digitals, per la qual cosa pot valer la pena comprovar-ho també.

El disseny és una forma d’art i, si no teniu prou confiança en crear les vostres pròpies interfícies d’usuari de bon aspecte, està bé mirar i copiar dissenys d’altres persones. Treballa per crear clons visuals dels teus llocs web i interfícies mòbils preferits. Això us ajudarà a comprendre quins patrons s’utilitzen, com interactuen i s’implementen.

Què passa amb Google:

principis de disseny visual, disseny de materials, incomoditats, revistes escandaloses, disseny fluid, disseny adaptatiu, primer disseny per a mòbils

Cal aprendre git

No hi ha fugides encara que ho vulgueu. És el nen més gran i popular del bloc quan es tracta de control de versions, compartició de codi i revisió de canvis.

Si no sabeu utilitzar Git, esteu en desavantatge, sobretot si esteu treballant amb un equip. La majoria de les vegades, el coneixement de Git és un dels principals indicadors per als principiants en comparació amb els desenvolupadors menors.

Com millorar:

No et preocupis. Git és fàcil. Tot el que heu de fer és crear una branca, escenificar-la, moure-la i tornar-la enrere. La fusió de branques Git es pot fer mitjançant sol·licituds de tracció. Tanmateix, si heu de fer-ho a la consola, algunes consultes de Google us donaran l'ordre que necessiteu.

Podeu practicar creant un compte de GitHub si encara no en teniu. Juga amb les ordres i aprèn a enllaçar-les al teu compte mitjançant la consola. En teoria, podeu utilitzar el client GitHub, que us proporciona una versió visual, però no fa la feina d’aprendre a utilitzar Git. Aprendre les ordres del terminal també pot ser útil en alguns casos i accelerar el flux de treball.

Què passa amb Google:

Git, ordres de flux de treball Git, apreneu Git

Proves d’unitats 101

Les proves d’unitats requereixen una mentalitat completament diferent a l’hora d’escriure el codi. Comença amb el resultat esperat i garanteix que es capturen i gestionen les excepcions.

La forma habitual d’aprendre a codificar és mitjançant un mètode ad hoc amb les funcions experimentals aquí i allà que impliquen mutacions de codi. Un enfocament basat en proves comença al final i funciona cap enrere fins al principi. S’assegura d’estructurar el codi abans de martellar les ungles amb fusta.

Apreneu l'art del disseny i l'arquitectura basats en proves per assegurar-vos que obtingueu un producte robust que reconeix les entrades i les sortides. Redueix l’error humà i atrapa els insectes abans de colar-se per les esquerdes i redreçar els molestos caps als llocs més insospitats.

T'obliga a trencar el codi en trossos i comprovar que una unitat concreta de codi funcioni tal com s'esperava. Si alguna cosa canvia a la vostra base de codi, les proves haurien de detectar qualsevol interrupció causada pel canvi. D’aquesta manera es reduirà el temps que es necessita per rastrejar l’error i les seves causes.

Com millorar:

Hi ha diversos marcs i biblioteques per a proves d’unitats com Jasmine, Mocha i Jest. Hi ha moltes possibilitats que feu servir un framework com Angular o una biblioteca com React per crear la pàgina JavaScript del vostre codi. Haureu de veure quin marc de prova o quina biblioteca s’utilitza conjuntament amb ell.

Què passa amb Google:

Principis de la prova unitària que no són les proves unitàries (per dissipar els malentesos habituals), Jasmine, Mocha, Jest, diferències entre els marcs i biblioteques de proves unitàries, patrons de proves unitàries

Apilament complet amb Node i una base de dades

Si només esteu connectat al web, us convertireu en un desenvolupador web frontal. Conèixer com es creen les API i com interactuen les coses amb una base de dades us pot ajudar a diferenciar-vos d’un desenvolupador frontal senzill.

Tot i que no és un requisit previ per convertir-se en un desenvolupador web fantàstic, pot diversificar les vostres habilitats i augmentar la vostra comprensió amb una perspectiva de punta a punta. A més, les vostres habilitats seran més comercialitzables per als possibles empresaris.

La majoria d’empreses tradicionals es preocupen per les bases de dades relacionals basades en MySQL, de manera que és bo tenir cert coneixement i comprensió de com funcionen les taules i les relacions. Moltes startups trien bases de dades sense taules com MongoDB a causa dels costos a llarg termini, la flexibilitat que comporta i la facilitat d’implementació.

Amb Node.js podeu crear una interfície back-end entre la vostra base de dades i traduir-la en una API de consum per al vostre front-end.

Com millorar:

Creeu diverses API CRUD que es connectin a una base de dades si mai no heu trobat Node.js. Crear, llegir, actualitzar i suprimir és la part més sagrada de gairebé qualsevol acció que es pugui produir. Tot apunta a la base de dades en algun moment. Si podeu crear un conjunt d’APIs que interactuen amb la base de dades, hi ha molta feina a fer.

Com que Node.js està a JavaScript, la vostra vida és molt més fàcil que fa una dècada, quan vau haver d'aprendre un altre llenguatge com Java o C ++ per crear una cosa així.

Què passa amb Google:

Node.js CRUD, connexió de node a base de dades, patró d'API de node, MongoDB, disseny i arquitectura de MySQL

Possibilitats d’infraestructura

AWS, Google Cloud, Azure i Heroku són àrees possibles per explorar en termes d’infraestructura. Una cosa és poder crear una aplicació de punta a punta: una altra és posar-la en algun lloc i fer-la pública.

Quan es tracta d’AWS, l’ús de S3 per a allotjament estàtic costa només uns cèntims. També val la pena assenyalar que AWS és el proveïdor de solucions en núvol més gran, que ofereix més de 90 serveis que cobreixen tot el que pugueu imaginar.

Gloogle Cloud i Azure segueixen el mateix concepte i ofereixen serveis equivalents a preus competitius.

Heroku s’assembla més a una caixa on pots posar-hi qualsevol cosa que vulguis. Aquesta és una solució versàtil si voleu publicar la vostra aplicació al web.

Com millorar:

Seleccioneu qualsevol dels serveis anteriors, creeu el compte gratuït i desplegueu una aplicació que heu creat al web. Esbrineu com diferents serveis funcionen junts i com es divideix l'aplicació de pila completa en trossos que encaixen.

L’ús d’Heroku us presentarà Docker i les eines de línia d’ordres. En utilitzar AWS, podeu entendre millor els conceptes bàsics de les solucions web. El mateix s'aplica a Google Cloud i Azure.

La infraestructura és una d’aquestes coses que només cal afrontar per veure com encaixa tot.

Què passa amb Google:

Webstack / desplegament AWS / Azure / Google Cloud, Heroku i Docker, desplegaments de Docker, canonada de desplegament continu per a AWS / Azure / Google Cloud / Heroku

darreres paraules

De vegades és difícil millorar les habilitats quan no se sap què aprendre. Espero que aquesta guia us hagi ajudat a augmentar la vostra consciència sobre els temes necessaris per actualitzar-vos des d’un nivell per a principiants / joves.

Al món de la programació, la veritable antiguitat no està determinada pel nombre de setmanes, mesos o anys que ha passat una persona. Depèn de la seva profunditat i amplitud de coneixement de la flexibilitat i fluïdesa de les seves ments en aplicar aquest coneixement i adaptar-lo als problemes, i de la seva capacitat per dissenyar codi de manera creativa de la manera més eficient, llegible i concisa.

Mantenim-nos connectats i unim-me a la llista de butlletins setmanals per obtenir excel·lents càlculs web. Gràcies per llegir. «

Aphinya