Mein Weg zum Webentwickler von Grund auf ohne CS-Abschluss (und was ich daraus gelernt habe)

Zuerst möchte ich mich vorstellen. Mein Name ist Sergei Garcia und ich bin ein Vollzeit-Front-End-Entwickler mit 2 Jahren Erfahrung. In dieser Zeit habe ich sowohl für ein Forbes 500-Beratungsunternehmen als auch für ein kleines Unternehmen als Front-End-Entwickler gearbeitet.

Das hört sich vielleicht nicht nach viel Erfahrung an, aber mein zweites Jahr als Entwickler zu beenden, war ein großer Meilenstein für mich. Dies liegt daran, dass ich keine wirklichen Erfahrungen in der Webentwicklung hatte - und nicht viel Programmiererfahrung im Allgemeinen, abgesehen von einigen grundlegenden C # - und Java-Schulungen, die ich in einigen Online-Kursen erhalten habe. Ich hatte auch keinen Abschluss in Informatik, da ich einen Abschluss in IT-Projektmanagement hatte.

Ich habe trotz der Hilfe, die ich von wunderbaren Ressourcen wie Medium, Stack Overflow und Reddits Programmiersubreddits erhalten habe, nie über meine Erfahrungen geschrieben. Also habe ich heute beschlossen, das zu ändern. Heute werde ich Ihnen mitteilen, was richtig gelaufen ist und was nicht. Wenn Sie sich also auf diese Reise begeben, haben Sie mehr Glück als ich.

Ich weiß, dass es eine Menge solcher Artikel gibt, aber nicht sehr viele diskutieren den Prozess mit dem Vorteil von zwei zusätzlichen Jahren im Nachhinein.

Ich beginne mit meiner Reise, einschließlich der Dinge, die auf dem Weg schief gelaufen sind. Wenn Sie sich nur darum kümmern, was meine Vorschläge für den kürzesten Weg zum Webentwickler von Grund auf sind, können Sie mit dem letzten Abschnitt fortfahren: Der kürzeste Weg.

Also, ohne weitere Umstände, fangen wir an!

Grundlagen erlernen

Nachdem ich mich entschieden hatte, in die Webentwicklung einzusteigen, lautete meine erste Frage: „Was lerne ich?“ Nach einigen Recherchen habe ich meinen Lernpfad auf der Grundlage der meisten Einstiegspositionen für Webentwickler festgelegt :

  • JavaScript
  • HTML & CSS
  • CSS-Präprozessoren (Less & Sass)
  • Sich anpassendes Design
  • AngularJS
  • Designmuster
  • Git
  • NodeJS
  • Aufgabenläufer

So lief es.

Javascript

Ich begann meine Reise mit dem Erlernen von JavaScript über CodeSchool (kostenpflichtig) und Codecademy (kostenlos). Wenn Sie diese nicht kennen, handelt es sich um großartige Websites, auf denen Sie das Codieren durch Codieren im Browser erlernen können.

Ich fand, dass Lernressourcen wie diese die besten waren, als Sie gerade anfingen. Beachten Sie jedoch, dass diese Lernmethode schnell anstrengend wird, wenn Sie sich mit fortgeschritteneren Themen befassen, da die Algorithmen zur Überprüfung, ob Sie das Codebeispiel richtig gelöst haben, einige Genauigkeitsprobleme aufweisen. Beide Einführungskurse in JavaScript waren hervorragend und ich kann sie nur empfehlen.

Nachdem ich die Grundlagen aus dem Weg geräumt hatte, las ich das eloquente Javascript: Eine moderne Einführung in die Programmierung von Haverbeke (kostenlos), um eine stärkere JavaScript-Grundlage zu erhalten.

Dieses Buch wurde mir von vielen Leuten in den JavaScript-Foren aus gutem Grund als ein Muss empfohlen. Dieses Buch war schwierig - vor allem, wenn Sie gerade wie damals Programmieren gelernt haben. Aber ich bin froh, dass ich nicht aufgegeben und dabei geblieben bin. Es war phänomenal aufgrund des großen Umfangs der Programmierkonzepte, die es abdeckt, auch wenn es manchmal etwas skrupellos war. Überspringen Sie auf keinen Fall die Code-Herausforderungen. Wenn Sie dieses Buch fertiggestellt haben, können Sie schließlich mit Zuversicht sagen, dass Sie ein gutes Verständnis für JavaScript haben.

Optional können Sie auch jQuery lernen (obwohl ich es noch nicht empfehle - dazu später mehr). Sie können es im jQuery-Kurs von CodeSchool lernen.

HTML & CSS

Nachdem ich JavaScript gelernt hatte, lernte ich die Grundlagen von HTML & CSS und Webdesign über den HTML & CSS-Lernpfad von CodeSchool. Diese Kurse sind auch heute noch meine Favoriten, da das Tempo großartig ist und ich aufgrund des gesamten Umfangs, den sie abdecken, eine stärkere Grundlage dafür bekommen habe.

Sie können dies auch leicht für etwas wie den HTML- und CSS-Kurs der Codecademy ändern und dennoch ähnliche Ergebnisse erzielen. Oder wenn Sie sich einer Herausforderung stellen möchten, ist der Kurs Einführung in HTML und CSS von Udacity weitaus vollständiger und etwas anspruchsvoller.

Bonus: Wenn Sie Jon Ducketts Buch "HTML und CSS: Websites entwerfen und erstellen" in den Händen halten können, ist es auch ein guter Ausgangspunkt für das Erlernen von HTML und CSS (mit einer Prise Webdesign). Es hat eine hohe Bewertung (4,7 / 5 bei Amazon) und bietet einen soliden Einstieg in die Welt der Webentwicklung. Es ist ein wunderschönes Buch, dank seines klaren Designs mit großen Buchstaben und bunten Seiten. Ich komme oft darauf zurück, um es zu bewundern.

Less / Sass

Für Unbekannte sind Less & Sass CSS-Transpiler, mit denen Sie CSS eleganter schreiben können. Auf diese Weise können Sie Dinge tun, die normalerweise nicht unterstützt werden, z. B. das Verschachteln von CSS-Regeln. Sobald dies erledigt ist, kompilieren diese CSS-Transpiler Ihren Code und konvertieren ihn in normales CSS.

