HTML, CSS und JS in einer Welt mit ADHS, Zwangsstörung, bipolarer Störung, Legasthenie und Autismus 

Hallo CSS-Trickster! Viele Leute haben uns über Twitter, E-Mail, Kommentare und sogar mit Brieftauben (okay, vielleicht nicht letzteres) Geschichten über ihre persönlichen Reisen beim Erlernen der Webentwicklung geschickt, nachdem wir den Essay „The Great Divide“ veröffentlicht haben. Eine dieser Geschichten stammte von Tim Smith, und sie war so interessant, dass wir ihn einluden, sie mit der breiteren Community zu teilen. Helfen wir ihm also dabei, ihn willkommen zu heißen, während er seine einzigartige persönliche Erfahrung schildert und wie es sich anfühlt, in seinen Schuhen als Front-End-Entwickler zu stecken.

Hallo Leute, mein Name ist Tim Smith

Ich habe ADS, Zwangsstörung, bipolare Störung, Legasthenie … und nicht zu vergessen, dass ich auf dem Autismus-Spektrum bin. Diese Kombination (abgesehen davon, dass ich viel persönliche Scham empfinde) macht das Programmieren sehr schwierig – besonders das Erlernen des Programmierens, was ich versuche zu tun. Dinge vermischen sich in meinem Kopf und erscheinen umgekehrt, sodass ich es fast unmöglich finde, mich länger als 15-20 Minuten zu konzentrieren. Vielleicht werde ich das in einem anderen Beitrag näher erläutern. Schon jetzt, während ich das schreibe, fühle ich mich gedrängt, jeden Song auf YouTube Music zu bewerten und jeden Fehler, den ich mache, zu korrigieren. Und da ich „schreiben“ ständig mit „richtig“ verwechsle, wird das, gelinde gesagt, ärgerlich und entmutigend.

Ich lese nicht gut, daher ist das Lernen aus Büchern die am wenigsten effektive Methode für mich (tut mir leid O’Reilly). Online-Tutorials sind in Ordnung, aber ich neige dazu, mich selbst zu unterschätzen, indem ich beim Kopieren und Einfügen von Codebeispielen faul bin. Wenn ich mich zwinge, die Beispiele von Hand einzugeben, profitiere ich vom Muskelgedächtnis, ertrinke aber in den Worten des Tutorials und verliere schließlich ganz das Interesse.

Video-Tutorials sind meine ideale Lernmethode. Es gibt kein Lesen und keine Möglichkeit für mich, mich durch Kopieren und Einfügen herauszuarbeiten. Das Anhalten und Starten der Videos, um den Code einzugeben, ist nervig, aber es lohnt sich. YouTube ist ein großartiger Ort für Video-Tutorials, wenn man die Geduld hat, sich durch sie zu wühlen … was ich nicht habe.

Ich habe Chris Coyier in den frühen 2000er Jahren entdeckt. Die Fundgrube an Artikeln, Anleitungen und Videos, die hier auf CSS-Tricks zu finden sind, war für mich von großem Nutzen und hat meine Fähigkeit, Code zu lernen, tatsächlich vorangebracht. Später habe ich Wes Bos entdeckt. Auch er hat maßgeblich zu meinem Web-Lernen beigetragen. Wes hat viele Dinge, mit denen ich zu kämpfen hatte, insbesondere React und die neuen Funktionen von ES6, erschlossen.

Zusammenfassend lässt sich sagen, dass Chris und Wes für mindestens 80 % meines gesamten Wissens im Front-End verantwortlich sind. (Persönlicher Anmerkung: Chris und Wes, ihr seid meine Helden und geheimen Mentoren.) Beide haben eine Art, mir die Informationen auf eine Weise zu vermitteln, die für das, was ich gerade lerne, relevant ist, unterhaltsam und lehrreich ist, aber auch direkt und präzise. Sie präsentieren nicht nur den Code; sie erklären das Warum und die Geschichte hinter jedem Thema. Wes ist darin etwas besser, aber die schiere Anzahl an Videos, die Chris erstellt hat, hat mich jahrelang beschäftigt und wird das auch weiterhin tun.

Einfaches Programmieren ist eine weitere effektive Methode für mich zu lernen. Ich mag es, mich hineinzusteigern und Entwicklungsserver für verschiedene Web-Sprachen und Bibliotheken einzurichten und herumzuspielen. Ich habe viel über MacOS und Linux (hauptsächlich Ubuntu) gelernt und gleichzeitig die Grundlagen vieler Web-Sprachen und Bibliotheken kennengelernt: PHP (für WordPress-Themes), Python, React, Vue und viele andere. Ich habe gelernt, die Kommandozeile zu lieben und GUIs zu vermeiden, wann immer möglich. Nichts gegen GUIs; ich finde die Kommandozeile einfach präziser (und nur zwischen uns beiden, viel cooler, um damit vor Nicht-Programmierern anzugeben).

