Kujutise koostas Aphinya Dechalert. Nimega „Algaja veebiarendaja, kes juhib professionaalse kasvu seemneid”

Kuidas pääsete noobville'ist välja ja lähete arendajana kaugemale algaja õpetustest?

juhend iseõppinud rajalt kvalifikatsiooni tõstmiseks

Tänapäeval kipuvad veebiarendajad olema iseõppinud ja sisenevad väljale alustamiseks lihtsalt piisavalt teadmistega, kuid pole piisavalt ohtlikud, et arvutiteaduse kraadiga inimesi trügida.

Paljud iseõppinud arendajad takerduvad noobville'i tuntud ruumi mitte seetõttu, et nad kodeeriks halvasti, vaid seetõttu, et vajavad lihtsalt mingeid juhiseid. Mäletan, et olin kunagi umbes 7 aastat tagasi noobvillas ja tahtsin juhendit, mis sisaldaks minu oskusi oskuste täiendamiseks.

Seal oli palju katse- ja eksimisvõimalusi, tööstusega seotud paljastusi ja uue tehnoloogiaga tegelemist, kui nad välja tulid. Pärast seda, kui olen näinud, kuidas mu juuniorid läbivad samad heitlused, otsustasin kirjutada juhendi, mille ma soovin, et neil oleks olnud, kui ma olin nende meeskonna juht.

Seetõttu esitan ilma täiendava vaevata juhendi teie veebi arendamise oskuste täiendamiseks.

Tehniline kolmainsus

Mulle meeldib sageli nimetada peamist esiotsa virna tehniliseks kolmainsuseks. See koosneb HTMList, CSSist ja JavaScriptist.

Alustame CSS-ist

Pole midagi väljamõeldud, et peate HTML-i õppima, kuid CSS võib aja jooksul pisut keeruliseks muutuda.

See algab klassiga siin ja klassiga seal. Järgmine asi, mida teate, olete puistanud kümmekond eksemplari, mis on kogu teie rakenduse sees alla pandud. Inimesed räägivad koodilõhnast, kuid see on enamasti suunatud JavaScripti ja muude „õigete” programmeerimiskeelte poole. CSS jääb kõrvale, kuna see tundub lihtne.

Kuid see pole nii - eriti kui see on teatud suuruseks saavutatud.

Kuidas paremaks saada:

Uurige modulaarset CSS-i arhitektuuri. Samuti on olemas juba mõnda aega kasutatud kontseptsioon, mille objektiks on CSS. Jah. See on asi ja see võib pikas perspektiivis aidata päästa teie andmebaasi hullumeelsuse eest.

Eeltöötlejad, näiteks SCSS, loovad häid tööriistu CSS-i vormistamiseks vormingus, mis on inimesele palju loetavam. Võib väita, et see on lihtsalt süntaksisuhkur, kuid mõnikord, pärast pikka päeva, kui tunnete end soolaselt teise inimese spagetikoodi vastu, tunneksite end pisut maitsta.

Mida Google'ile:

OOCSS, BEM, SMACSS, SCSS

Samuti peame vestlema JavaScripti kohta

Paljud inimesed valivad kolmainsuse mõttelt, et nad ei pea seda korralikult õppima. See töötab, miks jama sellega?

Kuid just nii purjetatakse otse jäämarja ja uputatakse laev kõige eepilisemas stiilis. Rakendused varisevad ja põlevad teadmiste puudumise tõttu. Reaktsioon ja nurgeline ei saa teid päästa, kuna need on lihtsalt tööriistad.

JavaScripti kasutamine on üks asi. See on veel üks JavaScripti rääkimine.

Kuidas paremaks saada:

Siit saate teada, kuidas prototüübid töötavad. See on JavaScripti põhifunktsioon, mida algajad sageli eiravad, kuna on eksiarvamus, et seda pole vaja.

Uurige JavaScripti programmeerimise paradigmasid ja arhitektuurilisi struktuure. Koodide sidusus ja erinevad mõtted sellel teemal võivad valgustada teid kodeerimismustrite ja eelistuste ebatõhususes.

Mida Google'ile:

JavaScripti prototüübid, JavaScripti koodi ühtekuuluvus, üksikvastutus, JavaScripti regulaarsed avaldised, OOP JavaScripti, FP JavaScripti, protseduurilise JavaScripti, JavaScripti algoritmi skriptimine

Paradigmade kontrollnimekiri

Kaks kõige populaarsemat programmeerimise paradigmat on OOP (objektorienteeritud) ja FP (funktsionaalne programmeerimine). Kuid need ei ole ainsad kaks olemasolevat koodi struktureerimise teooriat ja meetodit.

Hoolikas jälgimine on protseduuriline, deklaratiivne ja hädavajalik programmeerimine.