Derzeit gibt es zwei große CSS-Transpiler: Less und Sass. Sass ist das populärere, aber ich fand es einfacher, zuerst weniger zu lernen, vor allem, weil für die Verwendung von Sass auf Ihrem Computer auch Ruby installiert werden muss, was mir nicht gefiel.

Mit dem Online Less Compiler von WinLess und den Codebeispielen erhalten Sie einen schnellen und vollständigen Überblick über Less, um zu sehen, wie sich Ihr Less-Code in CSS verwandelt. Sie können Sass auch online mit SassMeister testen (ohne Codebeispiele).

Es spielt keine Rolle, ob Sie zuerst Less oder Sass lernen. Sie sind sich sehr ähnlich. Wenn Sie also einen kennen, kennen Sie den anderen ziemlich genau. Einen guten Vergleich zwischen Less und Sass finden Sie in Shelby Mouldens Artikel Vergleich zwischen LESS & SASS.

Sich anpassendes Design

Ursprünglich habe ich mithilfe des HTML- und CSS-Pfads von Codeschool etwas über Responsive Design und Bootstrap gelernt, aber kürzlich fand ich Udacitys Kurs zu Responsive Web Design Fundamentals großartig, um die Grundlagen und darüber hinaus umfassender zu behandeln als Codeschool.

Sie können reaktionsschnelles Design ohne zusätzliches Framework ausführen. Mit Hilfe eines reaktionsschnellen Frameworks wie Bootstrap ist dies jedoch viel einfacher. Die offizielle Dokumentation von Bootstrap ist sehr gut erstellt, sodass Sie keine Probleme haben sollten, damit zu beginnen.

Wenn Sie Probleme haben, die Grundprinzipien zu verstehen, lesen Sie Froonts Blogbeitrag über 9 Grundprinzipien des responsiven Webdesigns. Es hat schöne, saubere und einfache Animationen, die helfen, die Prinzipien des reaktionsschnellen Webdesigns visuell zu veranschaulichen.

AngularJS

Ich wusste damals nicht genau, was AngularJS war, aber ich wusste, dass alle darüber sprachen und dass ich es lernen musste, wenn ich Webentwickler werden wollte. Ich habe die Designentscheidungen von Google Developer in AngularJS gefunden, um einen allgemeinen Überblick darüber zu erhalten, was AngularJS war und wie es die Erstellung von Webanwendungen verbessert hat.

Ich dachte zuerst daran, AngularJS anhand ihrer offiziellen Dokumentation zu lernen, aber das stellte sich als schreckliche Idee heraus. Die Dokumentation war für Anfänger nicht sehr einfach und die überfüllten Formatierungen erschwerten das Lesen und Verstehen.

Ich fuhr dann fort, AngularJS durch Codeschool zu lernen. Aufgrund meiner positiven Erfahrungen mit den JavaScript- und CSS-Kursen auch von dort habe ich nichts weniger als einen großartigen Kurs erwartet. Ich hab mich geirrt. Der Kurs war von Anfang an eine Katastrophe, da der Algorithmus, mit dem überprüft wurde, ob das Codebeispiel richtig war, manchmal nicht richtig funktionierte und Ihre eindeutig richtige Lösung als falsch markierte. Es gab sogar Zeiten, in denen das kaputte Validierungssystem nur durch eine Seitenaktualisierung behoben werden konnte. Der Inhalt des Kurses war auch nicht besonders gut. Das Erklären der grundlegenden Komponenten einer AngularJS-Anwendung war in Ordnung, aber das Integrieren dieser Komponenten in eine reale Anwendung war schrecklich, und ich stellte weit mehr Fragen als zu Beginn.

Nach einigem Suchen in den Foren bin ich auf Egghead.io gestoßen (kostenlos / bezahlt), wo ich viel mehr Glück hatte. Ihr Kursmaterial war viel sauberer, prägnanter und vollständiger, was zu einer weitaus besseren Erfahrung führte. Abgesehen von ihren Kursen bieten sie auch 2-5-minütige Lektionen zu wichtigen Themen an. (Zum Beispiel: Was ist ein Controller? Was ist ein Filter? Was ist $ scope?) Diese machen es wirklich einfach, die Grundlagen zu verstehen. Sie haben auch einige Videos, die kostenpflichtig sind, aber normalerweise behandeln sie fortgeschrittenere Themen, die Sie erst später benötigen werden. Ich habe an ihrem AngularJS Fundamentals-Kurs teilgenommen und war mit den Ergebnissen voll zufrieden (und wurde dabei auch ein großer Fan von Egghead.ios Kursen).

Designmuster

Entwurfsmuster sind im Grunde wiederverwendbare Codelösungen, mit denen häufig auftretende Softwareprobleme wiederholt gelöst werden können. Wenn Sie auf dieser Grundlage arbeiten, werden Sie in jeder Programmiersprache zu einem weitaus wettbewerbsfähigeren Softwareentwickler. Dies erleichtert Ihnen auch das Verständnis des Codes anderer Personen, da Sie schnell erkennen können, welches Entwurfsmuster sie für ihren Code verwendet haben, um ihn besser zu verstehen.

Ich fand die 2 besten Quellen, um dies zu lernen, die JavaScript-Entwurfsmuster von doFactory und die JavaScript-Entwurfsmuster von Addy Osmani. Ich fand doFactory viel einfacher zu verstehen, während Addy Osmanis Buch viel vollständiger war.

Chrome DevTools

Chrome ist eines der leistungsstärksten Tools für Webentwickler. Je eher Sie es beherrschen, desto mehr Zeit können Sie später sparen. Der kostenlose Kurs Explore and Master Chrome DevTools von Codeschool leistet einen großartigen Beitrag zur Einführung.

Git (Versionskontrolle)

Ah, Git - das Tool, von dem ich nie wusste, dass ich es brauchte, bis ich herausfand, was es kann. Grundsätzlich können Sie die Änderungen, die Sie an Ihrem Code vornehmen, nachverfolgen, sodass Sie bei einem Fehler zu einem früheren Zeitpunkt zurückkehren können. Außerdem können Sie den Verlauf Ihres Codes anzeigen.