Ich benutze immer noch die Kommandozeile – oder zumindest würde ich das, wenn ich noch einen Laptop oder Desktop hätte, um darauf zu arbeiten. Ich schreibe dies gerade auf einem iPad Mini 2. Ich habe jedoch eine weitere großartige Möglichkeit gefunden, Code zu schreiben und zu teilen, ohne Server und komplizierte Umgebungen einrichten zu müssen: CodePen. Ich bin schon früh in eine Beta-Version eingestiegen und es war Liebe auf den ersten Blick. Ich kann jetzt Code schreiben, ihn teilen und Feedback erhalten, alles an einem Ort (hier ist mein Profil). Jedes Mal, wenn ich eine lustige Idee habe oder eine lustige Kata finde, starte ich Codepen und fange einfach an zu programmieren. Keine knifflige Entwicklereinrichtung. Es gibt andere Apps, die das tun, aber CodePen ist einzigartig wegen des sozialen Aspekts und der Möglichkeit, Codebeispiele einfach in Foren einzubetten.

Das ist also ein bisschen über mich. Worauf ich hinauswill, ist, wie ich HTML und CSS lerne, weil es wahrscheinlich dem euren ähnelt, aber anders ist, als ihr es vielleicht angegangen seid.

Einstieg in HTML

Ich habe HTML auf verschiedene Weisen gelernt. Zuerst habe ich mir den Quellcode beliebter Webseiten angesehen. In den frühen Neunzigern, als ich anfing, HTML zu lernen, hatten viele, wenn nicht die meisten, Webbrowser die Möglichkeit, den Quellcode einer Webseite anzuzeigen. Ich sah alle Tags, wie sie verwendet wurden, und die Grundstruktur der Seiten. Ich konnte sie umgekehrt analysieren. Ich hatte zu dieser Zeit noch kein CSS gelernt, daher waren meine ersten Websites einspaltig und sehr langweilig.

Kurze Nebenbemerkung: Ohne CSS sind alle Websites perfekt responsiv und sehen auf jedem Gerät oder jeder Bildschirmgröße gut aus. Wir machen sie mit CSS kaputt und müssen sie dann reparieren … überdenken Sie das mal.

Dank des Quellcodes begann ich, Artikel im Web zu lesen und studierte ständig. Ich fand das DreamInCode-Forum, das als Forum für alle Programmierdisziplinen und Sprachen dient – ähnlich wie StackOverflow, denn wie StackOverflow waren die Leute arrogant und unhöflich zu Neulingen, zumindest nach meiner Erfahrung. Dennoch konnte ich sehen, wie die Leute verschiedene HTML-Konzepte und Probleme angegangen sind, und das war der Sprungbrett, auf dem ich mein Lernabenteuer startete. Ich erhielt klare, oft harte Rückmeldungen zu meinen Codebeispielen. So schwer es auch ist, harte Kritik zu hören, sie hat mir geholfen, denn sie hat mir den richtigen und – noch wichtiger – den falschen Weg gezeigt, HTML anzugehen und zu schreiben.

Wie bei den meisten Dingen ist das Schreiben und Beherrschen von HTML eine Frage von Versuch und Irrtum. Ich musste Hunderte von schrecklichen Websites (wenn man sie so nennen kann) erstellen, bevor es bei mir „klickte“. Aber das ist besser als nichts, wie wir alle schon gehört haben.

Bauen Sie einfach Websites!
— Chris Coyier

Nicht lange danach wurde ich mit CSS vertraut gemacht, und dann begann die eigentliche Reise…

Und dann kam CSS

Am einfachsten kann ich CSS so beschreiben: Es ist der Code, der Ihr HTML gut aussehen lässt. Ich musste eine KISS-Einstellung (Keep it simple, stupid) übernehmen, als ich CSS lernte, weil ich merkte, dass ich es überdachte. CSS ist einfach, wenn man es zulässt. Schauen wir mal.

Sehen Sie den Pen
Ding von Tim Smith (@WebRuin)
auf CodePen.

So einfach ist CSS. Benennen Sie Ihren Block in HTML (z.B. <div class="Tim">...</div>), zielen Sie dann in einer CSS-Datei auf diesen Namen mit Eigenschaften, um den Block zu beschreiben, wie Farben, Rahmen, Schriftarten und vieles mehr.