Meele laiendamiseks peate end kursis programmeerimise paradigmade kunstiga. See annab teile võimaluse tagasi astuda ja vaadata koodi osade sarjana, mida saab konkreetsel viisil kasutada.

Kui olete programmeerimisparadigmadest aru saanud, ei näe te enam koodi koodina. Selliste teadmiste teadvustamisega kaasneb teatav valgustumise tunne.

Teie suhe koodiga muutub ja see pole midagi muud, kui lihtsalt väljaütlemine, kui funktsioonide sees olevad avaldused muudavad asjad toimima.

Kuidas paremaks saada:

Alustage OOP-iga, kuna JavaScript põhineb prototüüpidel, mis on objektorienteeritud programmeerimise paradigma. Kui olete selle hangunud, hakake uurima FP-d, kuna see läheb prototüüpidega üsna hästi läbi.

Õppige prototüüpide kontseptsiooni tegelikult omandama, kuna see on JavaScripti puhta koodi loomise peamine alus. Mõlemat mõtlemismetoodikat saab üle kanda ka sellistesse raamistikesse ja raamatukogudesse nagu Angular, React ja Vue.

Kui olete mõlemad teooriad maha saanud, jätkake kindlasti oma reisi ja uurige protseduurilisi, deklaratiivseid ja hädavajalikke programmeerimisvõimalusi. Need pole nii populaarsed, kuid võivad anda teile ülevaate erinevatest mõtteviisidest, mis loodi konkreetsete probleemide lahendamiseks. Üks metoodika sobib teatud olukordades paremini kui teised. Nende stsenaariumide tundmaõppimine eeldab teadmisi ja mõistmist nende lahendamiseks loodud lahenduste kohta.

Mida Google'ile:

OOP nurgafunktsioonid, prototüübid töös, OOP ja FP mustrid, SOLID põhimõtted koos OOP ja FP

Koodikonventsioonid

Koodimääratlused on see, kuidas arendajad püsivad samal lehel üksteisega. See on ka aja- ja inimkontrollitud viis oma koodi struktureeritud, vormiriietuse ja loetavuse hoidmiseks.

Alustades on meil sageli oma ideed, kuidas oma klassidele, failidele, vahelehtedele või tühiku taandele oma koodi nimetada. Mõnikord pole meil isegi selget ülevaadet selle kohta, kuidas asju nimetada, visates välja kõik, mis tol hetkel tundus loogiline - ainult selleks, et vaadata tagasi ja imestada, mida te mõtlesite.

Koodimõistete tundmata jätmine on nagu jälgige, kuidas väikelaps söögitaldrikut kannab - väikelaps ei tea midagi paremat ja arvab, et see on suurim asi maailmas, jättes kellegi korrastamiseks suure jama.

On üks asi olla ainus koodialuse kallal töötav inimene. Asjad muutuvad keeruliseks, kui olete meeskonna osaks saanud.

Kuidas paremaks saada:

Üks lihtsamaid viise peamistest vormindamistavadest teada saamiseks on kasutada ja IDE-d, mis toetab automaatset vormindamist. Visual Stuudiokoodis on Esben Peterseni nimega Prettier-Code vormingus laiend, mis vormindab teie koodi salvestamise ajal automaatselt standardiseeritud viisil.

Prettieri ilu seisneb selles, et teile pole tähtis, kuidas oma koodi vormindada, sest see sorteerib selle lõpuks teie jaoks välja. Kui te ei vasta juba taandele, kui tegemist on taande, sulgude paigutuse ja koodi lisamisega, võib Prettieri loodud väljund olla teie süsteemile šokk - kuid see on hea šokk, mis peaks teid mõjutama. õigesti vormindatud koodi kirjutamisel on õige suund.

Kuid Prettier ei tegele konventsioonide osas kõigega. Peate õppima nimetamistava, millal ja millises kontekstis seda kasutada. Teie projektitüübi kaustastruktuurid ja teie valitud teegi või raamistiku failirühmad.

Mida Google'ile:

JavaScripti koodi tava, nimetamisreeglid JavaScriptis, nurga / reaalaja / vue nimetamise tavad, nurk / reageerimine / vue / mida iganes kasutate JavaScripti kaustade struktuuri konventsioonide peal, kuidas VS-koodi laiendusi installida

Visuaalse digitaalse disaini põhimõtted

Veebiarendajana võib visuaalselt uimastatavate digitaalsete disainilahenduste loomise tee olla juba kaetud maketide ja kujundatud PDF-idega. Elu arendajana ei ole aga alati nii lihtne ja visuaalse kujunduse põhimõtete tundmine aitab teil tuvastada selle seose ja struktuuri teie koodiga.

