Erkläre deinen Code in 60 Sekunden: vom eingefügten Snippet zum handgezeichneten Video
Veröffentlicht · Aktualisiert · Jakub Kuźnicki
Aktualisierungsrichtlinie: Produktfakten, zitierte Quellen und geprüfte Ergebnisse werden bei Änderungen erneut validiert. Siehe die Methodik des Autors.
Das Problem mit einer sechsteiligen PR-Beschreibung
Kannst du dir vorstellen, dass eine sechzeilige Hilfsmethode darüber entschied, ob Google vier deiner Startseiten indexiert? Der Pull Request, der das Problem behob, enthielt einen Essay aus sechs Absätzen darüber, was kaputt war und warum. Realistisch gesehen las ihn eine Person und machte dann mit ihrem Tag weiter.
Das Interessante an diesem Fehler war nie, wie der fertige Code aussieht. Entscheidend war die Reihenfolge, in der man denken muss: Zuerst bemerkst du zwei Kopien der Hilfsfunktion, dann dass eine davon einen leeren Pfad anders behandelt als einen einzelnen Schrägstrich, danach dass nachgestellte Schrägstriche abgeschaltet sind, und erst dann wird klar, warum die kanonische URL auf eine Weiterleitung zeigte. Ein Diff zeigt den Endzustand, nicht den Weg dorthin. Ein Stift, der Zeile für Zeile schreibt, zeigt diesen Weg.
Der Code
Deshalb habe ich Scribe gebaut. Code zu lesen ist besser, als eine Stunde davorzusitzen und sich zu fragen, was er tut. Ihn geschrieben zu sehen, ist besser als beides.
Die Vorschau ist kostenlos. Einfügen, Anpassen, Zeichnen und Wiederholen benötigen kein Konto, und es gibt kein Limit dafür, wie oft du das tust. Ein Konto brauchst du nur, um das fertige Video herunterzuladen. Im kostenlosen Tarif erhältst du fünf Exporte pro UTC-Tag; sie werden um 00:00 UTC zurückgesetzt und tragen ein kleines todrawn.com-Wasserzeichen. Premium entfernt Limit und Wasserzeichen.
Hier ist die Hilfsfunktion, die das Problem verursacht hat, in ihrer Form vor der Korrektur:
function prefixed(locale: AppLocale, path?: string): string {
if (locale === routing.defaultLocale) {
return path || "/";
}
return `/${locale}${path || ""}`;
}Füge sie in das Textfeld von Scribe ein und drücke auf Wiedergabe. Sechs Zeilen, und der gesamte Fehler steckt im Unterschied zwischen den beiden return-Anweisungen.
Anpassen
Scribe muss mehr als einen Workflow unterstützen, deshalb lässt sich der größte Teil der Darstellung im Anpassungsbereich verändern.
Für die Hervorhebung stehen Keine, JavaScript, TypeScript, Python, Java oder ein gemeinsames Profil für C, C++, C# und Go zur Verfügung. Beim Hochladen einer Datei wird das Profil anhand ihrer Endung gewählt, sodass eine .cs- oder .go-Datei bereits farbig erscheint. Du kannst die Hervorhebung auch vollständig entfernen und alles in einer Tintenfarbe schreiben oder ein ausgewähltes Fragment von Hand einfärben, wenn eine Zeile besondere Aufmerksamkeit verdient.
Als Hintergrund stehen Papier und dunkle Tafel zur Verfügung. Die Auswahl gilt für die exportierten Bilder, nicht nur für die Vorschau. Wähle den Hintergrund, auf dem dein Publikum den Code lesen soll.
Der Stift ist entscheidend, denn er schreibt. Die Geschwindigkeit reicht von der Hälfte bis zum Doppelten. Die Zeilenpause hält den Stift zwischen den Zeilen bis zu einer Sekunde an. So wird aus einem Block ein Ablauf. In der 3D-Stiftansicht legt Pen lift fest, wie weit sich die Spitze zwischen Strichen hebt. Das verändert nur die Optik und hat keinen Einfluss auf das flache 2D-Rendering.
Lange Bezeichner sind meist der Grund, warum eine Zeile nicht hineinpasst. Im Textmodus reicht die Größe von 70 bis 140 Prozent und der Buchstabenabstand bis 0,2 em. Das genügt normalerweise, um einen langen Methodennamen in einer Zeile zu halten. Die Kameraführung zoomt zwischen 75 und 200 Prozent, wenn du lieber beschneiden als den Text verkleinern möchtest.
Das Format ist 16:9 quer oder 9:16 hochkant, sodass ein Reel und eine Dokumentationsseite aus demselben Snippet entstehen können. Die Wiedergabe pausiert, wiederholt und springt, wann immer du möchtest, auf einer echten Zeitleiste statt mit nur einer Wiedergabetaste. Der Anpassungsbereich merkt sich deine Einstellungen und bietet eine Zurücksetzen-Funktion, falls du zu weit gegangen bist.
Was funktioniert und was nicht
Lange Zeilen spürt man, und im Hochformat fallen sie besonders auf. In einem 9:16-Bild sind kurze Zeilen im Vorteil; wenn das Snippet unbedingt breit bleiben muss, verwende 16:9 oder kürze es. Eine Wand aus Code ist schlechter als drei Zeilen mit einer Pause nach jeder. Kommentare lassen sich beim Schreiben des Stifts besser lesen als raffinierte Bezeichner.
30 fps wirken von beiden Bildraten flüssiger, aber Handschrift braucht das nicht. 24 reichen aus und erzeugen spürbar kleinere Dateien. Deshalb sind 24 meine Voreinstellung, während ich 30 nur wähle, wenn sich der Stift schnell bewegt.
Drei Grenzen solltest du kennen, bevor du etwas einfügst:
- Die Eingabe ist auf 100 KB begrenzt, und gezeichnet werden nur die ersten 500 Zeilen.
- Die handgezeichnete Glyphenschrift kann druckbares ASCII darstellen. Akzentzeichen erscheinen deshalb als kleines Kästchen, und Scribe weist darauf hin. Auch mein eigener Nachname übersteht diese Begrenzung nicht.
- Rendering und Kodierung finden auf deinem Rechner statt. Ein langer Clip oder eine dichte Zeichnung macht sich dort bemerkbar.
Das ist der Preis der kostenlosen Vorschau. Dein Text, dein Code, deine Zeichnung und jedes gerenderte Bild bleiben im Browser. Beim Export verlassen nur Format und Dauer des Renderings den Browser, weil der Tageszähler irgendwo durchgesetzt werden muss. Die FAQ erklärt das zusammen mit dem Zeitpunkt des Zurücksetzens.
Wenn ein Browser MP4 nicht kodieren kann, erhältst du stattdessen WebM. Scribe sagt das ausdrücklich, statt still zu scheitern. Jede oben genannte Grenze steht auf der Liste für Verbesserungen. Die Bedingung, den Code nicht irgendwohin zu senden, möchte ich dabei lieber als Gestaltungsrahmen behalten.
Export und Veröffentlichung
Der Export ist 720p oder 1080p, mit 24 oder 30 fps, quer oder hochkant. Bevor du etwas ausgibst, zeigt Scribe eine Schätzung von Dauer, Bildanzahl und ungefährer Dateigröße. Zum Herunterladen musst du dich anmelden; die Vorschau, die dich hierher geführt hat, verlangte das nicht. Wenn fünf Exporte am Tag nicht reichen, ist die Preisseite die ehrliche Antwort.
Danach muss die Datei an einem Ort landen, an dem sie ihren Wert verdient. Meine Clips landen meist in Pull-Request-Beschreibungen, wenn die Begründung wichtiger ist als der Diff. Versionshinweise sind der nächstbeste Ort: Ein 40-Sekunden-Clip wird angesehen, während ein Changelog übersprungen wird. Danach kommen die Dokumentationsseite zu der einen Funktion, die alle missverstehen, der Slack-Kanal, in dem schriftliche Erklärungen verschwinden, und ein Launch-Thread, in dem ein vertikaler Clip mehr leistet als ein Screenshot.
Das Video, erstellt mit dem beschriebenen Tool
Das ist das Snippet vom Anfang dieses Beitrags, direkt aus Scribe exportiert. Keine Kamera, kein Editor, keine Bildschirmaufnahme: nur der Stift, der den Code in der Reihenfolge schreibt, die den Fehler sichtbar macht.
Die Vorschau ist kostenlos und braucht kein Konto. Am schnellsten beurteilst du das Ergebnis, indem du deine am schlechtesten erklärbare Funktion in Scribe einfügst und dem Stift zusiehst. Wenn es trägt, weißt du es innerhalb einer Minute. Wenn nicht, würde ich gern erfahren, warum.
Die umfassenderen Entwicklerfunktionen findest du zusammen mit den Preisen. Vergleiche anschließend den Code-Walkthrough-Workflow.