Wie sollten Designer Programmieren lernen? Git, HTML/CSS, Engineering-Prinzipien (Teil 2)

Buchstäblich Wälzer wurden über Versionskontrolle geschrieben. Trotzdem werde ich mit einer kurzen Erklärung und anderen einführenden Inhalten beginnen, um Ihren Appetit auf weitere Studien zu wecken.

Versionskontrolle (nicht zu verwechseln mit Versionshistorie ) ist im Grunde eine Möglichkeit für Menschen, in ihrer eigenen Umgebung an einem einzigen Projekt mit einer einzigen Hauptquelle der Wahrheit (oft als „Master“-Zweig bezeichnet) zusammenzuarbeiten.

Ich werde heute das absolute Minimum durchgehen, das Sie wissen müssen, um ein Projekt herunterzuladen, eine Änderung vorzunehmen und es dann an den Master zu senden.

Es gibt viele Arten von Versionskontrollsoftware und viele Tools zum Verwalten und Hosten Ihres Quellcodes (Sie haben vielleicht schon von GitLab oder Bitbucket gehört). Git und GitHub sind eines der häufigeren Paare, meine Beispiele beziehen sich auf GitHub, aber die Prinzipien gelten für die meisten anderen Quellcode-Manager.

Nebenbei :

• Eine umfassendere und technische Einführung finden Sie im Artikel von Tobias Gunther.
• Wenn Sie einen praktischeren Ansatz bevorzugen, bietet GitHub eine hervorragende Schritt-für-Schritt-Anleitung.

Ihr erster Beitrag

Bevor Sie diese Schritte ausführen, müssen Sie einige Dinge einrichten:

1. Ein GitHub-Konto,
2. Knoten und NPM auf Ihrem Computer installiert,
3. Eine hohe Schmerztoleranz oder eine niedrige Schwelle, andere um Hilfe zu bitten.

Schritt 1: Fork (Holen Sie sich eine Kopie des Codes auf Ihrem GitHub-Konto)

Auf GitHub werden Sie das betreffende Repository (Repo) forken (Fork = eine Kopie des Codes in Ihrem Konto erstellen; in der folgenden Abbildung zeigen die blauen, orangen, roten und grünen Linien Forks) .

Sie tun dies, indem Sie in GitHub zum Repo navigieren und auf die Schaltfläche „Fork“ klicken, die sich derzeit in der oberen rechten Ecke eines Repos befindet. Dies wird der „Ursprung“ sein – Ihr Fork auf Ihrem GitHub-Konto.

Wenn Sie beispielsweise zu https://github.com/yourGitHubUsername/liferay.design navigieren, sollte Ihr Fork des Liferay.Design-Repos angezeigt werden.

Schritt 2: Klonen (Laden Sie den Code auf Ihren Computer herunter)

Navigieren Sie in Ihrem Terminal zu dem Ort, an dem Sie den Code speichern möchten. Ich persönlich habe einen /github Ordner in meinem /user -Ordner – das erleichtert mir die Organisation auf diese Weise. Wenn Sie das tun möchten, sind hier die Schritte – nachdem Sie diese Befehle in Ihr Terminalfenster eingegeben haben, drücken Sie die Taste ↵ , um sie auszuführen:

 cd ~/ ## you'll usually start in your root directory, but just in case you don't this will take you there mkdir github ## this creates a "github" folder — on OSX it will now be located at users/your-username/github cd github ## this command navigates you inside the github folder

Jetzt, da Sie sich im /github Ordner befinden, werden Sie das Repo klonen (eine Kopie des Codes auf Ihren Computer herunterladen).

 clone https://github.com/yourGitHubUsername/liferay.design

Sobald Sie diesen Befehl eingeben, sehen Sie eine Reihe von Aktivitäten im Terminal – etwa so:

 Cloning into 'liferay.design'... remote: Enumerating objects: 380, done. remote: Total 380 (delta 0), reused 0 (delta 0), pack-reused 380 Receiving objects: 100% (380/380), 789.24 KiB | 2.78 MiB/s, done. Resolving deltas: 100% (189/189), done.

