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

Wenn der Gedanke, Code handschriftlich zu verfassen, sinnlos erscheint, wird es Sie vielleicht überraschen zu erfahren, dass er unvermeidlich ist. Wenn Sie unsicher sind, denken Sie an Ihr letztes Vorstellungsgespräch und erinnern Sie sich daran, dass im Besprechungsraum kein Computer vorhanden war – nur Ihre Interviewer, ein leeres Blatt Papier und ein blauer Kugelschreiber.

Für die Studenten unter Ihnen ist es sogar noch wichtiger, da Ihre Noten von den Codezeilen abhängen, die Sie strategisch in den verfügbaren Platz auf Ihrem Antwortbogen gequetscht haben.

Und nicht nur das: Erfahrene Programmierer können Ihnen die Bündel von A4-Blättern zeigen, die sie aus dem Bürokopierer geholt haben, um einen besonders komplexen Algorithmus darauf zu kritzeln, an dem sie gearbeitet haben.

Ob Sie also ein Prüfungsstudent, ein potenzieller Vorstellungsgesprächsteilnehmer oder jemand sind, der seine Programmier-Sackgassen lösen möchte, ich hoffe, dieser Artikel hilft Ihnen, wenn Sie Ihren Stift aufs Papier setzen, um zu codieren.

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

Warum aufschreiben?

Bevor wir beginnen, ist es wichtig zu verstehen, dass niemand erwartet, dass Sie produktionsfertigen Code in ein Notizbuch kritzeln. Es ist nicht so, dass Sie das ohne Fehler in einen Code-Editor einfügen und kompilieren können. Wenn das Ziel die Erstellung perfekten Codes wäre, würden Sie in den Interviewräumen und Prüfungshallen vor einem Computer sitzen.

Der Zweck des Handschriftlichen Codierens ist es, die Logik im Voraus auszuarbeiten. Es besteht der Wunsch, im Design so schnell wie möglich „in den Browser zu gelangen“, aber es gibt konventionelle Weisheit beim Skizzieren von Designs von Hand. Ein Medium mit geringer Wiedergabetreue fördert schnelles Experimentieren und kostengünstige Fehler.

Dasselbe kann für Code gelten, insbesondere wenn es um die Ausarbeitung von Syntax und Semantik geht. Dennoch ist die korrekte Syntax und Semantik *immer* ein Pluspunkt, auch wenn sie nicht der alleinige Fokus der gesamten Handschriftübung ist.

Schauen wir uns an, wo wir beim Handschriftlichen Codieren anfangen können.

Kennen Sie Ihre Frage

Im letzten Studienjahr konnte ich aus gesundheitlichen Gründen kein Praktikum absolvieren oder gar an Campus-Interviews teilnehmen. Infolgedessen war mein allererstes Vorstellungsgespräch buchstäblich mit hohen Einsätzen verbunden.

Wenn ich jetzt zurückblicke, war das Interview ziemlich einfach. Aber da ich noch nie zuvor eines besucht hatte, war ich über alle Maßen ängstlich. Das Erste, worüber die Interviewer beim Programmieren fragten, war, ob ich ein invertiertes Dreieck aus Sternchen ausgeben könnte. Wie gesagt, es war einfach – nichts, was eine for-Schleife nicht bewältigen könnte, oder? Aber wie gesagt, meine Angst war auch am Anschlag.

Ich atmete tief durch, legte meine Handfläche auf das leere Blatt Papier, das sie mir hingelegt hatten, schob es so langsam wie möglich auf dem Tisch zu mir (um natürlich Zeit zu gewinnen), klickte auf den Stift und tat dann etwas richtig.

Zuerst zeichnete ich ein invertiertes Dreieck aus Sternchen. So fand ich meinen Boden, um die Frage zu beantworten.

Ich habe gesehen, wie brillante Entwickler etwas falsch machten, einfach weil sie nie vollständig verstanden, was sie gerade lösten.

Die Fragen, mit denen wir arbeiten, sind nicht wie die Fragen, die Physiker oder Mathematiker lösen. Sie erhalten einen Satz von Parametern und finden die fehlenden; unsere Fragen sind auch unsere Ergebnisse. Es wird uns bereits gesagt, was unsere Ergebnisse sind – wir müssen herausfinden, wie wir sie erreichen. 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, mit dem Programmieren zu beginnen. Ich verstehe, dass in unserer schnelllebigen Branche erwartet wird, dass wir sofort mit dem Programmieren beginnen, indem wir eine „Hallo Welt“-Demo ausführen. Und das ist großartig, um sich mit einer unbekannten Syntax vertraut zu machen und Ihre Ängste beim Ausprobieren von etwas Neuem abzubauen.

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

