Warum (und wie) ich Code mit Bleistift und Papier schreibe PlatoBlockchain Data Intelligence. Vertikale Suche. Ai.

Warum (und wie) ich Code mit Bleistift und Papier schreibe

Wenn Ihnen der Gedanke an handgeschriebenen Code albern vorkommt, überrascht es Sie vielleicht zu wissen, dass dies unvermeidlich ist. Wenn Sie sich nicht sicher sind, denken Sie an das letzte Vorstellungsgespräch, das Sie geführt haben, und denken Sie daran, dass es im Vorstellungsgesprächsraum keinen Computer gab – nur Ihre Gesprächspartner, ein leeres Blatt Papier und einen blauen Kugelschreiber.

Für die Schüler unter Ihnen ist es sogar noch eine größere Sache, da Ihre Noten von den Codezeilen abhängen, die Sie strategisch in den verfügbaren Platz in Ihrem Antwortbogen gequetscht haben.

Und nicht nur das, erfahrene Programmierer können Sie auf das Bündel A4-Blätter verweisen, die sie aus dem Bürokopiergerät genommen haben, um einen besonders komplexen Algorithmus aufzuschreiben, an dem sie gearbeitet haben.

Egal, ob Sie ein Examensstudent, ein potenzieller Bewerber für ein Vorstellungsgespräch oder jemand sind, der seine Programmierungssackgassen überwinden möchte, ich hoffe, dieser Artikel hilft Ihnen, wenn Sie Ihren Stift auf das Papier legen, um zu programmieren.

Obwohl ich mich auf den analogen Aspekt des Schreibens von Code konzentrieren werde, können Sie diese Schritte auf das Codieren in jeder Form oder Sprache anwenden. Betrachten Sie dies also auch als eine allgemeine Codierungsrichtlinie, die speziell für mich funktioniert, aber auch für Sie bei Ihrer Arbeit sehr nützlich sein kann.

Warum es aufschreiben?

Bevor wir beginnen, ist es wichtig zu verstehen, dass niemand erwartet, dass Sie produktionsbereiten Code in ein Notizbuch schreiben. Es ist nicht so, dass Sie das in einen Code-Editor ziehen und ohne Fehler kompilieren können. Wenn es das Ziel wäre, perfekten Code zu produzieren, würden Sie in den Interviewräumen und Prüfungsräumen vor einem Computer sitzen.

Der Zweck des Handschriftcodes besteht darin, die Logik im Voraus durchzuarbeiten. Beim Design gibt es den Wunsch, so schnell wie möglich „in den Browser zu kommen“, aber es ist allgemein üblich, Designs von Hand zu skizzieren. Ein Low-Fidelity-Medium fördert schnelles Experimentieren und billige Fehler.

Die Mühe, herauszufinden, wie man umgebende Gegenstände mit einem Klick beeinflusst (von my letzte Artikel)

Dasselbe kann für Code gelten, hauptsächlich beim Ausarbeiten von Syntax und Semantik. Allerdings ist es wichtig, die richtige Syntax und Semantik zu erhalten immer ein Pluspunkt, wenn auch nicht der einzige Fokus der ganzen Handschriftübung.

Mal sehen, wo wir anfangen können, wenn es um Handschriftcode geht.

Kenne deine Frage

Während meines letzten Studienjahres konnte ich aus gesundheitlichen Gründen weder ein Praktikum machen noch an Vorstellungsgesprächen auf dem Campus teilnehmen. Infolgedessen war mein allererstes Vorstellungsgespräch ziemlich buchstäblich mit hohen Einsätzen.

Wenn ich jetzt zurückblicke, war das Interview ziemlich einfach. Aber da ich noch nie zuvor an einem teilgenommen hatte, war ich über die Maßen besorgt. Das erste, was die Interviewer zum Programmieren fragten, war, ob ich ein umgekehrtes Dreieck aus Sternchen ausgeben könnte. Wie gesagt, es war einfach – nichts a for Schleife kann nicht damit umgehen, oder? Aber wie gesagt, meine Angst ging auch durch die Decke.

Ich holte tief Luft, drückte meine Handfläche auf das leere Blatt Papier, das sie für mich ausgelegt hatten, schob es so langsam wie möglich auf dem Tisch zu mir (natürlich um Zeit zu gewinnen), klickte mit dem Stift, und dann tat ich etwas Rechts.

Ich habe zuerst ein umgekehrtes Dreieck aus Sternchen gezeichnet. So fand ich meine Füße auf dem Boden, um ihre Frage zu beantworten.

