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

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

Das klingt vielleicht nicht nach viel Erfahrung, aber mein zweites Jahr als Entwickler zu beenden, war ein großer Meilenstein für mich. Dies liegt daran, dass ich keine wirkliche Erfahrung in der Webentwicklung hatte - und im Allgemeinen nicht viel Programmiererfahrung, 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 gemacht habe.

Ich hatte trotz all der Hilfe, die ich von wunderbaren Ressourcen wie Medium, Stack Overflow und Reddits Programmier-Subreddits 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 auf diese Reise begeben, haben Sie mehr Glück als ich.

Ich weiß, dass es viele Artikel wie diesen gibt, aber nicht sehr viele von ihnen diskutieren den Prozess im Nachhinein mit zwei zusätzlichen Jahren.

Ich werde mit meiner Reise beginnen, einschließlich dessen, was auf dem Weg schief gelaufen ist. Wenn Sie sich nur darum kümmern, was meine Vorschläge für den kürzestmöglichen Weg zum Webentwickler von Grund auf sind, können Sie zum letzten Abschnitt übergehen: Der kürzeste Weg .

Also, ohne weiteres, fangen wir an!

Grundlagen erlernen

Nachdem ich mich für die Webentwicklung entschieden hatte, war die erste Frage in meinem Kopf: "Was lerne ich?" Nachdem ich einige Nachforschungen angestellt hatte, machte ich meinen Lernpfad basierend auf den Anforderungen der meisten Webentwickler-Einstiegspositionen:

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

Hier ist, wie es ging.

Javascript

Ich begann meine Reise mit dem Erlernen von JavaScript über CodeSchool(bezahlt) und Codecademy(frei). Wenn Sie nichts davon wissen, handelt es sich um großartige Websites, auf denen Sie das Codieren durch Codieren im Browser erlernen können.

Ich fand, dass solche Lernressourcen die besten waren, wenn Sie gerade erst anfangen. Beachten Sie jedoch, dass diese Lernmethode schnell anstrengend wird, sobald Sie sich mit fortgeschritteneren Themen befassen, da ihre 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, erhielt ich eine stärkere JavaScript-Grundlage, indem ich das Buch Eloquent Javascript: Eine moderne Einführung in die Programmierung von Haverbeke (kostenlos) las.

Dieses Buch wurde mir von vielen Leuten in den JavaScript-Foren als Muss und aus gutem Grund empfohlen. Das Buch war hart - vor allem, wenn Sie gerade Programmieren lernen, wie ich es damals war. Aber ich bin froh, dass ich nicht aufgegeben habe und dabei geblieben bin. Es war phänomenal aufgrund des großen Umfangs der Programmierkonzepte, die es abdeckt, auch wenn es manchmal etwas rücksichtslos war. Was auch immer Sie tun, überspringen Sie nicht die Code-Herausforderungen. Sobald Sie dieses Buch fertiggestellt haben, können Sie endlich mit Zuversicht sagen, dass Sie JavaScript gut verstehen.

Optional können Sie auch jQuery lernen (obwohl ich es noch nicht wirklich empfehle - dazu später mehr). Sie können es durch den Try 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 der Gesamtumfang, den sie abdecken, es mir ermöglichte, eine stärkere Grundlage dafür zu finden.

Sie können dies auch einfach für einen HTML & CSS-Kurs der Codecademy austauschen und trotzdem ähnliche Ergebnisse erzielen. 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 HTML und CSS in die Hände bekommen können : Entwerfen und Erstellen von WebsitesBuch, es ist auch ein solider Ausgangspunkt für das Erlernen von HTML und CSS (mit einer Prise Webdesign). Es ist hoch bewertet (4,7 / 5 bei Amazon) und bietet eine solide Einführung 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, nur um es zu bewundern.

Weniger / Sass

Für Unbekannte sind Less & Sass CSS-Transpiler, mit denen Sie CSS auf elegantere Weise 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 diese fertig sind, „kompilieren“ diese CSS-Transpiler Ihren Code und konvertieren ihn in normales CSS.

Derzeit gibt es zwei wichtige CSS-Transpiler: Less und Sass . Sass ist das beliebteste, 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 gefallen hat.

Mit dem Online Less Compiler von WinLess und seinen Codebeispielen erhalten Sie einen schnellen und dennoch vollständigen Überblick über Less, um zu sehen, wie sich Ihr Less-Code in CSS verwandeln würde. Sie können Sass auch online mit SassMeister testen (obwohl dies keine Codebeispiele enthält).