Also, ob in Ihren Antwortbögen oder auf dem leeren A4-Papier, das Sie gleich beschreiben werden, beginnen Sie damit, sich einen Moment Zeit zu nehmen und aufzuschreiben, was Sie ausgeben möchten. Sie können es in die Ränder oder eine Ecke schreiben, wenn es nicht Teil Ihrer Antwort sein soll. Stellen Sie einfach sicher, dass es irgendwo ist, wo Sie es immer wieder nachschlagen können.

Skizzieren Sie Ihren Code

Dieser Schritt ist wie ein zweischneidiges Schwert. Er kann Ihnen eine Roadmap für Ihr Programm liefern oder Ihre Zeit verschwenden. Meine Aufgabe ist es, dafür zu sorgen, dass es das Erstere ist.

Also, zuerst und vor allem sage ich: **Das Skizzieren von Code ist unnötig, wenn der Umfang Ihres Problems oder Ihrer Frage klein ist.** Auch diese Praxis ist weder vorschreibend noch universell für alle Projekte oder Situationen. Stellen Sie sich vor, ich bin Ihr Interviewer und frage Sie, wie man ein Element auf einer Webseite mit CSS auf möglichst viele Arten zentriert. Sie brauchen dafür keine Skizze. Die Code-Schnipsel sind für jede Methode relativ klein.

Aber stellen Sie sich nun vor, ich beauftrage Sie, eine Webanwendung zu schreiben, die Benutzersignaturen über eine Touchscreen-Oberfläche erfasst und die Signatur dann auf dem Server speichert. Nicht so einfach, oder? Sie haben mehr als eine Sache zu bedenken. Vielleicht kann eine kleine Skizze helfen.

1. Benutzeroberfläche zur Erfassung von Signaturen – HTML-Canvas? WebGL?
2. Deaktivieren Sie Pointer-Events auf dem Rest der Webseite, wenn der Benutzer unterschreibt
3. Konvertieren und speichern Sie das erfasste Bild als PNG-Datei – JS
4. Dann konvertieren Sie es (vielleicht) in einen Blob und speichern Sie es in der Besuchertabelle.

Ich habe eine grobe Abfolge von Aktionen aufgeschrieben, von denen ich denke, dass ich sie codieren müsste. Sie könnte kürzer oder länger sein, je nachdem, was ich davon wollte.

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

Ihr schneller Schnappschuss von Stichpunkten gibt Ihnen eine Karte, eine To-Do-Liste und eine Checkliste, gegen die Sie am Ende des Projekts prüfen können – so ziemlich die gesamte Zusammenfassung Ihres Projekts in einer Liste mit geringer Wiedergabetreue. Es kann auch zu einer Vorlage für Ihr nächstes ähnliches Projekt werden.

Aber wie ich bereits sagte, ist dieser Schritt wie ein zweischneidiges Schwert. Sie müssen ihn bei Prüflingen und Interviewpartnern bei Zeitdruck kurz halten.

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 daraus fünf.

Aber das ist alles. Verbringen Sie so wenig Zeit wie möglich damit und machen Sie sich keine Sorgen über die Details. Die Skizze wird Ihnen keine Bonuspunkte einbringen. Sie dient nur dazu, sicherzustellen, dass Sie alles abgedeckt haben. Sie erfasst Ihre anfängliche Bauchgefühl und hält Sie während der gesamten Lebensdauer des Projekts ehrlich.

Langform vs. Kurzform

Zeit, mit dem Codieren zu beginnen. Was schreiben Sie also? „Bdrs“ oder „border-radius„; „div -> p“ oder „<div><p></div></p>„; „pl()“ oder „println()„; „q()“ oder „querySelector()“?

Wenn jemand anderes Ihren Code bewertet, gibt es keine Wahl. Lassen Sie Abkürzungen, Pseudocodes, Emmet-Shortcuts und jede andere Form von Kurzschrift weg. Andernfalls gibt es keinen Grund anzunehmen, dass jemand, der dies liest, weiß, was Ihre Abkürzungen bedeuten.

Es liegt wirklich an Ihnen.

Wenn Sie sich vom Handschriftlichen entfernt haben – und viele von uns haben das –, ist es besser, nicht zu sehr mit Langform-Notation zu übertreiben, da sie mühsam wird. Gleichzeitig gibt es nichts wie zu sparsam mit Ihrem Schreiben zu sein. Nicht, wenn Sie eines Tages darauf zurückblicken und verstehen wollen, was Sie aufgeschrieben haben.