Schritt 3: Installieren (Lassen Sie es auf Ihrem Computer laufen)

Navigieren Sie in den Ordner /project . In diesem Fall geben wir cd liferay.design . Die meisten Projekte enthalten eine README.md -Datei im /root Ordner, dies ist normalerweise der Ausgangspunkt für die Installation und Ausführung des Projekts. Geben Sie für unsere Zwecke zum Installieren npm install ein. Geben Sie nach der Installation npm run dev .

Glückwünsche! Sie haben die Site jetzt auf Ihrem lokalen Computer verfügbar – normalerweise teilt Ihnen Projects mit, wo sie ausgeführt wird. Öffnen Sie in diesem Fall einen Browser und gehen Sie zu localhost:7777 .

Schritt 4: Übernehmen (einige Änderungen vornehmen und speichern)

Ein Commit ist eine Sammlung von Änderungen, die Sie vornehmen; Ich habe gehört, dass es als das Speichern Ihres Fortschritts in einem Spiel beschrieben wird. Es gibt viele Meinungen darüber, wie Commits strukturiert sein sollten: Meine ist, dass Sie ein Commit erstellen sollten, wenn Sie eine Sache erreicht haben, und wenn Sie das Commit entfernen würden, würde es das Projekt nicht vollständig zerstören (im Rahmen des Zumutbaren).

Wenn Sie nicht mit einer anderen Meinung zu einem Repo kommen, ist die Registerkarte „Probleme“ eine gute Anlaufstelle. Hier sehen Sie, was im Projekt zu tun ist.

Wenn Sie eine Idee für eine Veränderung haben, machen Sie weiter und machen Sie es. Nachdem Sie die Datei(en) gespeichert haben, sind die folgenden Schritte erforderlich, um einen Commit zu erstellen:

 git status ## this will print out a list of files that you've made changes in git add path/to/folder/or/file.ext ## this will add the file or folder to the commit git commit -m 'Summarize the changes you've made' ## this command creates a commit and a commit message

Tipp : Die beste Empfehlung, die ich je für Commit-Nachrichten gesehen habe, stammt von Chris Breams „How To Write A Git Commit Message“. Eine richtig geformte Git-Commit-Betreffzeile sollte immer den folgenden Satz vervollständigen können: „Wenn angewendet, wird dieses Commit [Ihre Betreffzeile hier].“ Weitere Informationen zu Commits finden Sie unter „Why I Create Atomic Commits In Git“ von Clarice Bouwer.

Schritt 5: Push (sende deine Änderungen an deinen Origin)

Nachdem Sie einige Änderungen auf Ihrem Computer vorgenommen haben, müssen sie von Ihrem lokalen in Ihr Remote-Repo verschoben werden, bevor sie in den Master-Branch gemergt (zum Projekt hinzugefügt) werden können. Geben Sie dazu in der Kommandozeile git push origin ein.

Schritt 6: Pull-Request (Fordern Sie an, dass Ihre Änderungen in Upstream zusammengeführt werden)

Jetzt, da Ihre Änderungen von Ihren Fingern auf Ihren Computer und in Ihr Remote-Repository übertragen wurden, ist es jetzt an der Zeit, sie per Pull-Request (PR) in das Projekt einzubinden.

Der einfachste Weg, dies zu tun, ist, auf die Seite Ihres Repos in GitHub zu gehen. Direkt über dem Dateifenster wird eine kleine Meldung angezeigt, die besagt: „Dieser Zweig ist X-Commits voraus Repo-Name: Zweig“ und dann Optionen für „Pull-Anfrage“ oder „Vergleichen“.

Wenn Sie hier auf die Option „Pull Request“ klicken, gelangen Sie zu einer Seite, auf der Sie die Änderungen vergleichen können, und eine Schaltfläche mit der Aufschrift „Pull Request erstellen“ führt Sie dann zur Seite „Pull Request öffnen“, auf der Sie einen Titel hinzufügen und einen Kommentar einfügen. Kurz, aber detailliert genug im Kommentar zu sein, wird den Projektbetreuern helfen, Ihre vorgeschlagenen Änderungen zu verstehen.