Es spielt keine Rolle, ob Sie zuerst Less oder Sass lernen. Sie sind sich sehr ähnlich. Wenn Sie also eines kennen, kennen Sie das andere ziemlich genau. Einen schnellen Vergleich zwischen Less und Sass finden Sie in Shelby Mouldens Artikel Vergleich zwischen WENIGER und SASS.

Sich anpassendes Design

Ursprünglich habe ich mithilfe des HTML- und CSS-Pfads von Codeschool etwas über Responsive Design und Bootstrap gelernt. Vor kurzem fand ich Udacitys Kurs von Google über Responsive Web Design Fundamentals fantastisch, um die Grundlagen und darüber hinaus weitaus umfassender zu behandeln als Codeschool.

Sie können Responsive Design ohne zusätzliches Framework ausführen, dies ist jedoch mit Hilfe eines Responsive Frameworks wie Bootstrap viel einfacher. Die offizielle Dokumentation von Bootstrap ist sehr gut gemacht, so dass Sie keine Probleme haben sollten, damit zu beginnen.

Wenn Sie Probleme haben, die Grundprinzipien zu verstehen, lesen Sie den Blogbeitrag von Froont über 9 Grundprinzipien des reaktionsschnellen Webdesigns. Es verfügt über schöne, saubere und einfache Animationen, die die Prinzipien des reaktionsschnellen Webdesigns visuell 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 fand die Designentscheidungen von Google Developer in AngularJS, um den besten allgemeinen Überblick darüber zu geben, was AngularJS ist und wie es die Erstellung von Webanwendungen verbessert.

Ich dachte zuerst daran, AngularJS durch ihre offizielle Dokumentation zu lernen, aber dies stellte sich als schreckliche Idee heraus. Die Dokumentation war für Anfänger nicht sehr einfach, und die überfüllte Formatierung machte das Lesen und Verstehen schwierig.

Ich habe dann AngularJS durch Codeschool gelernt. Mit meinen positiven Erfahrungen mit den JavaScript- und CSS-Kursen auch von dort habe ich nichts weniger als einen großartigen Kurs erwartet. Ich lag falsch. Der Kurs war von Anfang an eine Katastrophe, da der Algorithmus, mit dem überprüft wurde, ob Sie das Codebeispiel richtig verstanden haben, manchmal nicht richtig funktionierte und Ihre eindeutig richtige Lösung als falsch markiert hat. Es gab sogar Zeiten, in denen nur eine Seitenaktualisierung erforderlich war, um das defekte Validierungssystem zu reparieren. Der Inhalt des Kurses war auch nicht großartig. Es hat gute Arbeit geleistet, die grundlegenden Komponenten einer AngularJS-Anwendung zu erklären, aber es hat schreckliche Arbeit geleistet, diese in eine echte Anwendung zu integrieren, sodass ich weit mehr Fragen hatte, als ich anfing.