Kui suudate aru saada digitaalse disaini põhimõtetest, suudate ette mõelda, kuidas peaksite oma koodi arhitektuuriks sobitama. Digitaalse disaini põhimõtete tundmine muudab teid palju mitmekülgsemaks arendajaks, kes oskab kavandamisel ette näha erandeid ja tõsta lipu. See parandab ka teie suhet vedeliku koodi loomisega, mis suudab rahuldada paljusid ekraani suuruse nõudeid.

Kuidas paremaks saada:

Google tõi välja intuitiivsete toodete loomise juhendina Material Design. Kuus klassikalist disainiprintsiipi on endiselt olulised ka digitaalsete üleviimiste puhul, nii et võib-olla tasub ka seda kontrollida.

Kujundus on kunstivorm ja kui te pole piisavalt enesekindel, et luua oma nägusaid liideseid, siis on hea vaadata teiste inimeste disainilahendusi ja neid kopeerida. Töötage oma lemmikveebisaitide ja mobiilsete liideste abil visuaalsete kloonide uuesti loomisega. See aitab teil mõista kasutatud mustreid, nende koostoimimist ja rakendamist.

Mida Google'ile:

visuaalse kujunduse põhimõtted, materjalide kujundamine, auhinnad, ajakiri Smashing, vedeliku kujundamine, adaptiivne disain, esimene mobiilne kujundus

Sa pead õppima Giti

Puudub põgenemine, isegi kui soovite. Versioonikontrolli, koodi jagamise ja muudatuste ülevaatamise osas on see ploki suurim ja populaarseim laps.

Kui te ei tea, kuidas git kasutada, olete ebasoodsamas olukorras, eriti kui tegemist on meeskonnaga töötamisega. Enamasti on git-teadmised täielik algaja vs noorem arendaja üks peamisi näitajaid.

Kuidas paremaks saada:

Ärge muretsege. Git on lihtne. Vaja on vähemalt seda, kuidas luua hargnemist, lavakujundust, tagasi lükata ja rullida. Git-harude ühendamist saab teha tõmbetaotluste kaudu, kuid kui peate seda tegema konsoolis, peaksid mõned Google'i päringud teile vajaliku käsu andma.

Saate harjutada, luues GitHubi konto, kui teil seda veel pole. Mängige käskudega ja õppige, kuidas seda konsooli kaudu oma kontoga ühendada. Teoreetiliselt võite kasutada GitHubi klienti, mis annab teile visuaalse versiooni, kuid mis ei täida eesmärki õppida git kasutama. Terminalikäskude õppimine võib ka käepärast olla ja mõnel juhul teie töövoogu kiirendada.

Mida Google'ile:

git, git töövoo käsud, git õppimine

Ühiku testimine 101

Ühiku testimine nõuab koodi loomise osas täiesti erinevat mõtlemismeetodit. See algab loodetud tulemust silmas pidades ning tagab erandite tabamise ja nendega tegelemise.

Tavaliselt õpivad inimesed koodi kodeerima sihtotstarbeliselt eksperimentaalsete funktsioonidega siin ja seal, käsitledes koodmutatsioone nende tulekul. Testipõhine lähenemine algab otsast ja töötab tagasi algusesse. See tagab teie koodi arhitektuuri enne naelte puusse löömist.

Õppige testitud disaini ja arhitektuuri kunsti, et veenduda lõpptulemustes robustses tootes, mis tuvastab sisendid ja väljundid. See vähendab inimeste vigasid pilke ja püüab vead kinni enne, kui nad hiilivad läbi pragude ja tagavad tüütu pea kõige pahaaimamatutes kohtades.

See sunnib teid koodi jagama osadeks ja aitama kontrollida, kas konkreetne koodiüksus töötab ootuspäraselt. Kui teie koodibaasis midagi muutub, peaks testid hõlmama kõik muudatusi põhjustavad pausid - vähendades nii vea ja selle päritolu jälgimiseks kuluvat aega.

Kuidas paremaks saada:

Saadaval on mitu üksuse testimisraamistikku ja raamatukogusid, näiteks Jasmine, Mocha ja Jest. On suur tõenäosus, et kasutate oma koodi JavaScripti külje konstrueerimiseks mingisugust raamistikku, näiteks nurga all või raamatukogu, näiteks React. Peate otsima, millist testimisraamistikku või -kogu kasutatakse koos sellega.

Mida Google'ile:

ühiku testimise põhimõtted, mis ei ole ühiku testimine (üldiste väärarusaamade välistamiseks), Jasmine, Mocha, Jest, erinevused üksuste testimise raamistike ja raamatukogude vahel, ühikute testimise mustrid

Sõlme ja andmebaasi täielik virnastamine