Es gibt CLI-Tools wie Node GH (GitHub hat kürzlich auch eine Betaversion ihres CLI-Tools veröffentlicht), mit denen Sie Pull-Anforderungen im Terminal initiieren und verwalten können. An dieser Stelle können Sie es vorziehen, das Webinterface zu verwenden, und das ist großartig! Ich auch.

Bonusschritt: Remote (Alle Repos verknüpfen)

An dieser Stelle haben wir drei Repository-Referenzen:

1. upstream : das Haupt-Repo, das Sie verfolgen, oft ist es das Repo, das Sie gegabelt haben;
2. origin : der Standardname der Fernbedienung, die Sie klonen;
3. local : Der Code, der sich derzeit auf Ihrem Computer befindet.

Bisher haben Sie Nr. 2 und Nr. 3 – aber Nr. 1 ist wichtig, weil es die Hauptquelle ist. Wenn Sie diese drei Dinge miteinander in Einklang halten, wird dies dazu beitragen, dass der Commit-Verlauf sauber bleibt. Dies hilft Projektbetreuern, da es Zusammenführungskonflikte eliminiert (oder zumindest minimiert), wenn Sie Pull-Requests (PRs) senden, und es hilft Ihnen, den neuesten Code zu erhalten und Ihre lokalen und ursprünglichen Repositories auf dem neuesten Stand zu halten.

Stellen Sie eine Upstream-Fernbedienung ein

Um die Upstream-Fernbedienung zu verfolgen, geben Sie in Ihrem Terminal Folgendes ein:

 git remote add upstream https://github.com/liferay-design/liferay.design

Überprüfen Sie nun, welche Fernbedienungen Sie zur Verfügung haben – geben Sie git remote -v in Ihr Terminal ein, Sie sollten so etwas sehen wie:

 origin https://github.com/yourGitHubUsername/liferay.design (fetch) origin https://github.com/yourGitHubUsername/liferay.design (push) upstream https://github.com/liferay-design/liferay.design (fetch) upstream https://github.com/liferay-design/liferay.design (push)

Auf diese Weise können Sie schnell die neueste Version dessen abrufen, was Upstream ist – wenn Sie lange nicht in einem Repo gearbeitet haben und keine lokalen Änderungen haben, die Sie behalten möchten, ist dies ein praktischer Befehl, den ich verwende :

 git pull upstream master && git reset --hard upstream/master

Die GitHub-Hilfe ist eine großartige Ressource für diese und viele andere Fragen, die Sie möglicherweise haben.

HTML und CSS: Beginnend mit der Semantik

Im Web gibt es unendlich viele Ressourcen zum Erlernen von HTML und CSS. Für die Zwecke dieses Artikels teile ich, was ich basierend auf empfehlen würde die Fehler, die ich gemacht habe wie ich zum ersten Mal lernte, HTML und CSS zu schreiben.

Was sind HTML und CSS?

Bevor wir weitermachen, wollen wir HTML und CSS definieren.

HTML steht für HyperText Markup Language.

Hypertext:

„Hypertext ist Text, der auf einem Computerbildschirm oder anderen elektronischen Geräten mit Verweisen (Hyperlinks) auf anderen Text angezeigt wird, auf den der Leser sofort zugreifen kann.“

— „Hypertext“ auf Wikipedia

Auszeichnungssprache:

„…ein System zum Annotieren eines Dokuments auf eine Weise, die syntaktisch vom Text unterscheidbar ist.“

— „Auszeichnungssprache“ auf Wikipedia

Falls Sie auch nicht wissen, was viele dieser Wörter bedeuten – kurz gesagt, HTML ist die Kombination von Verweisen (Links) zwischen Dokumenten im Web und Tags , die Sie verwenden, um diesen Dokumenten Struktur zu verleihen.