Ich fand, dass der kostenlose Try Github-Kurs von CodeSchool ein freundlicher Einstieg ist. Atlassians Git-Training deckte hervorragend die fortgeschritteneren Befehle ab. Der Git-Lernpfad von Codeschool eignet sich auch hervorragend, um die Grundlagen von Git zu vermitteln.

NodeJS

Es dauerte nicht lange, bis ich erfuhr, dass mir ein grundlegendes Verständnis von NodeJS bei meinem Streben, Webentwickler zu werden, sehr helfen würde (mehr dazu bald).

Ich habe die Kurse von Codeschool auf Node ausprobiert, aber ich fand, dass sie wirklich inhaltsmangelhaft sind. Ich fand, dass NodeSchool.io ein viel besserer Lehrer ist, um die Grundlagen richtig zu machen, und es hat Spaß gemacht! Ich mochte den praktischen Ansatz, der Codeschool und Codecademy ähnelte - mit der zusätzlichen Verbesserung, dass ich wirklich NodeJS ausführte.

Aufgabenläufer (Grunt & Gulp)

Grunzen und Schlucken waren eine große Überraschung für mich, da ich keine Ahnung hatte, dass es solche Tools überhaupt gibt - aber ich bin sehr froh, dass sie existieren! Grundsätzlich können Sie mit diesen Task-Läufern allgemeine Aufgaben automatisieren. Erinnern Sie sich zum Beispiel an Less / Sass? Normalerweise müssten Sie den CSS-Compiler jedes Mal manuell ausführen, wenn Sie eine Bearbeitung vornehmen, um das CSS zu kompilieren, und dann den Browser aktualisieren. Mit einem Task Runner können Sie festlegen, dass Ihre Less / Sass-Dateien auf Änderungen überwacht werden. Wenn eine Änderung festgestellt wird, kompilieren Sie Ihr CSS und aktualisieren Sie den Browser automatisch. Dies ist äußerst nützlich, um Ihre Entwicklungszeit zu verkürzen.

Momentan gibt es zwei Haupt-Task-Läufer: Grunt und Gulp. Während sie genau dasselbe tun, arbeiten sie auf sehr unterschiedliche Weise, wobei Grunt viel ausführlicher und konfigurationsorientierter ist und Gulp kürzer ist, um Code zu schreiben, und Code der Konfiguration vorzieht.

Wenn Sie NodeJS kennen, können Sie bessere Grunt- und Gulp-Dateien schreiben, da beide auf NodeJS ausgeführt werden. Sie können wählen, was Sie wollen, aber ich fand Gulp viel einfacher zu lernen und zu schreiben. Ich bevorzuge es noch heute wegen seines minimalistischen - und dennoch kraftvollen - Pipe-basierten Ansatzes.

Ich fand, dass Scotch.ios Kurse zu Grunt und Gulp zu den besten auf dem Markt gehören.

Herausforderungen, vor denen ich bei meinem ersten Job stand

Nachdem ich die Grundlagen der Webentwicklung behandelt hatte, war ich bereit für mein erstes Webentwicklungsinterview für eine Einstiegsposition. Ich werde nicht näher auf das Interview eingehen, da dies nicht das Hauptaugenmerk dieses Artikels ist. Aber ich werde sagen, dass mir gesagt wurde, dass meine relativ guten JavaScript-Kenntnisse mir helfen, die Position zu sichern. (Danke, beredtes JavaScript!)

Ich muss sagen, ich war bei meinem ersten Projekt ziemlich nervös. Dazu gehörten wiederverwendbare Webkomponenten mit HTML, CSS und JavaScript sowie Bootstrap, Sass und Grunt als Werkzeug. T

Die zwei größten Fehler, die ich zuerst fand, waren:

  1. Angst vor dem Scheitern. Da ich der neue Typ war, hatte ich ständig Angst, dass mein Code falsch oder schlecht geschrieben ist, und verbrachte daher viel Zeit damit, alles zu überprüfen und mich an die Best Practices für das Codieren zu halten. Aus diesem Grund habe ich selten versucht, Lösungen auf kreative Weise zu finden, weil ich befürchtete, dass sie am Ende nicht richtig funktionieren könnten. Dadurch wurde mein Antrieb, neue Dinge zu lernen, effektiv gestoppt.
  2. Dinge tun, weil "X" -Person, die es besser weiß als ich, es sagte. Anfangs habe ich das viel gemacht. Obwohl es nicht völlig falsch ist, Dinge auf eine bestimmte Art und Weise zu tun, nur weil der „X“ -Experte dies sagte - ohne zu wissen, warum - führte dazu, dass ich nicht wirklich wusste, wann die Dinge so gemacht wurden, wie sie waren. Ich habe schnell gelernt, dass es bei allem Ausnahmen gibt und dass Sie immer den Grund für die Best Practices kennen sollten.

Zum Glück hatte ich bei meinem ersten Projekt einen verständnisvollen Teamleiter, der mir half, diese Probleme zu lösen. Er hat mich ständig motiviert, neue Dinge auszuprobieren, auch wenn manchmal etwas schief gelaufen ist. Er sagte mir auch, ich solle alles in Frage stellen - sogar seine Lehren.

Mit der Zeit habe ich meine Lektion gelernt. Von da an war ich immer eine Person, die sich darauf freut, neue Dinge auszuprobieren. Ich versuche immer zu verstehen, warum es Best Practices gibt, wann sie richtig sind und wann sie nicht auf eine Situation zutreffen.

Die Verwendung von AngularJS in einem tatsächlichen Projekt war für mich auch eine große Herausforderung. Dies war hauptsächlich darauf zurückzuführen, dass ich viele Dinge, die ich damit gemacht habe, getan habe, ohne vollständig zu verstehen, warum sie passiert sind. Ich habe es als "eckige Magie" betrachtet.

Ich wünschte mir oft, ich wüsste, wie Angular tatsächlich funktioniert, aber es war beängstigend, die Dokumentation zu betrachten.

Irgendwann bin ich auf ein erstaunliches Buch mit dem Titel Build Your Own AngularJS gestoßen. Ich habe nicht alles gelesen, aber als ich den Abschnitt über Scopes und Watchers gelesen habe und wie sie wirklich funktionierten, habe ich enthüllt, wie die Magie hinter Angular nicht wirklich magisch war. Es war nur eine clevere Möglichkeit, die Datenbindung mithilfe von Dirty Checks und verschachtelten Bereichen aufrechtzuerhalten. Ich kann dieses Buch jedem empfehlen, der AngularJS vollständig verstehen möchte.

