Min rejse til at blive webudvikler fra bunden uden en CS-grad (og hvad jeg lærte af ...

Lad mig først introducere mig selv. Mit navn er Sergei Garcia, og jeg er en fuldtids frontend-udvikler med 2 års erfaring. På den tid har jeg arbejdet som front-end-udvikler for både et Forbes 500-konsulentfirma og et lille firma.

Dette lyder måske ikke som en masse erfaring, men det at have afsluttet mit andet år som udvikler har været en stor milepæl for mig. Dette skyldes, at jeg ikke havde nogen reel erfaring med webudvikling - og ikke meget programmeringserfaring generelt ud over nogle grundlæggende C # og Java-træning, jeg fik fra et par online kurser. Jeg havde heller ikke en datalogi-grad, siden jeg dimitterede med en grad i it-projektledelse.

Jeg havde aldrig skrevet om min oplevelse på trods af al den hjælp, jeg har modtaget fra vidunderlige ressourcer som Medium, Stack Overflow og Reddits programmeringsunderredits. Så i dag besluttede jeg at ændre det. I dag skal jeg udfylde dig om, hvad der gik rigtigt, og hvad der ikke gjorde, så hvis du går ud på denne rejse, har du bedre held end jeg gjorde.

Jeg ved, at der er mange artikler som denne, men ikke så mange af dem diskuterer processen med fordelen af ​​yderligere to års efterfølgende syn.

Jeg starter med min rejse, herunder hvad der gik galt undervejs. Hvis du bare holder af hvad mine forslag til den kortest mulige rute til at blive webudvikler fra bunden er, er du velkommen til at springe til det sidste afsnit: Den korteste rute .

Så uden yderligere ado, lad os komme i gang!

At få det grundlæggende

Efter at have besluttet, at jeg ville komme ind i webudvikling, var det første spørgsmål, jeg tænkte, "Hvad lærer jeg?" Efter at have undersøgt det endte jeg med at lave min læringssti baseret på det, som de fleste webudviklerstillinger på entry level bad om, hvilket var:

  • JavaScript
  • HTML & CSS
  • CSS forprocessorer (mindre og mindre)
  • Responsivt design
  • AngularJS
  • Designmønstre
  • Git
  • NodeJS
  • Opgaveløbere

Sådan gik det.

Javascript

Jeg begyndte min rejse med at lære JavaScript gennem CodeSchool(betalt) og Codecademy(ledig). Hvis du ikke ved om disse, er de gode websteder, der giver dig mulighed for at lære at kode ved at kode inde i browseren.

Jeg fandt ud af, at læringsressourcer som dette var de bedste, når du lige er kommet i gang. Bare vær opmærksom på, at denne læringsmetode bliver trættende hurtigt, når du kommer ind i mere avancerede ting, da deres algoritmer til at kontrollere, om du har løst kodeeksemplet korrekt, har nogle nøjagtighedsproblemer. Begge deres introduktionskurser til JavaScript var fremragende, og jeg kan varmt anbefale dem.

Når jeg først fik det grundlæggende ude af vejen, fortsatte jeg med at få et stærkere JavaScript-fundament ved at læse Eloquent Javascript: A Modern Introduction to Programming book af Haverbeke (gratis).

Denne bog blev anbefalet til mig af mange mennesker i JavaScript-foraene som en must-read og med god grund. Den bog var hård - især hvis du bare lærer programmering som om jeg var dengang. Men jeg er glad for, at jeg ikke gav op og fortsatte med det. Det var fænomenalt på grund af det store omfang af programmeringskoncepter, det dækker, selvom det til tider var lidt hensynsløst. Uanset hvad du gør, skal du ikke springe over kodeudfordringerne. Når du er færdig med denne bog, kan du endelig med tillid sige, at du har et godt greb om JavaScript.

Du kan også valgfrit lære jQuery (selvom jeg virkelig ikke anbefaler at lære det endnu - mere om dette senere). Du kan lære det gennem CodeSchools prøve jQuery-kursus.

HTML & CSS

Efter at have lært JavaScript, fortsatte jeg med at lære det grundlæggende i HTML & CSS og webdesign gennem CodeSchools HTML & CSS-læringssti. Disse kurser er stadig mine favoritter i dag, da tempoet er stort, og det samlede omfang af det, de dækker, gjorde det muligt for mig at få et stærkere fundament til dette.

Du kan også nemt skifte dette ud til noget som Codecademys HTML & CSS kursus og stadig få lignende resultater. Eller hvis du er klar til en udfordring, er Udacitys kursus Intro til HTML og CSS langt mere komplet og lidt mere udfordrende.

Bonus : Hvis du kan få fat i Jon Duckett's HTML og CSS: Design og opbyg webstederbog, det er også et bundsolid udgangspunkt for at lære HTML & CSS (med et drys af webdesign). Det er højt vurderet (4,7 / 5 på Amazon), tilbyder en solid introduktion til en verden af ​​webudvikling. Det er en smuk bog takket være det rene design med store bogstaver og farverige sider. Jeg kommer ofte tilbage til det bare for at beundre det.

Mindre / Sass

For de ukendte er Less & Sass CSS-transpilere, der giver dig mulighed for at skrive CSS på en mere elegant måde. Dette giver dig mulighed for at gøre ting, der normalt ikke understøttes, som f.eks. Indlejring af CSS-regler. Når de er færdige, "kompilerer" disse CSS-transpilere din kode og konverterer den til normal CSS.

Der er 2 store CSS-transpilere lige nu: Less og Sass . Sass er den mest populære, men jeg fandt ud af, at det at lære mindre først var lettere, hovedsageligt fordi brug af Sass på din computer også kræver installation af Ruby, som jeg ikke var glad for.

Du kan få et hurtigt, men komplet overblik over Less ved hjælp af WinLess's Online Less Compiler, og det er kodeeksempler for at se, hvordan din Less-kode ville blive til CSS. Du kan også prøve Sass online ved hjælp af SassMeister (selvom dette ikke indeholder kodeeksempler).

Det betyder ikke noget, om du først lærer mindre eller Sass. De er meget ens, så når du først kender den ene, kender du stort set den anden. Du kan finde en hurtig hurtig sammenligning mellem Less og Sass i Shelby Mouldens artikel Comparison between LESS & SASS.

Responsivt design

Jeg lærte oprindeligt om responsivt design og Bootstrap ved hjælp af Codeschools HTML- og CSS-sti, men jeg fandt for nylig Udacitys kursus fra Google om Responsive Web Design Fundamentals for at være fantastisk til at dække det grundlæggende og videre på en langt mere komplet måde end Codeschool gjorde.

Du kan lave responsivt design uden yderligere rammer, men det er langt lettere ved hjælp af en responsiv ramme som Bootstrap. Bootstraps officielle dokumentation er meget godt lavet, så du skal ikke have noget problem med at komme i gang med det.

Hvis du har problemer med at forstå de grundlæggende principper, skal du læse Froonts blogindlæg om 9 grundlæggende principper for responsivt webdesign. Det har smukke rene og enkle animationer, der hjælper med at illustrere principperne for responsivt webdesign visuelt.

AngularJS

Jeg vidste ikke rigtig, hvad AngularJS var præcis dengang, men jeg vidste, at alle talte om det, og at hvis jeg ville blive webudvikler, havde jeg brug for at lære det. Jeg fandt Google-udviklers designbeslutninger i AngularJS til at give det bedste generelle overblik over, hvad AngularJS var, og hvordan det forbedrede fremstillingen af ​​webapplikationer.

Jeg tænkte først på at lære AngularJS gennem deres officielle dokumentation, men dette viste sig at være en frygtelig idé. Dokumentationen var ikke særlig let for begyndere, og den rodede formatering gjorde det svært at læse og forstå.

Derefter fortsatte jeg med at lære AngularJS gennem Codeschool. Med min positive erfaring med JavaScript- og CSS-kurserne også derfra forventede jeg intet mindre end et godt kursus. Jeg tog fejl. Kurset var en katastrofe fra start, da algoritmen, der bruges til at kontrollere, om du fik kodeeksemplet rigtigt, undertiden ikke fungerede korrekt og markerede din klart rigtige løsning som forkert. Der var endda tidspunkter, hvor alt det tog at rette det ødelagte valideringssystem var en sideopdatering. Hvad kursets indhold angår, var det heller ikke godt. Det gjorde et ok job med at forklare de grundlæggende komponenter i en AngularJS-applikation, men det gjorde et forfærdeligt job med at integrere disse i en reel applikation, hvilket efterlod mig med mange flere spørgsmål, end jeg startede med.

Efter lidt søgning i fora snuble jeg over Egghead.io(gratis / betalt) hvor jeg havde meget bedre held. Deres kursusmateriale var meget renere, mere kortfattet og mere komplet, hvilket gav en langt bedre oplevelse. For ikke at nævne, at de bortset fra deres kurser har bidstørrelse på 2-5 minutters lektioner, der dækker vigtige emner. (For eksempel: Hvad er en controller? Hvad er et filter? Hvad er $ scope?) Disse gør det virkelig nemt at forstå det grundlæggende. De har også nogle videoer, der kræver betaling, men det er normalt dem, der dækker mere avancerede vinkelemner, du først har brug for senere. Jeg tog deres AngularJS Fundamentals-kursus, og jeg var fuldt tilfreds med resultaterne (og blev også en stor fan af Egghead.ios kurser i processen).

Designmønstre

Designmønstre er dybest set genanvendelige kodeløsninger, der gentagne gange kan bruges til at løse almindelige softwareproblemer. At have et fundament på dette vil gøre dig langt mere konkurrencedygtig softwareudvikler på ethvert programmeringssprog. Dette vil også gøre det lettere for dig at forstå andres kode, da du hurtigt identificerer, hvilket designmønster de brugte på deres kode for bedre at forstå det.

Jeg fandt de 2 bedste kilder til at lære dette er doFactory's JavaScript Design Patterns og Addy Osmani's Learning JavaScript Design Patterns. Jeg fandt doFactory meget lettere at forstå, mens Addy Osmanis bog var meget mere komplet.

Chrome DevTools

Chrome er et af de mest kraftfulde værktøjer til en webudvikler. Jo hurtigere du mestrer det, jo mere tid kan du spare senere. Codeschools gratis kursus Explore and Master Chrome DevTools gør et godt stykke arbejde med at introducere dem.

Git (versionskontrol)

Ah, Git - det værktøj, jeg aldrig vidste, at jeg havde brug for, før jeg opdagede, hvad det kunne gøre. Git dybest set lader det dig holde styr på de ændringer, du foretager i din kode, så hvis ting går galt, kan du rulle tilbage til et tidligere tidspunkt. Det giver dig også mulighed for at se din kodes historie.

Jeg fandt CodeSchools gratis Prøv Github-kursus som en venlig måde at komme i gang på. Atlassians Git-træning var fremragende til at dække de mere avancerede tilgængelige kommandoer. Codeschools Git Learning Path er også fantastisk til at dække Gits grundlæggende.

NodeJS

Det tog ikke længe, ​​før jeg lærte, at det at have en grundlæggende forståelse af NodeJS ville hjælpe mig meget i min søgen efter at blive webudvikler (mere om dette snart).

Jeg prøvede Codeschools kurser på Node, men jeg fandt dem virkelig manglende indhold. Jeg fandt NodeSchool.io at være en langt bedre lærer til at få det grundlæggende rigtigt, og det var sjovt! Jeg elskede den praktiske tilgang, den tilbød, som svarede til Codeschool og Codecademy - med den ekstra forbedring, at jeg virkelig kørte NodeJS.

Task Runners (Grunt & Gulp)

Grunt og Gulp var en ganske stor overraskelse for mig, fordi jeg ikke havde nogen idé om, at sådanne værktøjer endda eksisterede - men jeg er meget glad for, at de gør det! Dybest set giver disse opgaveløbere dig mulighed for at automatisere almindelige opgaver. Husk for eksempel Less / Sass? Normalt skal du køre CSS-compileren manuelt hver gang du redigerer den for at kompilere CSS og derefter opdatere browseren. Ved hjælp af en task runner kan du indstille den til at se dine Less / Sass-filer for ændringer, og når den registrerer en ændring, skal du kompilere din CSS og automatisk opdatere browseren. Dette er uhyre nyttigt til at reducere din udviklingstid.

Der er to hovedopgaveløbere lige nu: Grunt og Gulp. Mens de gør nøjagtigt det samme, arbejder de på meget forskellige måder, hvor Grunt er meget mere detaljeret og konfigurationsorienteret, og Gulp er kortere til at skrive og foretrækker kode frem for konfiguration.

At kende NodeJS hjælper dig med at skrive bedre Grunt- og Gulp-filer, da begge kører på NodeJS . Du kan vælge, hvad du vil, men jeg fandt Gulp meget lettere at lære og skrive. Jeg foretrækker det stadig i dag på grund af sin minimalistiske - men alligevel kraftige - rørbaserede tilgang.

Jeg fandt Scotch.ios kurser om Grunt og Gulp at være blandt de bedste derude.

Udfordringer jeg stod over for på mit første job

Når jeg først havde dækket det grundlæggende inden for webudvikling, var jeg klar til mit første webudviklingssamtale til en indgangsstilling. Jeg vil ikke gå i detaljer om interviewet, da dette ikke er denne artikels hovedfokus. Men jeg vil sige, at jeg fik at vide, at min relativt stærke JavaScript-viden hjælper mig med at sikre positionen. (Tak, veltalende JavaScript!)

Jeg må sige, jeg var ret nervøs for mit første projekt. Det involverede at lave genanvendelige webkomponenter med HTML, CSS og JavaScript sammen med Bootstrap, Sass, Grunt som værktøj. T

de to største fejl, jeg først fandt, var:

  1. Frygt for fiasko. Fordi jeg var den nye fyr, var jeg konstant bange for, at min kode skulle være forkert eller dårligt lavet, så jeg brugte meget tid på at dobbelttjekke alt og fulgte kodning af bedste praksis. På grund af dette forsøgte jeg sjældent løsninger på kreative nye måder på grund af min frygt for, at det muligvis ikke fungerer korrekt i slutningen. Dette lukkede effektivt mit drev for at lære nye ting.
  2. Gør ting, fordi "X" person, der ved bedre end mig, sagde det. Jeg gjorde det meget først. Selvom det ikke er helt forkert, gør kun tingene på en bestemt måde, fordi "X" ekspert i sagen sagde det - uden at vide hvorfor - førte til, at jeg ikke rigtig vidste, hvornår til hvorfor tingene blev gjort som de var. Jeg lærte hurtigt, at der var undtagelser fra alt, og at du altid skulle vide årsagen til bedste praksis.

Heldigvis havde jeg en forstående teamleder under mit første projekt, der hjalp mig med at løse disse problemer. Han motiverede mig konstant til at prøve nye ting, selvom ting nogle gange gik galt. Han bad mig også om at sætte spørgsmålstegn ved alt - endda hans lære.

Med tiden lærte jeg min lektion. Fra da af har jeg altid været en person, der ser frem til at prøve nye ting. Jeg prøver altid at forstå, hvorfor der findes bedste praksis, når de har ret, og når de ikke gælder for en situation.

Brug af AngularJS i et faktisk projekt udgjorde også en ganske stor udfordring for mig. Dette var hovedsageligt fordi mange af de ting, jeg gjorde med det, gjorde jeg uden fuldt ud at forstå, hvorfor de skete. Jeg tænkte på det som "kantet magi."

Der var mange gange, at jeg ønskede, at jeg vidste, hvordan Angular faktisk fungerede, men det var skræmmende at se på dokumentationen.

Til sidst snuble jeg over en fantastisk bog kaldet Build Your Own AngularJS. Jeg læste ikke det hele, men ved at læse afsnittet om Scopes and Watchers og hvordan de arbejdede, afsløredes det virkelig, hvordan magien bag vinklet ikke rigtig var magisk. Det var bare en smart måde at vedligeholde databinding ved hjælp af snavset kontrol og indlejrede omfang. Jeg kan varmt anbefale denne bog til alle, der søger at forstå AngularJS fuldt ud.

Den anden udfordring, jeg stod over for et år senere, var, hvor hurtigt webudviklingen skred frem. Jeg havde lige mestret AngularJS og Grunt og følte mig meget stolt og mægtig - kun for snart at finde ud af, at Gulp og ReactJS var i horisonten. Og et år senere efter at have lært dem, begyndte Webpack at vinde terræn, og det måtte jeg også lære. Som du kan forestille dig, var en stor del af mig ret skuffet over, hvor hurtigt noget af min viden blev forældet. Men en kollega oplyste mig snart ved at fortælle mig noget, der ændrede, hvordan jeg betragtede biblioteker og rammer for evigt:

"Biblioteker og rammer kan blive forældede, men de begreber og løsninger, de foreslår, overlever ofte tidstesten."

Han havde ret. AngularJS er muligvis blevet forældet, men fuld forståelse af magien bag det hjalp mig med bedre at forstå Reacts webkomponentarkitektur, hvilket forbedrede Angular's Directives-koncept. Det hjalp mig også til at forstå, hvordan ReactJS fik så stor popularitet, samt hvilken slags fremtid der ventede.

Jeg kan ikke huske, at jeg stod over for andre store udfordringer på mine efterfølgende projekter. Men hvad jeg vil sige er, at i løbet af de to år, jeg har lavet webudvikling, var den # 1-ting, der har hjulpet med at få succes (ifølge mine egne kolleger) min spænding og min stærke drivkraft for altid at være på udkig for nye ting at lære. Jeg fandt snart ud af, at dette var en vindende kombination med webudvikling, da ting herover ændrer sig virkelig, virkelig hurtigt, med nye rammer og biblioteker, der konstant dukker op.

På bagsiden af ​​mønten var den anden ting, der hjalp mig et ton - og noget, jeg faktisk fandt ud af for nylig - at forstå, hvad jeg ikke skulle lære. Dette blev kritisk for min proces med at blive en bedre webudvikler.

Det er ikke ualmindeligt at se folk, der kritiserer det unormalt hurtige tempo i udviklingen af ​​webteknologier, eller hvordan et nyt JavaScript-bibliotek eller en ny ramme kommer ud næsten hver dag. Men med tiden så jeg lyset og forstod endelig:

Du behøver ikke at lære hvert nyt bibliotek eller ramme, der kommer ud.

Ofte er det en god idé at lave en simpel hej verdenseksempel-app, så du kan se, hvad en ramme tilbyder. Så kan du gå videre. Men normalt skal du prøve at fokusere på, hvad der bedst passer til dit projekts behov. Dette kan være svært i starten, men heldigvis findes der store steder som Stack Overflow, Medium og Reddit, hvor du kan finde nyttige diskussioner mellem rammerne og finde ud af, hvilke der passer bedst til dine specifikke brugssager.

Går videre

I de kommende år fortsatte jeg med konstant forbedring på følgende måder

JavaScript

Når du er færdig med Eloquent JavaScript, er det ret nemt at sige og føle, at du har mestret JavaScript, men så kommer Du kender ikke JS, og det ødelægger dig absolut (eller i det mindste gjorde det for mig). Denne bogserie (gratis forresten) blev nævnt for mig flere gange af nogle få senior webudviklere på kontoret som bogen at læse, og at kun indtil jeg har læst den, kan jeg sige, at jeg kender JavaScript fuldt ud. De havde ret, siden side efter side sprang det hele tiden mit sind om, hvor virkelig kompleks JavaScript virkelig var, såvel som mange, mange almindelige faldgruber, som ikke-erfarne og erfarne mennesker uden en ordentlig JavaScript-forståelse måtte have.

At læse denne bogserie åbnede virkelig mit sind, og jeg kan også varmt anbefale det til alle, der ønsker at kalde sig selv en ekspert JavaScript-udvikler. Når du først fik det ud af vejen, er der 2 ekstra ressourcer, som jeg stærkt anbefaler for at få en endnu mere, mere avanceret JavaScript-viden;

  • JavaScript, The Better Parts: En fantastisk tale af D. Crockford, der taler om JavaScript's største svagheder, det er "Foot Guns", og hvordan man bruger dem som dets styrker.
  • De to søjler i JavaScript: en solid artikel af den anerkendte JavaScript Medium-forfatter Eric Elliott, der taler om de to store søjler i JavaScript: Prototypisk arv og funktionel programmering

Når du har en dyb forståelse af JavaScript, skal du fortsætte med ECMASCript 2015 (også kendt som ES6), den seneste og nuværende JavaScript-standard. Smashing Magazines artikel ECMAScript 6 (ES6): Hvad er nyt i den næste version af JavaScript er en fantastisk kort gennemgang af, hvad der er nyt i ES6. Du kan prøve ES6 i browseren ved hjælp af Babels online transpiller.

CSS

CSS kan blive rodet og uorganiseret meget, meget hurtigt. Der har været foreslået en hel række forskellige metoder til at skrive renere CSS, men 2 skiller sig ud, hvilket jeg stærkt anbefaler, at du læser om ASAP for at forblive konkurrencedygtig:

  • SMACSS: Skalerbar og modulær arkitektur til CSS. En fleksibel guide til udvikling af små og store websteder.
  • BEM: en metode, der hjælper dig med at opnå genanvendelige komponenter og kodedeling i frontend.

Jeg foretrækker personligt SMACSS på grund af det renere udseende, men nogle virksomheder og CSS Frameworks bruger stadig BEM, så det er værd at kende begge.

Du skal også begynde at fokusere på din CSS's ydeevne. Smashing Magazines artikel Managing Mobile Performance Optimization og HTML5 Rocks artikel High Performance Animation gjorde et solidt stykke arbejde med at give et forspring på dette. En hurtig gennemlæsning af begge artikler skal give dig et solidt fundament.

JavaScript-bundlere

Nu skal du have en stærk forståelse af Grunt eller Gulp. Det næste trin er at tilføje en JavaScript-bundler til din task runner, hvilket giver mulighed for en mere modulær organisering af din JavaScript-applikation.

De to største spillere lige nu er:

  • Browserify: lader dig kræve moduler i browseren ved at samle alle dine afhængigheder.
  • Webpack: dybest set Browserify på steroider. Sværere at konfigurere og opsætte.

Scotch.ios mini-kursus Kom godt i gang med Browserify kan give dig en start med browserify, mens David Fox Powell-artikel Hvorfor kan ingen skrive en simpel webpack-tutorial? er en fantastisk, sjov at læse introduktion til webpack.

Personligt har jeg ikke brugt meget tid på at bruge webpack, men i min tid med det må jeg sige, at det har været fantastisk - selvom det er lidt sværere at konfigurere. Hvis du lige er begyndt, vil jeg gå til Browserify, da det er meget enklere at konfigurere. Bare vær opmærksom på, at webpack er fremtiden, og hvilke større projekter der begynder at bruge.

ReactJS

ReactJS vinder hurtigt popularitet, og det ser ikke ud til at bremse - i det omfang folk spørger "Dræber React Angular?"

Scotch.io's Learning React.js: Kom godt i gang og koncepter giver et solidt overblik over React. Når du har fået det ud af vejen, skal du fortsætte med Egghead.ios kursus om React Fundamentals, hvor du vil opbygge en fuldt fungerende ReactJS-app og derefter migrere den til ES6-syntaks. Du kan følge op med den officielle ReactJS-dokumentation, som er meget godt lavet og giver dig mulighed for fuldt ud at mestre den.

Da React kun er udsigten, anbefales det stærkt, at du lærer Redux. De fleste kurser om Redux er efter min mening lidt komplekse, men CSS Tricks Leveling Up with React: Redux scorer en god balance mellem enkelhed og at være informativ til at komme i gang med Redux.

Du har måske også hørt om Flux på dette tidspunkt, men hvis du spekulerer på, hvorfor du skal bruge Redux over Flux, skal du tjekke spørgsmålet om Stack Overflow Hvorfor bruge Redux over Facebook Flux? hvilket blev besvaret af Reduxs skaber!

Ser tilbage på mine fejl og hvad jeg lærte

Jeg lavede mange fejl i mine 2 år med at lære webudvikling. Alt i alt tror jeg, at min største fejl ikke var at mestre det grundlæggende, før jeg gik videre til biblioteker og rammer. Jeg antager, at dette gælder næsten alle programmeringssprog derude, men efter min mening gælder det endnu mere for JavaScript. Dette skyldes, at JavaScript på mange måder er et ødelagt sprog og indeholder en masse "Foot Guns" (du skulle have hørt om dette, hvis du så D. Crockfords tale om "JavaScript, de bedre dele", jeg nævnte tidligere). Disse kan gøre livet uudholdeligt hårdt, hvis du ikke forstår dem fuldt ud.

Jeg husker, at jeg engang havde sidst fast i et AngularJS-problem med $ scope, hvilket tog mig 3 dage at debugge, kun for at finde ud af, at det ikke engang var et AngularJS-problem, men et JavaScript-problem, som jeg forårsagede mig selv på grund af manglende forståelse for, hvordan dette fungerer.

Ren kode

Det er underligt, at jeg ikke ser dette talt om så ofte. Jeg plejede ikke altid at skrive ren kode, men ærligt talt er det en af ​​de ting, jeg er mest stolt af at have lært. Dette er fordi alle elsker at klage over, at deres sidste sted havde en af ​​de værste, grimeste kodebaser i verden. Så hvorfor kan ingen tale om, hvor stor deres sidste var? Hvordan deres kode endte så rent og godt lavet, at de var stolte af det?

Dette er en tendens, som jeg gerne vil ændre, og jeg tror, ​​at der kan gøres en forskel, hvis nok mennesker skubber på det. Stræb efter at gøre variabel- og funktionsnavne forståelige på engelsk, selvom du skal skrive lidt mere. Hvis du ikke gør det, vil det kun føre til, at du skal dokumentere det manuelt engang i fremtiden for at gøre det tydeligere. Dette vil også medføre, at din samlede kodebase bliver sværere at forstå af nye udviklere og dig selv. Ja, dig selv. Hvorfor dig selv? Fordi hvis du ikke håndhæver ren kode, hvad får dig til at tro, at dine kolleger skal håndhæve den og skrive ren kode, som du let kan forstå? Lad os gå foran med et godt eksempel.

Og hvis det ikke er et godt nok incitament, anerkender og værdsætter folk ofte rene kodeskribenter. Du finder ud af, at ved at skrive ren kode vil dine kolleger og venner nyde at arbejde sammen med dig endnu mere, og til gengæld vil du leve et lykkeligere liv.

jQuery

Nogle af jer bemærker måske, at jeg heller ikke lægger meget vægt på jQuery. Dette skyldes, at jeg efter min erfaring fandt ud af, at jQuery gjorde mig mere skade end godt i starten. Nogle af jer er muligvis ikke enige, men lad mig forklare: Da jeg først lærte det, var den generelle idé, jeg forstod, at jQuery var overalt, og at du kunne bruge det til stort set alt. På grund af dette blev jeg vant til at bruge jQuery til stort set alt, og for ethvert problem, jeg stødte på, ledte jeg efter en løsning til det, der brugte jQuery.

Gør mig ikke forkert, jQuery var fantastisk i min tid ved at bruge det, så fantastisk faktisk, at jeg blindt ignorerede, at 90% af det, jeg gjorde med jQuery, kunne gøres indfødt i moderne browsere i en lignende let syntaks.

Du tænker måske nu: ”Så hvad er der galt med det? jQuery vejer alligevel ikke så meget, og hvis du bruger det, ender du stadig med at skrive mindre kode, end hvis du gjorde tingene naturligt. ” Men at bruge jQuery over native API'er var ikke problemet. Problemet var, at hele min tankegang og alle de løsninger på almindelige problemer, jeg vidste indtil det tidspunkt, krævede, at jQuery fungerede. Og dette blev et kæmpe problem, da jeg fik mit første projekt og fik at vide, at jQuery ikke var en afhængighed.

Brug af jQuery gjorde mig ubrugelig uden det og fik mig til at ignorere de oprindelige metoder og løsninger, der altid har eksisteret. Det gjorde også alle mine løsninger mindre bærbare, da brug af dem krævede jQuery.

Siden da har jeg stræbt efter ikke at bruge jQuery, medmindre det er absolut nødvendigt og virkelig giver stor forbedring i effektivitet og læsbarhed til vores codebase (for eksempel tung DOM-manipulation).

Igen skal du ikke misforstå mig, jQuery er fantastisk, men hvis jeg kunne gå tilbage i tiden og møde mit tidligere jeg, der bare lærte webudvikling, vil jeg kraftigt fraråde mig at lære jQuery helt, indtil jeg har lært at gøre ting uden det. Hvis du har problemer med at udføre kontakten som jeg gjorde, skal du tjekke You Might Not Need jQuery.

Kurser

Hvad angår kursusmateriale; mens mange af CodeSchools kurser var fremragende (HTML & CSS-filialen var specielt fantastisk), selvom nogle få af deres kurser om rammer faldt fladt lidt (AngularJS, BackboneJS osv.).

Jeg tog også en hel del Pluralsight-kurser, som jeg ikke nævnte, for efter al denne tid har jeg nået den konklusion, at det at vælge deres læringsvej generelt er en dårlig idé og upålidelig . Da deres kurser er lavet af lærere, der ikke altid (efter min mening) er meget gode til at undervise, fandt jeg, at deres kursuskvalitet svinger meget, da deres kursuskvalitetsstandarder ikke er eksisterende. Jeg har haft kurser, hvor selv den, der giver kurset, lød som om han faldt i søvn. Og jeg har ærligt talt ikke opmærksomheden for at holde øje med et 6-10 timers kursus - og mange af dem holder så længe, ​​hvis ikke længere.

Jeg tilbragte en god 80–100 timers træning i Pluralsight, og jeg vil ærligt talt have en god del af det tilbage. Misforstå mig ikke, jeg havde et par fantastiske kurser om Pluralsight, men deres fokus på kvantitet over kvalitet fik mig virkelig til at spilde min tid. Jeg kunne have lært så meget mere, hvis jeg havde taget kurser fra bedre kilder som Egghead.io og CodeSchool, hvor de værdsætter mere kvantitetskvalitet.

Den eneste grund til, at jeg nogensinde kunne tænke på nogen, der bruger Pluralsight, er at tage et kursus, som intet andet websted har i noget mere uklar teknologi (som Installshield eller Xamarin), eller at tage et par meget specifikke kurser, som de ved blev meget godt modtaget og gennemgået (for eksempel John Papa's Angular Fundamentals).

Samlet set, hvis du vil bruge Pluralsight, skal du være sikker på at du tager kurser, der er håndplukket af en person, der tog dem først, og som anerkendes som høj kvalitet og nyttige.

Jeg prøvede også for nylig Team Treehouse-træning, og jeg må sige, jeg er forbløffet over kvaliteten, der gik ind i deres kurser, endda med at konkurrere med CodeSchool, og deres kursusmateriale er meget omfattende.

Efter at have gennemgået HTML-, CSS- og JavaScript-læringsstierne der, ser jeg, at du let kunne erhverve fundamentet for stort set alt. Tro mig ikke? Se bare på deres læringsspor og fortæl mig, at det ikke er fantastisk. Sikker på, det er lidt dyrt til $ 30 USD om måneden, men efter min mening er det utroligt det værd. (Jeg betaler for det lige nu for at lære WordPress, da jeg har brug for det til et freelance-projekt, og materialet er fantastisk).

Et ord om betalte kurser

Jeg følte et behov for at tale om dette, da jeg har bemærket den generelle enighed om, at du kan lære programmering uden at betale en krone og være lige så konkurrencedygtig som en, der betalte for et kursus. Selvom det er sandt, kan jeg ikke understrege nok den værdi, der betaler for den rigtige kurs. Sikker på, en hel del af det mest værdifulde kursusmateriale, jeg har skrevet om, er gratis, men meget af det er også betalt. Hovedsageligt fordi du nogle gange bare ikke kan slå at have nogen omhyggeligt at forklare tingene for dig på en visuel måde.

Ja, der er forfærdelige læringskurser, som jeg vil fraråde, da deres værdiproposition er tvivlsom (se Pluralsight), men andre som Egghead.io, CodeSchool og Team Treehouse tilbyder enestående bang-for-your-buck, på trods af deres relativt dyre månedligt abonnement ($ 25 - $ 30 om måneden). Derudover har de alle gratis 7–15 dages prøveversioner, så du kan se, hvilken der fungerer bedst for dig.

Hvis du spiller dine kort rigtigt, kan betaling af 1-2 måneder af en af ​​dem let få dig til den viden, du kun ellers ville få efter at have snublet over utallige artikler og blogindlæg over et år. De er ærligt talt så gode.

Så ja, de er ikke nødvendige, men hvis du har råd til mindst en måned, kan du være sikker på, at det vil give dig en stærk fordel.

Den hemmelige sauce til succes

Jeg har mødt mange udviklere i løbet af de sidste 2 år, hvor jeg har været webudvikler. Under min rejse har jeg mødt et par udviklere, der virkelig skiller sig ud - udviklere, der klart var i en liga for sig selv, og som jeg og alle andre så op til. Jeg fandt disse personer delte en hel del egenskaber, som jeg gerne vil dele med dig lige nu. Disse er efter min mening den hemmelige sauce til at være en succesrig webudvikler:

  • Elsker, hvad du gør. Dette er simpelthen det vigtigste kendetegn ved dem alle. Hvis du ikke elsker hvad du laver (det være sig CSS Styling eller JavaScript), vil det virkelig vises i hvad du gør. De, der brænder for, hvad de gør, skiller sig ofte tydeligt ud fra mængden.
  • Vær generøs og del din viden . Det er meget let at ønske at holde det nye CSS / JavaScript-hack, du fandt, der løser projektets problemer hemmeligt, men gør det ikke. De mennesker, der deler deres viden mest, er ofte de mest værdifulde, da de kan placeres i enhver form for hold og forbedre dets kvalitet med en enorm margin.
  • Vær altid på udkig efter nye ting . De fleste af de succesrige udviklere, jeg har mødt, deler dette fælles træk. Uanset om det er ved at læse blogs, bruge masser af tid på programmering relaterede diskussioner eller endda tale om, hvad der er nyt i webudvikling i frokostpauserne. At være på udkig efter nye ting hele tiden giver de bedste udviklere altid mulighed for at være foran kurven.

Den korteste rute

Whew, denne artikel tog et stykke tid at afslutte (6 timer og optælling). Vi er næsten færdige! Du undrer dig måske: “Ok, sej historie, men hvad er den hurtigste rute?” Og så, her er det.

Jeg har organiseret dette på den måde, at jeg ville tage det, hvis jeg kunne gå tilbage og gøre tingene rigtigt. Jeg tilføjede også et par bonusser, som jeg gerne ville have haft dengang. God fornøjelse!

Javascript

  1. CodeSchool eller Treehouse's Javascript-læringssti (betalt) ELLER Codecademy's Javascript-kursus
  2. Veltalende JavaScript
  3. Du kender ikke JS
  4. JS: Den rigtige vej
  5. Lær ES6 af Egghead.io

HTML & CSS

  1. CodeSchool eller Treehouse's HTML & CSS-læringssti (betalt) ELLER HTML og CSS: Design og opbyg websteder af John Ducket ELLER Codecademys HTML & CSS-kursus.
  2. Specifikationer for CSS-specificitet af CSS-tricks
  3. Lær CSS Layout
  4. SMACSS
  5. 9 grundlæggende principper for responsivt webdesign fra Front
  6. Responsive Web Design Fundamentals af Google om Udacity (Tag, hvis du ikke brugte CodeSchool eller Treehouse læringssti)
  7. Håndtering af mobil ydeevneoptimering ved Smashing Magazine ELLER Browser Rendering Optimization og Website Performance Optimization af Google på Udacity
  8. Web-grundlæggende af Google

Udvikler værktøjer

  1. Udforsk og mestre DevTools af CodeSchool
  2. Lær Git af Codecademy og Prøv Github af Codeschool
  3. Introduktion til Linux-kommandoer fra Smashing Magazine
  4. Automatiser dine opgaver let med Gulp.js af Scotch.io

AngularJS

  1. Designbeslutninger i AngularJS af Google Developers (Introduktion til AngularJS)
  2. AngularJS grundlæggende af Egghead.io
  3. John Papas kantede styleguide
  4. Oprettelse af en enkelt side Todo-app med node og vinkel (MEAN) af Scotch.io
  5. AngularJS applikationsstruktur af Egghead.io (betalt) ELLER Scotch.io's kantede kurser

ReactJS

  1. Learning React.js: Kom godt i gang og koncepter af Scotch.io
  2. Introduktion til webpack af Egghead.io
  3. React Fundamentals af Egghead.io
  4. Leveling Up with React: Redux af CSS Tricks

Bagende

  1. NodeJS tutorials af NodeSchool.io
  2. Hvordan jeg forklarede REST til min kone
  3. Oprettelse af en enkelt side Todo-app med node og vinkel af Scotch.io (Node, ExpressJS, MongoDB, Angular, REST)

Bonus: Ressourcer

Helt valgfrit, men nogle af mine yndlingsartikler og ressourcer, som jeg har fundet gennem årene, som du sandsynligvis vil elske, hvis du er interesseret i deres respektive emne.

  • Webdesign på 4 minutter. En meget kreativ og original interaktiv tutorial, der lærer dig det grundlæggende i webdesign.
  • Awwards. Leder du efter inspiration til webdesign? Stop med at lede.
  • Hvorfor ansættelse er så hårdt inden for teknologi af Eric Elliott. Her gør Eric et fantastisk stykke arbejde med at opsummere, hvordan det er overraskende svært at finde gode udviklere, og hvordan man bliver en.
  • NoSQL databasesystemer mega sammenligning af Kristof Kovacs. Dette er en fremragende sammenligning mellem de mest populære NoSQL-databasesystemer derude. MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, de og flere er alle her.
  • XSS spil. Cross-site scripting (XSS) bugs er en af ​​de mest almindelige og farlige typer af sårbarheder i webapplikationer. Ved hjælp af denne fantastiske ressource kan du lære at finde og udnytte XSS-bugs og hvordan man forhindrer dem i at forekomme i din webapplikation.
  • Sådan skriver du uvedligeholdelig kode. Sjov artikel om hvordan ikketilskriv vedligeholdelig, ren kode.

Bonus: Mine værktøjer

Jeg troede, det ville også være rart at dele nogle af de værktøjer, jeg opdagede (nogle velkendte, andre ikke så meget), der har gjort mit liv lettere som webudvikler, så her er de.

  • Jetbrains Webstorm: Fuldt udstyret Webudvikling IDE. (Min valgte redaktør) Betalt, men tilbyder en 1 års gratis licens til studerende.
  • Atom.io: Meget udvidelig teksteditor med IDE-lignende funktioner, der konkurrerer med Webstorm. Ledig.
  • Sublim tekst: Lynhurtig teksteditor med plugins-understøttelse og et æstetisk tiltalende udseende. (Jeg holder normalt Webstorm / Atom installeret som IDE til seriøst arbejde, og Sublime Text installeret til hurtige redigeringer af filer.)
  • caniuse.com: Browsersupport er kritisk for websteder, og dette er ressourcen nr. 1 til at finde ud af, hvilke funktioner der understøttes af hvilken browserversion og hvilke.
  • Cloud 9: Cloudbaseret udviklingsmiljø og IDE med Git-support, der kører på Linux. Fantastisk til ekstern programmering og test af NodeJS eller andre serversidesæt uden at skulle installere noget på din maskine
  • CodePen, Plunker og JSFiddle: Fantastiske skybaserede legepladser, der giver dig mulighed for at lave hurtige HTML / CSS / JS-demoer, du kan dele, eller arbejde på senere, hvis du opretter en gratis konto. CodePen er ofte bedst til CSS-relaterede ting på grund af sin minimalistiske grænseflade og overflod af CSS-relaterede funktioner, Plunker til JavaScript-demoer på grund af dens kraftfulde JS-funktioner og JSFiddle til demoer, som du ønsker at samarbejde med andre i realtid takket være den live editor delingssamarbejdsfunktion.
  • Vanilleliste: Et lager af JavaScript-plugins og biblioteker, der kun bruger vanilje JavaScript (hvilket betyder, at de ikke kræver nogen biblioteker for at fungere, som jQuery)
  • YouMightNotNeedjQuery: Det gør du sandsynligvis ikke. Se selv.
  • PublicAPIs: Har du nogensinde spekuleret på, hvilke offentlige API'er der findes? Stop med at lede!
  • Gravit.io: Cloudbaseret designapplikation, der konkurrerer med Adobe Illustrator. (Gratis!) Nyttigt til hurtige mockups og webdesign.
  • Adobe Kuler: Webapp til at hjælpe dig med at skabe harmoniske farvekombinationer til ethvert websted. Har også et "Udforsk" udstillingsvindue af farvepaletter bygget af andre designere samt et klassificeringssystem, der hjælper med at inspirere dig.
  • Navngiv den farve: Stop med at bruge masser af tid på at finde ud af, hvordan du navngiver dine farvevariabler i mindre / sass, og brug bare deres retmæssige navn med denne webapp

Konklusion

Jeg vil bare sige, at jeg virkelig nød at skrive dette, og det gør mig virkelig glad for at have endelig været i stand til at give noget tilbage til det utroligt støttende programmeringssamfund overalt.

Som nogle af jer allerede har bemærket, er dette mit første blogindlæg, men du kan være sikker på, at jeg planlægger at skrive mere. Bare forvent ikke en hver uge. Husk: kvalitet frem for kvantitet!

Hvis nogen af ​​jer har spørgsmål tilbage, er du velkommen til at efterlade en kommentar, og jeg vil gøre mit bedste for at vende tilbage til dig ASAP.

Jeg håber, det var nyttigt for jer, indtil næste gang, bedst!

Opdatering fra marts '18 : For de nysgerrige, hvad jeg har lavet, her er en hurtig statusopdatering!

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