Ich habe gesehen, dass ansonsten brillante Entwickler etwas falsch gemacht haben, nur weil sie nie ganz verstanden haben, was sie lösen.

Die Fragen, mit denen wir arbeiten, sind nicht die Fragen, die Physiker oder Mathematiker lösen. Sie erhalten eine Reihe von Parametern und finden die fehlenden; Unsere Fragen sind auch unsere Ergebnisse. Uns wird bereits gesagt, was unsere Ergebnisse sind – wir müssen herausfinden, wie wir sie erreichen können. Deshalb ist es unerlässlich, die Frage gut zu kennen, denn Sie werden das Ergebnis sehen.

Das Aufschreiben oder Zeichnen dessen, was Sie ausgeben möchten, ist eine der besten Möglichkeiten, um mit dem Codieren zu beginnen. Ich verstehe, dass in unserer schnelllebigen Branche erwartet wird, dass wir direkt in die Programmierung einsteigen müssen, indem wir eine „Hallo Welt“-Demo durchführen. Und das ist großartig, um sich mit einer unbekannten Syntax vertraut zu machen und die Angst abzuschütteln, etwas Neues auszuprobieren.

Aber wenn Ihnen jemand eine Frage stellt und Ihnen ein Ergebnis gibt, an dem Sie arbeiten können, wäre es nicht besser, das zuerst aufzuschreiben? Diese Frage/Ergebnis ist nicht nur Ihr Ausgangspunkt, sondern auch Ihr Bezugspunkt. Sie können sich bei jedem Schritt Ihrer Codierung ansehen, um sicherzustellen, dass Sie darauf hinarbeiten und auf dem richtigen Weg sind.

Egal, ob Sie auf Ihren Antwortbögen oder auf dem leeren A4-Blatt schreiben, nehmen Sie sich zunächst eine Sekunde Zeit und schreiben Sie auf, was Sie ausgeben möchten. Sie können es am Rand oder in einer Ecke platzieren, wenn Sie nicht möchten, dass es Teil Ihrer Antwort ist. Stellen Sie einfach sicher, dass es sich um einen Ort handelt, an dem Sie darauf verweisen können.

Skizzieren Sie Ihren Code

Dieser Schritt ist wie ein zweischneidiges Schwert. Es kann Ihnen einen Fahrplan für Ihr Programm geben oder Ihre Zeit verschwenden. Meine Aufgabe ist es, dafür zu sorgen, dass es ersteres ist.

Daher möchte ich zuallererst sagen: Gliederungscode ist unnötig, wenn der Umfang Ihres Problems oder Ihrer Frage gering ist. Auch diese Praxis ist weder vorgeschrieben noch universell für alle Projekte oder Situationen. Stellen Sie sich vor, ich bin Ihr Gesprächspartner und bitte Sie zu schreiben, wie man ein Element auf einer Webseite mit Hilfe von CSS auf so viele Arten wie möglich zentriert. Dafür brauchen Sie nicht gerade eine Gliederung. Die Codeschnipsel sind für jede Methode relativ klein.

Aber jetzt nehmen wir an, ich beauftrage Sie damit, eine Webanwendung zu schreiben, die Benutzersignaturen über eine Touchscreen-Oberfläche erfasst und die Signatur dann auf dem Server speichert. Nicht so einfach, oder? Du musst mehr als eine Sache herausfinden. Vielleicht hilft eine kleine Gliederung.

  1. Benutzeroberfläche zum Erfassen von Signaturen – HTML Canvas? WebGL?
  2. Deaktivieren Sie Zeigerereignisse auf dem Rest der Webseite, wenn der Benutzer signiert
  3. Konvertieren und speichern Sie das aufgenommene Bild in eine PNG-Datei – JS
  4. Konvertieren Sie es dann (vielleicht) in Blob und speichern Sie es in der Datentabelle des Besucherprotokolls.

Ich habe eine grobe Abfolge von Aktionen geschrieben, von denen ich glaube, dass ich sie codieren muss. Es hätte kürzer oder länger sein können, je nachdem, was ich davon wollte.

Ich empfehle dringend, Code für Kundenprojekte zu skizzieren. Schreiben Sie die Gliederung zusammen mit Ihren Benutzeranforderungen oder auf die Rückseite von Wireframes, die Sie ausgedruckt haben.