Zuerst verbrachte ich all meine Zeit damit, mir so viele CSS-Eigenschaften wie möglich zu merken. Ich würde „Alta Vista“ (erinnern Sie sich?!) durchsuchen, um zu sehen, was andere Leute mit CSS machten und wie sie es machten. Das war unterhaltsam und informativ, aber verwirrte mich nur bis zum Ende. Der Versuch, CSS umzukehren, wie ich es mit HTML tat, brachte mich nur bis zu einem gewissen Punkt. Meine Erinnerung an solche Dinge ist bestenfalls schlecht. Ich musste einen Schritt zurücktreten, tief durchatmen (buchstäblich und bildlich) und einen neuen Ansatz finden.

Mein Gedankengang sieht normalerweise ungefähr so aus:

1. Sollen die Wörter schwarz sein? Wenn ja, tun Sie nichts.
2. Was ist mit der Hintergrundfarbe? Das Standard-Weiß ist langweilig, also... geben Sie ihm eine Hintergrundfarbe.
3. Wie groß soll das Element sein? Denken Sie nicht zu viel über Maßeinheiten nach, denn Pixel sind in Ordnung und Höhe und Breite scheinen mir ziemlich logisch.

Und so weiter. Einfache Fragen mit einfachen Eigenschaftsnamen. Mein Punkt ist, dass man mit einfachem CSS erstaunliche Dinge tun kann. Es war diese Einfachheit, die mich dazu brachte, alles, was ich fand, lernen und anwenden zu wollen. Aber gleichzeitig war ich so überfordert, dass ich die Webentwicklung fast für immer aufgab. Es ist ein seltsamer Konflikt: Die Einfachheit und Eleganz sind einladend und unterhaltsam, aber die unzähligen Möglichkeiten sind schwindelerregend und unmöglich zu behalten.

Was für mich funktionierte, war ein schrittweiser Ansatz, um CSS zu lernen. Indem ich klein anfing und langsam mehr hinzufügte, als ich die Eigenschaften wirklich lernte und verstand. Ich stellte fest, dass ich Spaß haben und kreativ sein konnte, in einem angenehmen Tempo, ohne mich zu sehr unter Druck zu setzen.

Ich werde nicht lügen. Ich bin kein Designer. Wenn man mir eine leere Leinwand gibt, werde ich einfrieren oder ein mittelmäßiges Design entwerfen, das von einer Mischung aus anderen Designs abgeleitet ist, die ich mag. Das gesagt, ich bin gut darin, ein Design zu programmieren, das jemand mit tatsächlichen Designfähigkeiten erstellen kann (wie dieses).

Ich habe mich aus einem Grund in CSS verliebt: Es ist die perfekte Balance zwischen Logik und Design. Viel Programmieren ist so. Code kann schön sein, aber CSS ist für mich das Beste!

JavaScript ist schwer! Aber ich versuche es.

HTML und CSS fielen mir relativ leicht. Ich stolperte ein wenig über CSS Grid und einige fortgeschrittenere Dinge, aber es machte einfach Klick bei mir. Wie ich bereits angedeutet habe, bin ich ein visueller Lerner. Sowohl HTML als auch CSS sind inhärent visuelle Sprachen, und sie geben mir die sofortige Befriedigung, die mein ADS braucht. Beide sind für mich einfach und nachvollziehbar.

Im Gegensatz dazu finde ich Javascript sehr, sehr schwierig. Es ist eine logikbasierte Sprache, die normalerweise mein Ding wäre; trotzdem finde ich es schwierig, damit „Klick“ zu machen. Trotz einiger Erleuchtungen beim Erlernen scheint mir JavaScript über die Grundlagen hinaus zu entgehen. Ich habe Wes Bos' JavaScript30-Kurs sowie viele andere Tutorials abgeschlossen. Sie ergeben Sinn in dem Moment, in dem sie mir erklärt werden, aber selbst dann, wenn ich mit einer „leeren Leinwand“ konfrontiert werde, so quasi, vergesse ich die meisten Konzepte und schreibe entweder immer wieder dasselbe Zeug oder gebe einfach auf.

Überraschenderweise fiel mir React viel leichter. Ich denke, das liegt an seiner Modularität und meiner Liebe zu Blöcken, LEGOs und Rätseln. Ich habe es gut genug gelernt, dass ich kreativ damit umgehen konnte und begonnen habe, eine App damit zu schreiben: ein crowdsourced urbaner Toilettenfinder. Ich habe den Anfang der App mit verschiedenen Flux-Bibliotheken und Backend-Datenbibliotheken geschrieben und neu geschrieben. Ich gebe unweigerlich auf, nur um wieder von vorne anzufangen, wie die berühmte Definition von Wahnsinn. Ich denke einfach, dass ich es herausfinden werde und/oder jemanden finden werde, der die schwierigen Teile für mich erledigt.