Für eine gründliche Einführung in HTML und CSS empfehle ich dringend die Einführung in HTML und CSS – Erste Schritte, beide in den Webdokumenten des Mozilla Developer Network (MDN) . Das, zusammen mit den ausgezeichneten Artikeln, die Websites wie CSS Tricks, 24 Ways und unzählige andere bieten, enthält im Grunde alles, was Sie jemals in Bezug auf HTML/CSS nachschlagen müssen.

Es gibt zwei Hauptteile eines HTML -Dokuments: den <head> und den <body> . - Der <head> enthält Dinge, die vom Browser nicht angezeigt werden – Metadaten und Links zu importierten Stylesheets und Skripten. - Der <body> enthält den eigentlichen Inhalt, der vom Browser gerendert wird. Um den Inhalt zu rendern, liest der Browser den HTML-Code, stellt abhängig von den verwendeten Tag-Typen eine Basisebene von Stilen bereit, fügt zusätzliche Ebenen von Stilen hinzu, die von der Website selbst bereitgestellt werden (die Stile sind in <head> enthalten/verwiesen, oder sind inline), und das sehen wir am Ende. (Hinweis: Es gibt oft auch die zusätzliche Ebene von JavaScript, aber das geht über den Rahmen dieses Artikels hinaus.)

CSS steht für Cascading Style Sheets – es wird verwendet, um den HTML-Code zu erweitern, indem es einfacher wird, Dokumenten ein benutzerdefiniertes Erscheinungsbild zu verleihen. Ein Stylesheet ist ein Dokument, das dem HTML-Code mitteilt, wie Elemente aussehen (und wie sie positioniert werden sollen), indem es Regeln basierend auf Tags, Klassen, IDs und anderen Selektoren festlegt. Kaskadierung bezieht sich auf das Verfahren zur Bestimmung, welche Regeln in einem Blatt im unvermeidlichen Fall eines Regelkonflikts Vorrang haben.

„‚Cascading‘ bedeutet, dass Stile von einem Stylesheet zum anderen fallen (oder kaskadieren) können, sodass mehrere Stylesheets in einem HTML-Dokument verwendet werden können.“

— Kaskade — Max Design

CSS hat oft einen schlechten Ruf – auf Seiten mit vielen Stylesheets kann es schnell unhandlich werden, besonders wenn keine dokumentierten, konsistenten Methoden verwendet werden (dazu später mehr) – aber wenn Sie es organisiert und konsequent verwenden Best Practices, CSS kann Ihr bester Freund sein. Insbesondere mit den Layout-Funktionen, die jetzt in den meisten modernen Browsern verfügbar sind, ist CSS nicht mehr annähernd so notwendig, um zu hacken und zu bekämpfen, wie es früher war.

Rachel Andrew hat einen großartigen Leitfaden geschrieben, How To Learn CSS – und eines der besten Dinge, die Sie wissen sollten, bevor Sie anfangen, ist Folgendes:

„Sie müssen sich nicht verpflichten, sich jede CSS-Eigenschaft und jeden Wert zu merken.“

– Rahel Andreas

Stattdessen ist es viel wichtiger, die Grundlagen zu lernen – Selektoren, Vererbung, das Box-Modell und vor allem, wie Sie Ihren CSS-Code debuggen (Tipp: Sie benötigen die Browser-Entwicklertools).

Machen Sie sich keine Gedanken über das Auswendiglernen der Syntax für die background , und machen Sie sich keine Sorgen, wenn Sie vergessen, wie Sie Dinge in Flexbox genau ausrichten (der CSS Tricks Guide to Flexbox ist möglicherweise eine meiner Top-10 der meistbesuchten Seiten aller Zeiten! ); Google und Stack Overflow sind Ihre Freunde, wenn es um CSS-Eigenschaften und -Werte geht.

Einige Code-Editoren haben sogar eine eingebaute automatische Vervollständigung, sodass Sie nicht einmal im Internet suchen müssen, um beispielsweise alle möglichen Eigenschaften einer Grenze herauszufinden.

Eine meiner liebsten neuen Funktionen in Firefox 70 ist die Anzeige für inaktive CSS-Regeln. Es erspart Ihnen Stunden, herauszufinden, warum ein Stil nicht angewendet wird.

Semantik