Nach einigem Durchsuchen der Foren bin ich auf Egghead.io gestoßen(kostenlos / bezahlt) wo ich viel besseres Glück hatte. Ihr Kursmaterial war viel sauberer, prägnanter und vollständiger, was zu einer weitaus besseren Erfahrung führte. Ganz zu schweigen davon, dass sie neben ihren Kursen mundgerechte 2–5-minütige Lektionen haben, die wichtige Themen abdecken. (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, für die eine Zahlung erforderlich ist, aber sie sind normalerweise diejenigen, die fortgeschrittenere eckige Themen behandeln, die Sie erst später benötigen werden. Ich nahm an ihrem AngularJS Fundamentals-Kurs teil und war mit den Ergebnissen voll zufrieden (und wurde dabei auch ein großer Fan der Kurse von Egghead.io).

Designmuster

Entwurfsmuster sind im Grunde wiederverwendbare Codelösungen, die wiederholt verwendet werden können, um häufig auftretende Softwareprobleme zu lösen. Wenn Sie eine Grundlage dafür haben, 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, welches Entwurfsmuster sie für ihren Code verwendet haben, um ihn besser zu verstehen.

Ich fand die 2 besten Quellen, um dies zu lernen, sind 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 früher Sie es beherrschen, desto mehr Zeit können Sie später sparen. Der kostenlose Kurs Explore and Master Chrome DevTools von Codeschool leistet hervorragende Arbeit bei der Einführung.

Git (Versionskontrolle)

Ah, Git - das Tool, von dem ich nie wusste, dass ich es brauchte, bis ich herausfand, was es kann. Mit Git können Sie im Grunde genommen die Änderungen verfolgen, die Sie an Ihrem Code vorgenommen haben, sodass Sie, wenn etwas schief geht, 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 war hervorragend darin, die erweiterten Befehle abzudecken. Der Git-Lernpfad von Codeschool ist auch hervorragend geeignet, um die Grundlagen von Git zu behandeln.

NodeJS

Es dauerte nicht lange, bis ich erfuhr, dass ein grundlegendes Verständnis von NodeJS mir bei meiner Suche nach einem Webentwickler sehr helfen würde (dazu bald mehr).

Ich habe Codeschools Kurse auf Node ausprobiert, aber ich fand, dass sie wirklich inhaltlich fehlen. Ich fand, dass NodeSchool.io ein weitaus 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 NodeJS wirklich betrieb.

Task Runners (Grunt & Gulp)

Grunt und Gulp waren eine große Überraschung für mich, da ich keine Ahnung hatte, dass solche Tools überhaupt existieren - aber ich bin sehr froh, dass sie es tun! Grundsätzlich können Sie mit diesen Aufgabenlä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 ihn bearbeiten, um das CSS zu kompilieren, und dann den Browser aktualisieren. Mithilfe eines Task-Runners können Sie ihn so einrichten, dass Ihre Less / Sass-Dateien auf Änderungen überprüft 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 Hauptaufgabenläufer: Grunzen und Schlucken. Während sie genau dasselbe tun, arbeiten sie auf sehr unterschiedliche Weise, wobei Grunt viel ausführlicher und konfigurationsorientierter ist und Gulp kürzer zu schreiben ist 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 auswählen, was Sie wollen, aber ich fand, dass Gulp viel einfacher zu lernen und zu schreiben ist. Ich bevorzuge es heute noch wegen seines minimalistischen - und dennoch mächtigen - pfeifenbasierten Ansatzes.

Ich fand, dass Scotch.ios Kurse über Grunt und Gulp zu den besten da draußen gehören.

Herausforderungen, denen ich mich bei meinem ersten Job gestellt habe

Nachdem ich die Grundlagen der Webentwicklung behandelt hatte, war ich bereit für mein erstes Webentwicklungsinterview für eine Einstiegsposition. Ich werde nicht auf Details des Interviews eingehen, da dies nicht der Schwerpunkt dieses Artikels ist. Aber ich werde sagen, dass mir gesagt wurde, dass meine relativ starken JavaScript-Kenntnisse mir helfen, die Position zu sichern. (Danke, eloquentes JavaScript!)

Ich muss sagen, ich war bei meinem ersten Projekt ziemlich nervös. Dabei wurden wiederverwendbare Webkomponenten mit HTML, CSS und JavaScript sowie Bootstrap, Sass und Grunt als Tools erstellt. T.

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

  1. Angst vor dem Scheitern. Da ich der neue Typ war, hatte ich ständig Angst, dass mein Code falsch oder schlecht gemacht ist. Deshalb habe ich viel Zeit damit verbracht, 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 neue Weise zu finden, weil ich befürchtete, dass es am Ende nicht richtig funktioniert. Dadurch wurde mein Laufwerk effektiv heruntergefahren, um neue Dinge zu lernen.
  2. Dinge tun, weil "X" -Person, die es besser weiß als ich, es gesagt hat. Ich habe das zuerst viel gemacht. Obwohl es nicht ganz falsch ist, Dinge auf eine bestimmte Art und Weise zu tun, nur weil der „X“ -Experte dies gesagt hat - ohne zu wissen warum -, habe ich nicht wirklich gewusst, wann die Dinge so gemacht wurden, wie sie waren. Ich habe schnell gelernt, dass es zu allem Ausnahmen gibt und dass Sie immer den Grund für Best Practices kennen sollten.

Zum Glück hatte ich während meines ersten Projekts einen verständnisvollen Teamleiter, der mir half, diese Probleme zu überwinden. Er motivierte mich ständig, neue Dinge auszuprobieren, auch wenn manchmal etwas schief ging. 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 ebenfalls eine große Herausforderung. Dies lag hauptsächlich daran, dass ich viele Dinge, die ich damit gemacht habe, nicht vollständig verstanden habe, warum sie passiert sind. Ich dachte an "eckige Magie".

Es gab viele Male, bei denen ich mir wünschte, ich wüsste, wie Angular tatsächlich funktioniert, aber es war beängstigend, die Dokumentation zu betrachten.

Ich stieß schließlich auf ein erstaunliches Buch namens Build Your Own AngularJS. Ich habe nicht alles gelesen, aber das Lesen des Abschnitts über Zielfernrohre und Beobachter und wie sie funktionierten, enthüllte wirklich, dass die Magie hinter eckig nicht wirklich magisch war. Es war nur eine clevere Möglichkeit, die Datenbindung mithilfe von Dirty Checking und verschachtelten Bereichen aufrechtzuerhalten. Ich kann dieses Buch jedem empfehlen, der AngularJS vollständig verstehen möchte.

Die andere Herausforderung, der ich mich ein Jahr später gegenübersah, war, wie schnell die Webentwicklung fortschritt. Ich hatte gerade AngularJS und Grunt gemeistert und fühlte mich stolz und mächtig - nur um bald herauszufinden, dass Gulp und ReactJS am Horizont standen. 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 Mitarbeiter erleuchtete mich bald, indem er mir etwas erzählte, das meine Sicht auf Bibliotheken und Frameworks für immer veränderte:

"Bibliotheken und Frameworks sind zwar veraltet, aber die von ihnen vorgeschlagenen Konzepte und Lösungen überstehen oft den Test der Zeit."

Er hatte recht. AngularJS ist möglicherweise veraltet, aber das vollständige Verständnis der Magie dahinter hat mir geholfen, die Webkomponentenarchitektur von React besser zu verstehen, die das Richtlinienkonzept von Angular 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, bei meinen nachfolgenden Projekten vor anderen großen Herausforderungen gestanden zu haben. Aber was ich sagen werde ist, dass im Laufe der 2 Jahre, in denen ich Webentwicklung betrieben habe, die Nummer 1, die zum Erfolg beigetragen hat (laut meinen eigenen Mitarbeitern), meine Aufregung und mein starkes Bestreben war, immer auf der Hut zu sein für neue Dinge zu lernen. Ich fand bald heraus, dass dies eine gewinnbringende Kombination mit der Webentwicklung war, 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 eine Menge geholfen hat - und etwas, das 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 Leute das ungewöhnlich schnelle Entwicklungstempo von Webtechnologien kritisieren oder wie fast täglich eine neue JavaScript-Bibliothek oder ein neues Framework herauskommt. Aber mit der Zeit sah ich das Licht und verstand schließlich:

Sie müssen nicht jede neue Bibliothek oder jedes neue Framework lernen, das herauskommt.

Oft ist es eine gute Idee, eine einfache Hallo-Welt-Beispiel-App zu erstellen, damit Sie sehen können, was ein Framework bietet. Dann können Sie weitermachen. Normalerweise sollten Sie sich jedoch darauf konzentrieren, was am besten zu den Anforderungen Ihres Projekts passt. Dies kann zunächst schwierig sein, aber zum Glück 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 am besten zu Ihren spezifischen Anwendungsfällen passen.

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 You Don't Know JS und es zerstört Sie absolut (oder zumindest hat es mir angetan). Diese Buchreihe (ü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, denn Seite für Seite hat es mich immer wieder umgehauen, wie komplex JavaScript wirklich war, sowie viele, viele häufige Fallstricke, die unerfahrene und erfahrene Menschen ohne ein angemessenes JavaScript-Verständnis haben könnten.

Das Lesen dieser Buchreihe hat mir wirklich den Kopf geöffnet, und ich kann es jedem empfehlen, der sich selbst als erfahrener JavaScript-Entwickler bezeichnen möchte. Sobald Sie dies aus dem Weg geräumt haben, gibt es zwei zusätzliche Ressourcen, die ich dringend empfehlen kann, um noch weiter fortgeschrittene JavaScript-Kenntnisse zu erlangen.

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

Wenn Sie mit JavaScript vertraut sind, fahren Sie mit ECMASCript 2015 (auch als ES6 bezeichnet) fort, dem neuesten und aktuellen JavaScript-Standard. Der Artikel ECMAScript 6 (ES6) des Smashing Magazine: Was ist neu in der nächsten Version von JavaScript? Es gibt einen kurzen Überblick über die Neuerungen in ES6. Sie können ES6 im Browser mit dem Online-Transpiler von Babel ausprobieren.

CSS

CSS kann sehr, sehr schnell chaotisch und unorganisiert werden. Es wurden einige verschiedene Methoden vorgeschlagen, um saubereres CSS zu schreiben, aber 2 herausragende, von denen ich Ihnen dringend empfehle, so schnell wie möglich über ASS 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 Code-Sharing im Front-End erreichen können.

Ich persönlich bevorzuge SMACSS wegen seines saubereren Aussehens, aber einige Unternehmen und CSS-Frameworks verwenden immer noch BEM, daher lohnt es sich, beide zu kennen.

Sie sollten sich auch auf die Leistung Ihres CSS konzentrieren. Der Artikel des Smashing Magazine zur Verwaltung der Optimierung der mobilen Leistung und der Artikel High Performance Animation von HTML5 Rocks haben einen soliden Job gemacht, um einen Vorsprung zu schaffen. Ein schnelles Lesen beider Artikel sollte Ihnen eine solide Grundlage geben.

JavaScript-Bundler

Inzwischen sollten Sie ein starkes Verständnis für Grunt oder Gulp haben. 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 derzeit größten Spieler sind:

  • Browserify: Mit dieser Option können Sie Module im Browser anfordern, indem Sie alle Ihre Abhängigkeiten bündeln.
  • Webpack: Grundsätzlich Browserify auf Steroiden. Schwieriger zu konfigurieren und einzurichten.

Scotch.ios Minikurs Erste Schritte mit Browserify 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, unterhaltsame Einführung in das Webpack.

Persönlich habe ich nicht viel Zeit mit Webpack verbracht, aber in meiner Zeit damit muss ich sagen, dass es erstaunlich war - auch wenn es etwas schwieriger einzurichten ist. Wenn Sie gerade erst anfangen, würde ich mich für Browserify entscheiden, da die Einrichtung viel einfacher ist. Seien Sie sich nur 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 bietet einen soliden Überblick über React. Wenn Sie dies aus dem Weg geräumt haben, fahren Sie mit dem Kurs zu React Fundamentals von Egghead.io fort, in dem Sie eine voll funktionsfähige ReactJS-App erstellen und diese dann auf die ES6-Syntax migrieren. Sie können die offizielle ReactJS-Dokumentation nachverfolgen, die sehr gut gemacht ist und es Ihnen ermöglicht, sie vollständig zu beherrschen.

Da React nur die Ansicht ist, wird dringend empfohlen, Redux zu lernen. Die meisten Kurse zu Redux sind meiner Meinung nach etwas komplex, aber CSS-Tricks, die mit React aufsteigen: Redux bietet eine gute Balance zwischen Einfachheit und Information beim 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 zum Stapelüberlauf. Warum sollten Sie Redux über Facebook Flux verwenden? was von Redux 'Schöpfer beantwortet wurde!

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

Ich habe in meinen 2 Jahren des Lernens der Webentwicklung viele Fehler gemacht. Insgesamt denke ich, dass mein größter Fehler darin bestand, die Grundlagen nicht zu beherrschen, bevor ich zu Bibliotheken und Frameworks überging. Ich denke, dies gilt für fast jede Programmiersprache, aber meiner Meinung nach gilt dies 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 haben, den ich zuvor erwähnt habe). Diese können das Leben unerträglich schwer machen, wenn Sie sie nicht vollständig verstehen.

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

