⚡️ Web Development und ChatGPT - Darf man das?
Der Untergang des Internets steht unmittelbar bevor. Denn das Copy-Pasting von KI-erzeugtem Code ist die neue Methode. Bleibt die Frage, ob man sich nach dem Deployment noch in den Spiegel schauen kann.
Dabei managed die Tech-Branche eine bestimme Sache immer etwas anders als andere Branchen: Sie lacht nicht über die drohende Arbeitslosigkeit, sondern lacht mit ihr. Denn wenn die Werkzeuge besser werden, werden die Entwickler es auch. Ablehnung ist da eine eher seltene Reaktion - erst Recht wenn man bedenkt wie unfassbar nützlich KI-generierter Code sein kann.
Ich benutze ChatGPT jeden Tag. Es kann deine Arbeitsabläufe wirklich verbessern. Heute möchte ich ein paar Tricks verraten, die ich verwende. Schau zu und machs mir nach:
1. Debugging
Einer der schwierigsten Aspekte beim Erlernen der Webentwicklung ist das Debuggen von Code. Anfänger stoßen oft auf kryptische Fehlermeldungen oder unerwartetes Verhalten im Code. ChatGPT kann helfen.
Wie ChatGPT hilft:
- Fehlererklärung: Wenn du eine Fehlermeldung erhältst, die du nicht verstehst, kannst du sie in ChatGPT einfügen.
- Schrittweises Debuggen: Auch ist es möglich, Codeabschnitt angeben, die Probleme verursachen. ChatGPT kann den Brandherd lokalisieren und Vorschläge für mögliche Lösungsansätze liefern.
Beispiel:
Hier ist ein TypeError in Javascript:
Uncaught TypeError: Cannot read Properties of undefined (reading 'length')
Copy-Paste den Error in ChatGPT eingeben und liefere die dazugehörigen Code-Abschnitte gleich mit. Das System wird antworten, dass die Variable length
nicht auf null
geprüft wurde.
2. Schwierige Konzepte verstehen
Wenn du neu in der Web Entwicklung bist, werden Konzepte wie “Boilerplate”, “Entwurfsmuster”, oder “Stacktracing” dir vielleicht fremd vorkommen. Frag doch ChatGPT! Die Analogien und Metaphern werden dir helfen, die Konzepte zu verstehen.
Wie ChatGPT hilft:
- Vereinfachte Erklärungen: ChatGPT zerlegt komplexe Themen in leicht verständliche, anfängerfreundliche Erklärungen. Es kann auch alternative Erklärungen liefern, wenn eine Erklärungsmethode bei dir nicht ankommt.
- Praktische Beispiele: Wenn du etwas Neues lernst, sind Beispiele der key-to-success. ChatGPT kann Beispiele generieren, die dir helfen, zu visualisieren, wie eine bestimmte JavaScript-Funktion funktioniert oder wie sich CSS-Eigenschaften auf das Layout auswirken.
Beispiel: Wenn du mit JavaScript-Callbacks Probleme hast, kannst du ChatGPT so etwas fragen wie: “Was ist ein Callback in JavaScript und wie verwende ich ihn?” ChatGPT antwortet mit einer einfachen Erklärung und einem Beispiel und hilft, das Konzept Schritt für Schritt zu verstehen.
3. Einfache Code-Snippets generieren
Manchmal weißt du vielleicht, was du coden möchtest, bist aber nicht sicher, wie. Ob du mit JavaScript ein interaktives Element hinzufügen oder mit CSS eine Schaltfläche gestalten möchtest – ChatGPT kann einfache Codeausschnitte generieren, die helfen.
Wie ChatGPT hilft:
- Startercode: bitte ChatGPT darum, die Grundstruktur einer Funktion zu generieren, beispielsweise ein Kontaktformular in HTML oder eine JavaScript-Funktion zum Berechnen von Gesamtbeträgen in einem Einkaufswagen.
- Anpassung: Du kannst auch personalisierteren Code basierend auf deinen spezifischen Anforderungen anfordern, beispielsweise wie du eine reaktionsfähige Navigationsleiste erstellen oder wie Sie die Formularvalidierung in JavaScript handhaben möchtest.
Beispiel: Frage: „Wie erstelle ich mit JavaScript eine Schaltfläche, die beim Klicken die Farbe ändert?“ ChatGPT würde den Grundcode generieren:
<button id="colorBtn">Klick mich!</button>
<script>
document.getElementById("colorBtn").addEventListener("click", function() {
this.style.backgroundColor = "blue";
});
</script>
Dieses Beispiel liefert nicht nur den Code, sondern zeigt auch, wie addEventListener
funktioniert und wie JavaScript CSS-Eigenschaften manipulieren kann.
4. Erlernen und Anwenden bewährter Methoden
Während du deine Skills verbessert, ist es wichtig, bewährte Methoden beim Coden zu erlernen – Dinge wie das Schreiben von sauberem, lesbarem Code oder das Befolgen semantischer HTML-Richtlinien. ChatGPT kann Ratschläge geben, wie du deinen Code effizient strukturierst und häufige Fehler vermeidest.
Wie ChatGPT hilft:
-
Codeüberprüfung: Wenn Du dir nicht sicher bist, ob dein Code den bewährten Methoden entspricht, kannst du ihn in ChatGPT einfügen und Verbesserungsvorschläge erhalten, wie z. B. eine bessere Variablenbenennung, effizientere Schleifen oder Tipps zur Verbesserung der Zugänglichkeit in HTML.
-
Codierungsstandards: ChatGPT kann über branchenübliche Praktiken unterrichten und helfen, Code zu schreiben, der nicht nur funktional, sondern auch wartbar und skalierbar ist.
Beispiel:
Du könntest einen Codeblock einfügen und fragen: „Ist dies die beste Art, diese Schleife in JavaScript zu schreiben?“ ChatGPT kann den Code überprüfen und Alternativen vorschlagen, wie z. B. die Verwendung von forEach
anstelle einer herkömmlichen for
-Schleife, falls zutreffend.
5. Zeit sparen mit KI-gesteuerten Methoden
Für Anfänger kann das Programmieren zeitaufwändig sein, insbesondere wenn du dir bei der Syntax nicht sicher bist oder häufig auf die Dokumentation zurückgreifen musst. ChatGPT spart Zeit, indem es schnelle Antworten liefert oder den Basiscode für allgemeine Aufgaben generiert.
Wie ChatGPT hilft:
- Sofortige Antworten: Anstatt stundenlang Stack Overflow oder die Dokumentation zu durchsuchen, kann ChatGPT in Sekundenschnelle Antworten liefern.
- Prototyping: Du kannst ChatGPT verwenden, um schnelle Prototypen für kleine Funktionen oder Projekte zu generieren, sodass du mehr Zeit hast, dich auf das Lernen und Verfeinern deiner Fähigkeiten zu konzentrieren.
Beispiel: du könntest fragen: „Wie erstelle ich eine responsive Bildergalerie mit CSS Grid?“ und ChatGPT kann den Code sofort bereitstellen, sodass du nicht manuell danach suchen musst.
Weiteres Lesen
@pickleboxer und @everget hosten ein github-Repo mit einer Sammlung an ChatGPT Prompts speziell für Entwickler.