Ihre schnelle Momentaufnahme der Aufzählungspunkte gibt Ihnen eine Karte, eine To-do-Liste und eine Checkliste, mit der Sie sich am Ende des Projekts verifizieren können – so ziemlich die Zusammenfassung Ihres gesamten Projekts in einer Low-Fidelity-Liste. Es kann auch zu einer Vorlage werden, um Ihr nächstes ähnliches Projekt zu starten.

Aber wie ich schon sagte, dieser Schritt ist wie ein zweischneidiges Schwert. Bei Zeitdruck müssen Sie sich für Prüflinge und Interviewte kurz fassen.

Wenn Sie nicht wissen, wo Sie anfangen sollen, schreiben Sie nur drei wesentliche Funktionen auf, die Sie in Ihrer Anwendung codieren müssen, und wenn Sie Zeit haben, machen Sie fünf daraus.

Aber das war es schon. Verbringen Sie so wenig Zeit wie möglich damit und schwitzen Sie nicht über die Details. Die Gliederung wird Ihnen keine Extrapunkte einbringen. Es ist nur da, um Ihnen zu helfen, sicherzustellen, dass Sie alles abgedeckt haben. Es fängt Ihre anfängliche Bauchreaktion ein und hält Sie während des gesamten Projektlebens ehrlich.

Langschrift vs. Kurzschrift

Weißes liniertes Papier mit kursiven handschriftlichen Notizen in schwarzer Tinte.
Eine Kurzreferenz zum Deaktivieren der Textauswahl

Zeit, mit dem Codieren zu beginnen. Also, was schreibst du? „Bdrs“ oder „border-radius"; "div -> p" oder "<div><p></div></p>"; "pl()" oder "println()"; "q()" oder "querySelector()"?

Wenn jemand anderes Ihren Code benotet, haben Sie keine Wahl. Lassen Sie Abkürzungen, Pseudo-Codes, Emmet-Kürzel und jede andere Form der Kurzschrift weg. Ansonsten gibt es keinen Grund anzunehmen, dass jemand, der dies liest, weiß, was Ihre Abkürzungen bedeuten.

Es liegt wirklich an Ihnen.

Wenn Sie mit dem Schreiben von Hand nicht mehr in Berührung kommen – und viele von uns haben es getan –, ist es besser, es mit den Langhandnotationen nicht zu übertreiben, da sie ermüdend werden. Gleichzeitig darf man beim Schreiben nicht zu sparsam sein. Nicht, wenn Sie eines Tages darauf zurückblicken und verstehen wollen, was Sie aufgeschrieben haben.

Ich habe eine geöffnete Datei in meiner Notizen-App und einen linierten Notizblock auf meinem Schreibtisch, auf dem ich Code-Snippets aufschreibe, die ich zum späteren Nachschlagen speichern möchte. Sie sind unorganisiert, nur ein langer Strom von Schnipseln. Deshalb wüsste ich beim Durchblättern älterer Notizen nicht, was ich schreiben wollte, wenn ich sie nicht klar aufgeschrieben hätte.

Ich vergesse ständig Syntaxen. Zum Beispiel verwende ich die Pfeilnotation für JavaScript-Funktionen, seit sie eingeführt wurde (weil sie kürzer ist), und ich bin mir ziemlich sicher, wenn mich jemand plötzlich auffordert, eine Funktion mit dem zu definieren function Schlüsselwort könnte ich sogar die Klammern oder den Funktionsnamen verlegen, was zu einem Syntaxfehler führt.

Es ist nicht ungewöhnlich, dass wir Syntaxen vergessen, die wir seit einiger Zeit nicht mehr verwendet haben. Aus diesem Grund ist es besser, Ihre Notizen klar zu schreiben, wenn Sie wissen, dass Sie sie zum späteren Nachschlagen benötigen.

Der nicht sequentielle Codefluss

Im Gegensatz zum letzten Schritt, der nicht auf die von Ihnen Befragten und Testteilnehmern zutrifft, ist dieser speziell auf Sie zugeschnitten.

Die meisten Programmiersprachen werden so interpretiert, kompiliert und ausgeführt, dass manchmal vorab geschriebener Code in der Quelle später beim Aufruf ausgeführt wird. In JavaScript machen wir das zum Beispiel mit Funktionsaufrufen – Funktionen können zunächst definiert und dann später ausgeführt werden. Prüflinge und Interviewte können dies nutzen, um zunächst an der kritischen Stelle Ihrer Antwort zu arbeiten.