Beginnen wir mit semantischem Code . Semantik bezieht sich auf die Bedeutung von Wörtern, semantischer Code bezieht sich auf die Idee, dass das Markup in einer bestimmten Sprache eine Bedeutung hat.

Es gibt viele Gründe, warum Semantik wichtig ist. Wenn ich das zusammenfassen könnte, würde ich sagen, wenn Sie semantischen Code lernen und verwenden, wird es Ihr Leben viel einfacher machen, weil Sie viele Dinge kostenlos bekommen – und wer mag keine kostenlosen Sachen?

Eine vollständigere Einführung in semantischen Code finden Sie in Paul Boags kurzem Blogbeitrag zu diesem Thema.

Semantik bietet Ihnen viele Vorteile:

1. Standardstile
   Wenn Sie beispielsweise ein Schlagzeilen-Tag <h1> für den Titel Ihres Dokuments verwenden, hebt es sich vom Rest des Dokumentinhalts ab, ähnlich wie es eine Überschrift tun würde.
2. Zugängliche Inhalte
   Auf Ihren Code kann standardmäßig zugegriffen werden, was bedeutet, dass er mit Screenreadern funktioniert und mit einer Tastatur einfacher zu navigieren ist.
3. SEO-Vorteile
   Semantisches Markup ist für eine Maschine leichter lesbar, wodurch es für Suchmaschinen besser zugänglich ist.
4. Leistungsvorteile
   Sauberes HTML ist die Grundlage für eine leistungsstarke Website. Und sauberes HTML führt wahrscheinlich auch zu saubererem CSS, was insgesamt weniger Code bedeutet und Ihre Website oder App schneller macht.

Hinweis: Für einen tieferen Einblick in Semantik und HTML hat Heydon Pickering „Strukturelle Semantik: Die Bedeutung von HTML5-Abschnittselementen“ geschrieben, dessen Lektüre ich sehr empfehle.

Technische Prinzipien und Paradigmen: Die Grundlagen

Abstraktion

Es gibt unzählige Anwendungen, Tangenten und Ebenen, die wir über das Konzept der Abstraktion untersuchen könnten – zu viele für diesen Artikel, der Ihnen eine kurze Einführung in die Konzepte geben soll, damit Sie sich ihrer bewusst sind, während Sie weiter lernen.

Abstraktion ist ein grundlegendes technisches Paradigma mit einer Vielzahl von Anwendungen – für die Zwecke dieses Artikels bedeutet Abstraktion die Trennung von Form und Funktion. Wir werden dies in drei Bereichen anwenden: Tokens, Komponenten und das Don't Repeat Yourself-Prinzip.

Token

Wenn Sie längere Zeit ein modernes Designtool verwendet haben, sind Sie wahrscheinlich schon auf die Idee eines Tokens gestoßen. Sogar Photoshop und Illustrator haben jetzt diese Idee von gemeinsamen Stilen in einer zentralen Bibliothek – anstatt Werte fest in ein Design zu codieren, verwenden Sie ein Token. Wenn Sie mit dem Konzept von CSS- oder SASS-Variablen vertraut sind, sind Sie bereits mit Token vertraut.

Eine Abstraktionsebene mit Token besteht darin, einer Farbe einen Namen zuzuweisen – $blue-00 kann beispielsweise einem Hexadezimalwert (oder einem HSL-Wert oder was auch immer) zugeordnet werden – sagen wir #0B5FFF . Anstatt den Hex-Wert in Ihren Stylesheets zu verwenden, verwenden Sie jetzt den Token-Wert. Wenn Sie also entscheiden, dass blue-00 tatsächlich #0B36CE ist, müssen Sie ihn nur an einer einzigen Stelle ändern. Das ist ein schönes Konzept.