Die andere Herausforderung, mit der ich ein Jahr später konfrontiert war, war der schnelle Fortschritt der Webentwicklung. Ich hatte gerade AngularJS und Grunt gemeistert und fühlte mich alle stolz und mächtig - nur um bald herauszufinden, dass Gulp und ReactJS am Horizont waren. Und ein Jahr später, nachdem ich sie gelernt hatte, gewann Webpack an Boden, und das musste ich auch lernen. Wie Sie sich vorstellen können, war ein großer Teil von mir ziemlich enttäuscht darüber, wie schnell ein Teil meines Wissens veraltet war. Aber ein Kollege hat mich bald aufgeklärt, als er mir etwas erzählte, das meine Sicht auf Bibliotheken und Frameworks für immer veränderte:

„Bibliotheken und Frameworks sind möglicherweise veraltet, aber die von ihnen vorgeschlagenen Konzepte und Lösungen überstehen oft den Test der Zeit.“

Er hatte recht. AngularJS ist vielleicht veraltet, aber das vollständige Verständnis der Magie dahinter hat mir geholfen, die Architektur der Webkomponenten von React besser zu verstehen, die das Konzept der Angular-Direktiven verbessert hat. Es half mir auch zu verstehen, wie ReactJS so populär wurde und welche Zukunft auf mich wartete.

Ich kann mich nicht erinnern, dass ich bei meinen nachfolgenden Projekten vor größeren Herausforderungen gestanden habe. Aber was ich sagen werde ist, dass im Laufe der 2 Jahre, in denen ich Webentwicklung betrieben habe, meine Aufregung und mein starker Drang, immer auf der Hut zu sein, die erste Sache waren, die zum Erfolg beigetragen hat (meinen eigenen Kollegen zufolge) für neue Dinge zu lernen. Ich stellte schnell fest, dass dies eine gewinnbringende Kombination mit der Webentwicklung ist, da sich die Dinge hier sehr, sehr schnell ändern und ständig neue Frameworks und Bibliotheken entstehen.

Auf der anderen Seite der Medaille war das andere, was mir sehr geholfen hat - und was ich erst kürzlich herausgefunden habe - zu verstehen, was ich nicht lernen sollte. Dies wurde entscheidend für meinen Prozess, ein besserer Webentwickler zu werden.

Es ist nicht ungewöhnlich, dass Menschen das ungewöhnlich schnelle Tempo der Entwicklung von Webtechnologien oder die fast tägliche Veröffentlichung einer neuen JavaScript-Bibliothek oder eines neuen Frameworks kritisieren. Aber mit der Zeit sah ich das Licht und verstand schließlich:

Sie müssen nicht jede neue Bibliothek oder jedes neue Framework erlernen.

Häufig ist es eine gute Idee, eine einfache Beispiel-App für hallo world zu erstellen, damit Sie sehen können, was ein Framework bietet. Dann können Sie weitermachen. In der Regel sollten Sie sich jedoch darauf konzentrieren, was den Anforderungen Ihres Projekts am besten entspricht. Dies kann anfangs schwierig sein, aber dankenswerterweise gibt es großartige Orte wie Stack Overflow, Medium und Reddit, an denen Sie nützliche Diskussionen zwischen Frameworks finden und herausfinden können, welche für Ihre spezifischen Anwendungsfälle am besten geeignet sind.

Weitergehen

In den kommenden Jahren habe ich mich auf folgende Weise kontinuierlich verbessert

JavaScript

Sobald Sie Eloquent JavaScript beendet haben, ist es ziemlich einfach zu sagen und zu fühlen, dass Sie JavaScript beherrschen, aber dann kommt Sie kennen JS nicht und es zerstört Sie absolut (oder hat es zumindest mir angetan). Diese Buchserie (übrigens kostenlos) wurde mir von einigen erfahrenen Webentwicklern im Büro mehrmals als das zu lesende Buch erwähnt, und nur bis ich es gelesen habe, kann ich sagen, dass ich JavaScript vollständig kenne. Sie hatten Recht, da es mich Seite für Seite in den Bann zog, wie komplex JavaScript wirklich ist, und auch viele, häufig auftretende Fallstricke, die unerfahrene und erfahrene Menschen ohne ein angemessenes JavaScript-Verständnis haben könnten.

Die Lektüre dieser Buchserie hat mich wirklich in den Bann gezogen, und ich kann sie auch jedem empfehlen, der sich selbst als erfahrener JavaScript-Entwickler bezeichnen möchte. Sobald Sie das aus dem Weg geräumt haben, gibt es zwei zusätzliche Ressourcen, die ich dringend empfehlen kann, um noch weiter fortgeschrittene JavaScript-Kenntnisse zu erwerben.

  • JavaScript, The Better Parts: Ein erstaunlicher Vortrag von D. Crockford über die größten Schwächen von JavaScript, die "Foot Guns", und wie man sie als Stärken nutzt.
  • Die zwei Säulen von JavaScript: Ein solider Artikel des anerkannten JavaScript-Medienautors Eric Elliott, der über die zwei großen Säulen von JavaScript spricht: Prototypische Vererbung und funktionale Programmierung

Wenn Sie sich mit JavaScript auskennen, fahren Sie mit ECMASCript 2015 (auch als ES6 bekannt), dem neuesten und aktuellen JavaScript-Standard, fort. Der Artikel des Smashing Magazine, ECMAScript 6 (ES6): Was ist neu in der nächsten Version von JavaScript? Sie können ES6 im Browser mit dem Online-Transpiler von Babel testen.

CSS

CSS kann sehr, sehr schnell chaotisch und unorganisiert werden. Es wurden einige verschiedene Methoden vorgeschlagen, um saubereres CSS zu schreiben, aber 2 heben sich hervor, und ich empfehle Ihnen nachdrücklich, über ASAP zu lesen, um wettbewerbsfähig zu bleiben:

  • SMACSS: Skalierbare und modulare Architektur für CSS. Ein flexibler Leitfaden für die Entwicklung kleiner und großer Websites.
  • BEM: Eine Methode, mit der Sie wiederverwendbare Komponenten und die gemeinsame Nutzung von Code im Front-End erreichen können.