Wie ich von Anfang an gesagt habe, besteht der Zweck des handgeschriebenen Codes darin, die Logik dessen, was Sie programmieren, durchzuarbeiten oder zu testen. Es ist am besten, wenn Sie sich zuerst darauf konzentrieren, das zu lösen.

Nehmen wir ein klassisches Lehrbuchbeispiel – ein Programm zum Finden des n-ten Fibonacci-Nummer. Wenn ich dafür eine einfache Gliederung schreiben müsste, würde die ungefähr so ​​aussehen:

  1. Holen Sie sich die Eingabe.
  2. Berechnen Sie die Fibonacci-Zahl.
  3. Fassen Sie die Ausgabe zusammen.
  4. Drucken Sie die Ausgabe.

Alle Schritte in dieser Gliederung sind wesentlich; 1, 3 und 4 sind jedoch obligatorischer. Sie sind notwendig, aber nicht wichtig genug, um sich sofort darauf zu konzentrieren.

Es ist besser, den Code aufzuschreiben, um die Fibonacci-Zahl zu berechnen, als die Eingabe abzurufen. Wickeln Sie es in eine Funktion ein, schreiben Sie dann den Code der Reihe nach und schreiben Sie eine Zeile auf, um diese Funktion gegebenenfalls aufzurufen.

Verbringen Sie Ihre Zeit damit, Code zu schreiben, der sich auf den Kern des Problems konzentriert.

Echte Profis können weiter springen. Nehmen wir an, ich habe ein Kundenprojekt und muss mit einer Dreiecksgeometrie arbeiten – habe zwei Seiten, entgegengesetzte Winkel und muss die Länge der dritten Seite finden. Und ich habe beschlossen, auf Papier zu kritzeln, um anzufangen, anstatt meine zu öffnen IDE.

Zuerst würde ich natürlich das Dreieck zeichnen (damit bin ich sehr erfahren, wie Sie sehen). Ich würde einige Beispiellängen und -winkel aufschreiben. Dann würde ich die Formel schreiben (natürlich ein Kompliment an die Online-Suche) und dann direkt zum Code für die Funktion springen.

Es macht keinen Sinn, die obligatorischen Schritte aufzuschreiben, obwohl ich sie in produktionsreifem Code benötige. Aber es wäre anders, wenn ich das in einer Klausur auf einen Antwortbogen schreiben müsste. Ich kann die anderen Schritte nicht überspringen; Ich kann jedoch immer noch mit dem Code für die Formel beginnen.

Pseudocode

Chris hat bereits a geschrieben praktischer Artikel über Pseudo-Code dass ich Ihnen wärmstens empfehle, eine solide Lektüre zu geben.

Für all jene Profis, die das Gefühl haben, dass das ganze Handschriftcode-Ding nicht Ihr Ding ist, aber trotzdem neugierig sein könnten, ob es Ihnen dann helfen kann Pseudocode könnte das Gleichgewicht sein, das Sie suchen.

Es ähnelt dem Skizzieren des Codes, wie ich in einem der vorherigen Schritte erwähnt habe. Es ist jedoch kürzer und fühlt sich eher wie Kurzschrift-Codierung an. Es wird manchmal auch als „Skelettcode“ bezeichnet.

Hier ist ein kurzer Pseudo-Code für ein CSS-Grid-Layout:

Grid
5 60px rows
6 100px columns

Es gibt nicht viel zu schreiben! Auch wenn es für solche Dinge hervorragend geeignet ist, einen Bleistift zu Papier zu bringen, ist es genauso effektiv, schnell und kostengünstig, Pseudocode in ein beliebiges Programm zu schreiben, das Sie verwenden.

Leerzeichen und Kommentare

Ich glaube, Code besteht zu 90 % aus Keywords und zu 10 % aus Tabs. Ohne Leerzeichen nimmt die Lesbarkeit von Wörtern ab. Auch für handschriftlichen Code sind Einrückungen notwendig. Bitte verwenden Sie es jedoch nicht für jedes Level, da die Breite des Papiers Sie einschränkt. Verwenden Sie Leerzeichen mit Bedacht, aber verwenden Sie sie.

Gelbes, nicht liniertes Papier mit handgeschriebenem Code in Schreibschrift und schwarzer Tinte.
Preisgekröntes OG-Snippet, geschrieben mit zusätzlichem TLC