Code reinigen

Es ist seltsam, dass ich nicht so oft darüber rede. Es war mir nicht immer wichtig, sauberen Code zu schreiben, aber ehrlich gesagt ist es eines der Dinge, auf die ich besonders stolz bin, gelernt zu haben. Dies 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 ihr letzter war? Wie kam es, dass ihr Code so sauber und gut gemacht war, dass sie stolz darauf waren?

Dies ist ein Trend, den ich gerne ändern würde, und ich glaube, dass ein Unterschied gemacht werden kann, wenn genügend Leute 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 es nur irgendwann in der Zukunft manuell dokumentieren, um es klarer zu machen. Dies führt auch dazu, dass Ihre gesamte Codebasis für neue Entwickler und Sie selbst schwerer zu verstehen ist. Ja, du selbst. Warum du selbst? Denn wenn Sie keinen sauberen Code erzwingen, warum sollten Ihre Mitarbeiter ihn dann erzwingen und sauberen Code schreiben, damit Sie ihn leicht verstehen können? Gehen wir mit gutem Beispiel voran.

Und wenn das nicht gut genug ist, erkennen und schätzen die Leute sehr oft saubere Code-Schreiber. Sie werden feststellen, dass Ihre Mitarbeiter und Freunde durch das Schreiben von sauberem Code noch mehr Spaß an der Arbeit mit Ihnen haben und im Gegenzug ein glücklicheres Leben führen werden.