Ich persönlich bevorzuge SMACSS, da es übersichtlicher aussieht, aber einige Unternehmen und CSS-Frameworks verwenden immer noch BEM. Es lohnt sich also, beide zu kennen.

Sie sollten sich auch auf die Leistung Ihres CSS konzentrieren. Smashing Magazines Artikel Managing Mobile Performance Optimization und HTML5 Rocks 'Artikel High Performance Animation leisteten einen soliden Beitrag dazu. Ein schnelles Durchlesen beider Artikel sollte Ihnen eine solide Grundlage geben.

JavaScript-Bundler

Inzwischen sollten Sie Grunt oder Gulp gut verstehen. Der nächste Schritt ist das Hinzufügen eines JavaScript-Bundlers zu Ihrem Task-Runner, der eine modularere Organisation Ihrer JavaScript-Anwendung ermöglicht.

Die zwei größten Spieler im Moment sind:

  • Browserify: Ermöglicht die Anforderung von Modulen im Browser, indem alle Abhängigkeiten gebündelt werden.
  • Webpack: Grundsätzlich Browserify auf Steroiden. Schwieriger zu konfigurieren und einzurichten.

Der Kurzkurs Erste Schritte mit Browserify von Scotch.io bietet Ihnen einen Einstieg in Browserify, während der Artikel von David Fox Powell Warum kann niemand ein einfaches Webpack-Tutorial schreiben? ist eine großartige und unterhaltsame Einführung in das Webpack.

Persönlich habe ich nicht viel Zeit mit dem Webpack verbracht, aber in meiner Zeit damit muss ich sagen, dass es erstaunlich war - auch wenn es etwas schwieriger ist, es einzurichten. Wenn Sie gerade erst anfangen, würde ich mich für Browserify entscheiden, da die Einrichtung viel einfacher ist. Seien Sie sich bewusst, dass Webpack die Zukunft ist und welche größeren Projekte anfangen zu nutzen.

ReactJS

ReactJS gewinnt schnell an Popularität und scheint sich nicht zu verlangsamen - in dem Maße, wie die Leute fragen: "Tötet React Angular?"

Scotch.ios Learning React.js: Erste Schritte und Konzepte bieten einen umfassenden Überblick über React. Wenn Sie damit fertig sind, fahren Sie mit Egghead.ios Kurs über React Fundamentals fort, in dem Sie eine voll funktionsfähige ReactJS-App erstellen und dann auf die ES6-Syntax migrieren. Sie können mit der offiziellen ReactJS-Dokumentation fortfahren, die sehr gut erstellt ist und es Ihnen ermöglicht, sie vollständig zu beherrschen.

Da Reagieren nur die Ansicht ist, wird dringend empfohlen, dass Sie Redux lernen. Die meisten Kurse zu Redux sind meiner Meinung nach etwas komplex, aber CSS-Tricks Leveling Up with React: Redux bietet ein ausgewogenes Verhältnis zwischen Einfachheit und informativem Einstieg in Redux.

Vielleicht haben Sie zu diesem Zeitpunkt auch schon von Flux gehört, aber wenn Sie sich fragen, warum Sie Redux über Flux verwenden sollten, lesen Sie die Frage zu Stack Overflow. Warum Redux über Facebook Flux verwenden? was vom Redux-Schöpfer beantwortet wurde!

Rückblick auf meine Fehler und das, was ich gelernt habe

Ich habe in meinen 2 Jahren Webentwicklung viele Fehler gemacht. Insgesamt glaube ich, dass mein größter Fehler darin bestand, die Grundlagen nicht zu beherrschen, bevor ich zu Bibliotheken und Frameworks übergegangen bin. Ich denke, das gilt für fast alle Programmiersprachen, aber meiner Meinung nach gilt es noch mehr für JavaScript. Dies liegt daran, dass JavaScript in vielerlei Hinsicht eine kaputte Sprache ist und viele "Foot Guns" enthält (Sie hätten davon hören sollen, wenn Sie D. Crockfords Vortrag über "JavaScript, die besseren Teile" gesehen hätten, den ich zuvor erwähnt habe). Diese können das Leben unerträglich machen, wenn Sie sie nicht vollständig verstehen.

Ich erinnere mich, dass ich einmal in einem AngularJS-Problem mit $ scope stecken geblieben war, für dessen Debugging ich 3 Tage gebraucht habe, aber es war nicht einmal ein AngularJS-Problem, sondern ein JavaScript-Problem, das ich selbst verursacht habe, weil ich nicht verstanden habe, wie das funktioniert.

Code bereinigen

Es ist seltsam, dass ich nicht sehe, wie oft darüber gesprochen wird. Es war mir nicht immer wichtig, sauberen Code zu schreiben, aber ehrlich gesagt ist es eines der Dinge, auf die ich am meisten stolz bin, gelernt zu haben. Das liegt daran, dass sich jeder gerne darüber beschwert, dass sein letzter Platz eine der schlechtesten und hässlichsten Codebasen der Welt hatte. Warum kann niemand darüber sprechen, wie großartig sein letzter war? Wie ihr Code so sauber und gut gemacht wurde, dass sie stolz darauf waren?

Dies ist ein Trend, den ich gerne ändern möchte, und ich glaube, dass ein Unterschied gemacht werden kann, wenn genügend Menschen darauf drängen. Bemühen Sie sich, Variablen- und Funktionsnamen auf Englisch verständlich zu machen, auch wenn Sie etwas mehr schreiben müssen. Wenn Sie dies nicht tun, müssen Sie dies nur irgendwann in Zukunft manuell dokumentieren, um es klarer zu machen. Dies führt auch dazu, dass Ihre gesamte Codebasis für neue Entwickler und Sie selbst schwieriger zu verstehen ist. Ja selbst Warum du selbst? Denn wenn Sie keinen sauberen Code erzwingen, warum sollten Ihre Kollegen ihn dann erzwingen und sauberen Code schreiben, damit Sie ihn leicht verstehen können? Lassen Sie uns mit gutem Beispiel vorangehen.

Und wenn dies kein ausreichender Anreiz ist, werden saubere Code-Schreiber sehr oft erkannt und geschätzt. Wenn Sie sauberen Code schreiben, werden Ihre Kollegen und Freunde noch mehr Freude an der Arbeit mit Ihnen haben, und Sie werden ein glücklicheres Leben führen.