Wenn Sie Code für Ihren Gebrauch schreiben, glaube ich auch, dass Sie, wenn Sie alles befolgt haben, was ich bisher erwähnt habe, und Ihre Ausgabe und eine Gliederung bereits auf die Seite geschrieben haben, möglicherweise nicht einmal Kommentare einfügen müssen. Kommentare sagen Ihnen schnell, was der folgende Codesatz tut. Wenn Sie bereits eine Gliederung für den Code geschrieben und gelesen haben, dann sind Kommentare überflüssige Notizen.

Wenn Ihr Urteil jedoch sagt, dass Sie einen ablegen sollen, dann tun Sie es. Fügen Sie es auf der rechten Seite des Codes hinzu (da Sie es nicht zwischen bereits geschriebene Zeilen einfügen können, wie Sie es beispielsweise in VS Code könnten). Verwenden Sie Schrägstriche, Klammern oder Pfeile, um anzuzeigen, dass es sich um Kommentare handelt.

Für Prüflinge, die mit einer bestimmten Syntax nicht vertraut sind, schreiben Sie Kommentare auf. Auf diese Weise teilen Sie der Person, die Ihre Arbeit bewertet, Ihre Absicht mit diesem falsch formatierten Code zumindest mit. Und verwenden Sie nur die richtigen Trennzeichen, um Kommentare zu kennzeichnen – das wären zum Beispiel die Schrägstriche für JavaScript.

Analog vs. digital

Wie ich bereits erwähnt habe, ist alles, was ich hier anbiete, eine allgemeine Codierungsberatung. Wenn Sie dies nicht mit physischem Papier versuchen möchten, funktioniert auch jede Notizanwendung.

Aber wenn Sie den digitalen Weg ausprobieren möchten, empfehle ich, etwas anderes als eine reine Notiz-App zu verwenden. Arbeiten Sie mit visuelleren digitalen Tools – Flussdiagrammen, Mindmaps, Wireframes usw. Sie können Ihnen helfen, Ihr Ergebnis, die Umrisse und den Code selbst zu visualisieren.

Ich bin kein großer digitaler Bürger (abgesehen davon, dass ich im Internet arbeite und kürzlich auf das Lesen von E-Books umgestiegen bin), also bleibe ich bei physischen Notizbüchern.

Meine Lieblingswerkzeuge zum Handschreiben von Code

Jeder Bleistift und Papier wird tun! Aber es gibt viele Optionen da draußen, und dies sind einige ausgewählte Tools, die ich verwende:

Es gibt keine „Schreib“-Methode zum Codieren

Ich hoffe nicht zuletzt, dass meine kleine Art, Code mit Bleistift und Papier von Hand zu schreiben, Sie dazu bringt, die Art und Weise zu bewerten, wie Sie Code bereits planen und schreiben. Ich mag es zu wissen, wie andere Entwickler an ihre Arbeit herangehen, und dies ist meine Art, Ihnen einen Einblick in meine Vorgehensweise zu geben.

Auch hier ist nichts wissenschaftlich oder eine exakte Kunst. Aber wenn Sie die Planung mit handgeschriebenem Code ausprobieren möchten, finden Sie hier alles, was wir in einer schön geordneten Liste behandelt haben:

  1. Beginnen Sie damit, die Ausgabe Ihres Codes aufzuschreiben (ggf. mit Beispieldaten).
  2. Schreiben Sie eine Gliederung für den Code. Bitte beschränken Sie sich bei kleinen oder weniger komplexen Projekten auf drei Schritte.
  3. Verwenden Sie Langhandnotationen. Entwickler, die für sich selbst schreiben, können Kurzschreibweisen verwenden, solange die Schrift lesbar ist und für Sie Sinn macht, wenn Sie später darauf zurückgreifen.
  4. Wenn Sie unter Zeitdruck stehen, sollten Sie zuerst den Code schreiben, der den Kern des Problems angeht. Schreiben Sie später einen Aufruf dieses Codes an der richtigen Stelle in Ihrem sequentiellen Code auf.
  5. Wenn Sie sich sicher fühlen, versuchen Sie, Pseudocode zu schreiben, der die Hauptidee anspricht.
  6. Verwenden Sie die richtigen Einzüge und Zwischenräume – und achten Sie auf die Breite des Papiers.

Das ist es! Wenn Sie bereit sind, Code von Hand zu schreiben, hoffe ich, dass dieser Artikel Ihnen den Einstieg erleichtert. Und wenn Sie sich zu einer Prüfung oder einem Vorstellungsgespräch hinsetzen, hoffe ich, dass Ihnen das dabei hilft, sich auf die richtigen Fragen zu konzentrieren.

Zeitstempel:

Mehr von CSS-Tricks