Share
Was Sie erstellen werdenAls freiberuflicher Programmierer muss ich häufig den Code einer anderen Person korrigieren oder ein Design von einer Plattform auf eine andere verschieben. Dies führt zu einer großen Auflistung von unkommentiertem Code, den ich herausfinden muss.
In diesem Tutorial zeige ich Ihnen meinen Workflow, um schnell den Code zu finden und ihn zu dokumentieren, damit ich weiß, was er tut. Ich werde verwenden Monodraw Anwendung zum Erstellen von ASCII-Art.
ASCII steht für American Standard Code für den Informationsaustausch.
Um meine Herangehensweise zu verstehen, müssen Sie erkennen, dass die meisten modernen Code-Editoren die als Minikarte bezeichnete Funktion besitzen. Dies ist eine komprimierte Übersicht über den Code, der sich auf der rechten Seite des Editors befindet.
Minimap in Sublime Text Atom und KlammernDies sind drei der häufigsten Editoren mit ihren Minimaps. Erhabener Text 3 hat Minimaps eingebaut, während Atom, und Klammern habe es mit einem Plugin.
Auf der Minikarte können Sie die Struktur des Codes leicht erkennen, aber Sie können ihn nicht lesen. Um die Dinge klarer zu sehen, können Sie hinzufügen ASCII-Kunst.
ASCII-Kunst verwendet normale ASCII-Symbole, um ein Bild zu erstellen. Einige Leute verwenden die Raute, um Wörter auszusprechen.
# # # # ###### ## ##### ###### ##### # # # # # # # # # # # # # # # ####### ##### # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # ## ### ###### # #
Da die meisten Code-Editoren Monospaced-Schriftarten verwenden, ist ASCII-Art machbar. Aber es fällt mir immer schwer, es richtig aussehen zu lassen. Für mich ist es sehr anstrengend, lesbar zu sein ASCII-Kunst.
Monodraw-Anwendung Das ist wo Monodraw kann dem Coder helfen. Denk an Monodraw als sein Adobe Illustrator zum ASCII-Kunst. Es macht das Erstellen von ASCII-Kunst Dies ist nicht nur einfach, sondern bietet Ihnen mehr Optionen und Möglichkeiten, Ihrem Code anschauliche Details hinzuzufügen.
Wann Monodraw geöffnet wird, haben Sie einen leeren Arbeitsbereich, der in Quadrate unterteilt ist. Jedes Quadrat ist ein ASCII-Symbolbereich. Das kannst du dann problemlos zeichnen die ASCII-Art, die Sie möchten. Monodraw automatisiert das meiste davon für Sie.
Auf der linken Seite werden die Objekte in Ihrem Arbeitsbereich aufgelistet, und Sie haben die Möglichkeit, sich in visueller Reihenfolge vor und zurück zu bewegen. Jedes Objekt hat einen Standardnamen, Sie können es jedoch in einen aussagekräftigeren Namen ändern. Die rechte Seite ist der Inspektor. Mit dem Inspektor können Sie die Objektparameter überprüfen und Anpassungen vornehmen.
Durch Anklicken der Text Symbol in der Symbolleiste können Sie einen Textbereich im Arbeitsbereich erstellen. Es wird ein Dialogfeld angezeigt, in dem Sie den gewünschten Text eingeben. Wählen Sie im Inspektor auf der rechten Seite den Rendering-Typ aus.
Hier habe ich das ausgewählt Banner Schriftstil. Monodraw Es stehen 149 verschiedene Schriftarten zur Auswahl. Wenn Sie den Text ändern möchten, doppelklicken Sie auf den Textbereich, um den Dialog erneut zu öffnen.
Bewegen Sie den Textbereich im Arbeitsbereich. Mit dem rechten Inspektor können Sie Ränder, Schatten, Ausrichtung und verschiedene andere Optionen hinzufügen, um den gewünschten Effekt zu erzielen.
Isometrisches Header-Tag mit RahmenDas Epos Die Schriftart wird in der Minikarte groß dargestellt. Ich benutze es mit einem Rand, um es im Code hervorzuheben. Um die ASCII-Grafik in Ihren Editor zu exportieren, wählen Sie im Menü Datei - Exportieren.
ExportdialogEs gibt Optionen zum Exportieren als ASCII-Text, PNG oder SVG. Die ASCII-Textoption enthält eine Option zum Kopieren in die Zwischenablage in der unteren linken Ecke. Auf diese Weise exportiere ich meine Kunst hauptsächlich. Ich füge es in den Quellcode ein.
Die Kommentarstil-Option schließt die ASCII-Grafik in den Kommentarstil für die von Ihnen verwendete Sprache ein. Ich werde die verwenden XML / HTML Kommentarstil in diesem Tutorial.
Ein Hinweis zur Vorsicht: Wenn ASCII-Art im Code-Editor nicht richtig aussieht, verwendet das Editor-Design entweder keine Monospace-Schriftart, der Zeilenumbruch ist aktiviert oder das Editor-Design verwendet kursive Kommentare. Sie müssen die Optionen für das Thema und den Zeilenumbruch anpassen. Um eine bessere Übereinstimmung zu erzielen, öffnen Sie die Einstellungen mit Befehl-, (Komma Komma).
Einstellungen Stellen Sie im Einstellungsdialogfeld die Schriftart so ein, dass sie der in Ihrem Editor verwendeten Schriftart entspricht. Da benutze ich Menlo Regular 14 in Erhabener Text, Ich habe die Einstellungen auf die gleiche Schriftart und Größe eingestellt.
Ich verwalte einige Websites, die ich ursprünglich erstellt habe WordPress, aber ich bin in dem langsamen Prozess, sie zu verschieben Craft CMS. Da sie das gleiche Thema beibehalten möchten, muss ich das Thema neu erstellen.
Der einfachste Weg, um loszulegen, ist das Ablegen des Seitencodes durch Öffnen der Website in einem Browser, Zweitklick Wählen Sie in der Site Seitenquelle anzeigen, Kopieren Sie die Quelle und fügen Sie sie in den Texteditor ein. Das ist schneller als das Durchlaufen aller Dateien in WordPress.
Sobald ich die grundlegende Quelldatei habe, benutze ich Erhabener Text um es mit dem HTML-CSS-JS Prettify Paket. Einmal schön formatiert, kann ich die Abschnitte problemlos beschriften.
HTML mit Abschnittsnamen Das Erstellen jedes Labels und das Einfügen in den Code dauert nur wenige Sekunden. Wenn ich es von Hand gemacht hätte, hätte es Stunden gedauert.
In der Minikarte sehen Sie die verschiedenen Banner für jeden Abschnitt. Wenn Sie einen bestimmten Abschnitt benötigen, können Sie ihn einfach in der Minikarte anzeigen und darauf klicken.
Durch Klicken auf eine beliebige Stelle der Minikarte gelangen Sie zu dieser Position im Code. Wenn es schwer zu erkennen ist, erhöhen Sie die Schriftgröße oder versuchen Sie es mit einem der anderen Stile.
Schon seit Monodraw Um Formen zu erstellen, können Sie das Layout der Site dokumentieren. Verwendung der Box erstellen Sie jeden Bereich und beschriften Sie ihn mit dem Text Textfeld ohne einen Schriftstil festzulegen.
Site-Layout-Dokumentation Beim Erstellen von Objekten können Sie jedes Element auf der linken Seite des Bildschirms sehen. Sie können auf mehrere Elemente klicken, wie ich es für das Seitenleistenfeld und den Text getan habe, und die Ausrichtungswerkzeuge im Inspektor rechts verwenden, um den Text zu zentrieren.
Site-Layout-Dokumentation In Sublime-Text exportiert Exportieren Sie es und platzieren Sie es im Editor, um einen guten Überblick über das Layout dieser Webseite zu erhalten.
Beispiel für ein einfaches Flussdiagramm Sie können es sogar verwenden, um Flussdiagramme zu erstellen, die Sie hinzufügen können JavaScript Code.
Ich habe dies mit drei Boxen, einem Diamanten, drei Zeilen und etwas Text erstellt. Wenn Sie das Linienwerkzeug auswählen und ein Objekt auswählen, das sich dort befindet, werden blaue Punkte angezeigt, die Sie mit der Linie verbinden können. Stellen Sie sich vor, Sie machen dies von Hand.
Wenn Sie ein Bild nachahmen möchten, verwenden Sie die Bild wählen Sie das Bild von der Festplatte aus und zeichnen Sie es mit dem Stiftwerkzeug nach und wählen Sie verschiedene ASCII-Zeichen aus Farbe.
Dies erfordert mehr künstlerische Fähigkeiten, um es richtig zu machen, aber andere haben iPhone-Repliken und vieles mehr gemacht.
Ich habe dieses Tutorial mit Version 1.0.1 geschrieben. Sie arbeiten an Version 1.1 und sind fast fertig zum Versand.
Eine der großartigen neuen Funktionen wird die Fähigkeit zum Erstellen sein Schnipsel und teilen Sie sie mit anderen. Ich habe momentan eine Datei mit Stücken von ASCII-Kunst dass ich kopiere und in andere Dokumente einfügen.
Haben Schnipsel wird noch einfacher sein.
Die Download-Datei enthält eine Monodraw Dokumente mit der ASCII-Kunst in diesem Tutorial verwendet. Wenn Sie mehr darüber erfahren möchten ASCII-Kunst, Vielleicht möchten Sie diese Websites besuchen:
Nun, da Sie sehen, wie einfach es ist, ASCII Art in Ihren Code einzufügen, probieren Sie es aus. Es hat mir viele Stunden der Suche nach dem richtigen Codeabschnitt erspart.
Sie können ein Minify-Programm verwenden, um die Kommentare zu entfernen und den Code zu komprimieren. Das Minimieren Paket für Erhabener Text ist was ich benutze. Vergiss nicht, auch deine hübsche Version zu behalten.
Accentsconagua