jQuery

Einige von Ihnen bemerken vielleicht, dass ich jQuery auch nicht besonders betont habe. Dies liegt daran, dass ich meiner Erfahrung nach fand, dass jQuery mir anfangs mehr schadet als nützt. Einige von Ihnen stimmen dem vielleicht nicht zu, aber lassen Sie es mich bitte erklären: Als ich es zum ersten Mal lernte, war die allgemeine Idee, die ich verstand, dass jQuery überall war und dass Sie es für so ziemlich alles verwenden konnten. Aus diesem Grund habe ich mich daran gewöhnt, jQuery für so ziemlich alles zu verwenden, und für jedes Problem, auf das ich gestoßen bin, habe ich nach einer Lösung dafür gesucht, die jQuery verwendet.

Verstehen Sie mich nicht falsch, jQuery war in meiner Zeit großartig, als ich es verwendete. Tatsächlich war es so großartig, dass ich blind ignorierte, dass 90% meiner Arbeit mit jQuery in modernen Browsern in einer ähnlich einfachen Syntax ausgeführt werden konnten.

Sie denken jetzt vielleicht: "Also, was ist daran falsch? jQuery wiegt sowieso nicht so viel, und wenn Sie es verwenden, schreiben Sie immer noch weniger Code, als wenn Sie es ursprünglich getan hätten. "Die Verwendung von jQuery über native APIs war jedoch nicht das Problem. Das Problem war, dass meine gesamte Denkweise und all die Lösungen für häufig auftretende Probleme, die ich bis dahin kannte, jQuery erforderten, um zu funktionieren. Und dies wurde zu einem großen Problem, als ich mein erstes Projekt bekam und erfuhr, dass jQuery keine Abhängigkeit darstellt.

Die Verwendung von jQuery hat mich nutzlos gemacht und dazu geführt, dass ich die systemeigenen Methoden und Lösungen, die es immer gab, völlig ignoriert habe. Alle meine Lösungen waren auch weniger portabel, da für ihre Verwendung jQuery erforderlich war.

Seitdem habe ich mich bemüht, jQuery nur dann zu verwenden, wenn es unbedingt erforderlich ist und die Effizienz und Lesbarkeit unserer Codebasis (z. B. starke DOM-Manipulation) erheblich verbessert.

Versteh mich mal wieder nicht falsch, jQuery ist großartig, aber wenn ich in die Vergangenheit zurückkehren und mein Ich kennenlernen könnte, das nur Webentwicklung gelernt hat, würde ich mir stark davon abraten, jQuery insgesamt zu lernen, bis ich gelernt habe, wie Dinge ohne es zu tun. Wenn Sie Probleme haben, den Schalter wie ich zu verwenden, lesen Sie den Abschnitt Sie benötigen möglicherweise jQuery nicht.

Kurse

Wie für Kursmaterial; Viele der Kurse von CodeSchool waren hervorragend (der HTML- und CSS-Zweig war besonders fantastisch), auch wenn einige ihrer Kurse für Frameworks etwas flach ausfielen (AngularJS, BackboneJS usw.).

Ich habe auch eine ganze Reihe von Pluralsight-Kursen besucht, die ich nicht erwähnt habe, da ich nach all der Zeit zu dem Schluss gekommen bin, dass die Auswahl ihres Lernpfads insgesamt eine schlechte Idee und unzuverlässig ist. Da ihre Kurse von Lehrern gemacht werden, die (meiner Meinung nach) nicht immer sehr gut unterrichten, habe ich festgestellt, dass ihre Kursqualität stark schwankt, da ihre Kursqualitätsstandards nicht existieren. Ich hatte Kurse, in denen sich selbst die Person, die den Kurs gab, anhörte, als würde sie einschlafen. Und ich habe ehrlich gesagt nicht die Aufmerksamkeitsspanne, um auf einen Kurs von 6 bis 10 Stunden zu achten - und viele von ihnen halten so lange, wenn nicht länger.

Ich habe gut 80 bis 100 Stunden in Pluralsight trainiert und möchte ehrlich gesagt einen guten Teil davon zurück. Versteh mich nicht falsch, ich hatte ein paar großartige Kurse über Pluralsight, aber ihr Fokus auf Quantität statt Qualität hat mich wirklich dazu gebracht, meine Zeit zu verschwenden. Ich hätte so viel mehr lernen können, wenn ich Kurse von besseren Quellen wie Egghead.io und CodeSchool genommen hätte, wo sie mehr Qualität und Quantität schätzen.

Der einzige Grund, warum ich jemals an jemanden denken könnte, der Pluralsight verwendet, besteht darin, einen Kurs zu belegen, von dem keine andere Website über etwas dunkelere Technologien verfügt (wie Installshield oder Xamarin), oder ein paar sehr spezifische Kurse zu belegen, von denen sie wissen, dass sie sehr gut aufgenommen wurden und rezensiert (zum Beispiel John Papas Angular Fundamentals).

Wenn Sie Pluralsight verwenden möchten, stellen Sie sicher, dass Sie Kurse belegen, die von einer Person ausgewählt wurden, die diese Kurse als erste besucht hat und die als qualitativ hochwertig und nützlich anerkannt ist.

Ich habe kürzlich auch das Team Treehouse-Training ausprobiert und ich muss sagen, ich bin erstaunt über die Qualität der Kurse, die sogar mit der von CodeSchool konkurrieren, und das Kursmaterial ist sehr umfangreich.

Nachdem Sie die dortigen Lernpfade für HTML, CSS und JavaScript durchgesehen haben, können Sie sich leicht die Grundlagen für so ziemlich alles aneignen. Glaubst du mir nicht? Schauen Sie sich einfach ihre Lernpfade an und sagen Sie mir, dass es nicht erstaunlich ist. Sicher, es ist ein bisschen teuer für 30 USD pro Monat, aber meiner Meinung nach ist es das unglaublich wert. (Ich bezahle jetzt dafür, um WordPress zu lernen, da ich es für ein freiberufliches Projekt benötige und das Material großartig ist.)

Ein Wort zu bezahlten Kursen