Wenn Sie dasselbe Abstraktionsparadigma nehmen und eine Ebene weiter gehen, können Sie Token-Empfänge ausführen – und einem funktionalen Wert eine Variable zuweisen. Dies ist besonders nützlich, wenn Sie ein robustes System haben und verschiedene Themen innerhalb des Systems haben möchten. Ein funktionales Beispiel hierfür wäre die Zuweisung einer Variablen wie $primary-color und die Zuordnung zu $blue-00 – Sie können also jetzt Markup erstellen und anstatt auf Blau zu verweisen, referenzieren Sie eine funktionale Variable. Wenn Sie jemals dasselbe Markup verwenden möchten, aber mit einem anderen Stil (Thema), müssen Sie nur $primary-color einer neuen Farbe zuordnen, und Ihr Markup muss sich überhaupt nicht ändern! Magie!

Komponenten

In den letzten 3-4 Jahren ist die Idee der Komponenten und der Komponentenisierung für Designer relevanter und zugänglicher geworden. Das Konzept der Symbole (Pionierarbeit von Macromedia/Adobe Fireworks, später von Sketch erweitert und dann von Figma und Framer auf die nächste Ebene gebracht) ist jetzt in den meisten Design-Tools (Adobe XD, InVision Studio, Webflow und vielen mehr) weit verbreitet Andere). Noch mehr als Token kann die Komponentenisierung die Form von etwas von seiner Funktion trennen – was dazu beiträgt, sowohl die Form als auch die Funktion zu verbessern.

Eines der bemerkenswerteren frühen Beispiele ist die Medienobjektkomponente von Nicole Sullivan. Auf den ersten Blick ist Ihnen vielleicht nicht klar, dass eine ganze Seite im Wesentlichen aus einer einzigen Komponente besteht, die auf unterschiedliche Weise gerendert wird. Auf diese Weise können wir dasselbe Markup (Formular) wiederverwenden, es leicht modifizieren, indem wir Optionen oder Parameter und Stile übergeben – und es eine Vielzahl von Werten (Funktionen) bereitstellen.

Wiederholen Sie sich nicht