Ich habe eine offene Datei in meiner Notizen-App und ein liniertes Notizbuch auf meinem Schreibtisch, in dem ich Code-Schnipsel aufschreibe, die ich für spätere Referenzen aufbewahren möchte. Sie sind unorganisiert, nur ein langer Strom von Schnipseln. Deshalb würde ich beim Durchsuchen älterer Notizen nicht wissen, was ich schreiben wollte, wenn ich sie nicht klar aufgeschrieben hätte.

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

Es ist nicht ungewöhnlich, dass wir Syntaxen vergessen, die wir eine Weile nicht verwendet haben. Deshalb ist es besser, Ihre Notizen klar zu schreiben, wenn Sie wissen, dass Sie sie für zukünftige Referenzen benötigen.

Der nicht-sequentielle Ablauf von Code

Im Gegensatz zum letzten Schritt, der für Sie als Interviewpartner und Testteilnehmer nicht gilt, ist dieser Schritt speziell für Sie gedacht.

Die meisten Programmiersprachen werden interpretiert, kompiliert und ausgeführt, sodass manchmal vordefinierter Code in der Quelle später aufgerufen wird. Wir tun dies zum Beispiel in JavaScript mit Funktionsaufrufen – Funktionen können anfangs definiert und dann später ausgeführt werden. Prüflinge und Interviewpartner können dies nutzen, um zuerst an dem kritischen Punkt Ihrer Antwort zu arbeiten.

Wie ich von Anfang an gesagt habe, ist der Zweck des Handschriftlichen Codierens, die Logik dessen, was Sie programmieren, auszuarbeiten oder zu testen. Es ist am besten, wenn Sie sich zuerst darauf konzentrieren, diese zu lösen.

Nehmen wir ein klassisches Lehrbuchbeispiel – ein Programm zur Berechnung der n-ten Fibonacci-Zahl. Wenn ich eine einfache Skizze dafür schreiben würde, sähe sie etwa so aus:

1. Eingabe erhalten.
2. Fibonacci-Zahl berechnen.
3. Ausgabe zusammenfassen.
4. Ausgabe drucken.

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

Es ist besser, mit dem Schreiben des Codes zur Berechnung der Fibonacci-Zahl zu beginnen, anstatt die Eingabe abzurufen. Verpacken Sie ihn in eine Funktion und schreiben Sie dann den Code sequenziell und fügen Sie eine Zeile hinzu, um diese Funktion aufzurufen, wo immer es angebracht ist.

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

Echte Profis können vorspringen. Nehmen wir an, ich habe ein Kundenprojekt und muss mit Dreiecksgeometrie arbeiten – ich habe zwei Seiten, den gegenüberliegenden Winkel und muss die Länge der dritten Seite herausfinden. Und ich habe mich entschieden, auf Papier zu kritzeln, um anzufangen, anstatt mein IDE zu öffnen.

Zuerst würde ich natürlich das Dreieck zeichnen (das ist etwas, worin ich sehr erfahren bin, wie Sie sehen können). Ich würde einige Beispiellängen und Winkel aufschreiben. Dann würde ich die Formel aufschreiben (Kompliment von der Online-Suche, sicher), und dann würde ich direkt zum Code für die Funktion springen.

Es hat keinen Sinn für mich, die obligatorischen Schritte aufzuschreiben, obwohl ich sie in produktionsfertigem Code benötigen werde. Aber es wäre anders, wenn ich das auf einem Antwortbogen in einer Prüfung 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 einen praktischen Artikel über Pseudocode verfasst, den ich Ihnen dringend empfehle, gründlich zu lesen.

Für all jene Profis, die das Gefühl haben, dass das Handschriftliche Codieren nicht ihr Ding ist, aber dennoch neugierig sind, ob es ihnen helfen kann, dann ist **Pseudocode** vielleicht die Balance, die Sie suchen.

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

Hier ist ein schneller Pseudocode für ein CSS-Grid-Layout

Grid
5 60px rows
6 100px columns

Es gibt nicht viel zu schreiben! Auch wenn das Aufschreiben mit Bleistift auf Papier für diese Art von Dingen hervorragend geeignet ist, ist es genauso effektiv, schnell und kostengünstig, etwas Pseudocode in das Programm einzutragen, das Sie gerade verwenden.

Abstand und Kommentare

Ich glaube, Code besteht zu 90 % aus Schlüsselwörtern und zu 10 % aus Tabs. Ohne Leerzeichen nimmt die Lesbarkeit von Wörtern ab. Einrückungen sind auch für handschriftlichen Code notwendig. Verwenden Sie sie jedoch nicht für jede Ebene, da die Breite des Papiers Sie einschränkt. Verwenden Sie Leerzeichen sparsam, aber verwenden Sie sie.