jQuery

Einige von Ihnen werden vielleicht bemerken, dass ich auch nicht viel Wert auf jQuery gelegt habe. Dies liegt daran, dass ich nach meiner Erfahrung festgestellt habe, dass jQuery mir zunächst mehr schadet als nützt. Einige von Ihnen stimmen vielleicht nicht zu, aber bitte lassen Sie mich 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 habe ich nach einer Lösung gesucht, die jQuery verwendet.

Versteh mich nicht falsch, jQuery war in meiner Zeit großartig, so großartig, dass ich blind ignorierte, dass 90% meiner Arbeit mit jQuery in modernen Browsern in einer ähnlich einfachen Syntax nativ ausgeführt werden konnte.

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 die Dinge nativ erledigt hätten. “ Die Verwendung von jQuery über native APIs war jedoch nicht das Problem. Das Problem war, dass meine gesamte Denkweise und alle Lösungen für häufig auftretende Probleme, die ich bis zu diesem Zeitpunkt kannte, jQuery zum Arbeiten erforderten. Und dies wurde zu einem großen Problem, als ich mein erstes Projekt bekam und erfuhr, dass jQuery keine Abhängigkeit ist.

Die Verwendung von jQuery machte mich ohne es nutzlos und ließ mich die nativen Methoden und Lösungen, die es immer gab, völlig ignorieren. Dadurch wurden alle meine Lösungen auch weniger portabel, da für deren Verwendung jQuery erforderlich war.

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