DRY (Don't Repeat Yourself) ist eines meiner Lieblingsprinzipien – Dinge zu erstellen, die immer wieder verwendet werden können, ist einer der kleinen Siege, die Sie beim Codieren haben können.

Während Sie sich oft nicht bemühen können (und wohl auch nicht sollten), das DRY-Prinzip jedes Mal zu 100 % anzuwenden, ist es zumindest von Vorteil, sich dessen bewusst zu sein, damit Sie bei der Arbeit überlegen können, wie Sie es tun kann das, woran Sie gerade arbeiten, wiederverwendbarer machen.

Eine Anmerkung zur Dreierregel: Eine logische Folge des DRY-Prinzips ist die Dreierregel – im Wesentlichen sollten Sie etwas, das Sie dreimal wiederverwenden (kopieren/einfügen), in eine wiederverwendbare Komponente umschreiben. Wie der Piratenkodex ist er eher eine Richtlinie als eine feste Regel und kann von Komponente zu Komponente und von Projekt zu Projekt variieren.

CSS- und Styling-Methoden: Atomic vs. BEM

Es gibt viele verschiedene Möglichkeiten, CSS-Code zu organisieren und zu schreiben – Atomic und BEM sind nur zwei von vielen, denen Sie wahrscheinlich begegnen werden. Sie müssen sich weder eine einzelne „aussuchen“ noch müssen Sie sie genau befolgen. Die meisten Teams, mit denen ich zusammengearbeitet habe, haben normalerweise ihre eigene einzigartige Mischung, basierend auf dem Projekt oder der Technologie. Es ist hilfreich, sich mit ihnen vertraut zu machen, damit Sie mit der Zeit lernen, wie Sie je nach Situation vorgehen müssen.

Alle diese Ansätze gehen über „nur“ CSS und Styling hinaus und können oft die von Ihnen verwendeten Tools, die Art und Weise, wie Sie Ihre Dateien organisieren, und möglicherweise das Markup beeinflussen.

Atomares CSS

Nicht zu verwechseln mit Atomic Web Design – Atomic (vielleicht passender als „funktional“ bezeichnet) CSS ist eine Methodik, die im Wesentlichen die Verwendung kleiner Einzweckklassen zur Definition visueller Funktionen bevorzugt. Einige bemerkenswerte Bibliotheken:

1. Atomares CSS von Steve Carlson;
2. Tachyonen von Adam Morse;
3. Tailwind CSS von Adam Wathan.

Was ich an dieser Methode mag, ist, dass Sie damit schnell Stile und Themen erstellen können – einer der größten Nachteile ist, dass Ihr Markup ziemlich schnell ziemlich unübersichtlich werden kann.

Eine vollständige Einführung in Atomic CSS finden Sie in John Polaceks Artikel über CSS-Tricks.

BEM

Die BEM-Philosophie ist ein großartiger Vorläufer vieler moderner JavaScript-Frameworks wie Angular, React und Vue.

„BEM (Block, Element, Modifier) ​​ist ein komponentenbasierter Ansatz für die Webentwicklung.“

— BEM: Schnellstart

Grundsätzlich ist alles, was wiederverwendet werden kann, ein Block. Blöcke bestehen aus Elementen, etwas, das außerhalb eines Blocks nicht verwendet werden kann, und möglicherweise anderen Blöcken. Modifikatoren sind Dinge, die den Status von etwas beschreiben oder wie es aussieht oder sich verhält.

Mir persönlich gefällt die Theorie und Philosophie von BEM. Was ich nicht mag, ist die Art und Weise, wie die Dinge benannt werden. Viel zu viele Unterstriche, Bindestriche und es kann sich unnötig wiederholen ( .menu , .menu__item , etc).

Empfohlene Lektüre : BEM für Anfänger geschrieben von Inna Belaya

Danke U, Next(.js)

Nachdem Sie diese Themen ausreichend gemeistert haben, machen Sie sich keine Sorgen, es gibt noch viel zu lernen. Einige Vorschläge:

1. Funktionale und objektorientierte Programmierung
   Wir haben es leicht berührt, aber es gibt noch viel mehr zu lernen als CSS.
2. Höhere Sprachen und Frameworks
   Typoskript, Ruby, React, Vue sind die nächsten Dinge, die Sie in Angriff nehmen werden, sobald Sie ein gutes Verständnis von HTML und CSS haben.
3. Sprachen abfragen und Daten nutzen
   Wenn Sie mehr über GraphQL, MySQL und REST-APIs erfahren, werden Ihre Programmierfähigkeiten auf die nächste Stufe gehoben.

Fazit: Designer Who Code != Software Engineers

Hoffentlich hat Ihnen dieser Artikel gezeigt, dass das Erlernen des Programmierens nicht so schwierig ist, wie Sie vielleicht bisher angenommen haben. Es kann viel Zeit in Anspruch nehmen, aber die Menge der im Internet verfügbaren Ressourcen ist erstaunlich und nimmt nicht ab – ganz im Gegenteil!

Ein wichtiger Punkt, den ich betonen möchte, ist, dass „Codierung“ nicht dasselbe ist wie „Softwareentwicklung“ – die Möglichkeit, ein Repo zu forken und Code aus Stack Overflow zu kopieren/einzufügen, kann Sie weit bringen, und zwar die meisten, wenn nicht alle Softwareingenieure, die ich kenne, haben das getan – Sie müssen Ihre neu entdeckten Fähigkeiten mit Weisheit und Demut einsetzen. Für alles, was Sie jetzt mit etwas Ingenieurskunst erreichen können, gibt es so viel mehr, was Sie nicht wissen. Während Sie vielleicht denken, dass eine Funktion oder ein Stil einfach zu erreichen ist, weil – „Hey, ich habe es in Devtools zum Laufen gebracht!“ oder "Ich habe es in Codepen zum Laufen gebracht." – Es gibt viele Engineering-Prozesse, Abhängigkeiten und Methoden, die Sie wahrscheinlich nicht kennen, die Sie nicht kennen.

All das heißt – vergessen Sie nicht, dass wir immer noch Designer sind. Unsere Hauptfunktion besteht darin, durch das Verständnis von Kunden- oder Benutzerproblemen und deren Synthese mit unserem Wissen über Designmuster, -methoden und -prozesse einen geschäftlichen Mehrwert zu schaffen. Ja, ein „Designer, der Code schreibt“ zu sein, kann sehr nützlich sein und Ihre Fähigkeit erweitern, diesen Wert hinzuzufügen – aber wir müssen immer noch Ingenieure die technischen Entscheidungen treffen lassen.

Irgendwas nicht in Ordnung?

Es besteht eine gute Chance, dass etwas in diesem Beitrag obskur, stumpf und/oder veraltet war, und ich würde die Gelegenheit lieben, es besser zu machen! Bitte hinterlasse unten einen Kommentar, schicke mir eine DM oder @erwähne mich auf Twitter, damit ich mich verbessern kann.

Weiterführende Lektüre

1. Coding Bootcamps vs. Informatikabschlüsse: Was Arbeitgeber wollen und andere Perspektiven (Kyle Thayer)
2. Erste Schritte mit Sketch und Framer X (von Martina Perez, Smashing Magazine )
3. Einführung in Linux-Befehle (von Paul Tero, Smashing Magazine )
4. Werden Sie ein Befehlszeilen-Power-User mit Oh My ZSH And Z (von Wes Bos, Smashing Magazine )
5. Eine Liste der allgemeinen cmd.exe- und Unix-Befehle, die Sie in PowerShell verwenden können ( Microsoft Docs )
6. regular-expressions.info (von Jan Goyvaerts)
7. regexone.com (Lernen Sie reguläre Ausdrücke mit einfachen interaktiven Übungen)
8. Batch-Resizing mit Befehlszeile und ImageMagick (von Vlad Gerasimov, Smashing Magazine )
9. Shortcuts und Tipps zur Verbesserung Ihrer Produktivität mit Sublime Text (von Jai Pandya, Smashing Magazine )
10. Visual Studio Code kann das? (von Burke Holland, Smashing Magazine )
11. Warum der Versionsverlauf keine Versionskontrolle ist (von Josh Brewer)
12. Moderne Versionskontrolle mit Git (von Tobias Gunther, Smashing Magazine )
13. „Hello World“ (eine GitHub-Schritt-für-Schritt-Anleitung)
14. So installieren Sie Node.js und NPM auf einem Mac (von Dave McFarland)
15. So installieren Sie Node.js und NPM unter Windows (von Dejan Tucakov)
16. Warum ich atomare Commits in Git erstelle (von Clarice Bouwer)
17. So schreiben Sie eine Git-Commit-Nachricht (von Chris Breams)
18. Semantischer Code: Was? Warum? Wie? (von Paul Boag)
19. Struktursemantik: Die Bedeutung von HTML5-Elementen zur Gliederung (von Heydon Pickering, Smashing Magazine )
20. Designing for Performance: Kapitel 4. Optimizing Markup and Styles (von Lara C. Hogan, O'Reilly Media )
21. Das Medienobjekt spart Hunderte von Codezeilen (von Nicole Sullivan)
22. Lassen Sie uns genau definieren, was atomares CSS ist (von John Polacek, CSS Tricks )
23. BEM für Anfänger: Warum Sie BEM brauchen (von Inna Belaya, Smashing Magazine )
24. Javascript für Katzen: Eine Einführung für neue Programmierer
25. Roadmap.sh: Frontend-Entwickler
26. Funktionale Programmierung vs. OOPS: Erklären Sie, als wäre ich fünf
27. Warum, wie und wann semantisches HTML und ARIA verwendet werden (von Adam Silver, CSS Tricks )
28. HTML-Semantik (ein eBook von Smashing Magazine )
29. Die Grundlagen - HTML + CSS (auf Syntax.fm )
30. Kaskade und Vererbung ( westciv.com )
31. CSS-Tricks (von Chris Coyier)
32. Erste Schritte mit dem CSS-Layout (von Rachel Andrew, Smashing Magazine )
33. Einführung in HTML (MDN-Webdokumentation)
34. Erste Schritte mit CSS (MDN-Webdokumentation)
35. Erste Schritte mit JavaScript (MDN-Webdokumentation)
36. 24 Wege (von Drew McLellan)