Der Designer-Leitfaden für die Galaxie… (von Code) E02

Unter den Tausenden von Sternen in der Milchstraße von UX-Artikeln wird eine Geschichte vor allen anderen aufschäumen - "Sollten Designer lernen, wie man Code schreibt?"

Dies ist immer noch… nicht diese Geschichte.

Foto von Florian Klauer auf Unsplash

Willkommen bei unserem designerfreundlichen Code-Raumschiffkameraden! In unserer ersten Episode haben wir uns kurz mit der Geschichte des World Wide Web und den Grundlagen von HTML beschäftigt.

Heute werden wir uns mit den Mitteln für die Erforschung von Code-Galaxien beschäftigen, den Werkzeugen Ihres hoffentlich neuen kosmischen Handels. Es gibt ein paar alternative Tools für diejenigen, die bereit sind, das Rendern von Designs im Browser zu wagen.

  1. Gute alte Texteditoren wie TextEdit unter Mac und Notepad unter Windows.
  2. Web-Design-Tools wie Dreamweaver und Aptana.
  3. IDEs wie Sublime Text, Brackets, Atom oder Visual Studio Code.
  4. Code-Sandboxen wie Codepen und JSFiddle.

Wir haben bereits in unserer ersten Episode über Texteditoren gesprochen, sie sind gut genug, um loszulegen, aber ich würde Ihnen nicht raten, bei ihnen zu bleiben, um mehr als nur ein Hello World zu drucken! in Ihrem Browser.

Nachdem dies gesagt ist, konzentrieren wir uns auf jede Ihrer anderen Alternativen!

Web-Design-Tools

Wow, ich schätze, das sind immer noch da!

Versteht mich nicht falsch, es gibt wahrscheinlich eine Menge Leute, die noch immer darauf schwören, als sie sich vor ihren CRT-Monitoren mit gebleichtem Haar, knielangen Jeans und Flanellhemd bräunen und Pop Rocks ansaugen Grabenanstrengung, um mit der Sauerheit, die der Tod von Flash hinterlassen hat, fertig zu werden (versuchen Sie, in nur einem Satz weitere 90er-Referenzen zu verwenden)…

Nein, im Ernst, ich habe in meinen vergangenen Tagen viel Dreamweaver verwendet, wie die meisten Designer, die in den späten 90ern Code lernen, und das sind gute Erinnerungen. Wenn ich eine tabellenbasierte E-Mail einrichten müsste, würde ich sie wahrscheinlich auf meinem Computer installieren (sie ist immer noch Teil des Adobe-Abonnements).

Hierbei handelt es sich um umfangreiche Software-Komponenten, die mit visueller Bearbeitung, Live-Vorschau, Code-Editoren mit automatischer Vervollständigung und vielen Schnickschnack ausgestattet sind, die Sie selten verwenden werden.

Wenn Sie in einem Raum mit „echten Entwicklern“ sogar eine Chance haben möchten, tun Sie so, als hätten sie nie existiert.

Interaktive Entwicklerumgebungen

Sie sind (von mir auch als das Brot der Butter bekannt) und sind Texteditoren mit Aufladung, ohne all die Unordnung, die unsere vorherigen Anwärter plagt.

Es gibt viele Optionen zur Auswahl, von bezahlt bis zu 100% Open Source. Einige konzentrieren sich sogar auf bestimmte Sprachen, wie z. B. IntelliJ IDEA für Java oder PyCharm für Phyton.

Normalerweise gibt es Dinge wie Code-Vervollständigung, was bedeutet, dass Sie mit der Eingabe von div beginnen können und das gesamte HTML-Element mit öffnenden und schließenden Tags oder Syntaxhervorhebung angezeigt wird, was zu einer Kolorisierung der verschiedenen Elementtypen in einer Codierungssprache führt (Tags werden eine Farbe haben, andere Inhalte usw.).

Ich habe im Laufe der Jahre eine Reihe von ihnen verwendet, in chronologischer Reihenfolge Brackets, Sublime Text, Atom und Visual Studio Code (nicht zu verwechseln mit dem juristischen Visual Studio).

Aufgrund anhaltender Leistungsprobleme beim Öffnen langer Dateien musste ich den Absturz von Atom, das sich im Besitz der Leute von Github befindet, zu VS Code führen, einer Microsoft-Kreation. Das Lustigste daran ist, dass MS, seit sie GitHub gekauft haben, sie jetzt beide besitzen.

Pimp my VS Code Tiago Edition ™

Sie sind beide vollständig Open Source und basieren auf Chromium, wodurch sie im Wesentlichen gerenderte Webseiten darstellen. Das macht sie extrem flexibel und anpassbar. Sie können sie mit den gleichen Grundkenntnissen anpassen, die Sie zum Codieren einer Website oder einer Web-App benötigen. Dinge wie das Definieren von UI-Optionen mit einer JSON-Datei oder das Schreiben eigener Code-Snippets sind ein Kinderspiel. Sie können sogar einen Teil der Chrome Dev-Tools öffnen, um sie zu überprüfen

Sie haben auch viele Plugins, die Dinge wie Code-Seligsprechung, automatische Einrückung, Konfliktlösung und kosmetische Dinge wie UI-Themes, Iconsets und eine Vielzahl anderer Feinheiten zusammenführen.

Falls Sie sich gefragt haben, scheint VS Code momentan die beliebteste IDE zu sein…

Code-Sandkästen

Wenn Sie nicht bereit sind, den Sprung zu wagen und sich den Erwachsenen in der IDE-Welt anzuschließen, sollten Sie diesen eine Chance geben.

Sie stammen aus den guten alten Zeiten von W3School, wahrscheinlich eine der ältesten Quellen für das Erlernen von noch aktiven Web-Sprachen, und sind WYSIWYG-Editoren mit einer Live-Vorschau des Codes. Heute sind die beiden wichtigsten Codepen und JSFiddle.

Ich verwende Codepen, fast jede Woche, um Ideen zu entwickeln oder schnelle Hacks auszuprobieren, ohne ein komplettes Projekt erstellen zu müssen. Sie können Ihren Code auch einfach freigeben, indem Sie einfach den Link an Ihre Sandbox senden.

Ganz zu schweigen davon, dass Sie verschiedene Dinge mit Leichtigkeit ausprobieren können, von Markdown bis zu LESS und SCSS oder sogar JQuery, CoffeeScript und TypeScript, ohne dass Sie Einstellungen oder Komplikationen vornehmen müssen.

Ein Beispiel eines meiner „Codepens“… Sie können hier mehr erfahren.

Standardmäßig ist alles, was Sie für sie tun, Open Source, was bedeutet, dass Sie die Projekte anderer Leute "verzweigen" können (in Laien ausgedrückt, Sie werden sie in Ihr eigenes Konto kopieren) und mit ihnen spielen, wie Sie möchten.

Bevor wir gehen, denken Sie daran, dass dies meine eigenen subjektiven Meinungen sind. Vielleicht werden Sie Dreamweaver wirklich lieben (probieren Sie es einfach aus) und vielleicht möchten Sie ein komplettes Kommando machen und nur VIM in Ihrer Befehlszeilenschnittstelle verwenden. Was auch immer funktioniert!

Bis bald für die dritte Episode, in der wir zu unserer Umlaufbahn um Planet HTML zurückkehren werden!

So lange und danke für all das Klatschen

Lesen Sie die erste Folge

Weitere Online-Lektüre