Versteh mich nicht falsch, jQuery ist großartig, aber wenn ich in die Vergangenheit reisen und mein früheres Ich kennenlernen könnte, das gerade die Webentwicklung lernte, würde ich mir dringend davon abraten, jQuery insgesamt zu lernen, bis ich gelernt habe, wie Dinge ohne es zu tun. Wenn Sie Probleme haben, den Wechsel wie ich durchzuführen, lesen Sie jQuery, die Sie möglicherweise nicht benötigen.

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 zu Frameworks etwas flach fielen (AngularJS, BackboneJS usw.).

Ich habe auch ziemlich viele Pluralsight-Kurse besucht, die ich nicht erwähnt habe, weil ich nach all dieser Zeit zu dem Schluss gekommen bin, dass die Wahl ihres Lernpfades insgesamt eine schlechte Idee und unzuverlässig ist . Da ihre Kurse von Lehrern durchgeführt werden, die (meiner Meinung nach) nicht immer sehr gut unterrichten, stellte ich fest, dass ihre Kursqualität stark schwankt, da ihre Kursqualitätsstandards nicht existieren. Ich hatte Kurse, in denen sogar die Person, die den Kurs gab, sich anhörte, als würde sie einschlafen. Und ich habe ehrlich gesagt nicht die Aufmerksamkeitsspanne, um auf einen 6 bis 10-stündigen Kurs zu achten - und viele von ihnen dauern 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 tolle Kurse über Pluralsight, aber ihr Fokus auf Quantität über Qualität hat mich wirklich dazu gebracht, meine Zeit zu verschwenden. Ich hätte so viel mehr lernen können, wenn ich Kurse aus besseren Quellen wie Egghead.io und CodeSchool besucht hätte, in denen sie mehr Wert auf Quantität legen.

Der einzige Grund, warum ich jemals an jemanden denken könnte, der Pluralsight verwendet, ist, einen Kurs zu belegen, den keine andere Website in einer dunkeleren Technologie (wie Installshield oder Xamarin) hat, oder einige sehr spezifische Kurse zu belegen, von denen er weiß, dass sie sehr gut angenommen wurden und überprüft (zum Beispiel John Papas Angular Fundamentals).

Wenn Sie Pluralsight verwenden möchten, stellen Sie sicher, dass Sie Kurse belegen, die von jemandem ausgewählt wurden, der sie zuerst belegt hat und der 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 ihrer Kurse, die sogar mit der von CodeSchool mithalten kann, und das Kursmaterial ist sehr umfangreich.