Ich hatte das Bedürfnis, darüber zu sprechen, da ich den allgemeinen Konsens festgestellt habe, dass man Programmieren lernen kann, ohne einen Cent zu zahlen und so wettbewerbsfähig zu sein wie einer, der einen Kurs bezahlt. Ich kann zwar nicht genug betonen, welchen Wert das Bezahlen für den richtigen Kurs hat. Sicher, eine ganze Menge des wertvollsten Kursmaterials, über das ich geschrieben habe, ist kostenlos, aber eine Menge davon wird auch bezahlt. Hauptsächlich, weil man es manchmal einfach nicht übertreffen kann, wenn einem jemand die Dinge auf visuelle Weise erklärt.

Ja, es gibt schreckliche bezahlte Lernkurse, von denen ich abraten würde, da ihr Wertversprechen fragwürdig ist (siehe Pluralsight), aber andere wie Egghead.io, CodeSchool und Team Treehouse bieten trotz ihrer relativ hohen Kosten ein hervorragendes Preis-Leistungs-Verhältnis monatliches Abonnement (25 bis 30 US-Dollar pro Monat). Darüber hinaus bieten sie alle kostenlose Testversionen für 7 bis 15 Tage an, damit Sie sehen können, welche für Sie am besten geeignet ist.

Wenn Sie Ihre Karten richtig spielen und 1 bis 2 Monate bezahlen, können Sie sich leicht ein Bild davon machen, was Sie sonst nur bekommen würden, wenn Sie über ein Jahr hinweg über unzählige Artikel und Blog-Beiträge gestolpert sind. Sie sind ehrlich gesagt so gut.

Also ja, sie sind nicht notwendig, aber wenn Sie sich mindestens einen Monat leisten können, können Sie sicher sein, dass dies Ihnen einen starken Vorteil verschafft.

Die geheime Soße zum Erfolg

Ich habe in den letzten 2 Jahren viele Entwickler getroffen. Ich war Webentwickler. Während meiner Reise habe ich ein paar Entwickler getroffen, die wirklich herausragend waren - Entwickler, die eindeutig in einer eigenen Liga waren und zu denen ich und alle anderen aufschauten. Ich habe festgestellt, dass diese Personen einige Merkmale aufweisen, die ich Ihnen jetzt mitteilen möchte. Dies sind meiner Meinung nach die Geheimnisse eines erfolgreichen Webentwicklers:

  • Liebe was du tust. Dies ist einfach das wichtigste Merkmal von allen. Wenn Sie das, was Sie tun, nicht mögen (sei es CSS-Styling oder JavaScript), wird dies in Ihrer Arbeit wirklich deutlich. Diejenigen, die Leidenschaft für das haben, was sie tun, heben sich oft deutlich von der Masse ab.
  • Sei großzügig und teile dein Wissen. Es ist sehr einfach, den neuen CSS / JavaScript-Hack, den Sie gefunden haben, um die Probleme des Projekts zu lösen, geheim zu halten, aber bitte nicht. Die Leute, die ihr Wissen am meisten teilen, sind oft die Wertvollsten, da sie in jede Art von Team eingesetzt werden können und die Qualität dieser Teams enorm verbessern.
  • Sei immer auf der Suche nach neuen Dingen. Die meisten der erfolgreichen Entwickler, die ich getroffen habe, teilen dieses gemeinsame Merkmal. Sei es, indem Sie Blogs lesen, viel Zeit mit dem Programmieren von Diskussionen verbringen oder in den Mittagspausen über Neuigkeiten in der Webentwicklung sprechen. Durch die ständige Suche nach neuen Dingen bleiben die besten Entwickler immer auf dem Laufenden.

Der kürzeste Weg

Puh, dieser Artikel hat eine Weile gedauert (6 Stunden und Zählen). Wir sind fast fertig! Sie fragen sich vielleicht: "Okay, coole Geschichte, aber wie geht es am schnellsten?"

Ich habe das so organisiert, wie ich es nehmen würde, wenn ich zurückgehen und die Dinge richtig machen könnte. Ich habe auch ein paar Boni hinzugefügt, die ich damals gerne gehabt hätte. Genießen!

Javascript

  1. Der JavaScript-Lernpfad von CodeSchool oder Treehouse (kostenpflichtig) ODER der JavaScript-Kurs von Codecademy
  2. Beredtes JavaScript
  3. Sie kennen JS nicht
  4. JS: Der richtige Weg
  5. Erlernen Sie ES6 von Egghead.io

HTML & CSS

  1. Der HTML- und CSS-Lernpfad von CodeSchool oder Treehouse (kostenpflichtig) ODER HTML und CSS: Entwerfen und Erstellen von Websites mithilfe des HTML- und CSS-Kurses von John Ducket OR Codecademy.
  2. Besonderheiten zur CSS-Spezifität durch CSS-Tricks
  3. Erfahren Sie CSS-Layout
  4. SMACSS
  5. 9 Grundprinzipien des responsiven Webdesigns von Front
  6. Responsive Webdesign-Grundlagen von Google zu Udacity (Nehmen Sie an, wenn Sie keinen CodeSchool- oder Treehouse-Lernpfad verwendet haben.)
  7. Verwalten der mobilen Leistungsoptimierung durch Smashing Magazine ODER Browser-Rendering-Optimierung und Website-Leistungsoptimierung von Google auf Udacity
  8. Webgrundlagen von Google

Entwicklerwerkzeuge

  1. Entdecken und beherrschen Sie DevTools mit CodeSchool
  2. Lerne Git von Codecademy und probiere Github von Codeschool aus
  3. Einführung in Linux-Befehle vom Smashing Magazine
  4. Automatisieren Sie Ihre Aufgaben ganz einfach mit Gulp.js von Scotch.io

AngularJS

  1. Entwurfsentscheidungen in AngularJS von Google-Entwicklern (Einführung in AngularJS)
  2. AngularJS-Grundlagen von Egghead.io
  3. John Papas Angular Styleguide
  4. Erstellen einer Todo-App für eine einzelne Seite mit Node und Angular (MEAN) von Scotch.io
  5. AngularJS-Anwendungsstruktur nach Egghead.io (Paid) OR Scotch.io Angular Courses

ReactJS

  1. Learning React.js: Erste Schritte und Konzepte von Scotch.io
  2. Einführung zum Webpack von Egghead.io
  3. React Fundamentals von Egghead.io
  4. Leveln mit Reagieren: Redux mit CSS-Tricks

