Utazásom a webfejlesztővé váláshoz a semmiből, CS diploma nélkül (és amit megtanultam

Először hadd mutassam be magam. A nevem Sergei Garcia, és teljes munkaidős front end fejlesztő vagyok, 2 éves tapasztalattal. Ez idő alatt front-end fejlesztőként dolgoztam mind a Forbes 500 tanácsadó cégnél, mind egy kis vállalatnál.

Lehet, hogy ez nem sok tapasztalatnak tűnik, de a második év fejlesztőként való befejezése hatalmas mérföldkő volt számomra. Ennek oka az, hogy nem volt valódi tapasztalatom a webfejlesztés terén - és általában kevés programozási tapasztalatom volt néhány alapvető C # és Java képzésen túl, amelyet néhány online tanfolyamon szereztem. Számítástechnikai végzettségem sem volt, mivel informatikai projektmenedzsment szakon végeztem.

Soha nem írtam a tapasztalataimról, annak ellenére, hogy minden segítséget olyan csodálatos forrásokból kaptam, mint a Medium, a Stack Overflow és a Reddit programozási alprogramjai. Tehát ma úgy döntöttem, hogy ezen változtatok. Ma kitöltöm Önöket, hogy mi ment jól és mi nem, hogy ha nekivágsz ennek az útnak, akkor nagyobb szerencséd lesz, mint nekem.

Tudom, hogy sok ilyen cikk létezik, de közülük nem nagyon sokan vitatják meg a folyamatot további két év utólagos előnyeivel.

Kezdem az utammal, beleértve azt is, ami az út során elromlott. Ha csak az érdekli, hogy mik a javaslataim a weblap fejlesztővé válásának lehető legrövidebb útjához a semmiből, nyugodtan ugorjon az utolsó szakaszra: A legrövidebb út .

Tehát minden további nélkül kezdjük!

Az alapok elsajátítása

Miután eldöntöttem, hogy be akarok menni a webfejlesztésbe, az első kérdés az volt a fejemben, hogy „Mit tanuljak?” Néhány kutatás elvégzése után végül a kezdő szintű webfejlesztői pozíciók alapján kértem a tanulási utamat, amely a következő volt:

  • JavaScript
  • HTML és CSS
  • CSS előfeldolgozók (Less & Sass)
  • Reszponzív dizájn
  • SzögletesJS
  • Tervezési minták
  • Git
  • NodeJS
  • Feladat Futók

Így történt.

Javascript

Utazásomat a CodeSchool segítségével kezdtem el megtanulni a JavaScript-et(fizetős) és a Codecademy(ingyenes). Ha nem tudsz ezekről, remek webhelyek, amelyek lehetővé teszik, hogy megtanulj kódolni a böngésző belsejében történő kódolással.

Megállapítottam, hogy az ilyen tanulási források a legjobbak, amikor még csak most kezded. Csak azt kell figyelmeztetni, hogy ez a tanulási módszer gyorsan fárasztó, ha fejlettebb dolgokba keveredik, mivel az algoritmusaiknak bizonyos pontossági problémák merülnek fel annak ellenőrzésére, hogy helyesen oldották-e meg a kód példát. Mindkét JavaScript bevezető tanfolyamuk kiemelkedő volt, és nagyon ajánlom őket.

Miután kikerültem az útból az alapokat, erősebb JavaScript-alapot szereztem, ha elolvastam Haverbeke Eloquent Javascript: A modern bevezetés a programozásba könyvét (ingyenes).

Ezt a könyvet sokan ajánlották nekem a JavaScript-fórumokon, kötelező olvasmányként, és jó okkal. Ez a könyv nehéz volt - főleg, ha csak programozást tanul, mint akkoriban. De örülök, hogy nem adtam fel és tartottam rajta. Fenomenális volt az általa lefedett programozási koncepciók széles körének köszönhetően, még akkor is, ha időnként kissé kíméletlen volt. Bármit is csinál, ne hagyja ki a kód kihívásait. Ha elkészült ezzel a könyvvel, akkor végre magabiztosan kijelentheti, hogy jól ért a JavaScripthez.

Opcionálisan megtanulhatja a jQuery-t is (bár valójában még nem ajánlom a megtanulását - erről később). A CodeSchool Try jQuery tanfolyamán tanulhatja meg.

HTML és CSS

Miután megtanultam a JavaScript-et, a CodeSchool HTML & CSS tanulási útvonalán keresztül megtanultam tanulni a HTML és CSS és a web tervezés alapjait. Ezek a tanfolyamok ma is a kedvenceim, mivel az iram nagyszerű, és az általuk lefedett tárgyak átfogó területe lehetővé tette, hogy erősebb alapot szerezzek ennek.

Könnyen kiválaszthatja ezt olyasmi miatt, mint a Codecademy HTML & CSS tanfolyama, és így is hasonló eredményeket érhet el. Vagy ha kihívás elé áll, az Udacity HTML és CSS bevezető tanfolyama sokkal teljesebb és kissé nagyobb kihívást jelent.

Bónusz : Ha kézbe veheti Jon Duckett HTML- jét és CSS- jét : Webhelyek tervezése és készítésekönyv, ez egyúttal szilárd kiindulópont a HTML és CSS elsajátításához (egy kis szórással a webdesignra). Magas besorolású (4,7 / 5 az Amazon-on), szilárd bevezetést kínál a webfejlesztés világába. Gyönyörű könyv, köszönhetően a letisztult dizájnnak, nagy betűkkel és színes oldalakkal. Gyakran visszatérek rá, hogy csak csodáljam.

Less / Sass

Azok számára, akik ismeretlenek, a Less & Sass olyan CSS transzpiler, amely lehetővé teszi a CSS elegánsabb írását. Ez lehetővé teszi a szokásosan nem támogatott dolgok elvégzését, például a CSS-szabályok beágyazását. Ha elkészült, ezek a CSS transzpilerek „lefordítják” a kódot, és átalakítják normál CSS-be.

Jelenleg 2 fő CSS transzpiler van: a Less és a Sass . A Sass a legnépszerűbb, de a Less tanulását először könnyebbnek találtam, főleg azért, mert a Sass számítógépen történő használatához a Ruby telepítése is szükséges, amit nem szerettem.

Gyors, mégis teljes körű áttekintést kaphat a Less használatáról a WinLess Online Less Compiler alkalmazásával, és a kód példákkal láthatja, hogyan alakulna a Less kód CSS-vé. A Sass online kipróbálhatja a SassMeister használatával is (bár ez nem tartalmaz kód példákat).

Nem mindegy, hogy először a Less vagy a Sass nyelvet tanulja meg. Rendkívül hasonlóak, így ha egyszer megismered az egyiket, nagyjából ismered a másikat is. Remek gyors összehasonlítást találhat Less és Sass között Shelby Moulden A LESS & SASS összehasonlítása című cikkében.

Reszponzív dizájn

Eredetileg a Codeschool HTML & CSS elérési útjának használatával tanultam meg a reszponzív dizájnt és a Bootstrap-ot, de nemrégiben azt tapasztaltam, hogy a Google Udacity tanfolyama az Responsive Web Design Fundals-on fantasztikus az alapok és azon túlmenően sokkal teljesebb átfogásban, mint a Codeschool.

Bármely további keretrendszer nélkül is készíthet reszponzív tervet, de sokkal könnyebb egy olyan adaptív keretrendszer segítségével, mint a Bootstrap. A Bootstrap hivatalos dokumentációja nagyon jól elkészült, így nem lehet gond a kezdéssel.

Ha gondjai vannak az alapelvek megértésével, olvassa el Froont blogbejegyzését a reszponzív web tervezés 9 alapelvéről. Gyönyörű, tiszta és egyszerű animációkkal rendelkezik, amelyek vizuálisan szemléltetik az adaptív webdesign alapelveit.

SzögletesJS

Akkor még nem igazán tudtam, hogy pontosan mi is az AngularJS, de tudtam, hogy mindenki erről beszél, és hogy ha webfejlesztő akarok lenni, akkor meg kell tanulnom. Megtaláltam a Google fejlesztői tervezési döntéseit az AngularJS-ben, hogy a legjobb általános áttekintést nyújtsuk arról, hogy mi volt az AngularJS, és hogyan javította a webalkalmazások készítését.

Először arra gondoltam, hogy az AngularJS-t hivatalos dokumentációjukon keresztül tanulom meg, de ez szörnyű ötletnek bizonyult. A dokumentáció a kezdők számára nem volt túl egyszerű, és a rendetlen formázás megnehezítette az olvasást és megértést.

Ezután megtanultam tanulni az AngularJS-t a Codeschoolon keresztül. Mivel a JavaScript és a CSS tanfolyamokon is pozitív tapasztalataim vannak onnan, nem kevesebbre számítottam, mint egy remek tanfolyamra. Tévedtem. A tanfolyam katasztrófa volt a kezdetektől, mivel az algoritmus, amellyel ellenőrizni lehetett, hogy a kódpéldát jól kapta-e, néha nem működött jól, és egyértelműen helyes megoldását hibásnak jelölte meg. Volt, hogy a meghibásodott ellenőrzési rendszer kijavításához csupán egy oldalfrissítés kellett. Ami a tanfolyam tartalmát illeti, az sem volt nagyszerű. Rendben végzett munkát az AngularJS alkalmazás alapvető összetevőinek magyarázatában, de rettenetes munkát végzett ezek integrálásában egy valódi alkalmazásba, így sokkal több kérdés maradt számomra, mint amivel kezdtem.

A fórumokon végzett némi keresgélés után az Egghead.io oldalra botlottam(ingyenes / fizetett), ahol sokkal jobb szerencsém volt. Tananyaguk sokkal tisztább, tömörebb és teljesebb volt, ami sokkal jobb élményt nyújtott. Nem is beszélve arról, hogy a tanfolyamaikon kívül harapásméretű, 2–5 perces tanórákkal rendelkeznek, amelyek fontos témákat ölelnek fel. (Például: Mi az a vezérlő? Mi a szűrő? Mi az a $ hatókör?) Ezek megkönnyítik az alapok megértését. Vannak olyan videóik is, amelyek fizetést igényelnek, de ezek általában azok a fejlettebb szögletes témákról szólnak, amelyekre csak később lesz szükséged. Végeztem az AngularJS Fundamentals tanfolyamon, és teljes mértékben elégedett voltam az eredménnyel (és közben nagy rajongója lettem az Egghead.io tanfolyamainak is).

Tervezési minták

A tervezési minták alapvetően újrafelhasználható kódmegoldások, amelyek ismételten felhasználhatók a gyakori szoftveres problémák megoldására. Ha megalapozza ezt, akkor sokkal versenyképesebb szoftverfejlesztővé válik, bármilyen programozási nyelven. Ez megkönnyíti a mások kódjának megértését is, mivel gyorsan azonosítani fogja, hogy milyen tervezési mintát használtak a kódjukon annak jobb megértése érdekében.

Megtaláltam a 2 legjobb forrást ennek megtanulásához: a doFactory JavaScript tervezési mintái és Addy Osmani Learning JavaScript tervezési mintái. Sokkal könnyebben érthetőnek találtam a doFactory-t, míg Addy Osmani könyve sokkal teljesebb volt.

Chrome DevTools

A Chrome az egyik leghatékonyabb eszköz egy webfejlesztő számára. Minél előbb elsajátítja, annál több időt takaríthat meg később. A Codeschool Explore and Master Chrome DevTools ingyenes tanfolyama nagyszerű munkát végez azok bevezetésében.

Git (verziókezelés)

Ah, Git - az az eszköz, amelyre soha nem tudtam, hogy szükségem van, amíg fel nem fedeztem, hogy mire képes. A Git alapvetően lehetővé teszi a kódban végrehajtott változtatások nyomon követését, így ha a dolgok rosszra fordulnak, visszaléphet egy korábbi időpontra. Ez lehetővé teszi a kód előzményeinek megtekintését is.

Úgy találtam, hogy a CodeSchool ingyenes Try Github tanfolyama barátságos módja az indulásnak. Az Atlassian Git tréningje kiválóan lefedte a rendelkezésre álló fejlettebb parancsokat. A Codeschool Git tanulási útja szintén kiválóan alkalmas Git alapjainak lefedésére.

NodeJS

Nem kellett sok idő, mire megtudtam, hogy a NodeJS alapvető ismeretei nagyban segítenek abban, hogy webfejlesztő legyek (erről bővebben hamarosan).

Kipróbáltam a Codeschool tanfolyamait a Node-on, de azt tapasztaltam, hogy valóban tartalomhiányosak. Úgy találtam, hogy a NodeSchool.io sokkal jobb tanár az alapok megfelelő megszerzésében, és nagyon jó volt! Imádtam az általa kínált gyakorlati megközelítést, amely hasonló volt a Codeschoolhoz és a Codecademy-hez - azzal a további fejlesztéssel, hogy valóban a NodeJS-t futtattam.

Feladatfutók (Grunt & Gulp)

Grunt és Gulp meglehetősen nagy meglepetés volt számomra, mivel fogalmam sem volt róla, hogy ilyen eszközök léteznének - de nagyon örülök, hogy vannak! Alapvetően ezek a feladatfuttatók lehetővé teszik a közös feladatok automatizálását. Például emlékszik a Less / Sass-ra? Normális esetben manuálisan kell futtatnia a CSS fordítót minden alkalommal, amikor szerkesztést hajt végre a CSS fordításához, majd frissíti a böngészőt. A feladatfuttató segítségével beállíthatja, hogy figyelje a Less / Sass fájlokat a változásokra, és amikor változás észleli, fordítsa le a CSS-t és automatikusan frissítse a böngészőt. Ez rendkívül hasznos a fejlesztési idő csökkentésében.

Jelenleg 2 fő feladat futó van: Grunt és Gulp. Míg pontosan ugyanazt csinálják, nagyon különböző módon működnek, a Grunt sokkal részletesebb és konfiguráció-orientáltabb, a Gulp pedig rövidebb az írással, és inkább a kódot részesíti előnyben a konfiguráció helyett.

A NodeJS ismerete elősegíti a jobb Grunt és Gulp fájlok írását, mivel mindkettő a NodeJS-en fut . Kiválaszthat, amit csak akar, de én Gulpot sokkal könnyebben megtanultam és írtam. Ma is inkább a minimalista - ugyanakkor erőteljes - csőalapú megközelítés miatt preferálom.

Úgy találtam, hogy a Scotch.io Grunt és Gulp témájú tanfolyamai a legjobbak között vannak.

Kihívások, amelyekkel az első munkám során szembesültem

Miután áttekintettem a webfejlesztés alapjait, készen álltam az első webfejlesztési interjúmra egy belépő szintű pozícióra. Nem részletezem az interjút, mivel nem ez a cikk a fő hangsúly. De azt mondom, hogy nekem azt mondták, hogy viszonylag erős JavaScript ismereteim segítenek biztosítani a helyzetet. (Köszönöm, Eloquent JavaScript!)

Azt kell mondanom, hogy elég ideges voltam az első projektem miatt. Ez magában foglalta az újrafelhasználható webkomponensek készítését HTML, CSS és JavaScript használatával, valamint a Bootstrap, a Sass, a Grunt eszközként. T

két legnagyobb hibát találtam először:

  1. Kudarctól való félelem. Mivel én voltam az új srác, állandóan attól féltem, hogy a kódom hibás vagy rosszul lett elkészítve, ezért sok időt töltöttem el annak, hogy mindent kétszer is ellenőriztem, és betartottam a legjobb gyakorlatok kódolását. Emiatt ritkán próbáltam újfajta kreatív megoldásokat megoldani, mert attól tartok, hogy a végén esetleg nem fog megfelelően működni. Ez gyakorlatilag leállította az utat, hogy új dolgokat tanuljak.
  2. Teszi a dolgokat, mert a nálam jobban tudó „X” személy ezt mondta. Eleinte sokat tettem. Bár nem teljesen téves, a dolgok bizonyos módon történő elvégzése csak azért van, mert az ügy „X” szakértője ezt mondta - anélkül, hogy tudnám, miért - ahhoz vezetett, hogy nem igazán tudtam, mikor miért tették a dolgokat úgy, ahogy voltak. Hamarosan megtudtam, hogy minden alól vannak kivételek, és mindig tudni kell a legjobb gyakorlatok hátterét.

Szerencsére első projektem során megértő csapatvezetésem volt, aki segített leküzdeni ezeket a problémákat. Folyamatosan motivált arra, hogy új dolgokat próbáljak ki, még akkor is, ha néha rosszul mennek a dolgok. Azt is mondta, hogy kérdezzek meg mindent - még a tanításait is.

Idővel megtanultam a leckét. Ettől kezdve mindig is olyan ember voltam, aki alig várja, hogy új dolgokat próbáljon ki. Mindig megpróbálom megérteni, miért léteznek a legjobb gyakorlatok, amikor igazuk van, és mikor nem alkalmazhatók egy helyzetre.

Az AngularJS használata egy tényleges projektben szintén nagy kihívást jelentett számomra. Ez főleg azért történt, mert sok mindent csináltam vele, és nem értettem teljesen, miért történtek. „Szögletes varázslatnak” gondoltam.

Sokszor azt kívántam, bárcsak tudnám, hogy az Angular valójában hogyan működik, de a dokumentációt nézve félelmetes volt.

Végül egy csodálatos könyvbe botlottam, amelynek címe: Build Your Own AngularJS. Nem olvastam el mindent, de a Hatókörök és figyelők és a működésük című részt elolvasva valóban kiderült, hogy a szögletes varázslat valójában nem varázslat. Ez csak egy okos módszer volt az adatkötés fenntartására piszkos ellenőrzések és beágyazott hatókörök segítségével. Nagyon ajánlom ezt a könyvet mindazoknak, akik szeretnék megérteni az AngularJS-t.

A másik kihívás, amellyel egy évvel később szembesültem, az volt, hogy milyen gyorsan halad a webfejlesztés. Éppen elsajátítottam az AngularJS-t és a Grunt-ot, és büszkének és hatalmasnak éreztem magam - csak hamarosan megtudtam, hogy Gulp és ReactJS a láthatáron vannak. És egy évvel később, miután megtanulta őket, a Webpack kezdett elterjedni, és ezt nekem is meg kellett tanulnom. Ahogy el lehet képzelni, nagy részem eléggé csalódott volt amiatt, hogy ismereteim egy része milyen gyorsan elavult. De egy munkatársa hamarosan felvilágosított, amikor elmondott nekem valamit, ami megváltoztatta a könyvtárak és a keretrendszerek örök megtekintését:

"A könyvtárak és a keretrendszerek elavulhatnak, de az általuk javasolt koncepciók és megoldások gyakran túlélik az idő próbáját."

Igaza volt. Lehet, hogy az AngularJS elavulttá vált, de a mögötte rejlő varázslat teljes megértése segített jobban megérteni a React webkomponens-architektúráját, amely továbbfejlesztette az Angular direktíváinak koncepcióját. Ez segített abban is, hogy megértsem, hogyan nyert a ReactJS ekkora népszerűséget, valamint azt, hogy milyen jövő vár.

Nem emlékszem, hogy a későbbi projektjeim során más nagy kihívásokkal kellett volna szembenéznem. De azt fogom mondani, hogy a webfejlesztéssel töltött 2 év alatt az első számú dolog, amely a sikerhez (saját munkatársaim szerint) hozzájárult, izgalmam és erőteljes törekvésem, hogy mindig vigyázzak új tanulandó dolgokért. Hamarosan rájöttem, hogy ez egy nyerő kombináció a webfejlesztéssel, mivel az itteni dolgok nagyon-nagyon gyorsan változnak, folyamatosan új keretrendszerek és könyvtárak jelennek meg.

Az érme hátoldalán a másik dolog, ami rengeteg segítséget nyújtott nekem - és amire valójában nemrég jöttem rá -, megértette, mit nem szabad megtanulnom. Ez kritikussá vált a jobb webfejlesztővé válás folyamatom szempontjából.

Nem ritka, hogy embereket kritizálnak a webes technológiák rendellenesen gyors fejlődési üteme, vagy azt, hogy egy új JavaScript könyvtár vagy keretrendszer hogyan jelenik meg szinte minden nap. De idővel megláttam a fényt, és végül megértettem:

Nem kell megtanulnia minden megjelenő új könyvtárat vagy keretrendszert.

Gyakran nagyszerű ötlet egy egyszerű hello world example app elkészítése, hogy lássa, mit kínál egy keretrendszer. Akkor tovább léphet. De általában arra kell törekednie, hogy a projekt igényeinek leginkább megfeleljen. Ez eleinte nehéz lehet, de szerencsére olyan nagyszerű helyek léteznek, mint a Stack Overflow, a Medium és a Reddit, ahol hasznos beszélgetéseket találhat a keretrendszerek között, és kitalálhatja, hogy melyek azok, amelyek a legjobban megfelelnek az Ön konkrét felhasználási eseteinek.

Tovább haladva

A következő években folyamatosan fejlődtem a következő módszerekkel

JavaScript

Miután befejezte az Eloquent JavaScript-et, meglehetősen könnyű azt mondani és úgy érezni, hogy elsajátította a JavaScript-et, de utána jön a You Don't Know JS, és abszolút elpusztít (vagy legalábbis nekem tett). Ezt a könyvsorozatot (amúgy ingyenes) az irodában néhány idősebb webfejlesztő többször is megemlítette számomra, mint elolvasandó könyvet , és csak addig olvashatom el, hogy teljes mértékben ismerem a JavaScript-et. Igazuk volt, mivel oldalról oldalra folyamatosan felrobbant a fejemben, hogy mennyire valóban bonyolult a JavaScript, valamint sok-sok gyakori buktató lehet tapasztalatlan és tapasztalt, megfelelő JavaScript-ismeret nélkül.

Az a könyvsorozat elolvasása igazán felnyitotta az elmémet, és nagyon ajánlom azoknak is, akik szeretnék magukat szakértő JavaScript-fejlesztőknek nevezni. Miután ezt félreértette, van 2 további erőforrás, amelyet nagyon ajánlok, hogy még további, fejlettebb JavaScript-ismereteket szerezzek;

  • JavaScript, a jobb részek: D. Crockford elképesztő beszéde, amely a JavaScript legnagyobb gyengeségeiről szól, a „lábfegyverekről”, és arról, hogyan lehet ezeket erősségeiként felhasználni.
  • A JavaScript két oszlopa: Eric Elliott elismert JavaScript Medium író szilárd cikke, amely a JavaScript 2 nagy oszlopáról szól: a prototípusos öröklődésről és a funkcionális programozásról

Miután alaposan megértette a JavaScript-et, folytassa az ECMASCript 2015 (más néven ES6), a legújabb és a jelenlegi JavaScript-szabvány használatával. A Smashing magazin ECMAScript 6 (ES6): A JavaScript új verziójának újdonságai című cikk rövid rövid áttekintést nyújt az ES6 újdonságairól. Az ES6-ot kipróbálhatja a böngészőben a Babel online transzpiler segítségével.

CSS

A CSS nagyon-nagyon gyorsan rendetlenné és rendezetlenné válhat. A tisztább CSS megírásához jó néhány különféle módszert javasoltak, de 2 kiemelkedik, amelyeket nagyon ajánlom, hogy olvassa el az ASAP-t a versenyképesség megőrzése érdekében:

  • SMACSS: Skálázható és moduláris architektúra a CSS számára. Rugalmas útmutató a kicsik és nagyok fejlesztéséhez.
  • BEM: egy módszertan, amely elősegíti az újrafelhasználható összetevők és a kódmegosztás elérését a kezelőfelületen.

Én személy szerint a SMACSS-t részesítem előnyben, tisztább megjelenés miatt, de néhány vállalat és a CSS Framework továbbra is használja a BEM-et, ezért érdemes mindkettőt ismerni.

A CSS teljesítményére is el kell kezdenie összpontosítani. A Smashing Magazine A mobil teljesítmény optimalizálásának kezelése és a HTML5 Rocks High Performance Animation cikke szilárd munkát végzett abban, hogy előrelépjen ebben. Mindkét cikk gyors átolvasása szilárd alapot adhat Önnek.

JavaScript csomagok

Mostanra erősen meg kell értenie Gruntot vagy Gulpot. A következő lépés egy JavaScript csomag hozzáadása a feladat futójához, amely lehetővé teszi a JavaScript alkalmazás modulárisabb rendezését.

A két legnagyobb játékos jelenleg:

  • Browserify: lehetővé teszi modulok használatát a böngészőben az összes függőség összevonásával.
  • Webcsomag: alapvetően böngésző a szteroidokon. Nehezebb konfigurálni és beállítani.

A Scotch.io Kezdő lépések a Browserify programmal kezdő lépéseket kínálhat a böngészővel, míg David Fox Powell cikke miért nem írhat senki egy egyszerű webpack oktatóanyagot? egy nagyszerű, szórakoztató olvasnivaló a webpack bevezetésében.

Személy szerint nem töltöttem sok időt a webpack használatával, de a vele töltött idő alatt azt kell mondanom, hogy elképesztő volt - még ha kissé nehezebb is beállítani. Ha még csak most kezded, akkor a Browserify programot választanám, mivel sokkal egyszerűbb beállítani. Csak ne feledje, hogy a webpack a jövő, és milyen nagyobb projekteket kezd használni.

ReactJS

A ReactJS gyorsan népszerűségnek örvend, és úgy tűnik, hogy nem lassul le - olyan mértékben, hogy az emberek azt kérdezik, hogy "A React öl-e szögletes?"

A Scotch.io Learning React.js: Az első lépések és a fogalmak alapos áttekintést nyújt a React-ről. Miután ezt félreállította, folytassa az Egghead.io tanfolyamával a React Fundamentals témakörben, ahol felépít egy teljesen működő ReactJS alkalmazást, majd áttér az ES6 szintaxisára. Nyomon követheti a hivatalos ReactJS dokumentációt, amely nagyon jól elkészült, és lehetővé teszi, hogy teljes mértékben elsajátítsa azt.

Mivel a React csak a nézet, nagyon ajánlott, hogy tanulja meg a Redux-ot. Véleményem szerint a legtöbb kurzus a Redux-on kissé összetett, de a CSS trükkök, amelyek szintet lépnek a React-tel: A Redux remek egyensúlyt mutat az egyszerűség és az informatív tudás között a Redux indításakor.

Lehet, hogy ezen a ponton hallottál a Fluxról is, de ha kíváncsi vagy, miért érdemes a Reduxot használni a Flux felett, nézd meg a Stack Overflow kérdést: Miért érdemes használni a Reduxot a Facebook Flux felett? amire Redux alkotója válaszolt!

Visszatekintés a hibáimra és a tanultakra

Nagyon sok hibát követtem el a webfejlesztés megtanulásának két éve alatt. Összességében úgy gondolom, hogy a legnagyobb hibám az volt, hogy nem sajátítottam el az alapokat, mielőtt áttérnék a könyvtárakra és a keretrendszerekre. Gondolom, ez szinte minden ottani programozási nyelvre vonatkozik, de véleményem szerint még inkább a JavaScript-re. Ez azért van, mert sok szempontból a JavaScript egy törött nyelv, és sok „Lábfegyvert” tartalmaz (erről hallania kellett volna, ha megnézte D. Crockford előadását, amelyet korábban említettem: „JavaScript, a jobb részek”). Ezek elviselhetetlenül megnehezíthetik az életet, ha nem teljesen érted őket.

Emlékszem, hogy egyszer elakadtam egy $ hatókörű AngularJS kérdésben, ami 3 napot vett igénybe a hibakeresésemben, csak azt tapasztaltam, hogy ez nem is AngularJS probléma, hanem egy JavaScript probléma, amelyet azért okoztam magamnak, mert nem értettem, hogy működik ez .

Tiszta kód

Furcsa, hogy nem látom ilyen gyakran beszélni erről. Nem mindig törődtem a tiszta kód megírásával, de őszintén szólva ez az egyik dolog, amire a legbüszkébb vagyok, hogy megtanultam. Ez azért van, mert mindenki szereti panaszkodni, hogy az utolsó helyén volt a világ egyik legrosszabb, legrondább kódbázisa. Akkor miért nem beszélhet senki arról, hogy milyen jó volt az utolsó? Hogyan lett a kódjuk olyan tiszta és jól elérhető, hogy büszkék voltak rá?

Ez egy olyan trend, amelyet szeretnék megváltoztatni, és úgy gondolom, hogy lehet különbséget tenni, ha elég sok ember szorgalmazza ezt. Törekedjen arra, hogy a változó- és függvénynevek érthetőek legyenek angolul, még akkor is, ha kicsit többet kell írnia. Ennek elmulasztása csak azt eredményezi, hogy valamikor a jövőben manuálisan kell dokumentálnia, hogy világosabb legyen. Ez azt is előidézi, hogy a teljes kódbázis nehezebben érthető lesz az új fejlesztők és saját maga számára. Igen, maga. Miért magad? Mert ha nem érvényesíted a tiszta kódot, mi gondolod azt, hogy a munkatársaidnak érvényesíteniük kell, és tiszta kódot kell írniuk, hogy könnyebben megértsd? Vegyünk példát.

És ha ez nem elég jó ösztönző, az emberek nagyon gyakran felismerik és értékelik a tiszta kódírókat. Megállapítja, hogy tiszta kód megírásával munkatársai és barátai még jobban élvezni fogják Önnel a munkát, viszont boldogabb életet fognak élni.

jQuery

Néhányan észrevehetik, hogy én sem fektettem nagy hangsúlyt a jQuery-re. Ennek az az oka, hogy tapasztalataim szerint azt tapasztaltam, hogy a jQuery először több kárt okozott, mint hasznot. Lehet, hogy néhányan nem értenek egyet, de kérem, hadd magyarázzam el: Amikor először megtanultam, az az általános gondolat, hogy megértettem, hogy a jQuery mindenhol jelen van, és hogy nagyjából mindenhez használható. Emiatt megszoktam, hogy a jQuery-t nagyjából mindenhez használom, és bármilyen problémámmal találkoztam, kerestem rá olyan megoldást, amely jQuery-t használt.

Félreértés ne essék, a jQuery félelmetes volt a használatom során, olyan fantasztikus, hogy vakon figyelmen kívül hagytam, hogy a jQuery-vel tettek 90% -át natív módon, modern böngészőkben is hasonlóan egyszerű szintaxissal lehet elvégezni.

Lehet, hogy most arra gondolsz: „Tehát mi a baj ezzel? A jQuery egyébként sem mérlegel ennyit, és ennek használatával még mindig kevesebb kódot írsz, mintha natívan csinálnád a dolgokat. " De a jQuery használata natív API-k felett nem jelentett problémát. A probléma az volt, hogy az egész gondolkodásmódom és a közös problémák minden megoldása, amelyet addig ismertem, megkövetelte a jQuery működését. És ez óriási problémává vált, amikor megszereztem az első projektemet, és azt mondták, hogy a jQuery nem függőség.

A jQuery használata haszontalanná tett, anélkül, hogy teljesen figyelmen kívül hagyta a mindig létező natív módszereket és megoldásokat. Ez az összes megoldásomat kevésbé hordozhatóvá tette, mivel használatukhoz jQuery kellett.

Azóta arra törekedtem, hogy a jQuery-t csak akkor használjam, ha ez feltétlenül szükséges, és valóban nagy javulást eredményez a kódalapunk hatékonyságában és olvashatóságában (például nehéz DOM-manipuláció).

Még egyszer, ne érts félre, a jQuery nagyszerű, de ha visszamennék az időben, és találkozhatnék a múltbeli önmagammal, amely csak webfejlesztést tanult, akkor erősen tanácsolnám magamnak, hogy ne tanuljam meg teljesen a jQuery-t, amíg meg nem tanultam, hogyan dolgokat csinálni anélkül. Ha problémái vannak a kapcsoló végrehajtásával, mint én, nézze meg, hogy Önnek nem kell a jQuery.

Tanfolyamok

Ami a tananyagot illeti; míg sok CodeSchool tanfolyam kiemelkedő volt (a HTML & CSS ág különösen fantasztikus volt), még akkor is, ha néhány keretrendszeri tanfolyamuk kissé laposra esett (AngularJS, BackboneJS stb.).

Elég sok Pluralsight tanfolyamot is elvégeztem, amelyeket nem említettem, mert ennyi idő után arra a következtetésre jutottam, hogy a tanulási útvonaluk kiválasztása összességében rossz ötlet és megbízhatatlan . Mivel tanfolyamaikat olyan tanárok készítik, akik (véleményem szerint) nem mindig jártasak a tanításban, azt tapasztaltam, hogy tanfolyamaik minősége nagyon ingadozik, mivel a tanfolyamok minőségi követelményei nem léteznek. Volt olyan tanfolyamom, ahol még a tanfolyamot adó személy is úgy hangzott, mintha elaludna. És őszintén szólva nincs elég figyelem arra, hogy folyamatosan figyeljek egy 6–10 órás tanfolyamra - és sokan ilyen sokáig tartanak, ha nem is tovább.

Jó 80–100 órás edzést töltöttem a Pluralsight-ban, és őszintén szólva szeretnék egy jó részét visszakapni. Félreértés ne essék, volt néhány csodálatos tanfolyamom a Pluralsight-on, de a mennyiségre és a minőségre összpontosítva valóban elpazaroltam az időmet. Sokkal többet tudhattam volna meg, ha jobb forrásokból vettem volna tanfolyamokat, mint például az Egghead.io és a CodeSchool, ahol a mennyiségi minõséget jobban értékelik.

Az egyetlen ok, amiért valaha is gondolhatnék valakire, aki használja a Pluralsight-ot, az az, hogy részt veszek egy olyan tanfolyamon, amelyet egyetlen más weboldal sem használ valamilyen homályosabb technológiában (például az Installshield vagy a Xamarin), vagy néhány nagyon speciális tanfolyamot veszek fel, amelyekről tudják, hogy nagyon jól fogadják őket, és áttekintve (Például John Papa Angular Fundamentals).

Összességében, ha használni szeretné a Pluralsight alkalmazást, akkor győződjön meg arról, hogy olyan személy által választott tanfolyamokon vesz részt, akik elsőként vették fel őket, és amelyeket kiváló minőségűnek és hasznosnak ismernek el.

Nemrégiben kipróbáltam a Team Treehouse képzést is, és el kell mondanom, hogy csodálkozom a tanfolyamok minőségén, még a CodeSchooléval is vetekedve, és a tananyaguk rendkívül kiterjedt.

Miután átnézte az ottani HTML, CSS és JavaScript tanulási utakat, úgy látom, könnyen megszerezheti nagyjából minden alapját. Nem hiszel nekem? Csak nézd meg a tanulási pályáikat, és mondd el, hogy nem csodálatos. Persze, ez egy kicsit drága, havi 30 USD, de véleményem szerint hihetetlenül megéri. (Most fizetem érte, hogy megtanuljam a WordPresset, mivel szükségem van rá egy szabadúszó projekthez, és az anyag remek).

Egy szó a fizetett tanfolyamokról

Szükségem volt beszélni erről, mivel észrevettem az általános egyetértést abban, hogy a programozást egy fillér fizetése nélkül is megtanulhatja, és ugyanolyan versenyképes lehet, mint egy tanfolyamért. Bár igaz, nem tudom elégszer hangsúlyozni a megfelelő tanfolyamért fizetett értéket. Persze, a legértékesebb tananyag, amiről írtam, nagyon sok ingyenes, de sokat fizetnek is. Főleg azért, mert néha egyszerűen nem lehet legyőzni, ha valaki vizuálisan elmagyarázza neked a dolgokat.

Igen, vannak szörnyű, fizetett tanfolyamok, amelyek ellen nem javasolnám, mivel az értékajánlatuk megkérdőjelezhető (lásd: Pluralsight), de mások, mint az Egghead.io, a CodeSchool és a Team Treehouse, a viszonylag költséges dacára is kiemelkedő bummot kínálnak havi előfizetés (havi 25–30 USD). Ráadásul mindannyian ingyenes 7–15 napos próbaverzióval rendelkeznek, így láthatja, melyik működik a legjobban.

Ha jól játssza a kártyáit, bármelyikük 1-2 hónapjának kifizetése könnyen megszerezheti azt a tudását, amelyet egyébként csak akkor szerezne, ha egy év alatt számtalan cikkbe és blogbejegyzésbe botlott. Őszintén szólva olyan jók.

Tehát igen, nem szükségesek, de ha legalább egy hónapot megengedhet magának, biztos lehet benne, hogy ez erős előnyt jelent Önnek.

A siker titkos mártása

Az elmúlt 2 évben rengeteg fejlesztővel találkoztam, webfejlesztő voltam. Utazásom során találkoztam néhány fejlesztővel, akik valóban kiemelkedtek - olyan fejlesztőkkel, akik egyértelműen saját bajnokságban voltak, és akikre én és mindenki más felnézett. Megállapítottam, hogy ezek az egyének elég sok olyan tulajdonsággal rendelkeznek, amelyeket most szeretnék megosztani veletek. Véleményem szerint ez a sikeres webfejlesztő titkos titka:

  • Szeresd, amit csinálsz. Ez egyszerűen mindannyiuk legfontosabb jellemzője. Ha nem szereted azt, amit csinálsz (legyen az CSS-stílus vagy JavaScript), akkor az valóban megmutatkozik abban, amit csinálsz. Azok, akik rajonganak azért, amit csinálnak, gyakran egyértelműen kiemelkednek a tömegből.
  • Legyen nagylelkű és ossza meg tudását . Nagyon könnyű titokban tartani azt az új CSS / JavaScript-feltörést, amelyet talált, amely megoldja a projekt problémáit, de kérem, ne tegye. Azok az emberek, akik a legtöbbet osztják meg tudásukat, gyakran a legértékesebbek, mivel bármilyen csapatba bekerülhetnek, és annak minőségével hatalmas előnnyel javulhatnak.
  • Mindig keressen új dolgokat . A legtöbb sikeres fejlesztő, akivel találkoztam, osztozik ebben a közös vonásban. Legyen szó blogok olvasásáról, sok idő eltöltéséről a kapcsolódó megbeszélések programozásában, vagy akár az ebédszünetekben a webfejlesztésben rejlő újdonságokról. Ha folyamatosan új dolgokat keresünk, a legjobb fejlesztők mindig a görbe előtt maradhatnak.

A legrövidebb út

Hú, ez a cikk eltartott egy ideig (6 óra és számolás). Már majdnem készen vagyunk! Lehet, hogy kíváncsi vagy: "Rendben, klassz történet, de mi a leggyorsabb út?" És itt van.

Ezt úgy szerveztem meg, hogy úgy venném, ha visszamehetnék és jól csinálnám a dolgokat. Hozzátettem néhány bónuszt is, amiket akkor nagyon szerettem volna. Élvezd!

Javascript

  1. CodeSchool vagy Treehouse Javascript tanulási útvonala (fizetős) VAGY Codecademy Javascript tanfolyama
  2. Beszédes JavaScript
  3. Nem ismered JS-t
  4. JS: A helyes út
  5. Ismerje meg az ES6-ot az Egghead.io oldalon

HTML és CSS

  1. CodeSchool vagy Treehouse HTML és CSS tanulási útvonala (fizetős) VAGY HTML és CSS: Webhelyek tervezése és készítése John Ducket által VAGY a Codecademy HTML és CSS tanfolyama.
  2. A CSS-specifikumok sajátosságai CSS-trükkökkel
  3. Ismerje meg a CSS elrendezést
  4. SMACSS
  5. A fronton reagáló web tervezés 9 alapelve
  6. A Google adaptív webtervezési alapjai az Udacity-n (vegye figyelembe, ha nem a CodeSchool vagy a Treehouse tanulási utat használta)
  7. A mobil teljesítmény optimalizálásának kezelése a magazin vagy a böngésző renderelés optimalizálásával és a webhely teljesítményének optimalizálásával a Google által Udacity-n
  8. A Google webes alapjai

Fejlesztői eszközök

  1. Fedezze fel és sajátítsa el a DevToolokat a CodeSchool segítségével
  2. Tanulja meg a Git Codecademy-t, és próbálja ki a Github by Codeschool-t
  3. A Smashing Magazine bemutatása a Linux parancsaiba
  4. Könnyen automatizálja a feladatait a Scotch.io Gulp.js segítségével

SzögletesJS

  1. Tervezési döntések AngularJS-ben a Google Developers részéről (Intro to AngularJS)
  2. Az Egghead.io AngularJS alapjai
  3. John Papa szögletes stílusvezetője
  4. A Scotch.io egyoldalas Todo alkalmazás létrehozása csomópont és szög (MEAN) használatával
  5. AngularJS alkalmazásstruktúra az Egghead.io (fizetős) vagy a Scotch.io szögletes tanfolyamai által

ReactJS

  1. A React.js elsajátítása: Az első lépések és a Scotch.io koncepciói
  2. Bevezetés az Egghead.io internetes csomagjába
  3. React Fundamentals: Egghead.io
  4. Szintezés a React: Redux by CSS Tricks segítségével

Hátul

  1. A NodeSchool.io NodeJS oktatóanyagai
  2. Hogyan magyaráztam a REST-et a feleségemnek
  3. Egyoldalas Todo alkalmazás létrehozása csomóponttal és szöggel a Scotch.io által (Node, ExpressJS, MongoDB, Angular, REST)

Bónusz: Források

Teljesen választható, de néhány kedvenc cikkem és forrásom, amelyeket az évek során megtaláltam, és amelyeket valószínűleg szeretni fog, ha érdekli az adott téma.

  • Web Design 4 perc alatt. Nagyon kreatív és eredeti interaktív bemutató, amely megtanítja a webdesign alapjaira.
  • Díjak. Web-ihletet keres? Ne keressen tovább.
  • Miért olyan nehéz a munkaerő-felvétel a technikában, Eric Elliott. Eric elképesztő munkát végez abban, hogy összefoglalja, milyen meglepően nehéz nagyszerű fejlesztőket találni, és hogyan lehet azzá válni.
  • NoSQL adatbázis-rendszerek mega összehasonlítása Kovács Kristof által. Ez kiváló összehasonlítás a legnépszerűbb NoSQL adatbázis-rendszerek között. MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, ők és még sok minden itt van.
  • XSS játék. A helyek közötti parancsfájlok (XSS) hibái az egyik leggyakoribb és legveszélyesebb típusú sebezhetőség a webalkalmazásokban. Ennek a fantasztikus erőforrásnak a használatával megtanulhatja, hogyan kell megtalálni és kihasználni az XSS hibákat, és hogyan lehet megakadályozni, hogy azok bekövetkezzenek az Ön webalkalmazásával.
  • Fenntarthatatlan kód írása. Vidám cikk arról, hogyan nemnak nekírjon karbantartható, tiszta kódot.

Bónusz: Az eszközeim

Úgy gondoltam, hogy jó lenne megosztani néhány felfedezett eszközt (némelyik jól ismert, más nem annyira), amelyek megkönnyítették az életemet webfejlesztőként, így itt vannak.

  • Jetbrains Webstorm: Teljes funkcionalitású webfejlesztési IDE. (A választott szerkesztőm) Fizetett, de 1 év ingyenes licencet kínál a hallgatóknak.
  • Atom.io: Nagyon bővíthető szövegszerkesztő IDE-szerű szolgáltatásokkal, amelyek a Webstormmal vetekednek. Ingyenes.
  • Fenséges szöveg: Villámgyors szövegszerkesztő beépülő modulok támogatásával és esztétikus megjelenéssel. (Általában a Webstorm / Atom programot IDE-ként telepítem a komoly munkákhoz, a Sublime Text pedig a fájlok gyors szerkesztéséhez.)
  • caniuse.com: A böngészőtámogatás kritikus a webhelyek számára, és ez az első számú erőforrás annak kiderítésében, hogy mely funkciókat melyik böngészőverzió és melyik támogatja.
  • Cloud 9: Felhőalapú fejlesztői környezet és IDE Git támogatással, amely Linux alatt fut. Nagyszerű távoli programozáshoz és a NodeJS vagy más szerver oldali dolgok teszteléséhez anélkül, hogy bármit is telepítenie kellene a gépére
  • CodePen, Plunker és JSFiddle: Remek felhőalapú elülső játszóterek, amelyek lehetővé teszik a gyors HTML / CSS / JS demók készítését, amelyeket megoszthat, vagy később tovább dolgozhat, ha ingyenes fiókot hoz létre. A CodePen gyakran a CSS-hez kapcsolódó dolgok számára a legjobb, mivel a minimalista felület és a CSS-hez kapcsolódó szolgáltatások sokasága, a Plunker for JavaScript-demók az erőteljes JS-funkciók miatt, és a JSFiddle azokhoz a demókhoz, amelyeknek valós időben együtt akarnak működni másokkal, az élő szerkesztőjének köszönhetően megosztás funkciója.
  • Vanilla-lista: Csak vanilla JavaScript-et használó JavaScript-bővítmények és könyvtárak tárháza (vagyis nincs szükségük könyvtárak működésére, például a jQuery)
  • YouMightNotNeedjQuery: Valószínűleg nem. Nézd meg magad.
  • PublicAPIs: Elgondolkodott már azon, hogy milyen nyilvános API-k léteznek? Ne keressen tovább!
  • Gravit.io: Felhőalapú tervező alkalmazás, amely vetekszik az Adobe illusztrátorral. (Ingyenes!) Hasznos a gyors makettezéshez és a webes tervezéshez.
  • Adobe Kuler: Webapp segítségével harmonikus színkombinációkat hozhat létre bármely webhelyhez. Ezen kívül van egy „Fedezze fel” színpaletta kirakat, amelyet más tervezők építettek, valamint egy rangsorolási rendszer, amely inspirálja Önt.
  • Nevezze el ezt a színt: Ne töltsön sok időt azzal, hogy megtudja, hogyan nevezze el a színváltozókat kevesebb / sass néven, és csak használja a jogos nevüket ezzel a webalkalmazással

Következtetés

Csak azt szeretném mondani, hogy nagyon élveztem ennek megírását, és nagyon boldoggá tesz, hogy végre bármit visszaadhattam a hihetetlenül támogató programozói közösségnek.

Mint néhányan közületek már észrevették, ez az első blogbejegyzésem, de biztos lehet benne, hogy tervezek még többet írni. Csak ne várjon hetente egyet. Ne feledje: a minőség helyett a mennyiség!

Ha bármelyikének maradt kérdése, nyugodtan írjon megjegyzést, és mindent megteszek, hogy minél hamarabb kapcsolatba léphessünk Önnel.

Remélem, ez hasznos volt nektek, a következő alkalommal, Legjobb!

'18 márciusi frissítés : Azok számára, akik kíváncsiak arra, hogy mire vágtam , íme egy gyors állapotfrissítés!

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