Moje putovanje da postanem web programer od nule bez CS-a (i onoga što sam naučio od ...

Prvo, dopustite mi da se predstavim. Zovem se Sergei Garcia i stalni sam programer s dvije godine iskustva. U to sam vrijeme radio kao front-end programer i za konzultantsku tvrtku Forbes 500 i za malu tvrtku.

Ovo možda ne zvuči kao puno iskustva, ali završetak druge godine programera za mene je bila velika prekretnica. To je zato što nisam imao stvarno iskustvo u web razvoju - i općenito puno iskustva u programiranju, osim osnovnog C # i Java treninga koji sam stekao na nekoliko mrežnih tečajeva. Također nisam imao diplomu računarstva jer sam diplomirao na poslovima upravljanja IT projektima.

Nikad nisam pisao o svom iskustvu unatoč svoj pomoći koju sam dobio od prekrasnih resursa poput Medium, Stack Overflow i Redditovih programskih podredita. Tako sam danas odlučio to promijeniti. Danas ću vam dati informacije o tome što je pošlo u redu, a što nije, tako da ćete, ako krenete na ovo putovanje, imati više sreće od mene.

Znam da postoji puno ovakvih članaka, ali ne baš puno njih raspravlja o procesu uz korist od dodatne dvije godine unatrag.

Započet ću sa svojim putovanjem, uključujući ono što je na putu pošlo po zlu. Ako vas zanima samo koji su moji prijedlozi za najkraći mogući put da od nule postanete web programer, slobodno prijeđite na zadnji odjeljak: Najkraća ruta .

Dakle, bez daljnjeg odgađanja, krenimo!

Dobivanje osnova

Nakon što sam odlučio da se želim baviti web razvojem, prvo mi je pitanje bilo "Što naučiti?" Nakon nekoliko istraživanja, završio sam put do učenja na temelju onoga što je tražila većina pozicija web programera početne razine, a to je:

  • JavaScript
  • HTML i CSS
  • CSS predprocesori (Less & Sass)
  • Odzivni dizajn
  • KutniJS
  • Uzorci dizajna
  • Git
  • NodeJS
  • Trkači zadataka

Evo kako je to prošlo.

Javascript

Putovanje sam započeo učeći JavaScript kroz CodeSchool(plaćeno) i Codecademy(besplatno). Ako ne znate za njih, to su izvrsne web stranice koje vam omogućavaju da naučite kodirati kodiranjem unutar preglednika.

Otkrila sam da su ovakvi resursi za učenje najbolji kad tek započinjete. Samo vas imajte na umu da se ova metoda učenja brzo zamara kada uđete u naprednije stvari, jer njihovi algoritmi za provjeru jeste li ispravno riješili primjer koda imaju nekih problema s točnošću. Oba su im uvodna tečaja za JavaScript bila izvanredna i toplo ih preporučujem.

Nakon što sam izbacio osnove, nastavio sam dobivati ​​čvršće temelje JavaScript čitajući Eloquent Javascript: Suvremeni uvod u programiranje knjige Haverbekea (besplatno).

Mnogo ljudi na JavaScript forumima preporučilo mi je ovu knjigu kao obavezno čitanje i to s dobrim razlogom. Ta je knjiga bila teška - pogotovo ako tek učite programiranje kao ja tada. Ali drago mi je što nisam odustao i nastavio. Bilo je fenomenalno zbog velikog opsega programskih koncepata koje pokriva, čak iako je ponekad bio pomalo nemilosrdan. Što god radili, ne preskačite izazove s kodom. Jednom kada završite ovu knjigu, napokon možete sa sigurnošću reći da dobro razumijete JavaScript.

Po želji također možete naučiti jQuery (iako stvarno još ne preporučujem njegovo učenje - o tome kasnije). Možete ga naučiti putem CodeSchool-ovog tečaja Try jQuery.

HTML i CSS

Nakon učenja JavaScript-a, nastavio sam s učenjem osnova HTML-a i CSS-a i web dizajna kroz CodeSchool-ov HTML & CSS put učenja. Ovi su tečajevi i danas moji omiljeni, jer je tempo izvrsan, a cjelokupni opseg onoga što pokrivaju omogućio mi je da na tome imam čvršće temelje.

To biste također mogli lako zamijeniti za nešto poput Codecademyjevog HTML & CSS tečaja i još uvijek dobiti slične rezultate. Ili ako ste za izazov, Udacityjev tečaj Uvod u HTML i CSS daleko je cjelovitiji i malo izazovniji.

Bonus : Ako se možete dočepati HTML-a i CSS-a Jona Ducketta : Dizajn i izrada web stranicaknjiga, to je ujedno i solidno polazište za učenje HTML-a i CSS-a (uz dodatak web dizajna). Visoko je ocijenjen (4,7 / 5 na Amazonu), nudi solidan uvod u svijet web razvoja. Prekrasna je knjiga zahvaljujući čistom dizajnu s velikim slovima i šarenim stranicama. Često joj se vraćam samo da bih joj se divio.

Manje / Sass

Za one koji nisu upoznati, Less & Sass su CSS transpileri koji vam omogućuju elegantnije pisanje CSS-a. To vam omogućuje radnje koje obično nisu podržane, poput gniježđenja CSS pravila. Kad završe, ovi CSS transpileri "sastavljaju" vaš kôd i pretvaraju ga u uobičajeni CSS.

Trenutno postoje 2 glavna CSS transpilera: Less i Sass . Sass je popularniji, ali smatrao sam da je učenje Less manje lakše, uglavnom zato što upotreba Sass-a na vašem računalu zahtijeva i instaliranje Rubyja, što mi nije bilo drago.

Možete dobiti brz, ali cjelovit pregled Less-a pomoću WinLess-ovog internetskog kompajlera manje i njegovih primjera koda da biste vidjeli kako će se vaš Less kôd pretvoriti u CSS. Također možete isprobati Sass na mreži koristeći SassMeister (iako to ne uključuje primjere koda).

Nije važno hoćete li prvo naučiti Less ili Sass. Izuzetno su slični, pa jednom kad znate jedno, prilično znate i drugo. Sjajnu brzu usporedbu između Less i Sass možete pronaći u članku Shelby Moulden Usporedba LESS & SASS.

Odzivni dizajn

Izvorno sam naučio o responzivnom dizajnu i Bootstrapu koristeći HTML i CSS put Codeschool-a, ali nedavno sam otkrio da je Googleov tečaj Udacityja o osnovama prilagodljivog web dizajna fantastičan u pokrivanju osnova i šire na daleko cjelovitiji način nego što je to učinio Codeschool.

Možete napraviti responzivni dizajn bez ikakvog dodatnog okvira, ali to je daleko lakše uz pomoć responzivnog okvira poput Bootstrapa. Službena dokumentacija tvrtke Bootstrap vrlo je dobro napravljena pa ne biste trebali imati problema s početkom u radu s njom.

Ako imate problema sa shvaćanjem njegovih osnovnih principa, pročitajte Froontov post na blogu o 9 osnovnih principa responzivnog web dizajna. Ima prekrasne čiste i jednostavne animacije koje pomažu vizualno ilustrirati principe responzivnog web dizajna.

KutniJS

Tada zapravo nisam znao što je točno AngularJS, ali znao sam da svi pričaju o tome i da ako želim postati web programer, to moram naučiti. Pronašao sam Odluke o dizajnu Google Developera u AngularJS kako bi pružio najbolji opći pregled onoga što je bio AngularJS i kako je poboljšao izradu web aplikacija.

Prvo sam pomislio naučiti AngularJS putem njihove službene dokumentacije, ali ispostavilo se da je to bila užasna ideja. Početnicima dokumentacija nije bila lako, a pretrpano oblikovanje otežavalo je čitanje i razumijevanje.

Zatim sam nastavio učiti AngularJS kroz Codeschool. S mojim pozitivnim iskustvom na tečajevima JavaScript-a i CSS-a, također od tamo, očekivao sam ništa manje nego sjajan tečaj. Bio sam u krivu. Tečaj je bio katastrofa od početka, jer algoritam koji se koristio za provjeru jeste li dobro shvatili primjer koda ponekad nije radio kako treba i vaše je točno rješenje označilo kao netočno. Bilo je čak slučajeva kada je za popravljanje pokvarenog sustava provjere valjanosti bilo potrebno samo osvježavanje stranice. Što se tiče sadržaja tečaja, ni on nije bio sjajan. Uspio je objasniti osnovne komponente aplikacije AngularJS, ali užasno je integrirajući ih u stvarnu aplikaciju, ostavljajući mi puno više pitanja nego što sam započeo.

Nakon malo pretraživanja po forumima, nabasao sam na Egghead.io(besplatno / plaćeno) gdje sam imao puno više sreće. Njihov materijal s tečaja bio je puno čišći, sažetiji i cjelovitiji, što je omogućilo daleko bolje iskustvo. A da se i ne spominje kako osim svojih tečajeva imaju i poduke veličine 2–5 minuta veličine zalogaja koje pokrivaju važne teme. (Na primjer: Što je kontroler? Što je filtar? Što je $ opseg?) Ovim je zaista lako razumjeti osnove. Imaju i neke videozapise za koje je potrebno plaćanje, ali oni obično pokrivaju naprednije kutne teme koje će vam trebati tek kasnije. Pohađao sam njihov tečaj AngularJS Fundamentals i bio sam u potpunosti zadovoljan rezultatima (a ujedno sam postao veliki obožavatelj Egghead.io tečajeva).

Uzorci dizajna

Uzorci dizajna su u osnovi višekratna rješenja koda koja se mogu više puta koristiti za rješavanje uobičajenih softverskih problema. Ako imate temelje na ovome, postat ćete daleko konkurentniji programer na bilo kojem programskom jeziku. To će vam također olakšati razumijevanje koda drugih ljudi, jer ćete brzo prepoznati koji su uzorak dizajna koristili na svom kodu kako bi ga bolje razumjeli.

Pronašao sam 2 najbolja izvora da to naučim su doFactory-ovi JavaScript dizajnirani uzorci i Addy Osmani-jevi učni JavaScript dizajnerski uzorci. DoFactory mi je bilo puno lakše razumjeti, dok je knjiga Addyja Osmanija bila puno cjelovitija.

Chrome DevTools

Chrome je jedan od najsnažnijih alata za web programere. Što prije svladate, kasnije možete uštedjeti više vremena. Besplatni tečaj Codeschool Explore and Master Chrome DevTools izvrsno radi na njihovom predstavljanju.

Git (kontrola verzija)

Ah, Git - alat za koji nikad nisam znao da mi treba dok nisam otkrio što može. Git vam u osnovi omogućuje praćenje promjena koje ste napravili u kodu, tako da se, ako stvari krenu po zlu, možete vratiti na prethodnu točku u vremenu. Također vam omogućuje da vidite povijest svog koda.

Otkrio sam da je besplatni tečaj CodeSchool Try Github prijateljski način za početak. Atlassianov Git trening bio je izvanredan u pokrivanju naprednijih dostupnih naredbi. Put učenja Codeschool Git također je sjajan u pokrivanju Gitovih osnova.

NodeJS

Nije prošlo mnogo vremena prije nego što sam saznao da će mi osnovno razumijevanje NodeJS-a uvelike pomoći u mojoj potrazi da postanem web programer (o tome uskoro).

Isprobao sam Codeschool tečajeve na Nodeu, ali otkrio sam da im stvarno nedostaje sadržaja. Otkrio sam da je NodeSchool.io daleko bolji učitelj u ispravnom osmišljavanju osnova i bilo je zabavno! Svidio mi se praktični pristup koji je bio sličan Codeschoolu i Codecademyu - s dodatnim poboljšanjem što sam stvarno vodio NodeJS.

Trkači zadataka (grunt i gutljaj)

Grunt i Gulp bili su za mene veliko iznenađenje jer nisam imao pojma da takvi alati uopće postoje - ali izuzetno mi je drago što postoje! U osnovi, ovi pokretači zadataka omogućuju vam automatizaciju uobičajenih zadataka. Na primjer, sjetite se Less / Sass? Uobičajeno biste morali ručno pokrenuti CSS-ov kompajler svaki put kad napravite uređivanje za njegovo kompajliranje CSS-a, a zatim ažurirati preglednik. Pomoću pokretača zadataka možete ga postaviti za gledanje datoteka Less / Sass radi promjena, a kada otkrije promjenu, sastavite svoj CSS i automatski osvježite preglednik. Ovo je neizmjerno korisno za smanjenje vašeg vremena za razvoj.

Trenutno postoje 2 glavna pokretača zadataka: Grunt i Gulp. Iako rade potpuno iste stvari, rade na vrlo različite načine, pri čemu je Grunt puno više detaljan i orijentiran na konfiguraciju, a Gulp je kraći za pisanje i preferira kôd nad konfiguracijom.

Poznavanje NodeJS-a pomoći će vam da napišete bolje Grunt i Gulp datoteke, jer obje rade na NodeJS-u . Možete odabrati što god želite, ali otkrio sam da je Gulp daleko lakši za učenje i pisanje. I danas mi je draža zbog minimalističkog, a opet moćnog pristupa zasnovan na cijevima.

Otkrio sam da su tečajevi Scotch.io-a o Gruntu i Gulpu među najboljima vani.

Izazovi s kojima sam se suočio na prvom poslu

Nakon što sam obradio osnove web razvoja, bio sam spreman za svoj prvi intervju za web razvoj za početnu poziciju. Neću ulaziti u detalje o intervjuu jer ovo nije glavni fokus ovog članka. Ali reći ću da su mi rekli da mi relativno snažno znanje o JavaScriptu pomaže u osiguranju pozicije. (Hvala, rječit JavaScript!)

Moram reći, bio sam prilično nervozan na svom prvom projektu. Uključivalo je izradu web komponenata za višekratnu upotrebu s HTML-om, CSS-om i JavaScriptom, zajedno s Bootstrapom, Sassom i Gruntom kao alatima. T

dvije najveće pogreške koje sam isprva pronašao su:

  1. Strah neuspjeha. Budući da sam bio novi momak, neprestano sam se bojao da mi kôd ne bude u redu ili je loše napravljen, pa sam proveo puno vremena dvostruko provjeravajući sve i pridržavao se kodiranja najboljih praksi. Zbog toga sam rijetko pokušavao rješenja na nove kreativne načine zbog straha da na kraju možda neće ispravno funkcionirati. Ovo je učinkovito zaustavilo moj pogon za učenje novih stvari.
  2. Raditi stvari jer je to rekla osoba koja zna više od mene. U početku sam ovo puno radio. Iako nije potpuno pogrešno, radim stvari na određeni način samo zato što je to rekao stručnjak za "X" - ne znajući zašto - dovodi do toga da zapravo ne znam kada i zašto su stvari učinjene onako kako jesu. Ubrzo sam saznao da u svemu postoje iznimke i da biste uvijek trebali znati razlog iza najboljih praksi.

Srećom, tijekom svog prvog projekta imao sam vodstvo tima za razumijevanje koji mi je pomogao da prebrodim ove probleme. Stalno me motivirao da isprobam nove stvari, čak i ako su ponekad polazile po zlu. Također mi je rekao da preispitujem sve - čak i svoja učenja.

S vremenom sam naučio svoju lekciju. Od tada, uvijek sam bila osoba koja se raduje isprobavanju novih stvari. Uvijek pokušavam razumjeti zašto postoje najbolje prakse, kada su u pravu i kada se ne odnose na situaciju.

Korištenje AngularJS-a u stvarnom projektu također mi predstavlja prilično velik izazov. To je bilo uglavnom zato što sam puno stvari koje sam s tim radio, činio ne shvaćajući u potpunosti zašto su se dogodile. Smatrao sam to "kutnom magijom".

Puno sam puta poželio da znam kako Angular zapravo radi, ali bilo je zastrašujuće gledati dokumentaciju.

Na kraju sam naletio na nevjerojatnu knjigu pod nazivom Build Your Own AngularJS. Nisam čitao sve, ali čitanje odjeljka O opsezima i Promatračima i kako su oni radili doista je otkrilo kako magija iza kutnog, zapravo nije bila magija. Bio je to samo pametan način održavanja vezivanja podataka pomoću prljave provjere i ugniježđenih opsega. Toplo preporučujem ovu knjigu svima koji žele u potpunosti razumjeti AngularJS.

Drugi izazov s kojim sam se suočio godinu dana kasnije bio je kako je brzi web razvoj napredovao. Upravo sam savladao AngularJS i Grunta, i osjećao sam se ponosno i silno - da bih ubrzo saznao da su Gulp i ReactJS na pomolu. A godinu dana kasnije nakon što ih je naučio, Webpack je počeo dobivati ​​na terenu, a i ja sam to morao naučiti. Kao što možete zamisliti, velik dio mene bio je prilično razočaran koliko brzo su neka moja znanja zastarjela. No, kolega me ubrzo prosvijetlio rekavši mi nešto što je promijenilo način na koji sam zauvijek gledao na knjižnice i okvire:

"Knjižnice i okviri mogu zastarjeti, ali koncepti i rješenja koja predlažu često preživljavaju vremensku probu."

Bio je u pravu. AngularJS je možda zastario, ali potpuno razumijevanje magije koja je stajala iza njega pomoglo mi je da bolje razumijem Reactovu arhitekturu web komponenata, koja je poboljšana konceptom Angular's Directives. Također mi je pomoglo da shvatim kako je ReactJS stekao toliku popularnost, kao i kakvu budućnost čeka.

Ne sjećam se da sam se suočio s bilo kojim drugim velikim izazovima na svojim sljedećim projektima. Ali ono što ću reći jest da sam tijekom dvije godine koliko se bavim web razvojem prva stvar koja je pomogla uspjehu (prema mojim vlastitim kolegama) bilo moje uzbuđenje i moćan nagon da uvijek budem u potrazi za nove stvari koje treba naučiti. Ubrzo sam otkrio da je ovo dobitna kombinacija s web razvojem, jer se stvari ovdje mijenjaju jako, jako brzo, s novim okvirima i knjižnicama koji se neprestano pojavljuju.

S druge strane novčića, druga stvar koja mi je pomogla - i nešto što sam zapravo nedavno otkrio - bilo je razumijevanje onoga što ne treba učiti. Ovo je postalo presudno za moj proces postajanja boljim web programerom.

Nerijetko se mogu vidjeti ljudi koji kritiziraju nenormalno brz tempo evolucije web tehnologija ili kako nova JavaScript knjižnica ili okvir izlaze gotovo svakodnevno. Ali s vremenom sam ugledao svjetlost i napokon shvatio:

Ne morate učiti svaku novu knjižnicu ili okvir koji izađe.

Često je dobra ideja napraviti jednostavnu primjeru aplikacije hello world kako biste mogli vidjeti što okvir nudi. Tada možete krenuti dalje. No obično biste se trebali pokušati usredotočiti na ono što najbolje odgovara potrebama vašeg projekta. To u početku može biti teško, ali na sreću postoje sjajna mjesta poput Stack Overflow, Medium i Reddit na kojima možete pronaći korisne rasprave između okvira i shvatiti koja najbolje odgovaraju vašim specifičnim slučajevima korištenja.

Ide dalje

U narednim godinama nastavio sam kontinuirano se usavršavati na sljedeće načine

JavaScript

Jednom kad završite Eloquent JavaScript, prilično je lako reći i osjećati se kao da ste svladali JavaScript, ali onda dolazi You Don't Know JS i to vas apsolutno uništava (ili barem meni). Ovu seriju knjiga (inače besplatnu) nekoliko su me starijih web programera u uredu nekoliko puta spomenuli kao knjigu za čitanje i da samo dok je ne pročitam mogu reći da u potpunosti znam JavaScript. Imali su pravo, budući da mi je stranicu za stranom neprestano oduševljavalo koliko je JavaScript zaista bio složen, kao i mnoge, mnoge česte zamke koje mogu imati neiskusni i iskusni ljudi bez odgovarajućeg razumijevanja JavaScript-a.

Čitanje te serije knjiga zaista mi je otvorilo um, a također je toplo preporučujem svima koji se žele nazvati stručnim programerima JavaScript-a. Jednom kad to uklonite s puta, postoje 2 dodatna resursa koja vam toplo preporučujem da biste stekli još dalje, naprednije znanje o JavaScriptu;

  • JavaScript, bolji dijelovi: nevjerojatan govor D. Crockforda koji govori o najvećim slabostima JavaScript-a, to su "Foot Guns" i kako ih iskoristiti kao svoje prednosti.
  • Dva stupa JavaScript-a: solidan članak priznatog pisca JavaScript-a Medium Eric Elliott koji govori o dva velika stupa JavaScript-a: prototipsko nasljeđivanje i funkcionalno programiranje

Nakon što dobro razumijete JavaScript, nastavite s ECMASCript 2015 (poznat i kao ES6), najnovijim i trenutnim JavaScript standardom. Članak Smashing Magazina ECMAScript 6 (ES6): Što je novo u sljedećoj verziji JavaScript-a sjajan je kratki pregled novosti u ES6-u. Možete isprobati ES6 u pregledniku koristeći Babelov mrežni transpiler.

CSS

CSS može postati vrlo neuredan i neorganiziran vrlo, vrlo brzo. Predloženo je nekoliko različitih metodologija za pisanje čišćeg CSS-a, ali izdvajaju se 2 koje toplo preporučujem da pročitate o ASAP-u kako biste ostali konkurentni:

  • SMACSS: Skalabilna i modularna arhitektura za CSS. Fleksibilni vodič za razvoj malih i velikih web stranica.
  • BEM: metodologija koja vam pomaže da postignete komponente za višekratnu upotrebu i dijeljenje koda na front-endu.

Osobno preferiram SMACSS zbog čišćeg izgleda, ali neke tvrtke i CSS Frameworks i dalje koriste BEM, pa vrijedi znati oboje.

Također biste se trebali usredotočiti na izvedbu vašeg CSS-a. Članak Smashing Magazina Upravljanje optimizacijom izvedbe za mobilne uređaje i članak HTML5 Rocks Animacija visokih performansi dobro su se potrudili dajući prednost ovome. Brzo čitanje oba članka trebalo bi vam dati čvrste temelje.

JavaScript paketi

Do sada biste trebali dobro razumjeti Grunt ili Gutljaj. Sljedeći je korak dodavanje JavaScript paketa u vaš pokretač zadataka, što će omogućiti modularniju organizaciju vaše JavaScript aplikacije.

Dva najveća igrača trenutno su:

  • Browserify: omogućuje vam zahtijevanje modula u pregledniku spajanjem svih vaših ovisnosti.
  • Webpack: u osnovi Browserify na steroidima. Teže za konfiguriranje i postavljanje.

Mini-tečaj Scotch.io-a Početak rada s Browserify može vam pružiti brzi početak s browserify, dok članak Davida Foxa Powella zašto nitko ne može napisati jednostavan vodič za Webpack? je sjajan, zabavan za čitanje uvod u webpack.

Osobno nisam proveo puno vremena koristeći webpack, ali u mom vremenu provedenom s njim, moram reći da je bilo nevjerojatno - čak i ako ga je malo teže postaviti. Ako tek započinjete, odabrao bih Browserify jer je puno jednostavnije postaviti. Samo budite svjesni da je webpack budućnost i koji veći projekti počinju koristiti.

ReactJS

ReactJS brzo stječe popularnost i čini se da se ne usporava - do te mjere da ljudi pitaju "React ubija li kutno?"

Scotch.io's Learning React.js: Getting Started and Concepts pruža solidan pregled React-a. Nakon što to uklonite s puta, nastavite s tečajem Egghead.io-a o React Fundamentals-u gdje ćete izraditi potpuno radnu aplikaciju ReactJS, a zatim je migrirati na sintaksu ES6. Možete se nadovezati na službenu ReactJS dokumentaciju koja je vrlo dobro izrađena i omogućit će vam da je u potpunosti svladate.

Budući da je React samo pogled, toplo se preporučuje da naučite Redux. Većina tečajeva o Reduxu je po meni pomalo složena, ali CSS trikovi izjednačavaju se s Reactom: Redux postiže odličnu ravnotežu između jednostavnosti i informativnosti pri početku rada s Reduxom.

Možda ste u ovom trenutku također čuli za Flux, ali ako se pitate zašto biste trebali koristiti Redux preko Fluxa, pogledajte pitanje na stranici Stack Overflow Zašto koristiti Redux preko Facebook Fluxa? na što je odgovorio tvorac Reduxa!

Osvrćući se na svoje pogreške i ono što sam naučio

Napravio sam puno pogrešaka u svoje 2 godine učenja web razvoja. Sve u svemu, mislim da mi je najveća greška bila što nisam savladao osnove prije nego što sam prešao na knjižnice i okvire. Pretpostavljam da se ovo odnosi na gotovo svaki programski jezik, ali po mom mišljenju još se više odnosi na JavaScript. To je zato što je na mnogo načina JavaScript neispravan jezik i sadrži puno "Foot Guns" (za to ste trebali čuti ako ste gledali govor D. Crockforda o "JavaScript, bolji dijelovi" koje sam ranije spomenuo). To može učiniti život neizdrživo teškim ako ih ne razumijete u potpunosti.

Sjećam se da sam jednom zapeo u izdanju AngularJS-a s $ scopeom, koje mi je trebalo 3 dana za otklanjanje pogrešaka, samo da bih otkrio da to čak nije bilo pitanje AngularJS-a, već problem s JavaScriptom koji sam si prouzročio jer nisam razumio kako ovo funkcionira.

Čisti kod

Čudno je da ne vidim da se o tome često govori. Nisam uvijek mario za pisanje čistog koda, ali iskreno, to je jedna od stvari s kojima sam najponosniji što sam naučio. To je zato što se svi vole žaliti kako je njihovo posljednje mjesto imalo jednu od najgorih, najružnijih baza koda na svijetu. Pa zašto onda nitko ne može govoriti o tome koliko im je zadnja bila izvrsna? Kako je njihov kod završio tako čist i dobro napravljen da su bili ponosni na njega?

To je trend koji bih volio promijeniti i vjerujem da se može napraviti razlika ako se dovoljno ljudi za to založi. Nastojte da nazivi varijabli i funkcija budu razumljivi na engleskom jeziku, čak i ako morate pisati malo više. Ako to ne učinite, samo ćete ga morati ručno dokumentirati negdje u budućnosti kako biste to učinili jasnijim. To će također uzrokovati da novi programeri i vi postajete sve teže razumjeti vašu ukupnu bazu koda. Da, sebe. Zašto baš ti? Jer ako ne provodite čisti kôd, zbog čega mislite da bi ga vaši kolege trebali provesti i napisati čisti kôd da biste ga lako razumjeli? Vodimo primjerom.

A ako to nije dovoljno dobar poticaj, ljudi vrlo često prepoznaju i cijene čiste pisce koda. Otkrićete da će pisanjem čistog koda vaši suradnici i prijatelji još više uživati ​​u radu s vama, a zauzvrat ćete živjeti sretnijim životom.

jQuery

Neki od vas mogli bi primijetiti da također nisam puno naglasio jQuery. To je zato što sam prema svom iskustvu otkrio da mi je jQuery u početku donio više štete nego koristi. Neki od vas se možda neće složiti, ali molim vas, dopustite mi da objasnim: Kad sam ga prvi put naučio, općenita ideja koju sam razumio bila je da je jQuery svugdje i da ga možete koristiti za gotovo sve. Zbog toga sam se navikao koristiti jQuery za gotovo sve, i za bilo koji problem s kojim sam se susreo tražio sam rješenje za njega koje koristi jQuery.

Nemojte me pogrešno shvatiti, jQuery je bio sjajan u moje vrijeme dok sam ga koristio, toliko sjajan u stvari, da sam slijepo ignorirao da se 90% onoga što sam učinio s jQuery-om može izvoditi u suvremenim preglednicima u isto tako jednostavnoj sintaksi.

Možda sada razmišljate: „Pa što u tome nije u redu? jQuery ionako nema toliko veliku težinu i pomoću njega na kraju ipak napišete manje koda nego da ste to radili izvorno. " Ali upotreba jQueryja preko izvornih API-ja nije bio problem. Problem je bio u tome što je moj cjelokupni način razmišljanja i sva rješenja za uobičajene probleme koje sam poznavao do tog trenutka zahtijevali da jQuery djeluje. A ovo je postao veliki problem kad sam dobio svoj prvi projekt i rečeno mi je da jQuery nije ovisnost.

Korištenje jQuery-a učinilo me beskorisnim bez njega i učinilo da u potpunosti zanemarim izvorne metode i rješenja koja su oduvijek postojala. To je učinilo i sva moja rješenja manje prenosivima, jer je za njihovu upotrebu potreban jQuery.

Od tada se trudim da ne koristim jQuery ako to nije prijeko potrebno i uistinu pruža veliko poboljšanje učinkovitosti i čitljivosti našoj bazi kodova (na primjer, teška DOM manipulacija).

Još jednom, nemojte me krivo shvatiti, jQuery je sjajan, ali ako bih se mogao vratiti u prošlost i upoznati svoje prošlo ja koje je tek učilo razvoj web stranica, toplo bih se savjetovao da uopće ne učim jQuery dok ne naučim kako raditi stvari bez toga. Ako imate problema s prebacivanjem poput mene, provjerite Možda vam ne treba jQuery.

Tečajevi

Što se tiče materijala za tečaj; dok su mnogi tečajevi CodeSchool bili izvanredni (grana HTML i CSS bila je posebno fantastična), čak i ako je nekoliko njihovih tečajeva na okvirima malo palo (AngularJS, BackboneJS, itd.).

Također sam pohađao dosta tečajeva Pluralsight-a, što nisam spomenuo jer sam nakon toliko vremena došao do zaključka da je odabir njihovog puta učenja u cjelini loša ideja i nepouzdan . Budući da njihove tečajeve rade nastavnici koji (po mom mišljenju) nisu uvijek vrlo dobri u poučavanju, otkrio sam da njihova kvaliteta kolegija jako varira jer standardi njihove kvalitete ne postoje. Imao sam tečajeve na kojima je čak i osoba koja je držala tečaj zvučala kao da je zaspala. I iskreno, nemam vremena da nastavim obraćati pažnju na tečaju od 6 do 10 sati - a mnogi od njih traju toliko dugo, ako ne i duže.

Proveo sam dobrih 80–100 sati treninga u Pluralsightu i iskreno želim dobar dio toga natrag. Nemojte me pogrešno shvatiti, održao sam nekoliko nevjerojatnih tečajeva o Pluralsightu, ali njihov fokus na količini nad kvalitetom doista me natjerao da gubim vrijeme. Mogao bih naučiti toliko više da sam pohađao tečajeve iz boljih izvora poput Egghead.io i CodeSchool, gdje oni cijene veću kvalitetu kvantiteta.

Jedini razlog zbog kojeg bih mogao pomisliti da netko koristi Pluralsight je pohađanje tečaja kojeg nema nijedno drugo web mjesto u nekoj opskurnijoj tehnologiji (poput Installshield-a ili Xamarina) ili pohađanje nekoliko vrlo specifičnih tečajeva za koje znaju da su bili jako dobro prihvaćeni pregledao (Na primjer, John Papa's Angular Fundamentals).

Sve u svemu, ako želite koristiti Pluralsight, budite sigurni da pohađate tečajeve koje je odabrao netko tko ih je prvi pohađao i koji su prepoznati kao visokokvalitetni i korisni.

Također sam nedavno isprobao trening za Team Treehouse i moram reći, zapanjen sam kvalitetom koja je ušla u njihove tečajeve, čak i konkurencijom CodeSchoolu, a njihov je tečaj vrlo opsežan.

Nakon što smo tamo pregledali putove učenja za HTML, CSS i JavaScript, vidim da biste lako mogli steći temelje gotovo svega. Ne vjerujete mi? Samo pogledajte njihove staze učenja i recite mi da to nije nevjerojatno. Svakako, to je malo skupo s 30 USD mjesečno, ali po mom mišljenju nevjerojatno se isplati. (Plaćam ga trenutno da bih naučio WordPress, jer mi je potreban za slobodni projekt, a materijal je sjajan).

Riječ o plaćenim tečajevima

Osjetio sam potrebu da o tome govorim jer sam primijetio opći konsenzus da možete naučiti programirati bez plaćanja novčića i biti jednako konkurentni kao onaj koji je platio tečaj. Iako je istina, ne mogu dovoljno naglasiti vrijednost koju plaćam za pravi tečaj. Sigurno je da je popriličan broj najvrjednijih materijala o tečajevima o kojima sam napisao besplatan, ali velik dio je i plaćen. Uglavnom zato što ponekad jednostavno ne možete pobijediti da vam netko pažljivo objasni stvari na vizualni način.

Da, postoje užasni tečajevi uz plaćanje koji ne bih savjetovao, jer je njihov prijedlog vrijednosti upitan (vidi Pluralsight), ali drugi poput Egghead.io, CodeSchool i Team Treehouse nude izvanredan udarac, unatoč relativno skupim mjesečna pretplata (25 - 30 USD mjesečno). Osim toga, svi oni imaju besplatna 7-15-dnevna probna razdoblja, tako da možete vidjeti koja vam najbolje odgovara.

Ako pravilno igrate na svoje karte, plaćanje 1-2 mjeseca bilo koje od njih lako vam može pružiti znanje koje biste dobili samo ako biste naletjeli na bezbroj članaka i postova na blogu tijekom godine dana. Iskreno su tako dobri.

Dakle, da, nisu potrebne, ali ako si možete priuštiti barem mjesec dana, možete biti sigurni da će vam pružiti snažnu prednost.

Tajni umak za uspjeh

U posljednje dvije godine upoznao sam puno programera. Bio sam web programer. Tijekom svog putovanja upoznao sam nekoliko programera koji su se zaista istakli - programera koji su očito bili u nekoj svojoj ligi i na koje smo se ukazivali ja i svi ostali. Otkrio sam da ti pojedinci dijele poprilično karakteristika, koje bih želio podijeliti s vama odmah. Po mom su mišljenju tajni umak uspješnog web programera:

  • Voli što radiš. To je jednostavno najvažnija karakteristika svih. Ako ne volite ono što radite (bio to CSS styling ili JavaScript), to će se zaista pokazati u onome što radite. Oni koji su strastveni prema onome što rade često se jasno ističu iz mase.
  • Budite velikodušni i podijelite svoje znanje . Vrlo je jednostavno poželjeti zadržati taj novi CSS / JavaScript hack koji rješava probleme projekta u tajnosti, ali molim vas nemojte. Ljudi koji najviše dijele svoje znanje često su najvrjedniji, jer ih se može smjestiti u bilo koji tim i poboljšati njegovu kvalitetu velikom razlikom.
  • Uvijek budite u potrazi za novim stvarima . Većina uspješnih programera koje sam upoznao dijele ovu zajedničku crtu. Bilo da je to čitanje blogova, trošenje puno vremena na programiranje rasprava ili čak razgovor o novostima u web razvoju tijekom pauza za ručak. Stalno traženje novih stvari omogućava najboljim programerima da uvijek budu ispred svoje krivulje.

Najkraća ruta

Uh, ovaj je članak trebao neko vrijeme da završi (6 sati i broji). Skoro smo gotovi! Možda se pitate: "Ok, cool priča, ali koji je najbrži put?" I tako, evo ga.

Organizirao sam to na način da bih to prihvatio da se mogu vratiti i učiniti stvari kako treba. Dodao sam i nekoliko bonusa, koje bih tada volio imati. Uživati!

Javascript

  1. Put učenja JavaScripta CodeSchool ili Treehouse (plaćen) ILI tečaj Javascript Codecademy
  2. Elokventan JavaScript
  3. Ne znate JS
  4. JS: Pravi put
  5. Naučite ES6 by Egghead.io

HTML i CSS

  1. HTML & CSS put učenja CodeSchool ili Treehouse (plaćeno) ILI HTML i CSS: Dizajn i izrada web stranica od John Ducketa ILI tečaj HTML & CSS Codecademy.
  2. Specifičnosti CSS specifičnosti pomoću CSS trikova
  3. Naučite CSS Layout
  4. SMACSS
  5. 9 osnovnih principa responzivnog web dizajna tvrtke Front
  6. Googleove prilagodljive osnove web dizajna na Udacityu (uzmite ako niste koristili put učenja CodeSchool ili Treehouse)
  7. Upravljanje optimizacijom izvedbe za mobilne uređaje Smashing Magazine ILI optimizacijom prikazivanja preglednika i optimizacijom izvedbe web stranica od Googlea na Udacity
  8. Googleove osnove weba

Razvojni alati

  1. Istražite i svladajte DevTools by CodeSchool
  2. Naučite Git by Codecademy i Isprobajte Github by Codeschool
  3. Uvod u Linux naredbe Smashing Magazina
  4. Jednostavno automatizirajte svoje zadatke pomoću Gulp.js by Scotch.io

KutniJS

  1. Odluke o dizajnu u AngularJS od strane Google Developera (uvod u AngularJS)
  2. Osnove AngularJS-a tvrtke Egghead.io
  3. Kutni stilski vodič Johna Pape
  4. Stvaranje Todo aplikacije za jednu stranicu s čvorom i kutnim (MEAN) od Scotch.io
  5. Struktura aplikacije AngularJS od strane Egghead.io (plaćeno) ILI kutnih tečajeva Scotch.io-a

ReactJS

  1. Learning React.js: Početak i koncepti Scotch.io
  2. Uvod u webpack od strane Egghead.io
  3. React Fundamentals od Egghead.io
  4. Izravnavanje s Reactom: Redux od strane CSS trikova

Stražnji kraj

  1. Vodiči za NodeJS od NodeSchool.io
  2. Kako sam svojoj supruzi objasnio REST
  3. Stvaranje Todo aplikacije za jednu stranicu s Node i Angular od Scotch.io (Node, ExpressJS, MongoDB, Angular, REST)

Bonus: Resursi

Potpuno neobavezno, ali neki od mojih najdražih članaka i resursa koje sam tijekom godina pronašao, a koji će vam se vjerojatno svidjeti ako vas zanima njihova tema.

  • Web dizajn za 4 minute. Vrlo kreativan i originalan interaktivni vodič koji vas podučava osnovama web dizajna.
  • Nagrade. Tražite li inspiraciju za web dizajn? Ne tražite dalje.
  • Zašto je zapošljavanje tako teško u tehnologiji, Eric Elliott. Ovdje Eric radi nevjerojatan posao sažimajući kako je iznenađujuće teško pronaći izvrsne programere i kako to postati.
  • Mega usporedba NoSQL sustava baze podataka Kristofa Kovacsa. Ovo je izvrsna usporedba između najpopularnijih sustava baza podataka NoSQL. MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, oni i mnogi drugi su ovdje.
  • XSS igra. Greške u skriptiranju više web lokacija (XSS) jedna su od najčešćih i najopasnijih vrsta ranjivosti u web aplikacijama. Korištenjem ovog sjajnog resursa možete naučiti kako pronaći i iskoristiti XSS bugove te kako spriječiti da se dogode u vašoj web aplikaciji.
  • Kako napisati neodrživi kod. Urnebesan članak o tome kako nedonapiši održivi, ​​čisti kôd.

Bonus: Moji alati

Mislio sam da bi bilo lijepo podijeliti i neke alate koje sam otkrio (neki dobro poznati, neki ne toliko) koji su mi olakšali život kao web programera, pa evo ih.

  • Jetbrains Webstorm: IDE za cjeloviti web razvoj. (Moj odabrani urednik) Plaćeno, ali nudi jednogodišnju besplatnu licencu za studente.
  • Atom.io: Izuzetno proširivi uređivač teksta s IDE-om poput značajki koje konkuriraju Webstormu. Besplatno.
  • Uzvišeni tekst: Brzi uređivač teksta s podrškom za dodatke i estetski ugodnim izgledom. (Webstorm / Atom obično instaliram kao IDE za ozbiljan posao, a Sublime Text instaliran za brzo uređivanje datoteka.)
  • caniuse.com: Podrška za preglednik presudna je za web stranice, a ovo je prvi resurs za utvrđivanje koje značajke podržava koja inačica preglednika, a koje.
  • Cloud 9: Razvojno okruženje temeljeno na oblaku i IDE s Git podrškom koja radi na Linuxu. Izvrsno za daljinsko programiranje i testiranje NodeJS-a ili drugih stvari na poslužitelju bez potrebe za instaliranjem bilo čega na vaš stroj
  • CodePen, Plunker i JSFiddle: Predivna igrališta zasnovana na oblaku koja vam omogućuju brze demonstracije HTML / CSS / JS-a koje možete dijeliti ili raditi na njima kasnije ako napravite besplatan račun. CodePen je često najbolji za stvari povezane sa CSS-om, jer ima minimalističko sučelje i mnoštvo značajki povezanih s CSS-om, Plunker za JavaScript demonstracije zbog svojih moćnih JS značajki i JSFiddle za demonstracije koje želite surađivati ​​s drugima u stvarnom vremenu zahvaljujući svom uređivaču uživo značajka zajedničke suradnje.
  • Popis vanilije: Spremište JavaScript dodataka i knjižnica koje koriste samo vanilin JavaScript (što znači da ne trebaju knjižnice za rad, poput jQuery)
  • YouMightNotNeedjQuery: Vjerojatno ne. Uvjerite se i sami.
  • PublicAPI: Jeste li se ikad zapitali koji javni API postoje? Ne tražite dalje!
  • Gravit.io: Aplikacija za dizajn zasnovana na oblaku, koja konkurira adobe ilustratoru. (Besplatno!) Korisno za brze makete i web dizajn.
  • Adobe Kuler: Webapp koji će vam pomoći stvoriti skladne kombinacije boja za bilo koju web stranicu. Također ima izložbu paleta boja "Istražite" koju su izradili drugi dizajneri, kao i sustav rangiranja koji će vas nadahnuti.
  • Nazovite tu boju: Prestanite trošiti puno vremena smišljajući kako imenovati varijable boje u less / sass i samo upotrijebite njihovo pravo ime s ovom web aplikacijom

Zaključak

Samo bih želio reći da sam zaista uživao pisati ovo i zaista me raduje što sam napokon uspio nešto vratiti nevjerojatno podržavajućoj programskoj zajednici svugdje.

Kao što su neki od vas već primijetili, ovo je moj prvi post na blogu, ali možete biti sigurni da planiram napisati još. Samo ne očekujte svaki tjedan. Zapamtite: kvaliteta veća od količine!

Ako neko od vas ima još pitanja, slobodno ostavite komentar, a ja ću se potruditi da vam se što prije javim.

Nadam se da vam je ovo bilo korisno, do sljedećeg puta, Best!

Ažuriranje za ožujak '18 : Za one znatiželjnike na čemu sam bio, evo brzog ažuriranja statusa!

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