Wenn Sie Code für Ihren eigenen Gebrauch schreiben, glaube ich auch, dass Sie, wenn Sie alles befolgt haben, was ich bisher erwähnt habe, und bereits Ihre Ausgabe und eine Skizze auf der Seite aufgeschrieben haben, möglicherweise keine Kommentare mehr benötigen. Kommentare sagen Ihnen schnell, was der folgende Codeblock tut. Wenn Sie bereits eine Skizze für den Code geschrieben und gelesen haben, sind Kommentare überflüssige Notizen.

Wenn Ihr Urteilsvermögen jedoch sagt, dass Sie einen einfügen sollen, dann tun Sie es. Fügen Sie ihn auf der rechten Seite des Codes hinzu (da Sie ihn nicht zwischen bereits geschriebenen Zeilen einfügen können, wie Sie es zum Beispiel 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 sich bei einer bestimmten Syntax unsicher sind, schreiben Sie Kommentare. So lassen Sie zumindest die Person, die Ihr Papier bewertet, Ihre Absicht mit diesem falsch formatierten Code wissen. Und verwenden Sie nur die richtigen Trennzeichen, um Kommentare darzustellen – zum Beispiel wären das die Schrägstriche für JavaScript.

Analog vs. Digital

Wie ich bereits erwähnt habe, sind alle hier von mir gegebenen Ratschläge allgemeine Programmierratschläge. Wenn Sie dies nicht mit physischem Papier versuchen möchten, funktioniert jede Notiz-App ebenfalls.

Wenn Sie jedoch den digitalen Weg gehen möchten, empfehle ich Ihnen, etwas anderes als eine reine Notiz-App zu verwenden. Arbeiten Sie mit visuell ansprechenderen digitalen Werkzeugen – Flussdiagramme, Mindmaps, Wireframes usw. Sie können Ihnen helfen, Ihr Ergebnis, die Skizzen und den Code selbst zu visualisieren.

Ich bin kein großer digitaler Bürger (außer bei der Arbeit im Web und der kürzlichen Umstellung auf E-Book-Leser), daher bleibe ich bei physischen Notizbüchern.

Meine Lieblingswerkzeuge für handschriftlichen Code

Jeder Bleistift und jedes Papier reichen aus! Aber es gibt viele Optionen, und dies sind einige ausgewählte Werkzeuge, die ich verwende

• Staedtler Pigment Liner 0,3mm (Schwarz)
• Mitsubishi JETSTREAM 101 0,7mm (Schwarz)
• MUJI Notizbuch A5 6mm kariert 30 Blätter (Leicht und einfach zu tragen)
• MUJI Twin-Tip Textmarker Stift (Gelb)

Es gibt keinen „richtigen“ Weg zum Codieren

Ich hoffe, wenn auch nichts anderes, mein kleiner Weg, Code mit Bleistift und Papier zu schreiben, lässt Sie die Art und Weise bewerten, wie Sie bereits Code 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 Arbeitsweise zu geben.

Auch hier ist nichts wissenschaftlich oder eine exakte Kunst. Aber wenn Sie versuchen möchten, Code handschriftlich zu planen, finden Sie hier alles, was wir in einer schönen geordneten Liste abgedeckt haben

1. Beginnen Sie damit, die Ausgabe Ihres Codes aufzuschreiben (bei Bedarf mit Beispieldaten).
2. Schreiben Sie eine Skizze für den Code. Bitte halten Sie sie bei kleinen Projekten oder weniger komplexen Projekten bei drei Schritten.
3. Verwenden Sie Langform-Notation. Entwickler, die für sich selbst schreiben, können Kurzform-Notation verwenden, solange die Schrift lesbar ist und für Sie Sinn ergibt, wenn Sie sie später aufrufen.
4. Wenn Sie unter Zeitdruck stehen, erwägen Sie, zuerst den Code zu schreiben, der das Herzstück des Problems behandelt. Schreiben Sie später einen Aufruf an diesen Code an die richtige Stelle in Ihrem sequenziellen Code.
5. Wenn Sie sich sicher fühlen, versuchen Sie, Pseudocode zu schreiben, der die Hauptidee anspricht.
6. Verwenden Sie ordnungsgemäße Einrückungen und Leerzeichen – und achten Sie auf die Papierbreite.

Das war's! Wenn Sie bereit sind, Code handschriftlich zu schreiben, hoffe ich, dass dieser Artikel Ihnen den Einstieg erleichtert. Und wenn Sie sich zu einer Prüfung oder einem Vorstellungsgespräch setzen, hoffe ich, dass Ihnen das hilft, sich darauf zu konzentrieren, die Fragen richtig zu beantworten.