Kui tegelete ainult veebiga, siis teeb see teid esiotsa veebiarendajaks. Kuid kui teil on teadmisi, kuidas API-sid luuakse ja kuidas asjad andmebaasidega suhtlevad, võib see teid eristada puhtalt esiotsa arendajast.

Ehkki fantastiliselt veebiarendajaks saamise eelduseks pole, võib see mitmekesistada teie oskusi ja tugevdada mõistmist otsast lõpuni. Mitte ainult, et see muudab teie oskused potentsiaalsete tööandjate jaoks paremini turustatavaks.

Enamik traditsioonilisi ettevõtteid tegeleb relatsiooniliste mySQL-i andmebaasidega, nii et on hea omada teadmisi ja mõista, kuidas tabelid ja suhted toimivad. Paljud alustavad ettevõtted valivad lauata andmebaasid nagu MongoDB pikaajaliste kulude, paindlikkusega, mis võimaldab potentsiaalset kasvu ja hõlpsat rakendamist.

Node.js annab teile võimaluse luua oma andmebaasi vahel taustaprogrammi liides ja tõlkida see oma kasutajaliidese jaoks kasutatavas API-s.

Kuidas paremaks saada:

Looge CRUD API-de komplekt, mis loob ühenduse andmebaasiga, kui te pole varem Node.js-ga kokku puutunud. Loomine, lugemine, värskendamine ja kustutamine on peaaegu kõigi võimalike toimingute püha graal. Kõik osutab lõpuks andmebaasile ja kui teil on võimalik luua API-de komplekt, mis selle abil toimib, on teie jaoks seatud palju vajalikke taustaprogramme.

Kuna Node.js on JavaScriptis, on elu teie jaoks palju lihtsam kui see, mis oleks olnud kümmekond aastat tagasi, kui sellise asja loomiseks peate õppima teist keelt, näiteks Java või C ++.

Mida Google'ile:

Node.js CRUD, Sõlmeühendus andmebaasiga, Sõlme API mustrid, MongoDB, mySQL disain ja arhitektuur

Infrastruktuuri võimalused

AWS, Google Cloud, Azure ja Heroku on kõik potentsiaalsed ruumid, mida saate infrastruktuuri uurimisel uurida. Rakenduse loomine otsast lõpuni on üks asi - teine ​​asi on võimalus see kuhugi üles panna ja avalikkusele kättesaadavaks teha.

Kui tegemist on AWS-iga, maksab S3 staatilise hostimise võimendamine teile ainult sente. Samuti väärib märkimist, et AWS on pilvelahenduste suurim mängija ja pakub enam kui 90 teenust, hõlmates kõike, mida võite ette kujutada.

Gloogle Cloud ja Azure järgivad sama kontseptsiooni, pakkudes võrdväärseid teenuseid konkurentsivõimelise hinnaga.

Heroku sarnaneb pigem kasti, kuhu saate sinna panna kõike, mida soovite - mis võib olla mitmekülgne lahendus, kui soovite oma rakenduse veebis üles panna.

Kuidas paremaks saada:

Valige üks ülaltoodud teenustest, looge tasuta konto ja installige oma loodud rakendus veebi. Uurige, kuidas erinevad teenused koos töötavad ja kuidas jagada kogu korstnarakendus sobivaks osadeks.

Heroku kasutamine võimaldab teil tutvuda Dockeri ja käsuridade tööriistadega. AWS-i kasutamine aitab teil veebilahenduste jaoks paremini ära kasutada. Sama kehtib ka Google Cloud ja Azure kohta.

Infrastruktuur on üks neist asjadest, mille jaoks peate lihtsalt oma käed määrima, et näha, kuidas see kõik sobib.

Mida Google'ile:

AWS / Azure / Google Cloudi veebipakk / juurutamine, Heroku ja Dockeri, Dockeri juurutamine, AWS / Azure / Google Cloud / Heroku pidev tarnimine

Lõppsõnad

Mõnikord on keeruline oskusi omandada, kui te ei tea, mida peaksite õppima. Loodan, et see juhend on aidanud teil laiendada teie teadlikkust teemadest, mida on vaja algajalt / nooremalt tasemelt üle saamiseks.

Programmeerimismaailmas ei määra tõeline tööstaaž nädalate, kuude või aastate arvuga, mis inimesel vöö all on. See sõltub nende teadmiste sügavusest ja ulatusest, sellest, kui paindlik ja sujuv on nende võime neid teadmisi probleemidele rakendada ja kohandada ning nende võime loovat meisterdada kõige tõhusamal, inimloetaval ja sisutihedal viisil.

Olgem ühenduses ja liituge minu iganädalase vinge veebikõne uudiskirjaloendiga. Täname, et lugesite.❤

Aphinya