Matkani tulla web-kehittäjäksi tyhjästä ilman CS-tutkintoa (ja mitä opin ...

Ensin anna minun esitellä itseni. Nimeni on Sergei Garcia, ja olen kokopäiväinen käyttöliittymäkehittäjä, jolla on 2 vuoden kokemus. Tuona aikana olen työskennellyt etupään kehittäjänä sekä Forbes 500 -konsultointiyrityksessä että pienessä yrityksessä.

Tämä ei ehkä kuulosta suurelta kokemukselta, mutta toisen vuoden suorittaminen kehittäjänä on ollut minulle valtava virstanpylväs. Tämä johtuu siitä, että minulla ei ollut todellista kokemusta verkkokehityksestä - eikä yleensä paljon ohjelmointikokemusta muutamien verkkokurssien aikana saamani C #- ja Java-peruskoulutuksen lisäksi. Minulla ei myöskään ollut tietojenkäsittelytieteen tutkintoa, koska valmistuin tietotekniikan projektinhallinnasta.

En ole koskaan kirjoittanut kokemuksistani huolimatta kaikesta avusta, jonka olen saanut upeista resursseista, kuten Medium, Stack Overflow ja Redditin ohjelmoivat aliohjelmat. Joten tänään päätin muuttaa sitä. Tänään aion täyttää sinut siitä, mikä meni oikein ja mikä ei, niin että jos aloitat tämän matkan, sinulla on parempi onni kuin minulla.

Tiedän, että tällaisia ​​artikkeleita on paljon, mutta vain harvat niistä keskustelevat prosessista kahden vuoden ylimääräisen jälkikäteen.

Aloitan matkan, mukaan lukien mikä meni pieleen matkan varrella. Jos välität vain siitä, mitä ehdotuksiani on lyhyimmälle mahdolliselle reitille tulla web-kehittäjäksi tyhjästä, siirry vapaasti viimeiseen osioon: Lyhin reitti .

Joten, ilman jatkoja, aloitetaan!

Perustietojen saaminen

Kun päätin, että halusin päästä verkkokehitykseen, ensimmäinen mieleni kysymys oli "Mitä opin?" Tutkimuksen tekemisen jälkeen päädyin tekemään oppimisreitini sen perusteella, mitä useimmat lähtötason web-kehittäjien tehtävät pyysivät, mikä oli:

  • JavaScript
  • HTML ja CSS
  • CSS-esiprosessorit (Less & Sass)
  • Reagoiva muotoilu
  • KulmaJS
  • Suunnittelumalleja
  • Git
  • SolmuJS
  • Tehtävän juoksijat

Näin se meni.

Javascript

Aloin matkan oppia JavaScriptiä CodeSchoolin kautta(maksettu) ja Codecademy(vapaa). Jos et tiedä näistä, ne ovat upeita verkkosivustoja, joiden avulla voit oppia koodaamaan koodaamalla selaimen sisällä.

Huomasin, että tällaiset oppimisresurssit olivat parhaita, kun olet vasta aloittamassa. Kerro vain, että tämä oppimismenetelmä väsyttää nopeasti, kun pääset edistyneempiin juttuihin, koska heidän algoritmeillaan, joilla tarkistetaan, ratkaisitko koodiesimerkin oikein, on joitain tarkkuusongelmia. Molemmat heidän JavaScript-esittelykurssinsa olivat erinomaisia, ja suosittelen heitä erittäin paljon.

Kun sain perusteet pois tieltä, jatkoin vahvemman JavaScript-perustan lukemista Haverbeken Eloquent Javascript: A Modern Introduction to Programming -kirjassa (ilmainen).

Monet ihmiset suosittelivat tätä kirjaa JavaScripti-foorumeilla, koska se on luettava, ja hyvästä syystä. Tuo kirja oli kova - varsinkin jos opit vain ohjelmointia kuin olin silloin. Mutta olen iloinen, että en antanut periksi ja jatkoin sitä. Se oli ilmiömäinen johtuen sen kattamasta laajasta ohjelmointikonseptien laajuudesta, vaikka se oli toisinaan hieman armoton. Mitä tahansa teetkin, älä ohita koodihaasteita. Kun olet valmis tämän kirjan, voit lopulta sanoa luottavaisin mielin, että sinulla on hyvä käsitys JavaScriptistä.

Voit myös halutessasi oppia jQueryn (vaikka en todellakaan suosittele sen oppimista vielä - lisätietoja tästä myöhemmin). Voit oppia sen CodeSchoolin Try jQuery -kurssilla.

HTML ja CSS

Opittuani JavaScriptin jatkoin HTML & CSS: n ja verkkosuunnittelun perusteiden oppimista CodeSchoolin HTML & CSS -polun kautta. Nämä kurssit ovat edelleen suosikkini tänään, koska tahdistus on suuri, ja niiden kattama laajuus antoi minulle mahdollisuuden saada vahvempi perusta tälle.

Voit myös vaihtaa tämän helposti Codecademyn HTML & CSS -kurssille, ja saat silti samanlaisia ​​tuloksia. Tai jos olet haasteessa, Udacityn HTML- ja CSS-intro-kurssi on paljon täydellisempi ja hieman haastavampi.

Bonus : Jos pääset käsiksi Jon Duckettin HTML: n ja CSS: n kanssa: Suunnittele ja rakenna verkkosivustojakirja, se on myös vakaa lähtökohta HTML: n ja CSS: n oppimiselle (ripaus verkkosuunnittelua). Se on erittäin arvostettu (4,7 / 5 Amazonissa), tarjoaa vankan esittelyn verkkokehityksen maailmaan. Se on kaunis kirja sen puhtaan muotoilun ansiosta, jossa on isot kirjaimet ja värikkäät sivut. Palaan siihen usein vain ihailemaan sitä.

Vähemmän / Sass

Tuntemattomille Less & Sass ovat CSS-lähetinlaitteita, joiden avulla voit kirjoittaa CSS: ää tyylikkäämmällä tavalla. Tämän avulla voit tehdä asioita, joita ei yleensä tueta, kuten CSS-sääntöjen pesiminen. Valmistuttuaan nämä CSS-transpiloijat "kääntävät" koodisi ja muuntavat sen normaaliksi CSS: ksi.

Tällä hetkellä on 2 suurta CSS-lähetintä: Less ja Sass . Sass on suosituin, mutta löysin Less-oppimisen ensin helpommaksi lähinnä siksi, että Sassin käyttö tietokoneellasi edellyttää myös Rubyn asentamista, mistä en pidä.

Voit saada nopean, mutta täydellisen yleiskatsauksen Lessistä käyttämällä WinLess's Online Less Compiler -sovellusta ja sen koodiesimerkkejä nähdäksesi, kuinka Less-koodisi muuttuisi CSS: ksi. Voit myös kokeilla Sassia verkossa SassMeisterin avulla (vaikka tämä ei sisällä koodiesimerkkejä).

Ei ole väliä, opitko ensin Lessin vai Sassin. Ne ovat erittäin samankaltaisia, joten kun tunnet yhden, tunnet melkoisen toisen. Löydät erinomaisen nopean vertailun Lessin ja Sassin välillä Shelby Mouldenin artikkelista LESS & SASS: n vertailu.

Reagoiva muotoilu

Olen alun perin oppinut reagoivasta suunnittelusta ja Bootstrapista käyttämällä Codeschoolin HTML- ja CSS-polkua, mutta löysin äskettäin Googlen Udacityn kurssin Responsive Web Design Fundamentals -sovelluksessa olevan upea kattamaan perusasiat ja sen ulkopuolella paljon täydellisemmällä tavalla kuin Codeschool.

Voit tehdä reagoivan suunnittelun ilman ylimääräisiä kehyksiä, mutta se on paljon helpompaa reagoivan kehyksen, kuten Bootstrapin, avulla. Bootstrapin virallinen dokumentaatio on tehty hyvin, joten sinun ei tarvitse olla ongelmaa aloittaa sitä.

Jos sinulla on vaikeuksia ymmärtää sen perusperiaatteita, lue Froontin blogiviesti reagoivan verkkosuunnittelun yhdeksästä perusperiaatteesta. Siinä on kauniita puhtaita ja yksinkertaisia ​​animaatioita, jotka auttavat havainnollistamaan visuaalisesti reagoivan web-suunnittelun periaatteita.

KulmaJS

En tiennyt, mitä AngularJS tarkalleen ottaen silloin oli, mutta tiesin, että kaikki puhuivat siitä, ja että jos halusin tulla web-kehittäjäksi, minun oli opittava se. Löysin Google-kehittäjien suunnittelupäätökset AngularJS: stä antamaan parhaan yleiskatsauksen siitä, mikä AngularJS oli ja miten se paransi verkkosovellusten tekemistä.

Ajattelin ensin oppia AngularJS: n heidän virallisten asiakirjojensa kautta, mutta tämä osoittautui kauheaksi. Dokumentaatio ei ollut kovin helppoa aloittelijoille, ja sekava muotoilu vaikeutti lukemista ja ymmärtämistä.

Sitten jatkoin oppimista AngularJS: ää Codeschoolin kautta. Myönnettyä myönteistä kokemustani myös JavaScript- ja CSS-kursseista, odotin vain hienoa kurssia. Olin väärässä. Kurssi oli katastrofi alusta alkaen, koska algoritmi, jolla tarkistettiin, saitko koodiesimerkin oikein, ei joskus toiminut oikein ja merkitsi selvästi oikean ratkaisun virheelliseksi. Oli jopa tilanteita, joissa viallisen vahvistusjärjestelmän korjaamiseen tarvittiin vain sivun päivitys. Kurssin sisällön osalta se ei myöskään ollut hieno. Se teki kunnon työn selittämällä AngularJS-sovelluksen peruskomponentit, mutta se teki kauhean työn integroimalla nämä todelliseen sovellukseen, jättäen minulle paljon enemmän kysymyksiä kuin aloitin.

Muutaman haun jälkeen foorumeilla törmäsin Egghead.io -sivustoon(ilmainen / maksettu), jossa minulla oli paljon parempi onni. Heidän kurssimateriaalinsa oli paljon puhtaampaa, ytimekkäämpi ja täydellisempi, mikä antoi paljon paremman kokemuksen. Puhumattakaan siitä, että kurssien lisäksi heillä on puremankokoiset 2–5 minuutin oppitunnit, jotka kattavat tärkeät aiheet. (Esimerkiksi: Mikä on ohjain? Mikä on suodatin? Mikä on $ -alue?) Niiden avulla on todella helppo ymmärtää perusasiat. Heillä on myös joitain maksua vaativia videoita, mutta yleensä ne kattavat edistyneemmät kulma-aiheet, joita et tarvitse vasta myöhemmin. Kävin heidän AngularJS Fundamentals -kurssinsa ja olin täysin tyytyväinen tuloksiin (ja minusta tuli myös suuri Egghead.ion kurssien fani prosessin aikana).

Suunnittelumalleja

Suunnittelumallit ovat periaatteessa uudelleenkäytettäviä koodiratkaisuja, joita voidaan käyttää toistuvasti yleisten ohjelmisto-ongelmien ratkaisemiseen. Jos sinulla on perusta tälle, teet paljon kilpailukykyisemmän ohjelmistokehittäjän millä tahansa ohjelmointikielellä. Tämä helpottaa myös muiden ihmisten koodin ymmärtämistä, koska tunnistat nopeasti, mitä suunnittelumallia he käyttivät koodissaan ymmärtääkseen sitä paremmin.

Löysin kaksi parasta lähdettä tämän oppimiseksi: doFactoryn JavaScript-suunnittelumallit ja Addy Osmanin oppimisen JavaScript-suunnittelumallit. Minusta doFactory oli paljon helpommin ymmärrettävä, kun taas Addy Osmanin kirja oli paljon täydellisempi.

Chrome DevTools

Chrome on yksi tehokkaimmista työkaluista web-kehittäjille. Mitä nopeammin hallitset sen, sitä enemmän aikaa voit säästää myöhemmin. Codeschoolin ilmainen kurssi Explore and Master Chrome DevTools tekee hienoa työtä niiden esittelyssä.

Git (versionhallinta)

Ah, Git - työkalua, jota en koskaan tiennyt tarvitsevani, ennen kuin huomasin, mitä se voisi tehdä. Periaatteessa sen avulla voit seurata koodiin tekemiäsi muutoksia, jotta jos asiat menevät pieleen, voit palata edelliseen ajankohtaan. Sen avulla voit myös nähdä koodisi historian.

Löysin CodeSchoolin ilmaisen Try Github -kurssin olevan ystävällinen tapa aloittaa. Atlassianin Git-koulutus oli erinomainen kattamaan käytettävissä olevat kehittyneemmät komennot. Codeschoolin Git-oppimispolku on myös hyvä kattamaan Gitin perusteet.

SolmuJS

Ei kestänyt kauan, ennen kuin sain tietää, että perustiedot NodeJS: stä auttaisivat minua suuresti pyrkimyksessäni tulla web-kehittäjäksi (lisää tästä pian).

Yritin Codeschoolin kursseja Nodessa, mutta huomasin, että niiltä puuttui todella sisältöä. Löysin NodeSchool.ion olevan paljon parempi opettaja saamaan perusasiat oikein, ja se oli hauskaa! Rakastin sen tarjoamaa käytännönläheistä lähestymistapaa, joka oli samanlainen kuin Codeschool ja Codecademy - lisäparannuksena, että käytin todella NodeJS: ää.

Tehtävän juoksijat (Grunt & Gulp)

Grunt ja Gulp olivat minulle melko iso yllätys, koska minulla ei ollut aavistustakaan, että sellaisia ​​työkaluja edes olisi olemassa - mutta olen erittäin iloinen, että heillä on! Pohjimmiltaan näiden tehtävien juoksijoiden avulla voit automatisoida yleisiä tehtäviä. Muistatko esimerkiksi Less / Sassin? Normaalisti joudut suorittamaan CSS-kääntäjän manuaalisesti joka kerta, kun muokkaat sitä, jotta se koota CSS: n, ja päivitä sitten selain. Tehtävänajurin avulla voit asettaa sen tarkkailemaan Less / Sass-tiedostojasi muutosten varalta, ja kun se havaitsee muutoksen, koota CSS ja päivitä selain automaattisesti. Tämä on erittäin hyödyllistä lyhentääksesi kehitysaikaa.

Tällä hetkellä on 2 päätehtävien juoksijaa: Grunt ja Gulp. Vaikka he tekevät täsmälleen saman asian, he työskentelevät hyvin eri tavoin, kun Grunt on paljon tarkempi ja kokoonpanoon suuntautunut, ja Gulp on lyhyempi kirjoittaa ja mieluummin koodi kuin kokoonpano.

NodeJS: n tunteminen auttaa sinua kirjoittamaan parempia Grunt- ja Gulp-tiedostoja, koska molemmat toimivat NodeJS: llä . Voit valita minkä haluat, mutta huomasin, että Gulp on paljon helpompi oppia ja kirjoittaa. Pidän sitä vielä nykyäänkin sen minimalistisen - mutta tehokkaan - putkipohjaisen lähestymistavan takia.

Löysin Scotch.ion Grunt- ja Gulp-kurssit parhaimpien joukossa.

Haasteet, joita kohdasin ensimmäisessä työssäni

Kun olen käsitellyt web-kehityksen perusteet, olin valmis ensimmäiseen verkkokehityshaastatteluni lähtötason tehtävään. En mene yksityiskohtiin haastattelusta, koska tämä ei ole tämän artikkelin pääpaino. Mutta sanon, että minulle kerrottiin, että suhteellisen vahva JavaScript-tietoni auttaa minua turvaamaan aseman. (Kiitos, Eloquent JavaScript!)

Minun on sanottava, että olin melko hermostunut ensimmäisestä projektistani. Siihen sisältyi uudelleenkäytettävien verkkokomponenttien tekeminen HTML: llä, CSS: llä ja JavaScriptillä sekä Bootstrap, Sass, Grunt työkaluna. T

kaksi suurinta virhettä, jotka löysin aluksi, olivat:

  1. Epäonnistumisen pelko. Koska olin uusi kaveri, pelkäsin jatkuvasti koodini virheellistä tai huonosti tehtyä, joten käytin paljon aikaa tarkistamalla kaiken ja noudattamalla parhaiden käytäntöjen koodaamista. Tästä syystä yritin harvoin ratkaisuja luovilla uusilla tavoilla pelkoni vuoksi, että se ei ehkä toimi oikein lopussa. Tämä sulki tosiasiallisesti haluni oppia uusia asioita.
  2. Tekee asioita, koska ”X” henkilö, joka tietää paremmin kuin minä, sanoi niin. Tein tämän aluksi paljon. Vaikka ei olekaan täysin väärin, asioiden tekeminen tietyllä tavalla vain siksi, että ”X” -asiantuntija sanoi niin - tietämättä miksi - johtaa siihen, että en oikeastaan ​​tiedä, milloin miksi asiat tehtiin samalla tavalla kuin ne olivat. Pian opin, että kaikesta oli poikkeuksia ja että sinun tulisi aina tietää parhaiden käytäntöjen syy.

Onneksi minulla oli ensimmäisen projektini aikana ymmärtäväinen tiimijohtaja, joka auttoi minua voittamaan nämä ongelmat. Hän motivoi minua jatkuvasti kokeilemaan uusia asioita, vaikka asiat menivät joskus pieleen. Hän käski myös kyseenalaistaa kaiken - jopa hänen opetuksensa.

Ajan myötä sain oppitunnini. Siitä lähtien olen aina ollut henkilö, joka haluaa kokeilla uusia asioita. Yritän aina ymmärtää, miksi parhaita käytäntöjä on olemassa, milloin ne ovat oikeassa ja milloin ne eivät sovellu tilanteeseen.

Myös AngularJS: n käyttö varsinaisessa projektissa aiheutti minulle melko suuren haasteen. Tämä johtui lähinnä siitä, että paljon asioita, jotka tein sen kanssa, tein ymmärtämättä täysin, miksi ne tapahtuivat. Ajattelin sen olevan "kulmamaagia".

Toivoin monta kertaa, että halusin tietää, kuinka Angular todella toimi, mutta dokumentaatio oli pelottavaa.

Lopulta törmäsin hämmästyttävään kirjaan nimeltä Build Your Own AngularJS. En lukenut kaikkea sitä, mutta lukemalla osa-alueet ja tarkkailijat ja kuinka he työskentelivät, paljasti, kuinka kulmien takana oleva taika ei oikeastaan ​​ollut taikuutta. Se oli vain fiksu tapa ylläpitää tietojen sitomista käyttämällä likaisia ​​tarkistuksia ja sisäkkäisiä laajuuksia. Suosittelen tätä kirjaa kaikille, jotka haluavat ymmärtää täysin AngularJS: n.

Toinen haaste, jonka kohtain vuotta myöhemmin, oli se, kuinka nopeasti web-kehitys eteni. Olin juuri oppinut AngularJS: n ja Gruntin ja tunsin olevani ylpeä ja mahtava - vasta saadakseni pian selville, että Gulp ja ReactJS olivat horisontissa. Ja vuosi myöhemmin heidän oppimisensa jälkeen Webpack alkoi nousta kentälle, ja minun piti myös oppia se. Kuten voitte kuvitella, suuri osa minusta oli melko pettynyt siihen, kuinka nopeasti osa tiedostani vanheni. Mutta työtoveri valaisi minua pian kertomalla minulle jotain, joka muutti sitä, miten katselin kirjastoja ja kehyksiä ikuisesti:

"Kirjastot ja kehykset saattavat vanhentua, mutta niiden ehdottamat konseptit ja ratkaisut selviävät usein ajan koetuksista."

Hän oli oikeassa. AngularJS on saattanut olla vanhentunut, mutta sen taikuuden ymmärtäminen auttoi minua ymmärtämään paremmin Reactin verkkokomponenttiarkkitehtuuria, joka parani Angularin direktiivien käsitteelle. Se auttoi minua myös ymmärtämään, kuinka ReactJS saavutti niin suuren suosion, samoin kuin millainen tulevaisuus odotti.

En muista, että minulla olisi ollut muita suuria haasteita seuraavissa projekteissani. Mutta mitä sanon, on se, että kahden vuoden aikana, jonka olen tehnyt verkkokehityksestä, tärkein asia, joka on auttanut menestymään (omien työtovereideni mukaan), oli innostukseni ja voimakas pyrkimykseni olla aina etsimässä uusia asioita oppia. Pian huomasin, että tämä oli voittava yhdistelmä web-kehitykseen, koska asiat muuttuvat todella, todella nopeasti, kun uusia kehyksiä ja kirjastoja syntyy jatkuvasti.

Kolikon kääntöpuolella toinen asia, joka auttoi minua - ja jotain, jonka sain selville vasta äskettäin - oli ymmärtää, mitä ei pidä oppia. Tästä tuli kriittinen prosessilleni tulla parempi web-kehittäjä.

Ei ole harvinaista, että ihmiset arvostelevat verkkotekniikoiden epänormaalin nopeaa kehitystahtia tai sitä, kuinka uusi JavaScript-kirjasto tai kehys tulee esiin melkein joka päivä. Mutta ajoissa näin valon ja ymmärsin lopulta:

Sinun ei tarvitse oppia jokaista uutta kirjastoa tai kehystä, joka ilmestyy.

Usein on hyvä idea tehdä yksinkertainen heilumaailmasovellussovellus, jotta näet, mitä kehys tarjoaa. Sitten voit siirtyä eteenpäin. Mutta yleensä sinun tulisi yrittää keskittyä siihen, mikä parhaiten sopii projektisi tarpeisiin. Tämä voi olla aluksi vaikeaa, mutta onneksi on olemassa hyviä paikkoja, kuten Stack Overflow, Medium ja Reddit, joissa voit löytää hyödyllisiä keskusteluja kehysten välillä ja selvittää, mitkä sopivat parhaiten omiin käyttötapauksiisi.

Mennä eteenpäin

Tulevina vuosina edistyin jatkuvasti seuraavilla tavoilla

JavaScript

Kun olet lopettanut Eloquent JavaScriptin, on melko helppo sanoa ja tuntea, että olet oppinut JavaScriptin, mutta sitten tulee Et tiedä JS: ää ja se tuhoaa sinut ehdottomasti (tai ainakin se teki minulle). Tämä kirjasarja (vapaa muuten) mainittiin minulle useita kertoja muutaman vanhempi web-kehittäjille toimistossa kuin kirja lukea, ja että vain kunnes olen lukenut sen voin sanoa täysin tiedä JavaScript. He olivat oikeassa, koska sivu toisensa jälkeen se jatkuvasti räjäytti mieltäni siitä, kuinka todella monimutkainen JavaScript todella oli, samoin kuin monilla, monilla tavallisilla ongelmilla, joita kokeneet ja kokeneet ihmiset, joilla ei ole asianmukaista JavaScriptiä, voi olla.

Kirjasarjan lukeminen avasi mieleni todella, ja suosittelen sitä myös kaikille, jotka haluavat kutsua itseään asiantuntijaksi JavaScript-kehittäjiksi. Kun olet saanut sen pois tieltä, on 2 ylimääräistä resurssia, joita suosittelen saamaan vielä enemmän, edistyneempiä JavaScript-tietoja;

  • JavaScript, paremmat osat: D. Crockfordin hämmästyttävä puhe, joka kertoo JavaScriptin suurimmista heikkouksista, se on "jalka-aseet" ja miten niitä voidaan käyttää vahvuuksina.
  • Kaksi JavaScript-pilaria: vankka artikkeli tunnetulta JavaScript Medium -kirjoittajalta Eric Elliottilta, joka puhuu JavaScriptin kahdesta suuresta pilarista: prototyyppisestä perinnöstä ja toiminnallisesta ohjelmoinnista

Kun olet ymmärtänyt perusteellisesti JavaScriptin, jatka uusinta ja nykyistä JavaScript-standardia ECMASCript 2015 (tunnetaan myös nimellä ES6). Smashing Magazinen artikkeli ECMAScript 6 (ES6): Mitä uutta on seuraavassa JavaScript-versiossa, on hieno lyhyt katsaus ES6: n uusiin ominaisuuksiin. Voit kokeilla ES6: ta selaimessa käyttämällä Babelin online-transpileria.

CSS

CSS voi saada sotkuisen ja organisoitumattoman hyvin, hyvin nopeasti. Puhtaamman CSS: n kirjoittamiseksi on ehdotettu melko paljon erilaisia ​​menetelmiä, mutta 2 erottuu toisistaan, ja suosittelen, että luet ASAP: sta pysyäksesi kilpailukykyisenä:

  • SMACSS: Skaalautuva ja modulaarinen arkkitehtuuri CSS: lle. Joustava opas pienten ja suurten sivustojen kehittämiseen.
  • BEM: menetelmä, joka auttaa sinua saavuttamaan uudelleenkäytettävät komponentit ja koodin jakamisen käyttöliittymässä.

Pidän mieluummin SMACSS: ää sen puhtaamman ilmeen vuoksi, mutta jotkut yritykset ja CSS-kehykset käyttävät edelleen BEM: ää, joten kannattaa tietää molemmat.

Sinun tulisi myös alkaa keskittyä CSS: n suorituskykyyn. Smashing Magazinen artikkeli Mobiilin suorituskyvyn optimoinnin hallinta ja HTML5 Rocksin Suorituskykyinen animaatio tekivät vankan työn tarjotessaan etumatkan tähän. Nopean lukemisen molempien artikkeleiden pitäisi antaa sinulle vankka perusta.

JavaScript-niput

Sinulla pitäisi nyt olla vahva ymmärrys Gruntista tai Gulpista. Seuraava vaihe on lisätä JavaScript-niputin tehtäväsi juoksijaan, mikä mahdollistaa JavaScript-sovelluksesi modulaarisemman organisoinnin.

Kaksi suurinta pelaajaa ovat tällä hetkellä:

  • Selainvahvistus: voit vaatia moduuleja selaimessa niputtamalla kaikki riippuvuutesi.
  • Webpack: Selaa selainten steroideja. Vaikeampi määrittää ja määrittää.

Scotch.ion minikurssi Aloittaminen Browserify-ohjelmalla voi tarjota sinulle aloitusvaihtoehdon selaimen avulla, kun taas David Fox Powell -artikkeli Miksi kukaan ei voi kirjoittaa yksinkertaista Webpack-opetusohjelmaa? on hieno, hauska lukea johdanto webpackiin.

Henkilökohtaisesti en ole viettänyt paljon aikaa verkkopakkauksen käyttämiseen, mutta minun on sanottava, että se on ollut hämmästyttävää - vaikka sen asettaminen onkin hieman vaikeampi. Jos olet vasta aloittamassa, menisin Browserify-sovellukseen, koska sen määrittäminen on paljon yksinkertaisempaa. Ota vain huomioon, että webpack on tulevaisuus ja mitä isompia projekteja aletaan käyttää.

ReactJS

ReactJS on nopeasti saamassa suosiota, eikä se näytä hidastuvan - siltä osin kuin ihmiset kysyvät "Onko React tappaa kulmikas?"

Scotch.io: n Learning React.js: Aloittaminen ja käsitteet tarjoaa vankan yleiskuvan Reactista. Kun olet saanut sen pois tieltä, jatka Egghead.io: n kurssilla React Fundamentals, jossa rakennat täysin toimivan ReactJS-sovelluksen ja siirrät sen sitten ES6-syntaksiin. Voit seurata virallista ReactJS-dokumentaatiota, joka on tehty hyvin ja jonka avulla voit hallita sitä täysin.

Koska React on vain näkymä, on erittäin suositeltavaa oppia Redux. Suurin osa Redux-kursseista on mielestäni hieman monimutkainen, mutta CSS-temput, jotka ovat tasaantuneet Reactin kanssa: Reduxilla on hyvä tasapaino yksinkertaisuuden ja informatiivisuuden välillä Redux-aloituksessa.

Olet ehkä kuullut myös Fluxista tässä vaiheessa, mutta jos mietit, miksi sinun pitäisi käyttää Reduxia Fluxin yli, tutustu kysymykseen pinon ylivuodosta Miksi käyttää Reduxia Facebook Fluxin päällä? johon Reduxin luoja vastasi!

Katse takaisin virheihini ja oppimaani

Tein paljon virheitä kahden vuoden oppimiseni verkkokehityksen aikana. Kaiken kaikkiaan mielestäni suurin virhe ei ollut hallita perusasiat ennen siirtymistä kirjastoihin ja kehyksiin. Luulen, että tämä koskee melkein kaikkia siellä olevia ohjelmointikieliä, mutta mielestäni se koskee vielä enemmän JavaScriptiä. Tämä johtuu siitä, että JavaScript on monella tapaa rikki kieli ja sisältää paljon "jalka-aseita" (sinun olisi pitänyt kuulla tästä, jos katselit D. Crockfordin puhetta "JavaScript, paremmat osat", jonka mainitsin aiemmin). Nämä voivat tehdä elämästä sietämättömän vaikeaa, jos et ymmärrä niitä täysin.

Muistan, että olen kerran juuttunut $ -ulottuvuuteen AngularJS-ongelmaan, joka kesti 3 päivän virheenkorjauksen, mutta huomasin, että se ei ollut edes AngularJS-ongelma, vaan JavaScript-ongelman, jonka aiheutin itselleni, koska en ymmärtänyt, miten tämä toimii.

Puhdas koodi

On outoa, että en näe tästä puhuttua niin usein. En aina välittänyt puhtaan koodin kirjoittamisesta, mutta rehellisesti sanottuna se on yksi niistä asioista, joista olen ylpeä oppimastani. Tämä johtuu siitä, että kaikki rakastavat valittaa siitä, kuinka heidän viimeisellä paikkakunnallaan oli yksi maailman pahimmista, rumin koodipohjoista. Joten miksi kukaan ei voi puhua kuinka mahtava heidän viimeinen oli? Kuinka heidän koodinsa päätyi niin puhtaaksi ja sai heidät ylpeiksi siitä?

Tätä suuntausta haluaisin muuttaa, ja uskon, että ero voidaan saavuttaa, jos tarpeeksi ihmisiä ajaa sitä. Pyri tekemään muuttujien ja funktioiden nimet ymmärrettäviksi englanniksi, vaikka sinun pitäisi kirjoittaa hieman enemmän. Jos et tee niin, sinun on vain dokumentoitava se manuaalisesti joskus tulevaisuudessa, jotta se olisi selkeämpi. Tämä myös saa yleisen koodipohjan vaikeuttamaan uusien kehittäjien ja itsesi ymmärtämistä. Kyllä, itse. Miksi itse? Koska jos et pakota puhdasta koodia, mikä saa sinut ajattelemaan, että työtovereidesi tulisi panna se täytäntöön ja kirjoittaa puhdas koodi, jotta voit helposti ymmärtää sen? Otetaan esimerkki.

Ja jos se ei ole tarpeeksi hyvä kannustin, ihmiset tunnistavat ja arvostavat usein puhtaan koodin kirjoittajia. Tulet huomaamaan, että kirjoittamalla puhtaan koodin työtoverisi ja ystäväsi nauttivat työskentelystä kanssasi entistä enemmän, ja puolestaan ​​elät onnellisempaa elämää.

jQuery

Jotkut teistä saattavat huomata, etten myöskään korostanut paljon jQueryä. Tämä johtuu siitä, että kokemukseni mukaan huomasin, että jQuery teki aluksi enemmän haittaa kuin hyötyä. Jotkut teistä eivät ehkä ole samaa mieltä, mutta anna minun selittää: Kun opin sen ensimmäisen kerran, ymmärsin yleisen ajatuksen, että jQuery oli kaikkialla ja että voit käyttää sitä melkein kaikkeen. Tämän vuoksi tottuin käyttämään jQueryä melkein mihin tahansa, ja mihin tahansa kohtaamaani ongelmaan etsin sille ratkaisua, joka käytti jQueryä.

Älä ymmärrä minua väärin, jQuery oli aikani aikana mahtava, itse asiassa niin mahtava, että jätin sokeasti huomiotta, että 90% jQueryn kanssa tekemistäni voidaan tehdä luonnollisesti nykyaikaisissa selaimissa samalla tavalla helposti syntaksissa.

Saatat nyt ajatella: "Joten mikä siinä vikaa? jQuery ei kuitenkaan painaa kaikkea niin paljon, ja sitä käytettäessä loppujen lopuksi kirjoitat vähemmän koodia kuin jos tekisit asioita natiivisti. " Mutta jQueryn käyttö natiivien sovellusliittymien kautta ei ollut ongelma. Ongelmana oli, että koko ajattelutapani ja kaikki ratkaisut yleisiin ongelmiin, jotka tiesin siihen asti, vaativat jQueryä toimimaan. Ja tästä tuli valtava ongelma, kun sain ensimmäisen projektini ja minulle kerrottiin, että jQuery ei ollut riippuvainen.

JQueryn käyttö sai minut hyödyttömäksi ilman sitä ja sai minut täysin sivuuttamaan aina olemassa olleet alkuperäiset menetelmät ja ratkaisut. Se teki myös kaikista ratkaisuistani vähemmän kannettavia, koska niiden käyttäminen vaati jQueryä.

Siitä lähtien olen pyrkinyt olemaan käyttämättä jQueryä, ellei se ole ehdottoman välttämätöntä ja todella parantaa huomattavasti tehokkuutta ja luettavuutta koodipohjaamme (esimerkiksi raskas DOM-manipulointi).

Jälleen kerran, älä ymmärrä minua väärin, jQuery on hieno, mutta jos voisin palata ajassa taaksepäin ja tavata aikaisemman itseni, joka opiskeli vain verkkokehitystä, suosittelen itseni voimakkaasti olemaan oppimatta jQueryä kokonaan, kunnes olen oppinut miten tehdä asioita ilman sitä. Jos sinulla on vaikeuksia vaihtaa kuten minä, tutustu et ehkä tarvitse jQueryyn.

Kurssit

Mitä tulee kurssimateriaaliin; vaikka monet CodeSchoolin kurssit olivat erinomaisia ​​(HTML- ja CSS-haara oli erityisen upea), vaikka muutamat heidän kursseistaan ​​kehyksissä putosivatkin hieman tasaisiksi (AngularJS, BackboneJS jne.).

Kävin myös melko paljon Pluralsight-kursseja, joita en maininnut, koska kaiken tämän ajan jälkeen olen tullut johtopäätökseen, että heidän oppimispolunsa valitseminen on yleensä huono idea ja epäluotettava . Koska heidän kurssinsa ovat opettajat, jotka eivät aina (mielestäni) ole kovin hyviä opetuksessa, huomasin, että heidän kurssinsa laatu vaihtelee rajusti, koska heidän kurssinsa laatustandardit eivät ole olemassa. Minulla on ollut kursseja, joissa jopa kurssin antanut henkilö kuulosti nukahtavan. Ja minulla ei rehellisesti ole huomiota, jotta voisin kiinnittää huomiota 6–10 tunnin kurssiin - ja monet niistä kestävät niin kauan, ellei kauemmin.

Vietin hyvät 80–100 tuntia harjoittelua Pluralsightissa, ja haluan rehellisesti sanottuna hyvän osan siitä takaisin. Älä ymmärrä minua väärin, minulla oli muutama hämmästyttävä kurssi Pluralsightissa, mutta niiden keskittyminen määrään ja laatuun todella sai minut tuhlaamaan aikaani. Olisin voinut oppia niin paljon enemmän, jos olisin käynyt kursseilla paremmista lähteistä, kuten Egghead.io ja CodeSchool, joissa he arvostavat enemmän määrän määrää.

Ainoa syy, miksi voisin koskaan ajatella Pluralsightia käyttävää henkilöä, on käydä kurssi, jota missään muussa verkkosivustossa ei ole jossakin epämääräisemmässä tekniikassa (kuten Installshield tai Xamarin), tai käydä muutama hyvin spesifinen kurssi, jonka he tietävät saavan erittäin hyvän vastaanoton. tarkistettu (esimerkiksi John Papa's Angular Fundamentals).

Kaiken kaikkiaan, jos haluat käyttää Pluralsightia, varmista, että käyt kursseja, jotka joku on valinnut ensin ja jotka on tunnustettu korkealaatuisiksi ja hyödyllisiksi.

Kokeilin myös äskettäin Team Treehouse -koulutusta, ja minun on sanottava, että olen hämmästynyt heidän kurssiensa laadusta, jopa kilpailemalla CodeSchoolin kanssa, ja heidän kurssimateriaalinsa on erittäin laaja.

Kun olet selannut HTML-, CSS- ja JavaScript-oppimispolkuja siellä, näen, että voit helposti hankkia melkein kaiken perustan. Etkö usko minua? Katsokaa vain heidän oppimisensa ja sano minulle, että se ei ole hämmästyttävää. Toki, se on vähän kallis 30 dollaria kuukaudessa, mutta mielestäni se on uskomattoman sen arvoista. (Maksan siitä heti WordPressin oppimiseksi, koska tarvitsen sitä freelance-projektiin ja materiaali on loistavaa).

Sana maksetuista kursseista

Tunsin tarvetta puhua tästä, koska olen huomannut yleisen yksimielisyyden siitä, että voit oppia ohjelmoinnin maksamatta penniäkään ja olla yhtä kilpailukykyinen kuin kurssille maksanut. Vaikka totta, en voi korostaa tarpeeksi oikean kurssin maksamista. Toki, kaikkein arvokkain kurssimateriaali, josta olen kirjoittanut, on ilmaista, mutta suuri osa siitä on myös maksettua. Pääasiassa siksi, että joskus et vain voi lyödä sitä, että joku selittää huolellisesti asiat sinulle visuaalisesti.

Kyllä, on olemassa kauheita maksettuja kursseja, joita en suosittele, koska niiden arvoehdotus on kyseenalainen (katso Pluralsight), mutta muut, kuten Egghead.io, CodeSchool ja Team Treehouse, tarjoavat erinomaista bang-for-your-buckia huolimatta niiden suhteellisen kalliista kuukausitilaus (25–30 dollaria kuukaudessa). Lisäksi heillä kaikilla on ilmaiset 7–15 päivän kokeiluversiot, jotta voit nähdä, mikä niistä sopii sinulle parhaiten.

Jos pelaat korttisi oikein, maksat 1-2 kuukautta jommastakummasta, voit helposti verkkoida tietosi, jonka saisit muuten vasta, kun olet törmännyt lukemattomiin artikkeleihin ja blogiviesteihin vuoden aikana. He ovat rehellisesti niin hyviä.

Joten kyllä, ne eivät ole välttämättömiä, mutta jos sinulla on varaa ainakin kuukauteen, voit olla varma, että se antaa sinulle vahvan edun.

Menestyksen salainen kastike

Olen tavannut monia kehittäjiä viimeisen kahden vuoden aikana, olen ollut web-kehittäjä. Matkan aikana olen tavannut muutamia kehittäjiä, jotka todella erottautuivat - kehittäjiä, jotka olivat selvästi omassa liigassaan ja joille minä ja kaikki muut katsoimme ylös. Huomasin, että näillä henkilöillä oli melko monta ominaisuutta, jotka haluaisin jakaa kanssasi juuri nyt. Nämä ovat mielestäni salainen kastike menestyvälle web-kehittäjälle:

  • Rakasta sitä, mitä teet. Tämä on yksinkertaisesti kaikkien tärkein ominaisuus. Jos et pidä siitä, mitä teet (olkoon se CSS-muotoilu tai JavaScript), se näkyy todella siinä, mitä teet. Ne, jotka ovat intohimoisia tekemisiin, erottuvat usein selvästi joukosta.
  • Ole antelias ja jaa tietosi . On erittäin helppoa haluta pitää se uusi löytämäsi CSS / JavaScript-hakkerointi, joka ratkaisee projektin ongelmat, salaisena, mutta älä. Ihmiset, jotka jakavat tietonsa eniten, ovat usein arvokkaimpia, koska heidät voidaan sijoittaa mihin tahansa joukkueeseen ja parantaa sen laatua valtavasti.
  • Ole aina etsimässä uusia asioita . Suurimmalla osalla menestyneistä kehittäjistä, joita olen tavannut, on yhteinen piirre. Olipa se sitten blogien lukeminen, viettäminen paljon aikaa ohjelmointiin liittyvissä keskusteluissa tai jopa puhuminen verkkokehityksen uusista lounastauilla. Uusien asioiden etsiminen koko ajan antaa parhaille kehittäjille mahdollisuuden pysyä käyrän edellä.

Lyhin reitti

Voi, tämän artikkelin valmistuminen kesti jonkin aikaa (6 tuntia ja laskenta). Olemme melkein valmista! Saatat ihmetellä: "Ok, siisti tarina, mutta mikä on nopein reitti?" Ja niin, tässä se on.

Olen järjestänyt tämän siten, että ottaisin sen, jos voisin palata ja tehdä asioita oikein. Lisäsin myös muutaman bonuksen, jotka olisin halunnut saada tuolloin. Nauttia!

Javascript

  1. CodeSchoolin tai Treehousen Javascript-oppimispolku (maksettu) TAI Codecademyn Javascript-kurssi
  2. Eloquent JavaScript
  3. Et tiedä JS: tä
  4. JS: Oikea tapa
  5. Opi ES6 by Egghead.io

HTML ja CSS

  1. CodeSchoolin tai Treehousen HTML- ja CSS-oppimispolku (maksettu) TAI HTML ja CSS: Suunnittele ja rakenna verkkosivustoja John Ducketin avulla tai Codecademyn HTML- ja CSS-kurssi.
  2. CSS-temppujen yksityiskohdat CSS-trikkeissä
  3. Opi CSS-asettelu
  4. SMACSS
  5. 9 reagoivan web-suunnittelun perusperiaatetta
  6. Googlen reagoiva verkkosuunnittelun perusteet Udacityssä (ota huomioon, jos et käyttänyt CodeSchool- tai Treehouse-oppimispolkua)
  7. Mobiilin suorituskyvyn optimoinnin hallinta Smashing Magazine TAI selaimen renderoinnin optimoinnilla ja Googlen verkkosivuston suorituskyvyn optimoinnilla udacity
  8. Googlen verkkosivut

Kehitystyökalut

  1. Tutki ja hallitse DevSooleja CodeSchoolin avulla
  2. Opi Git by Codecademy ja kokeile Github by Codeschool
  3. Johdatus Smashing Magazinen Linux-komentoihin
  4. Automatisoi tehtävänne helposti Scotch.io: n Gulp.js: n avulla

KulmaJS

  1. Google-kehittäjien suunnittelupäätökset AngularJS: ssä (Intro to AngularJS)
  2. AngghJS-perusteet, kirjoittanut Egghead.io
  3. John Papan kulmikas tyylinohjain
  4. Scotch.io luo yhden sivun Todo-sovelluksen, jossa on solmu ja kulma (MEAN)
  5. AngghJS-sovelluksen rakenne, jonka on kirjoittanut Egghead.io (Paid) TAI Scotch.io: n kulmakurssit

ReactJS

  1. React.js: n oppiminen: Scotch.io: n aloittaminen ja käsitteet
  2. Johdatus verkkopakettiin, kirjoittanut Egghead.io
  3. Reagh Fundamentals, kirjoittanut Egghead.io
  4. Tasaaminen React: Redux CSS-temppujen avulla

Takaosa

  1. NodeSchool.io: n NodeJS-oppaat
  2. Kuinka selitin REST vaimolleni
  3. Yhden sivun Todo-sovelluksen luominen solmulla ja kulmalla Scotch.io: n toimesta (Node, ExpressJS, MongoDB, Angular, REST)

Bonus: Resurssit

Täysin valinnainen, mutta joitain suosikkiartikkeleistani ja resursseistani, jotka olen löytänyt vuosien varrella ja joista todennäköisesti tulet rakastamaan, jos olet kiinnostunut heidän aiheistaan.

  • Verkkosuunnittelu 4 minuutissa. Erittäin luova ja alkuperäinen interaktiivinen opetusohjelma, joka opettaa sinulle verkkosuunnittelun perusteet.
  • Palkinnot. Etsitkö inspiraatiota web-suunnitteluun? Älä katso enää.
  • Miksi palkkaaminen on niin vaikeaa tekniikassa, Eric Elliott. Täällä Eric tekee hämmästyttävää työtä yhteenvetona siitä, kuinka yllättävän vaikea löytää hyviä kehittäjiä ja kuinka tulla sellaiseksi.
  • NoSQL-tietokantajärjestelmien megavertailu Kristof Kovacsilta. Tämä on loistava vertailu siellä olevien suosituimpien NoSQL-tietokantajärjestelmien välillä. MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, he ja kaikki muut ovat täällä.
  • XSS-peli. XSS-virheet ovat yksi yleisimmistä ja vaarallisimmista haavoittuvuuksista Web-sovelluksissa. Tämän mahtavan resurssin avulla voit oppia löytämään ja hyödyntämään XSS-virheitä ja estämään niitä tapahtumasta verkkosovelluksellesi.
  • Kuinka kirjoittaa ylläpitämätön koodi. Hilpeä artikkeli siitä, miten eiettäkirjoita ylläpidettävä, puhdas koodi.

Bonus: Työkaluni

Ajattelin, että olisi myös mukavaa jakaa joitain löytämiäni työkaluja (jotkut tunnettuja, toiset eivät niin paljon), jotka ovat tehneet elämästäni helpompaa web-kehittäjänä, joten tässä he ovat.

  • Jetbrains Webstorm: Täysin varusteltu verkkokehityksen IDE. (Valitsemani toimittaja) Maksettu, mutta tarjoaa opiskelijoille yhden vuoden ilmaisen lisenssin.
  • Atom.io: Erittäin laajennettava tekstieditori, jossa on IDE-kaltaiset ominaisuudet, jotka kilpailevat Webstormin kanssa. Vapaa.
  • Sublime Text: Salamannopea tekstieditori, jossa on laajennuksia ja esteettinen ulkonäkö. (Pidän Webstormin / Atomin yleensä asennettuna IDE: nä vakavaan työhön ja Sublime Text asennettuna tiedostojen nopeaan muokkaamiseen.)
  • caniuse.com: Selaintuki on kriittinen verkkosivustoille, ja tämä on tärkein resurssi selvittääksesi, mitä ominaisuuksia selainversio tukee ja mitkä ovat.
  • Cloud 9: Pilvipohjainen kehitysympäristö ja IDE Git-tuella, joka toimii Linuxissa. Erinomainen ohjelmointiin etänä ja NodeJS: n tai muiden palvelinpuolen asioiden testaamiseen tarvitsematta asentaa mitään koneellesi
  • CodePen, Plunker ja JSFiddle: Upeat pilvipohjaiset käyttöliittymät, joiden avulla voit tehdä nopeita HTML / CSS / JS-demoja, joita voit jakaa tai työskennellä myöhemmin, jos luot ilmaisen tilin. CodePen on usein paras CSS-aiheisiin, koska se on minimalistinen käyttöliittymä ja runsaasti CSS-toimintoja, Plunker for JavaScript -demot sen tehokkaiden JS-ominaisuuksien vuoksi ja JSFiddle-demot, jotka haluat tehdä yhteistyötä muiden kanssa reaaliajassa live-editorin ansiosta jakamisen yhteistyöominaisuus.
  • Vaniljaluettelo: JavaScript-laajennusten ja kirjastojen arkisto, joka käyttää vain vanilja-JavaScriptiä (eli ne eivät vaadi toimiakseen kirjastoja, kuten jQuery)
  • YouMightNotNeedjQuery: Et todennäköisesti. Katso itse.
  • PublicAPIs: Oletko koskaan miettinyt, mitä julkisia sovellusliittymiä on olemassa? Älä enää etsi!
  • Gravit.io: Pilvipohjainen suunnittelusovellus, joka kilpailee Adobe-kuvittajasta. (Ilmainen!) Hyödyllinen nopeaan mallintamiseen ja verkkosuunnitteluun.
  • Adobe Kuler: Verkkosovellus, jonka avulla voit luoda harmonisia väriyhdistelmiä mille tahansa verkkosivustolle. Mukana on myös muiden suunnittelijoiden rakentama ”Tutki” -väripaletteja sekä ranking-järjestelmä, joka auttaa sinua inspiroimaan.
  • Nimeä tämä väri: Älä viettää paljon aikaa selvittääkseen, kuinka värimuuttujat nimetään vähemmän / sassiksi, ja käytä vain heidän oikeutettua nimeään tämän verkkosovelluksen kanssa

Johtopäätös

Haluaisin vain sanoa, että nautin todella tämän kirjoittamisesta, ja se tekee minut todella onnelliseksi siitä, että olen vihdoin voinut antaa jotain takaisin uskomattoman tukevalle ohjelmointiyhteisölle kaikkialla.

Kuten jotkut teistä jo huomasivat, tämä on ensimmäinen blogikirjoitukseni, mutta voit olla varma, että aion kirjoittaa lisää. Älä vain odota yhtä viikossa. Muista: laatu enemmän kuin määrä!

Jos jollakin teistä on jäljellä kysymyksiä, voit jättää kommentin ja teen parhaani päästäkseni sinuun mahdollisimman pian.

Toivon, että tästä oli hyötyä teille, kunnes ensi kerralla, Best!

Maaliskuun 18. päivän päivitys : Tässä on nopea tilapäivitys niille, jotka ovat uteliaita siitä, mitä olen tehnyt.

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