Minu teekond veebiarendajaks saamisest nullist ilma CS kraadita (ja mida ma õppisin…

Esiteks lubage mul ennast tutvustada. Minu nimi on Sergei Garcia ja ma olen täiskohaga 2-aastase kogemusega kasutajaliidese arendaja. Selle aja jooksul olen töötanud kasutajaliidese arendajana nii Forbes 500 konsultatsioonifirmas kui ka väikeses ettevõttes.

See ei pruugi tunduda palju kogemusi, kuid teise aasta arendajana lõpetamine on olnud minu jaoks tohutu verstapost. Selle põhjuseks on asjaolu, et mul ei olnud veebiarendusega tegelikke kogemusi - ja lisaks vähestele programmeerimiskogemustele lisaks mõnele C # ja Java põhikoolitusele, mille sain mõnelt veebikursuselt. Samuti ei olnud mul informaatika kraadi, kuna lõpetasin IT-projektijuhtimise eriala.

Ma pole kunagi oma kogemustest kirjutanud, hoolimata kogu abist, mida olen saanud suurepärastest ressurssidest nagu Medium, Stack Overflow ja Redditi programmeerimise alamditsid. Nii otsustasin täna seda muuta. Täna täidan teid selles, mis läks õigesti ja mis mitte, nii et kui te lähete sellele teekonnale, oleks teil rohkem õnne kui mul.

Ma tean, et selliseid artikleid on palju, kuid mitte eriti paljud neist ei aruta protsessi kahe aasta tagantjärele.

Alustan oma teekonnast, sealhulgas sellest, mis valesti läks. Kui olete lihtsalt huvitatud sellest, millised on minu ettepanekud võimalikult lühikese tee kohta veebiarendajaks saamise alustamiseks, minge julgelt viimasele lõigule: lühim marsruut .

Niisiis, ilma pikema jututa, alustame!

Põhitõdede saamine

Pärast otsustamist, et tahan veebiarendusega tegeleda, oli minu esimene küsimus: "Mida ma õpin?" Pärast mõningaid uuringuid tegin lõpuks oma õppetee lähtuvalt sellest, mida enamik algtaseme veebiarendaja positsioone soovis:

  • JavaScripti
  • HTML ja CSS
  • CSS-i eeltöötlejad (Less & Sass)
  • Tundlik disain
  • NurgaJS
  • Kujundusmustrid
  • Git
  • SõlmJS
  • Ülesandejooksjad

Nii see läks.

Javascript

Alustasin oma teekonda JavaScripti õppimisega CodeSchooli kaudu(tasuline) ja Codecademy(tasuta). Kui te ei tea neist, on need suurepärased veebisaidid, mis võimaldavad teil õppida brauserisse kodeerima.

Leidsin, et sellised õppevahendid olid parimad, kui alles alustate. Lihtsalt soovitame, et see õppemeetod väsitab kiiresti, kui olete jõudnud täpsematesse asjadesse, kuna nende algoritmidel, mis kontrollivad, kas olete koodinäite õigesti lahendanud, on probleeme täpsusega. Mõlemad JavaScripti sissejuhatavad kursused olid silmapaistvad ja soovitan neid väga.

Kui sain põhitõed teelt kõrvale, asusin tugevama JavaScripti aluse saamiseks, lugedes Haverbeke raamatut Eloquent Javascript: A Modern Introduction to Programming (tasuta).

Seda raamatut soovitasid mulle paljud inimesed JavaScripti foorumites lugeda ja seda kindlasti põhjusel. See raamat oli karm - eriti kui õpid lihtsalt programmeerimist nagu ma tol ajal olin. Kuid mul on hea meel, et ma alla ei andnud ja jäin selle juurde. See oli fenomenaalne tänu selle hõlmatud ulatuslikule programmeerimiskontseptsioonide ulatusele, isegi kui see oli kohati natuke halastamatu. Mida iganes teete, ärge jätke koodiväljakutseid vahele. Kui olete selle raamatu valmis saanud, võite lõpuks kindlalt öelda, et olete JavaScripti heast valdamisest.

Võite soovi korral õppida ka jQuery-d (ehkki ma tõesti ei soovita seda veel õppida - sellest hiljem lähemalt). Selle saate õppida CodeSchooli kursuse Try jQuery kaudu.

HTML ja CSS

Pärast JavaScripti õppimist õppisin CodeSchooli HTML & CSS-i õppe kaudu HTML & CSS-i ja veebidisaini põhialuseid. Need kursused on tänaseni minu lemmikud, kuna tempo on suurepärane ja nende läbitavat sisu võimaldas mul omandada sellele tugevama aluse.

Võite selle ka hõlpsasti välja lülitada näiteks Codecademy HTML & CSS kursuse jaoks ja saada siiski sarnaseid tulemusi. Või kui olete väljakutse jaoks valmis, on Udacity'i kursus HTML ja CSS sissejuhatus palju terviklikum ja veidi keerulisem.

Boonus : kui saate oma kätte saada Jon Ducketti HTML-i ja CSS-i: veebisaitide kujundamine ja loomineraamat, see on ka kaljukindel lähtepunkt HTML-i ja CSS-i õppimiseks (koos piserdusega veebidisainiga). See on kõrgelt hinnatud (Amazonil 4,7 / 5), pakub põhjalikku sissejuhatust veebiarenduse maailma. See on ilus raamat tänu puhtale kujundusele, suurte tähtede ja värviliste lehtedega. Tulen selle juurde sageli lihtsalt imetlemiseks.

Vähem / Sass

Nende jaoks, kes pole tuttavad, on Less & Sass CSS-i transpellerid, mis võimaldavad teil CSS-i elegantsemalt kirjutada. See võimaldab teil teha asju, mida tavaliselt ei toetata, näiteks CSS-i reeglite pesitsemine. Kui need on valmis, kompileerivad need CSS-i transpilaatorid teie koodi ja teisendavad selle tavaliseks CSS-iks.

Praegu on 2 suurt CSS-i transpilaatorit: Less ja Sass . Sass on populaarseim, kuid mulle tundus, et kõigepealt on Less õppimine lihtsam, peamiselt seetõttu, et Sassi kasutamine arvutis nõuab ka Ruby installimist, mis mulle väga ei meeldinud.

Kiire, kuid täieliku ülevaate Lessist saate WinLessi veebipõhise vähem kompilaatori abil ja see on koodinäited, et näha, kuidas teie Less kood CSSiks muutuks. Võite Sassi proovida ka veebis, kasutades SassMeisterit (ehkki see ei sisalda koodinäiteid).

Pole tähtis, kas õpite kõigepealt Less või Sass. Nad on äärmiselt sarnased, nii et kui tunnete ühte, siis tunnete üsna palju teist. Shelby Mouldeni artiklist LESS & SASS võrdlus leiate suurepärase kiire võrdluse Lessi ja Sassi vahel.

Tundlik disain

Algselt õppisin tundliku disaini ja Bootstrapi kohta Codeschooli HTML- ja CSS-tee abil, kuid hiljuti leidsin, et Google'i Udacity'i kursus reageerivate veebidisaini põhialuste kohta on fantastiline põhitõdede ja kaugemate teemade kajastamisel palju terviklikumal viisil kui Codeschool.

Reageerivat disaini saate teha ilma täiendava raamistikuta, kuid see on tunduvalt lihtsam sellise tundliku raamistiku abil nagu Bootstrap. Bootstrapi ametlik dokumentatsioon on väga hästi koostatud, nii et teil ei tohiks olla probleeme selle alustamisega.

Kui teil on selle põhiprintsiipide mõistmisega probleeme, lugege Froonti ajaveebi postitust, mis käsitleb reageeriva veebidisaini 9 põhiprintsiipi. Sellel on ilusad puhtad ja lihtsad animatsioonid, mis aitavad illustreerida tundliku veebidisaini põhimõtteid.

NurgaJS

Ma ei teadnud tegelikult, mis täpselt AngularJS siis oli, kuid teadsin, et kõik räägivad sellest ja et kui ma tahan veebiarendajaks saada, siis pean selle õppima. Leidsin AngularJS-ist Google'i arendaja disainilahendused, et anda parim üldine ülevaade sellest, mis oli AngularJS ja kuidas see veebirakenduste loomist parandas.

Kõigepealt mõtlesin AngularJS-i õppida nende ametliku dokumentatsiooni kaudu, kuid see osutus kohutavaks ideeks. Dokumentatsioon ei olnud algajatele eriti lihtne ja segane vormindamine muutis selle raskesti loetavaks ja arusaadavaks.

Edasi õppisin Codeschooli kaudu AngularJS-i. Oma positiivse kogemusega JavaScripti ja CSS-i kursustel ka sealt, ei oodanud ma midagi muud kui head kursust. Ma eksisin. Kursus oli algusest peale katastroof, kuna algoritm, mida kasutati selleks, et kontrollida, kas said koodi näite õigesti, ei töötanud mõnikord õigesti ja märkis teie selgelt õige lahenduse valeks. Oli isegi aegu, kus katkise valideerimissüsteemi parandamiseks kulus vaid lehe värskendamine. Mis puutub kursuse sisusse, siis see polnud ka suurepärane. See tegi korraliku töö AngularJS-i rakenduse põhikomponentide selgitamisel, kuid kohutava töö nende integreerimisel reaalsesse rakendusse, jättes mulle palju rohkem küsimusi, kui alustasin.

Pärast mõningast foorumites ringi otsimist komistasin Egghead.io lehele(tasuta / tasuline), kus mul oli palju parem õnne. Nende kursusematerjal oli palju puhtam, ülevaatlikum ja terviklikum, andes palju parema kogemuse. Rääkimata sellest, et lisaks kursustele on neil ka olulisi teemasid kajastavad 2–5-minutised näksimistunnid. (Näiteks: mis on kontroller? Mis on filter? Mis on rakendusala $?) Nende abil on põhitõdesid väga lihtne mõista. Neil on ka mõned videod, mis nõuavad maksmist, kuid tavaliselt on need need, mis hõlmavad keerulisemaid nurkteemasid, mida te hiljem ei vaja. Ma läbisin nende AngularJS Fundamentals'i kursuse ja jäin tulemustega igati rahule (ja sain ka selle käigus Egghead.io kursuste suureks fänniks).

Kujundusmustrid

Kujundusmustrid on põhimõtteliselt korduvkasutatavad koodilahendused, mida saab korduvalt kasutada tavaliste tarkvaraprobleemide lahendamiseks. Sellel aluse olemasolu muudab teid palju konkurentsivõimelisemaks tarkvaraarendajaks mis tahes programmeerimiskeeles. See hõlbustab ka teiste inimeste koodi mõistmist, sest saate kiiresti tuvastada, millist kujundusmustrit nad oma koodis selle paremaks mõistmiseks kasutasid.

Leidsin selle õppimiseks kaks parimat allikat: doFactory JavaScripti kujundusmustrid ja Addy Osmani JavaScripti kujundusmustrid. Leidsin, et doFactory on palju hõlpsamini mõistetav, samas kui Addy Osmani raamat oli palju täielikum.

Chrome DevTools

Chrome on veebiarendaja jaoks üks võimsamaid tööriistu. Mida varem selle valdate, seda rohkem aega saate hiljem kokku hoida. Codeschooli tasuta kursus Explore and Master Chrome DevTools teeb nende tutvustamisel suurepärast tööd.

Git (versioonihaldus)

Ah, Git - tööriista, mida ma kunagi ei teadnud, et mul vaja on, kuni avastasin, mida see teha võib. Põhimõtteliselt võimaldab see teil jälgida oma koodi muudatusi, nii et kui asjad valesti lähevad, saate liikuda tagasi eelmisesse ajahetke. See võimaldab teil vaadata ka oma koodi ajalugu.

Leidsin, et CodeSchooli tasuta proovikursus Try Github on sõbralik viis alustamiseks. Atlassiani Giti-koolitus hõlmas suurepäraselt saadaolevaid täpsemaid käske. Codeschooli Giti õpperada on suurepärane ka Giti põhialuste kajastamisel.

SõlmJS

Ei läinud kaua aega enne, kui sain teada, et põhiteadmiste omamine NodeJS-ist aitab mind väga palju veebiarendajaks saamisel (sellest varsti lähemalt).

Proovisin Codeschooli kursusi Node'is, kuid leidsin, et neil on sisupuudus. Leidsin, et NodeSchool.io on tunduvalt parem õpetaja põhitõdede õigesti mõistmisel ja see oli tore! Mulle meeldis praktiline lähenemine, mida see pakkus, mis oli sarnane Codeschoolile ja Codecademy'le - koos täiendava täiustusega, et ma tõesti juhtisin NodeJS-i.

Ülesandejooksjad (Grunt & Gulp)

Grunt ja Gulp olid mulle üsna suureks üllatuseks, kuna mul polnud aimugi, et sellised tööriistad üldse olemas on - aga mul on äärmiselt hea meel, et nad seda teevad! Põhimõtteliselt võimaldavad need ülesannete jooksjad automatiseerida tavalisi ülesandeid. Näiteks mäletate Less / Sass? Tavaliselt peate CSS-i kompilaatori käsitsi käivitama iga kord, kui muudate seda CSS-i kompileerimiseks ja seejärel brauserit värskendama. Kasutades ülesande jooksjat, saate selle seadistada jälgima oma faile Less / Sass muudatuste jaoks ja kui see tuvastab muutuse, kompileerige oma CSS ja värskendage brauserit automaatselt. See on tohutult kasulik teie arendusaja lühendamiseks.

Praegu on 2 peamist ülesande jooksjat: Grunt ja Gulp. Kuigi nad teevad täpselt sama asja, töötavad nad väga erineval viisil, kusjuures Grunt on palju rohkem verbose ja konfiguratsioonile orienteeritud ning Gulp on kirjutamiseks lühem ja eelistab koodi konfiguratsiooni asemel.

NodeJS-i tundmine aitab teil kirjutada paremaid Grunt- ja Gulp- faile, kuna mõlemad töötavad NodeJS-is . Saate valida, mida soovite, kuid leidsin, et Gulp on palju lihtsam õppida ja kirjutada. Ma eelistan seda ka täna selle minimalistliku - kuid samas võimsa - torupõhise lähenemise tõttu.

Leidsin, et Scotch.io Grunt ja Gulp teemalised kursused on seal parimate seas.

Väljakutsed, millega puutusin kokku oma esimesel töökohal

Kui olin veebiarenduse põhialused käsitlenud, olin valmis oma esimeseks veebiarenduse intervjuuks algtaseme ametikohale. Ma ei hakka intervjuu üksikasjadesse laskuma, kuna see pole selle artikli põhirõhk. Kuid ma ütlen, et mulle öeldi, et minu suhteliselt tugevad JavaScripti teadmised aitavad mul positsiooni kindlustada. (Aitäh, Kõnekas JavaScripti!)

Pean ütlema, et olin oma esimese projekti üle üsna närvis. See hõlmas HTML-i, CSS-i ja JavaScripti abil korduvkasutatavate veebikomponentide valmistamist koos tööriistadena Bootstrap, Sass, Grunt. T

kaks suurimat viga, mille ma alguses leidsin, olid:

  1. Hirm läbikukkumise ees. Kuna olin uus poiss, kartsin pidevalt, et kood on vale või halvasti tehtud, nii et veetsin palju aega kõike uuesti kontrollides ja pidasin kinni parimate tavade kodeerimisest. Seetõttu proovisin ma harva lahendusi loomingulistel viisidel, kuna kartsin, et see ei pruugi lõpuks õigesti töötada. See sulges mu uute teadmiste õppimise.
  2. Tehakse asju, sest “X” inimene, kes teab minust paremini, ütles seda. Tegin seda alguses palju. Kuigi see pole täiesti vale, ajab asju teatud viisil ainult seetõttu, et “X” asjatundja selles küsimuses nii ütles - teadmata, miks - see viib selleni, et ma ei tea tegelikult, millal miks asju tehti, nagu nad olid. Varsti sain teada, et kõigel oli erandeid ja et alati peaksite teadma parimate tavade põhjust.

Õnneks oli mul esimese projekti ajal juhtiv meeskond, kes aitas mul nendest probleemidest üle saada. Ta motiveeris mind pidevalt uusi asju proovima, isegi kui mõnikord läks valesti. Ta käskis mul ka kõik - isegi tema õpetused - kahtluse alla seada.

Aja jooksul sain oma õppetunni. Sellest ajast peale olen alati olnud inimene, kes ootab põnevusega uusi asju. Püüan alati mõista, miks on olemas parimad tavad, millal neil on õigus ja millal need olukorda ei kohalda.

AngularJS-i kasutamine tegelikus projektis esitas minu jaoks ka üsna suure väljakutse. Selle põhjuseks oli peamiselt see, et paljusid asju, mida ma sellega tegin, tegin täiesti aru saamata, miks need juhtusid. Ma arvasin, et see on "nurgeline maagia".

Mitu korda soovisin, et teaksin, kuidas Angular tegelikult töötab, kuid dokumentatsiooni vaadates oli hirmutav.

Sattusin lõpuks hämmastava raamatu nimele Ehita oma nurgelineJS. Ma ei lugenud seda kõike, kuid lugedes jaotist „Reguleerimisala ja jälgijad” ning nende tööpõhimõtteid, avanes tõepoolest, kuidas nurgeline maagia ei olnud tegelikult maagia. See oli lihtsalt nutikas viis siduvate andmete säilitamiseks, kasutades määrdunud kontrolli ja pesastatud ulatusi. Soovitan seda raamatut kõigile, kes soovivad AngularJS-i täielikult mõista.

Teine väljakutse, millega aasta hiljem kokku puutusin, oli see, kui kiiresti veebiarendus edenes. Olin just õppinud AngularJSi ja Grunti ning tundsin end uhke ja vägevana - et varsti teada saada, et Gulp ja ReactJS on silmapiiril. Ja aasta hiljem, pärast nende õppimist, hakkas Webpack oma positsiooni saavutama ja ka mina pidin seda õppima. Nagu võite ette kujutada, oli suur osa minust üsna pettunud, kui kiiresti osa minu teadmisi vananesid. Kuid töökaaslane valgustas mind varsti, öeldes mulle midagi, mis muutis igaveseks raamatukogude ja raamistike vaatamist:

"Raamatukogud ja raamistikud võivad vananeda, kuid nende pakutavad kontseptsioonid ja lahendused jäävad ajaproovile sageli vastu."

Tal oli õigus. AngularJS võib olla vananenud, kuid selle taga peituva maagia täielik mõistmine aitas mul paremini mõista Reacti veebikomponentide arhitektuuri, mis Angulari direktiivide kontseptsiooni täiustas. See aitas mul mõista ka seda, kuidas ReactJS nii palju populaarsust saavutas, samuti seda, milline tulevik ees ootab.

Ma ei mäleta, et oleksin oma järgnevate projektide puhul kokku puutunud muude suuremate väljakutsetega. Aga mida ma ütlen, on see, et kahe aasta jooksul, mida olen veebiarendusega tegelenud, oli minu põnevus ja võimas püüd alati silma peal hoida - see on minu enda töökaaslaste sõnul õnnestunud edu saavutama uute õppimiseks. Varsti sain teada, et see on võitnud kombinatsioon veebiarendusega, sest siinsed asjad muutuvad tõesti väga kiiresti, pidevalt ilmuvad uued raamistikud ja raamatukogud.

Mündi tagaküljel oli teine ​​asi, mis aitas mul tonni - ja mida ma tegelikult üsna hiljuti teada sain - arusaamine sellest, mida mitte õppida. See muutus minu paremaks veebiarendajaks saamise protsessiks kriitiliseks.

Pole haruldane näha inimesi, kes kritiseerivad veebitehnoloogiate ebanormaalselt kiiret arengutempot või seda, kuidas uus JavaScripti teek või raamistik peaaegu iga päev välja tuleb. Kuid aja jooksul nägin valgust ja sain lõpuks aru:

Te ei pea õppima iga uut raamatukogu ega raamistikku, mis välja tuleb.

Sageli on suurepärane idee teha lihtne tere maailma näide rakendus, et saaksite näha, mida raamistik pakub. Siis saate edasi liikuda. Kuid tavaliselt peaksite proovima keskenduda sellele, mis teie projekti vajadustele kõige paremini sobib. Esialgu võib see olla keeruline, kuid õnneks on olemas suurepäraseid kohti nagu Stack Overflow, Medium ja Reddit, kust leiate kasulikke arutelusid raamistike vahel ja saate teada, millised sobivad teie konkreetsete kasutusjuhtumitega kõige paremini.

Edasi minnes

Järgmistel aastatel arenesin pidevalt edasi järgmistel viisidel

JavaScripti

Kui olete lõpetanud Eloquent JavaScripti, on seda üsna lihtne öelda ja tunda, et olete JavaScripti valdanud, kuid siis tuleb teade Sa ei tea JS-i ja see hävitab teid absoluutselt (või vähemalt tegi seda mulle). Seda raamatusarja (muide tasuta) mainisid mulle mitu korda kontoris olnud vanemad veebiarendajad kui raamatut, mida lugeda ja et ainult seni, kuni olen seda lugenud, võin öelda, et tean JavaScripti täielikult. Neil oli õigus, kuna leht lehe järel lehvitas mul pidevalt meelt, kui tõeliselt keeruline JavaScripti tegelikult oli, nagu ka paljudel paljudel tavapärasest lõkse kogemata ja kogenud inimestel, kellel pole JavaScripti mõistmist.

Selle raamatusarja lugemine avas mu meelt tõesti ja soovitan seda ka kõigile, kes soovivad end nimetada JavaScripti asjatundlikuks arendajaks. Kui olete selle ära teinud, on 2 lisaressurssi, mida soovitan tungivalt veelgi paremate ja täpsemate JavaScripti teadmiste saamiseks;

  • JavaScripti paremad osad: D. Crockfordi hämmastav jutt, mis räägib JavaScripti suurimatest nõrkustest, see on "Jalarelvad" ja kuidas neid oma tugevustena kasutada.
  • JavaScripti kaks samba: usaldusväärne JavaScripti keskmise kirjutaja Eric Elliotti artikkel, mis räägib JavaScripti kahest suurepärasest sambast: prototüüpsest pärandist ja funktsionaalsest programmeerimisest

Kui olete JavaScripti põhjalikult mõistnud, jätkake ECMASCript 2015 (tuntud ka kui ES6), uusima ja praeguse JavaScripti standardiga. Ajakirja Smashing artikkel ECMAScript 6 (ES6): Mida uut on JavaScripti järgmises versioonis, see on suurepärane lühike ülevaade ES6-i uutest. ES6 saate proovida brauseris Babeli veebipõhise transpileri abil.

CSS

CSS võib väga-väga kiiresti sassi minna ja korrastamata. Puhtama CSS-i kirjutamiseks on välja pakutud üsna palju erinevaid metoodikaid, kuid 2 paistavad silma, mida soovitan teil konkurentsivõime säilitamiseks lugeda ASAP-i kohta:

  • SMACSS: CSS-i skaleeritav ja modulaarne arhitektuur. Paindlik juhend väikeste ja suurte saitide arendamiseks.
  • BEM: metoodika, mis aitab teil kasutajaliideses saavutada korduvkasutatavaid komponente ja koodijagamist.

Ma isiklikult eelistan SMACSS-i selle puhtama ilme tõttu, kuid mõned ettevõtted ja CSS-i raamistikud kasutavad endiselt BEM-i, nii et tasub teada mõlemat.

Samuti peaksite hakkama keskenduma oma CSS-i toimimisele. Ajakirja Smashing artikkel Mobiilse jõudluse optimeerimise haldamine ja HTML5 Rocksi artikkel Suure jõudlusega animatsioon tegid selles osas kindla töö. Mõlema artikli kiire läbi lugemine peaks andma teile kindla aluse.

JavaScripti komplektid

Nüüdseks peaksite Gruntist või Gulpist tugevalt aru saama. Järgmine samm on JavaScripti paketi lisamine oma ülesannete jooksjale, mis võimaldab teie JavaScripti rakendust modulaarsemalt korraldada.

Kaks suurimat mängijat on praegu:

  • Browserify: võimaldab teil brauseris mooduleid nõuda, ühendades kõik oma sõltuvused.
  • Veebipakk: põhiliselt sirvige steroidid. Raskem seadistada ja seadistada.

Scotch.io minikursus Browserify'iga alustamine võib anda teile alustamise brauserifailiga, samas kui David Fox Powelli artikkel Miks keegi ei saa kirjutada lihtsat veebipaketi õpetust? on suurepärane, lõbus lugeda veebipaki tutvustust.

Isiklikult ei ole ma veebipaketi kasutamisega palju aega kulutanud, kuid selle ajaga koos olles pean ütlema, et see on olnud hämmastav - isegi kui selle seadistamine on veidi raskem. Kui te alles alustate, kasutaksin Browserify'i, kuna selle seadistamine on palju lihtsam. Pange tähele, et veebipakk on tulevik ja milliseid suuremaid projekte hakatakse kasutama.

ReactJS

ReactJS kogub kiiresti populaarsust ja see ei näi aeglustuvat - niivõrd, kuivõrd inimesed küsivad: "Kas React tapab nurka?"

Scotch.io's Learning React.js: Alustamine ja kontseptsioonid annab kindla ülevaate Reactist. Kui olete selle ära teinud, jätkake Egghead.io kursusega React Fundamentals, kus ehitate täielikult töötava ReactJS-i rakenduse ja seejärel migreerite selle ES6-i süntaksisse. Võite jälgida ametlikku ReactJS-i dokumentatsiooni, mis on väga hästi tehtud ja võimaldab teil selle täielikult omandada.

Kuna React on ainult vaade, on tungivalt soovitatav õppida Redux. Enamik Reduxi kursusi on minu arvates natuke keerukad, kuid CSS-i trikid, mis viivad läbi reaktsiooni: Redux annab Reduxiga alustamisel suurepärase tasakaalu lihtsuse ja informatiivsuse vahel.

Võib-olla olete selles punktis kuulnud ka Fluxist, kuid kui mõtlete, miks peaksite kasutama Reduxi üle Fluxi, vaadake küsimust Stack Overflow Miks kasutada Reduxi üle Facebook Fluxi? millele vastas Reduxi looja!

Vaadates tagasi oma vigadele ja õpitule

Tegin 2 aasta jooksul veebiarenduse õppimise ajal palju vigu. Üldiselt arvan, et minu suurim viga oli põhiraamatute valdamine enne raamatukogudele ja raamistikele liikumist. See kehtib vist peaaegu iga sealse programmeerimiskeele kohta, kuid minu arvates kehtib see veelgi enam JavaScripti kohta. Seda seetõttu, et paljuski on JavaScript katkine keel ja sisaldab palju „jalarelvi” (sellest oleksite pidanud kuulma, kui vaatasite D. Crockfordi juttu teemal „JavaScripti paremad osad”, mida ma varem mainisin). Need võivad muuta elu talumatult raskeks, kui te neist täielikult aru ei saa.

Mäletan, et olin kord takerdunud $ ulatusega AngularJS-i probleemile, mille silumiseks kulus mul 3 päeva, kuid leidsin, et see polnud isegi AngularJS-i probleem, vaid JavaScripti probleem, mille ma ise põhjustasin, kuna ei saanud aru, kuidas see töötab.

Puhas kood

Imelik, et ma ei näe seda nii tihti räägitud. Ma ei hoolinud alati puhta koodi kirjutamisest, kuid ausalt öeldes on see üks asi, mille üle olen kõige uhkem õppinud. Seda seetõttu, et kõik armastavad kurta, kuidas nende viimasel kohal oli üks halvemaid ja koledamaid koodibaase maailmas. Miks siis keegi ei saa rääkida sellest, kui suurepärane oli nende viimane? Kuidas nende kood lõpuks nii puhas ja hästi pani, et nad olid selle üle uhked?

See on trend, mida tahaksin muuta, ja usun, et on võimalik midagi muuta, kui piisavalt inimesi selle nimel pingutab. Püüdke muuta muutujate ja funktsioonide nimed inglise keeles arusaadavaks, isegi kui peate kirjutama natuke rohkem. Seda mitte tehes peate selle kunagi hiljem käsitsi dokumenteerima, et see selgem oleks. See muudab ka teie üldise koodibaasi uutele arendajatele ja iseendale raskemini mõistetavaks. Jah, ise. Miks just ise? Sest kui te ei rakenda puhast koodi, siis mis paneb teid mõtlema, et teie töökaaslased peaksid selle jõustama ja kirjutama puhta koodi, et oleksite hõlpsasti aru saanud? Olgem eeskujuks.

Ja kui see pole piisavalt hea stiimul, tunnevad inimesed väga sageli puhta koodi kirjutajaid ära ja väärtustavad neid. Leiate, et puhta koodi kirjutades naudivad teie töökaaslased ja sõbrad teiega veelgi rohkem koostööd ning elate omakorda õnnelikumat elu.

jQuery

Mõni teist võib märgata, et ma ei rõhutanud jQueryle ka eriti. Seda seetõttu, et oma kogemuste põhjal leidsin, et jQuery tegi mulle alguses rohkem kahju kui kasu. Mõni teist ei pruugi nõustuda, kuid palun lubage mul selgitada: Kui ma seda esimest korda õppisin, mõistsin üldiselt, et jQuery on kõikjal ja et saate seda kasutada peaaegu kõigeks. Selle tõttu harjusin ma kasutama jQueryd peaaegu kõigi asjade jaoks ja iga tekkinud probleemi korral otsisin sellele lahendust, mis kasutaks jQueryd.

Ärge saage valesti aru, jQuery oli minu kasutamisel vinge, tegelikult nii vinge, et eirasin pimesi, et 90% sellest, mida ma jQueryga tegin, saab moodsates brauserites samamoodi lihtsa süntaksiga algselt teha.

Võib-olla mõtlete nüüd: "Mis selles siis viga on? jQuery ei kaalu niikuinii nii palju ja seda kasutades kirjutate ikkagi vähem koodi, kui teeksite asju loomulikult. " Kuid jQuery kasutamine kohalike API-de kohal ei olnud probleem. Probleem seisnes selles, et kogu minu mõtteviis ja kõik lahendused levinud probleemidele, mida teadsin kuni selle hetkeni, nõudsid jQuerylt tööd. Ja sellest sai tohutu probleem, kui sain oma esimese projekti ja mulle öeldi, et jQuery ei ole sõltuvus.

JQuery kasutamine muutis mind ilma selleta kasutuks ning pani mind täielikult eirama alati eksisteerinud natiivseid meetodeid ja lahendusi. See muutis ka kõik minu lahendused vähem kaasaskantavaks, kuna nende kasutamiseks oli vaja jQuery.

Sellest ajast peale olen püüdnud jQuery-d mitte kasutada, kui see pole tingimata vajalik ja pakub meie koodibaasile tõhususe ja loetavuse tõelist paranemist (näiteks raske DOM-i manipuleerimine).

Veelkord, ärge saage mind valesti aru, jQuery on suurepärane, kuid kui ma saaksin minna ajas tagasi ja kohtuda oma mineviku minaga, kes alles õppis veebiarendust, soovitaksin end tungivalt mitte täielikult jQuery õppida, kuni olen õppinud, kuidas teha asju ilma selleta. Kui teil on lüliti tegemisega probleeme nagu mul, vaadake, et te ei pruugi jQuery-d vajada.

Kursused

Mis puutub kursuse materjale; kuigi paljud CodeSchooli kursused olid silmapaistvad (HTML- ja CSS-haru oli eriti fantastiline), isegi kui mõned nende raamistikukursused langesid natuke tasaseks (AngularJS, BackboneJS jne).

Ma läbisin ka üsna palju Pluralsighti kursusi, mida ma ei maininud, sest kogu selle aja möödudes olen jõudnud järeldusele, et nende õppetee valimine on üldiselt halb mõte ja ebausaldusväärne . Kuna nende kursused on koostatud õpetajate poolt, kes ei ole alati (minu arvates) õpetamisel eriti head, leidsin, et nende kursuste kvaliteet kõigub tohutult, kuna nende kursuste kvaliteedistandardid puuduvad. Mul on olnud kursusi, kus isegi kursust andev isik tundus nagu oleks magama jäänud. Ja mul pole ausalt öeldes piisavalt tähelepanu pöörata 6–10-tunnisele kursusele - ja paljud neist kestavad nii kaua, kui mitte kauem.

Veetsin hea 80–100 tundi treeninguid Pluralsightis ja tahan ausalt öeldes head osa sellest tagasi. Ärge saage valesti aru, mul oli Pluralsightil mõned hämmastavad kursused, kuid nende keskendumine kvantiteedile ja kvaliteedile pani mind tõesti oma aega raiskama. Ma oleksin võinud õppida palju rohkem, kui oleksin käinud parematest allikatest nagu Egghead.io ja CodeSchool, kus nad hindavad rohkem kvantiteedi kvaliteeti.

Ainus põhjus, miks ma võiksin mõelda kellelegi, kes kasutab Pluralsighti, on läbida kursus, mida ühelgi teisel veebisaidil pole mõnes ebaselgemas tehnoloogias (näiteks Installshield või Xamarin), või osaleda paaril väga spetsiifilisel kursusel, mis nende teada võeti väga hästi vastu ja üle vaadatud (näiteks John Papa nurgelised põhialused).

Üldiselt, kui soovite kasutada Pluralsighti, veenduge, et käite kursuseid, mille keegi on ise valinud ja kes on tunnistanud neid kvaliteetseteks ja kasulikeks.

Proovisin hiljuti ka Team Treehouse koolitust ja pean ütlema, et olen üllatunud nende kursuste kvaliteedi üle, isegi võisteldes CodeSchooli omadega, ja nende kursuste materjal on väga ulatuslik.

Pärast sealsete HTML-i, CSS-i ja JavaScripti õpperadade sirvimist näen, et võite hõlpsasti omandada aluse peaaegu kõigele. Ei usu mind? Vaadake lihtsalt nende õpijälgi ja öelge mulle, et see pole hämmastav. Muidugi, see on natuke kallis - 30 dollarit kuus, kuid minu arvates on see uskumatult seda väärt. (Maksan selle eest praegu WordPressi õppimise eest, kuna vajan seda vabakutselise projekti jaoks ja materjal on suurepärane).

Mõni sõna tasulistel kursustel

Tundsin vajadust sellest rääkida, kuna olen märganud üldist üksmeelt, et programmeerimist saab õppida sentigi maksmata ja olla sama konkurentsivõimeline kui see, kes kursuse eest maksis. Kuigi see on tõsi, ei saa ma piisavalt rõhutada väärtust, mida õige kursuse eest makstakse. Muidugi, üsna palju kõige väärtuslikumat õppematerjali, millest olen kirjutanud, on tasuta, kuid suur osa on ka tasuline. Peamiselt seetõttu, et mõnikord ei saa te lihtsalt võita seda, kui keegi teile asju visuaalselt hoolikalt selgitab.

Jah, on kohutavaid tasulisi õppekursusi, mida ma ei soovitaks, kuna nende väärtuspakkumine on küsitav (vt Pluralsight), kuid teised nagu Egghead.io, CodeSchool ja Team Treehouse pakuvad silmapaistvat pauku, vaatamata nende suhteliselt kulukale hinnale igakuine tellimus (25–30 USD kuus). Lisaks on neil kõigil tasuta 7–15-päevased prooviversioonid, nii et näete, milline neist sobib teile kõige paremini.

Kui mängite oma kaarte õigesti, võib ühe või kahe kuu maksmine kummalegi neist hõlpsasti hõlbustada teadmisi, mida te muidu saaksite alles siis, kui olete aasta jooksul kokku puutunud lugematute artiklite ja ajaveebipostitustega. Nad on ausalt nii head.

Nii et jah, need pole vajalikud, kuid kui saate endale lubada vähemalt ühe kuu, võite olla kindel, et see annab teile tugeva eelise.

Salajane edu kaste

Olen viimase 2 aasta jooksul kohtunud paljude arendajatega, olen olnud veebiarendaja. Oma teekonna jooksul olen kohanud mõnda arendajat, kes tõepoolest silma paistsid - arendajaid, kes olid selgelt omaette liigas ja kelle poole vaatasin mina ja kõik teised. Ma leidsin, et neil inimestel on üsna palju omadusi, mida tahaksin teiega praegu jagada. Need on minu arvates eduka veebiarendaja salajased kastmed:

  • Armasta mida teed. See on lihtsalt nende kõigi kõige olulisem omadus. Kui teile ei meeldi see, mida teete (olgu see siis CSS-i stiil või JavaScripti versioon), kuvatakse see teie tegevuses tõeliselt. Need, kes on oma tegemistest kirglikud, paistavad sageli selgelt teiste seast silma.
  • Ole helde ja jaga oma teadmisi . Väga lihtne on hoida saladuses uut leitud CSS / JavaScripti häkki, mis lahendab projekti probleemid, kuid palun ärge seda tehke. Inimesed, kes jagavad oma teadmisi kõige rohkem, on sageli kõige väärtuslikumad, kuna neid saab paigutada mis tahes tüüpi meeskonda ja parandada selle kvaliteeti tohutult.
  • Alati otsige uusi asju . Enamik edukaid arendajaid, kellega olen kohtunud, jagavad seda ühist omadust. Olgu selleks siis ajaveebide lugemine, palju aega seotud arutelude programmeerimine või isegi lõunapauside ajal veebiarenduse uutest asjadest rääkimine. Pidev uute asjade otsimine võimaldab parimatel arendajatel alati kõverast eespool püsida.

Lühim marsruut

Oh, selle artikli valmimine võttis aega (6 tundi ja loendamist). Oleme peaaegu valmis! Võite mõelda: "Ok, lahe lugu, aga mis on kõige kiirem tee?" Ja nii, siin see on.

Olen selle korraldanud nii, et võtaksin selle vastu, kui saaksin tagasi minna ja asju õigesti teha. Lisasin ka mõned boonused, mida oleksin tahtnud juba siis saada. Nautige!

Javascript

  1. CodeSchooli või Treehouse'i Javascripti õppimise tee (tasuline) VÕI Codecademy Javascripti kursus
  2. Kõnekas JavaScripti
  3. Sa ei tea JS-i
  4. JS: Õige tee
  5. Õpi ES6-d Egghead.io

HTML ja CSS

  1. CodeSchooli või Treehouse'i HTML- ja CSS-õppe tee (tasuline) VÕI HTML ja CSS: kujundage ja koostage veebisaite John Ducketi poolt või Codecademy HTML & CSS-i kursus.
  2. CSS-i trikkide spetsiifika CSS-i kohta
  3. Õpi CSS-i paigutust
  4. SMACSS
  5. 9 rindkere reageeriva veebidisaini põhiprintsiipi
  6. Google'i tundlikud veebidisaini alused Udacity'is (võtke arvesse, kui te ei kasutanud CodeSchooli või Treehouse'i õpperada)
  7. Mobiilse jõudluse optimeerimise haldamine ajakirja purustades VÕI brauseri renderdamise optimeerimine ja veebisaidi toimivuse optimeerimine Google'i poolt Udacity'is
  8. Google'i veebialused

Arendaja tööriistad

  1. DevSoolsi uurimine ja haldamine CodeSchooli abil
  2. Õppige Git Codecademy järgi ja proovige Github by Codeschooli
  3. Smashing Magazine'i sissejuhatus Linuxi käskudesse
  4. Automatiseerige oma ülesandeid hõlpsalt saidi Scotch.io Gulp.js abil

NurgaJS

  1. Google'i arendajate kujundusotsused AngularJS-is (sissejuhatus AngularJS-i)
  2. NurgaJS põhialused autor Egghead.io
  3. John Papa nurgeline stiilijuht
  4. Ühe lehe Todo rakenduse loomine sõlme ja nurgaga (MEAN) saidil Scotch.io
  5. Rakenduse AngularJS struktuur Egghead.io (tasuline) või Scotch.io nurgakursused

ReactJS

  1. React.js õppimine: alustamine ja mõisted Scotch.io poolt
  2. Veebipaki tutvustus Egghead.io poolt
  3. React Fundamentals, autor Egghead.io
  4. React: Redux CSS-i trikkide abil

Tagumine ots

  1. NodeSchool.io NodeJS-i õpetused
  2. Kuidas ma oma naisele REST selgitasin
  3. Ühe lehe Todo rakenduse loomine sõlme ja nurgaga Scotch.io poolt (Node, ExpressJS, MongoDB, Angular, REST)

Boonus: ressursid

Täiesti valikuline, kuid mõned minu lemmikartiklid ja -ressursid, mille olen aastate jooksul leidnud ja mis teile tõenäoliselt meeldivad, kui olete huvitatud nende vastavatest teemadest.

  • Veebikujundus 4 minutiga. Väga loominguline ja originaalne interaktiivne õpetus, mis õpetab teile veebidisaini aluseid.
  • Auhinnad. Kas otsite veebidisaini inspiratsiooni? Ära vaata enam.
  • Miks on Eric Elliott tehnikas nii raske tööle asuda? Siin teeb Eric hämmastavat tööd kokkuvõtete tegemisel sellest, kuidas suurepäraseid arendajaid on üllatavalt raske leida ja kuidas temaks saada.
  • NoSQL andmebaasisüsteemide megavõrdlus Kristof Kovacsilt. See on suurepärane võrdlus kõige populaarsemate NoSQL-i andmebaasisüsteemide vahel. MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, nad ja palju muud on siin.
  • XSS mäng. Saididevahelise skriptimise (XSS) vead on veebirakenduste hulgas üks levinumaid ja ohtlikumaid haavatavusi. Selle ägeda ressursi abil saate teada, kuidas XSS-i vigu leida ja ära kasutada ning kuidas neid teie veebirakendusega juhtuda.
  • Kuidas kirjutada püsimatu kood. Lõbus artikkel, kuidas mittekunikirjutage hooldatav, puhas kood.

Boonus: minu tööriistad

Ma arvasin, et oleks ka tore jagada mõnda enda poolt leitud tööriista (mõned hästi tuntud, mõned mitte nii väga), mis on minu kui veebiarendaja elu lihtsamaks teinud, nii et siin nad on.

  • Jetbrains Webstorm: täisfunktsionaalne veebiarenduse IDE. (Minu valitud toimetaja) Tasuline, kuid pakub õpilastele ühe aasta tasuta litsentsi.
  • Atom.io: IDE-ga väga laiendatav tekstiredaktor, nagu Webstormiga konkureerivad funktsioonid. Tasuta.
  • Ülim tekst: välkkiire tekstiredaktor koos pistikprogrammide toe ja esteetiliselt meeldiva välimusega. (Tavaliselt hoian Webstorm / Atomi tõsise töö jaoks installituna IDE-na ja failide kiireks muutmiseks installitud Sublime Text.)
  • caniuse.com: brauseritugi on veebisaitide jaoks kriitilise tähtsusega ja see on # 1 ressurss, et välja selgitada, milliseid funktsioone mis brauseri versioon toetab ja milliseid.
  • Pilv 9: Pilvepõhine arenduskeskkond ja IDE koos Giti toega, mis töötab Linuxis. Suurepärane kaugprogrammeerimiseks ja NodeJS-i või muude serveripoolsete asjade testimiseks, ilma et peaksite midagi oma arvutisse installima
  • CodePen, Plunker ja JSFiddle: suurepärased pilvepõhised esiotsa mänguväljakud, mis võimaldavad teil teha kiireid HTML / CSS / JS-i demosid, mida saate jagada või hiljem töötada, kui loote tasuta konto. CodePen sobib sageli CSS-iga seotud asjade jaoks, kuna see on minimalistlik liides ja arvukalt CSS-iga seotud funktsioone, Plunker JavaScripti demodele selle võimsa JS-i funktsioonide tõttu ja JSFiddle demode jaoks, mida soovite reaalajas teistega koostööd teha tänu selle reaalajas redaktorile koostööfunktsiooni jagamine.
  • Vanilla loend: JavaScripti pistikprogrammide ja teekide hoidla, mis kasutab ainult vanilli JavaScripti (see tähendab, et nende töötamiseks pole vaja teeke, näiteks jQuery)
  • YouMightNotNeedjQuery: Sa ilmselt ei tee seda. Vaata ise.
  • PublicAPI-d: kas olete mõelnud, millised avalikud API-d on olemas? Ära vaata enam!
  • Gravit.io: pilvepõhine disainirakendus konkureerib Adobe illustratoriga. (Tasuta!) Kasulik kiirete makettide ja veebidisaini jaoks.
  • Adobe Kuler: Veebirakendus, mis aitab teil luua harmoonilisi värvikombinatsioone mis tahes veebisaidi jaoks. Teil on ka teiste disainerite ehitatud värvipalettide vitriin „Avasta“ ning teid inspireeriv paremusjärjestus.
  • Pange sellele värvile nimi: Ärge kulutage palju aega, et välja mõelda, kuidas oma värvimuutujaid vähem / sassis nimetada ja kasutage lihtsalt selle veebirakendusega nende õiget nime

Järeldus

Tahaksin lihtsalt öelda, et mulle meeldis seda kirjutada väga ja see teeb mind väga õnnelikuks, kui sain lõpuks igal pool uskumatult toetavale programmeerimiskogukonnale midagi tagasi anda.

Nagu mõned teist juba märkasid, on see minu esimene blogipostitus, kuid võite olla kindel, et plaanin veel kirjutada. Lihtsalt ärge oodake iga nädal ühte. Pidage meeles: kvaliteet üle koguse!

Kui kellelgi teist on jäänud küsimusi, jätke julgelt kommentaar ja annan endast parima, et teiega võimalikult kiiresti ühendust võtta.

Loodan, et see oli teile kasulik, kuni järgmise korrani, parim!

18. märtsi värskendus : Siin on kiire oleku värskendus neile, kes on huvitatud sellest, mida ma olen teinud.

//medium.com/@sgarcia.dev/status-update-im-still-here-with-cool-stuff-incoming-f031bab49eca