Back End

  1. NodeJS-Tutorials von NodeSchool.io
  2. Wie ich meiner Frau REST erklärt habe
  3. Erstellen einer Todo-App für eine einzelne Seite mit Node und Angular von Scotch.io (Node, ExpressJS, MongoDB, Angular, REST)

Bonus: Ressourcen

Vollständig optional, aber einige meiner Lieblingsartikel und -ressourcen, die ich im Laufe der Jahre gefunden habe und die Sie wahrscheinlich lieben werden, wenn Sie sich für das jeweilige Thema interessieren.

  • Webdesign in 4 Minuten. Ein sehr kreatives und originelles interaktives Tutorial, das Ihnen die Grundlagen des Webdesigns vermittelt.
  • Vorwärts. Auf der Suche nach Inspiration für Webdesign? Suchen Sie nicht weiter.
  • Warum es Eric Elliott so schwer fällt, Personal einzustellen. Hier fasst Eric erstaunlich gut zusammen, wie schwierig es ist, großartige Entwickler zu finden und wie man einer wird.
  • Mega-Vergleich von NoSQL-Datenbanksystemen von Kristof Kovacs. Dies ist ein hervorragender Vergleich zwischen den beliebtesten NoSQL-Datenbanksystemen. MongoDB, Redis, CouchDB, Cassandra, ElasticSearch und vieles mehr sind hier.
  • XSS-Spiel. XSS-Fehler (Cross-Site Scripting) sind eine der häufigsten und gefährlichsten Arten von Sicherheitsanfälligkeiten in Webanwendungen. Mithilfe dieser großartigen Ressource können Sie lernen, wie Sie XSS-Fehler finden und ausnutzen und wie Sie verhindern, dass sie Ihrer Webanwendung passieren.
  • Wie schreibe ich nicht wartbaren Code. Urkomischer Artikel darüber, wie man keinen wartbaren, sauberen Code schreibt.

Bonus: Meine Werkzeuge

Ich dachte, es wäre auch schön, einige der Tools, die ich entdeckt habe (einige bekannt, andere weniger bekannt), mitzuteilen, die mir das Leben als Webentwickler erleichtert haben.

  • Jetbrains Webstorm: Voll funktionsfähige Web Development IDE. (Mein Redakteur nach Wahl) Bezahlte, aber bietet eine 1-jährige kostenlose Lizenz für Studenten.
  • Atom.io: Hoch erweiterbarer Texteditor mit IDE-ähnlichen Funktionen, die mit Webstorm mithalten können. Kostenlos.
  • Sublime Text: Blitzschneller Texteditor mit Plugins-Unterstützung und ansprechendem Aussehen. (Normalerweise behalte ich Webstorm / Atom für ernsthafte Arbeiten als IDE und Sublime Text für schnelle Änderungen an Dateien installiert.)
  • caniuse.com: Die Browserunterstützung ist für Websites von entscheidender Bedeutung. Dies ist die wichtigste Ressource, um herauszufinden, welche Funktionen von welcher Browserversion unterstützt werden und welche.
  • Cloud 9: Cloud-basierte Entwicklungsumgebung und IDE mit Git-Unterstützung für Linux. Hervorragend geeignet, um remote zu programmieren und NodeJS oder andere serverseitige Dinge zu testen, ohne etwas auf Ihrem Computer installieren zu müssen
  • CodePen, Plunker und JSFiddle: Großartige Cloud-basierte Front-End-Spielplätze, mit denen Sie schnelle HTML / CSS / JS-Demos erstellen können, die Sie freigeben können, oder an denen Sie später arbeiten können, wenn Sie ein kostenloses Konto erstellen. CodePen eignet sich oft am besten für CSS-bezogene Dinge, da es eine minimalistische Oberfläche und eine Vielzahl von CSS-bezogenen Funktionen bietet, Plunker für JavaScript-Demos aufgrund seiner leistungsstarken JS-Funktionen und JSFiddle für Demos, mit denen Sie dank seines Live-Editors in Echtzeit zusammenarbeiten möchten Funktion zum Teilen der Zusammenarbeit.
  • Vanille-Liste: Ein Repository von JavaScript-Plugins und -Bibliotheken, in denen nur Vanille-JavaScript verwendet wird (dh, es sind keine Bibliotheken erforderlich, wie z. B. jQuery).
  • YouMightNotNeedjQuery: Wahrscheinlich nicht. Überzeugen Sie sich selbst.
  • PublicAPIs: Haben Sie sich jemals gefragt, welche öffentlichen APIs existieren? Suchen Sie nicht weiter!
  • Gravit.io: Cloud-basierte Designanwendung, die mit Adobe Illustrator mithalten kann. (Kostenlos!) Nützlich für schnelle Modelle und Webdesign.
  • Adobe Kuler: Webapp, mit der Sie harmonische Farbkombinationen für jede Website erstellen können. Verfügt außerdem über ein „Explore“ -Präsentationsprogramm mit Farbpaletten anderer Designer sowie ein Bewertungssystem, das Sie inspirieren soll.
  • Benennen Sie diese Farbe: Hören Sie auf, viel Zeit damit zu verbringen, herauszufinden, wie Sie Ihre Farbvariablen in less / sass benennen können, und verwenden Sie einfach den richtigen Namen für diese Webanwendung

Fazit

Ich möchte nur sagen, dass ich es wirklich genossen habe, dies zu schreiben, und es macht mich wirklich glücklich, der unglaublich unterstützenden Programmier-Community überall endlich etwas zurückgeben zu können.

Wie einige von Ihnen bereits bemerkt haben, ist dies mein erster Blog-Beitrag, aber Sie können sicher sein, dass ich vorhabe, mehr zu schreiben. Erwarten Sie nicht jede Woche eine. Denken Sie daran: Qualität über Quantität!

Wenn einer von Ihnen noch Fragen hat, können Sie einen Kommentar hinterlassen. Ich werde mein Bestes geben, um mich so schnell wie möglich bei Ihnen zu melden.

Ich hoffe, das hat euch bis zum nächsten Mal weitergeholfen.

Update vom 18. März: Für diejenigen, die neugierig sind, was ich vorhabe, hier ein kurzes Status-Update!

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