Nachdem Sie dort die HTML-, CSS- und JavaScript-Lernpfade durchgesehen haben, können Sie leicht die Grundlage für so ziemlich alles erlangen. Glaubst du mir nicht? Schauen Sie sich einfach ihre Lernspuren an und sagen Sie mir, dass es nicht erstaunlich ist. Sicher, es ist ein bisschen teuer bei 30 USD pro Monat, aber meiner Meinung nach ist es das unglaublich wert. (Ich bezahle gerade dafür, WordPress zu lernen, da ich es für ein freiberufliches Projekt brauche 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 bemerkt habe, dass man Programmieren lernen kann, ohne einen Cent zu zahlen, und genauso wettbewerbsfähig sein kann wie einer, der für einen Kurs bezahlt hat. Ich kann zwar nicht genug betonen, welchen Wert das Bezahlen für den richtigen Kurs hat. Sicher, ziemlich viel des wertvollsten Kursmaterials, über das ich geschrieben habe, ist kostenlos, aber vieles wird auch bezahlt. Hauptsächlich, weil man es manchmal einfach nicht übertreffen kann, wenn jemand Ihnen die Dinge auf visuelle Weise sorgfältig erklärt.

Ja, es gibt furchtbare kostenpflichtige Lernkurse, von denen ich abraten würde, da ihr Wertversprechen fraglich 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). Außerdem haben alle kostenlose Testversionen für 7 bis 15 Tage, sodass 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 leicht wissen, was Sie sonst nur bekommen würden, wenn Sie über ein Jahr lang auf unzählige Artikel und Blog-Beiträge gestoßen wären. 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 Sauce für den Erfolg

Ich habe in den letzten 2 Jahren viele Entwickler getroffen. Ich war Webentwickler. Auf meiner Reise habe ich einige Entwickler getroffen, die wirklich aufgefallen sind - Entwickler, die eindeutig in einer eigenen Liga waren und zu denen ich und alle anderen aufschauten. Ich habe festgestellt, dass diese Personen einige Eigenschaften gemeinsam haben, die ich jetzt gerne mit Ihnen teilen möchte. Dies sind meiner Meinung nach die geheime Sauce, um ein erfolgreicher Webentwickler zu sein:

  • Liebe was du tust. Dies ist einfach das wichtigste Merkmal von allen. Wenn Sie nicht lieben, was Sie tun (sei es CSS-Styling oder JavaScript), zeigt es wirklich, was Sie tun. Diejenigen, die eine 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 und der die Probleme des Projekts löst, geheim zu halten, aber bitte nicht. Die Menschen, die ihr Wissen am meisten teilen, sind oft die wertvollsten, da sie in jede Art von Team aufgenommen werden können und deren Qualität mit großem Abstand verbessern können.
  • Seien Sie immer auf der Suche nach neuen Dingen . Die meisten erfolgreichen Entwickler, die ich getroffen habe, teilen dieses gemeinsame Merkmal. Sei es durch das Lesen von Blogs, viel Zeit in der Programmierung von Diskussionen oder sogar über die Neuigkeiten in der Webentwicklung in den Mittagspausen. Wenn die besten Entwickler ständig auf der Suche nach neuen Dingen sind, bleiben sie 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: "Ok, coole Geschichte, aber was ist der schnellste Weg?" Und so ist es hier.

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. Javascript-Lernpfad von CodeSchool oder Treehouse (kostenpflichtig) ODER Javascript-Kurs von Codecademy
  2. Beredtes JavaScript
  3. Sie kennen JS nicht
  4. JS: Der richtige Weg
  5. Lernen Sie ES6 von Egghead.io

HTML & CSS

  1. CodeSchool oder Treehouses HTML & CSS-Lernpfad (kostenpflichtig) ODER HTML und CSS: Entwerfen und Erstellen von Websites von John Ducket ODER Codecademys HTML & CSS-Kurs.
  2. Besonderheiten der CSS-Spezifität durch CSS-Tricks
  3. Lernen Sie das CSS-Layout
  4. SMACSS
  5. 9 Grundprinzipien des responsiven Webdesigns von Front
  6. Responsive Web Design Fundamentals von Google zu Udacity (Nehmen Sie, wenn Sie den CodeSchool- oder Treehouse-Lernpfad nicht verwendet haben)
  7. Verwalten der mobilen Leistungsoptimierung durch Smashing Magazine ODER Browser-Rendering-Optimierung und Website-Leistungsoptimierung durch Google auf Udacity
  8. Web-Grundlagen von Google

Entwicklerwerkzeuge

  1. Entdecken und beherrschen Sie DevTools mit CodeSchool
  2. Lerne Git von Codecademy und probiere Github von Codeschool
  3. Einführung in Linux-Befehle von 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 Fundamentals von Egghead.io
  3. John Papas Angular Styleguide
  4. Erstellen einer Todo-App für eine einzelne Seite mit Node and Angular (MEAN) von Scotch.io
  5. AngularJS-Anwendungsstruktur von Egghead.io (kostenpflichtig) ODER Scotch.io's Angular Courses