Meine Blockade bei React ist natürlich JavaScript. Das macht vielleicht keinen Sinn, aber erinnern Sie sich an meine Haltung zu Blöcken. Ich weiß, dass React JavaScript ist. Für mich ist es jedoch etwas ganz anderes als reines JavaScript. Closures, reine Funktionen, Pfeilfunktionen, let im Vergleich zu const im Vergleich zu var, die riesige Menge an integrierten Methoden, ganz zu schweigen von importierten Bibliotheken, Klassen und natürlich meinem Erzfeind, Big O (wie sehr ich Big-O verabscheue)… mein Kopf dreht sich schon, während ich das schreibe.

Ich möchte so sehr, zumindest anständig in JavaScript sein, also versuche ich es weiter. Hunderte von Tutorials, Codeschulen wie freeCodeCamp.org, Treehouse, Khan Academy, und ja, sogar das Durchbeißen vieler Bücher (ich liebe JavaScript: The Good Parts).

Mit der Syntax habe ich keine Probleme. Die Blockade, denke ich, liegt in einem Mangel an Informatikkenntnissen und dieser Unfähigkeit, mathematisch zu denken. Algorithmen ergeben im Konzept Sinn, aber ihre praktische Anwendung sprengt einfach meinen Kopf.

Aus Gründen der psychischen Gesundheit war es für mich notwendig, meine Karriere in der Webentwicklung 2005 aufzugeben. Ich konnte etwa 2010 wieder einsteigen, als ich für einige Startups arbeitete, aber ich bin nie wirklich zurückgekehrt. JavaScript ist meine Achillesferse. Ich hatte Glück, ein paar Jobs zu finden, die wenig JavaScript erforderten, damit ich mich auf HTML und CSS konzentrieren konnte – die Dinge, von denen ich dachte, sie würden die Front-End-Entwicklung ausmachen –, aber unweigerlich wurde von mir erwartet, dass ich JavaScript über grundlegende Interface-Verbesserungen hinaus schreibe, und die Jobs zerfielen. Also kündigte ich oder wurde entlassen.

Die fortlaufende Jobsuche

Die Arbeitssuche in letzter Zeit war ein Albtraum! Wir leben jetzt in einer von JavaScript dominierten Welt, und es scheint, dass niemand einen Front-End-Entwickler sucht, dessen Stärken in HTML, CSS und mittleren JavaScript-Kenntnissen liegen – insbesondere ohne einen Abschluss in Informatik. Ich kann nicht einmal eine Stellenausschreibung dafür auf einer großen Jobseite finden.

Ich hatte die Ehre, mit Personalvermittlern von Facebook, Google und Apple zu sprechen, aber ich schaffte es nicht über die erste Runde des Telefon-Screenings hinaus. Mir wurden Fragen gestellt, die meiner Meinung nach wenig bis gar nichts mit dem zu tun hatten, was ich unter Front-End-Entwicklung verstehe. Es gab keine Fragen zu CSS-Best Practices und nicht einmal zu semantischem HTML oder der richtigen Verwendung von ARIA-Attributen. Alles, worauf sie sich zu konzentrieren schienen, war Big O und effiziente Schleifen. Selbst Vorstellungsgespräche mit kleineren Unternehmen waren so. Haben Dienstleistungen wie Wix und ähnliche alle Kern-Front-End-Jobs übernommen?

Trotz all der Herausforderungen, denen ich gegenüberstand, habe ich das Gefühl, HTML und CSS gemeistert zu haben und ein grundlegendes Verständnis von JavaScript zu haben. Darauf bin ich sehr stolz. Während ich davon träume, bei einem großen Unternehmen wie Facebook, Google oder Apple zu arbeiten, hoffe ich wirklich, nur eine Stelle zu finden, an der meine HTML- und CSS-Kenntnisse glänzen können und ich praktische Erfahrungen mit JavaScript als Junior-Entwickler mit dem Vorteil eines Mentorings sammeln kann, irgendwo in der San Francisco Bay Area, wo ich derzeit lebe.

Wir alle haben unterschiedliche Lernstile und Lerngeschwindigkeiten, also geben Sie nicht auf, bevor Sie jeden möglichen Weg versucht haben, um zu lernen, was Sie tun wollen. Und wenn Ihnen ein neuer Weg einfällt, teilen Sie ihn bitte, damit wir alle unser individuelles und kollektives Wissen erweitern können.

Ich hoffe, dieser Artikel hat mindestens einen anderen Entwickler wie mich erreicht! Vielen Dank an all meine Vorgänger. Viel Spaß beim Programmieren!