ReactJS

  1. Learning React.js: Erste Schritte und Konzepte von Scotch.io
  2. Einführung in das Webpack von Egghead.io
  3. React Fundamentals von Egghead.io
  4. Mit Reagieren aufsteigen: Redux durch CSS-Tricks

Backend

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

Bonus: Ressourcen

Völlig 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.
  • Awwards. Suchen Sie nach Inspiration für Webdesign? Suchen Sie nicht weiter.
  • Warum das Einstellen von Eric Elliott technisch so schwierig ist. Hier macht Eric einen großartigen Job, um zusammenzufassen, wie es überraschend schwierig ist, großartige Entwickler zu finden und wie man einer wird.
  • Mega-Vergleich der NoSQL-Datenbanksysteme von Kristof Kovacs. Dies ist ein hervorragender Vergleich zwischen den beliebtesten NoSQL-Datenbanksystemen. MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, sie und mehr sind alle hier.
  • XSS-Spiel. XSS-Fehler (Cross-Site Scripting) sind eine der häufigsten und gefährlichsten Arten von Sicherheitslücken in Webanwendungen. Mithilfe dieser großartigen Ressource können Sie lernen, wie Sie XSS-Fehler finden und ausnutzen und verhindern, dass sie in Ihrer Webanwendung auftreten.
  • So schreiben Sie nicht wartbaren Code. Urkomischer Artikel darüber, wie nichtzuSchreiben Sie wartbaren, sauberen Code.

Bonus: Meine Werkzeuge

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

  • Jetbrains Webstorm: Voll funktionsfähige Webentwicklungs-IDE. (Mein Redakteur der Wahl) Bezahlt, bietet aber eine 1-jährige kostenlose Lizenz für Studenten an.
  • Atom.io: Hoch erweiterbarer Texteditor mit IDE-ähnlichen Funktionen, die mit Webstorm konkurrieren. Frei.
  • Sublime Text: Blitzschneller Texteditor mit Plugins-Unterstützung und einem ästhetisch ansprechenden Aussehen. (Normalerweise lasse ich Webstorm / Atom als IDE für ernsthafte Arbeiten und Sublime Text für schnelle Bearbeitungen von 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, die unter Linux ausgeführt wird. Hervorragend geeignet für die Remote-Programmierung und das Testen von NodeJS oder anderen serverseitigen Dingen, ohne dass etwas auf Ihrem Computer installiert werden muss
  • CodePen, Plunker und JSFiddle: Großartige Cloud-basierte Front-End-Spielplätze, auf denen Sie schnelle HTML / CSS / JS-Demos erstellen können, die Sie freigeben oder später bearbeiten können, wenn Sie ein kostenloses Konto erstellen. CodePen eignet sich aufgrund seiner minimalistischen Benutzeroberfläche und einer Vielzahl von CSS-bezogenen Funktionen häufig am besten für CSS-Funktionen, Plunker für JavaScript-Demos aufgrund seiner leistungsstarken JS-Funktionen und JSFiddle für Demos, mit denen Sie dank des Live-Editors in Echtzeit mit anderen zusammenarbeiten möchten Funktion zur gemeinsamen Nutzung der Zusammenarbeit.
  • Vanilla List: Ein Repository von JavaScript-Plugins und -Bibliotheken, die nur Vanilla JavaScript verwenden (dh sie benötigen keine Bibliotheken wie jQuery).
  • YouMightNotNeedjQuery: Wahrscheinlich nicht. Überzeugen Sie sich selbst.
  • PublicAPIs: Haben Sie sich jemals gefragt, welche öffentlichen APIs es gibt? Suchen Sie nicht weiter!
  • Gravit.io: Cloud-basierte Designanwendung, die mit Adobe Illustrator konkurriert. (Kostenlos!) Nützlich für schnelle Modelle und Webdesign.
  • Adobe Kuler: Webapp, mit dem Sie harmonische Farbkombinationen für jede Website erstellen können. Außerdem gibt es eine „Explore“ -Vitrine mit Farbpaletten, die von anderen Designern erstellt wurden, sowie ein Ranking-System, das Sie inspirieren soll.
  • Benennen Sie diese Farbe: Verbringen Sie nicht mehr viel Zeit damit, 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, endlich in der Lage zu sein, der unglaublich unterstützenden Programmiergemeinschaft überall etwas zurückzugeben.

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 nur nicht jede Woche eine. Denken Sie daran: Qualität über Quantität!

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

Ich hoffe, das war euch nützlich, bis zum nächsten Mal, Best!

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

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