ChatGPT, ein grosses Sprachmodell, das von OpenAI trainiert wurde.
Es kann Entwicklern dabei helfen, ihre Produktivität im Web-Entwicklungsbereich zu steigern und sogar für sie zu programmieren. Eines der wichtigsten Anwendungsgebiete von ChatGPT ist die Erstellung von Code-Snippets.
Let’s try!
Ein Entwickler kann ChatGPT bitten, eine Funktion in JS zu erstellen, die eine bestimmte Aufgabe ausführt. Zum Beispiel eine Funktion, die die Hintergrundfarbe eines Elementes auf einer Seite ändert. ChatGPT kann dann den entsprechenden Code automatisch generieren:
function changeBackgroundColor(element, color) {
element.style.backgroundColor = color;
}Ein weiteres Beispiel ist die Verwendung von ChatGPT in der Erstellung von HTML-Code-Snippets. Ein Entwickler kann ChatGPT bitten, eine Grundstruktur für eine HTML-Seite zu erstellen, die bestimmte Elemente wie Header, Navigation und einen Footer enthält:
<!DOCTYPE html> <html> <head> <title>Meine Webseite</title> </head> <body> <header> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <main> <!-- Inhalt hier --> </main> <footer> <!-- Footer Inhalt hier --> </footer> </body> </html>
Ein weiteres Beispiel ist die automatische Generierung von CSS-Regeln.
Ein Entwickler kann ChatGPT bitten, einen Satz von Regeln zu erstellen, um bestimmte Elemente einer Seite auszurichten. ChatGPT kann dann den entsprechenden Code automatisch generieren:
header { background-color: #333; color: #fff; text-align: center; padding: 1em; } footer { background-color: #333; color: #fff; text-align: center; padding: 1em; }
Insgesamt kann ChatGPT Entwicklern durch die Automatisierung von Aufgaben wie der Erstellung von Code-Snippets Zeit und Mühe ersparen und ihre Produktivität steigern.
Unsere Eingabe war folgende: “Schreibe mir einen Blogartikel über dich selbst im Passiv. Zeige anhand von Beispielen, z.B Code Snippets, wie du Entwicklern helfen kannst, ihre Produktivität im Web Development zu steigern und sogar für sie zu programmieren. Nutze dabei Javascript, HTML und CSS.”
ChatGPT ist in aller Munde – und dies zurecht.
Es versteht viele Sprachen wie z.B. Deutsch, Englisch, Französisch uvm. problemlos. So kann es uns ganz einfach und in unserer gewünschten Sprache Fragen beantworten, Texte schreiben oder sogar programmieren. Wir werden hier ein wenig mehr auf den Anwendungsfall für Entwickler eingehen.
Natürlich braucht es aus Entwickler- und UX-Sicht einiges mehr als das, was im generierten Snippet vorhanden ist. Ein Mobile-Menu beispielsweise, und sollte natürlich auch noch barrierefrei sein. Ob ChatGPT das kann?
Versuchen wir’s:
“Programmiere einen Header mit einem Logo auf der linken Seite. Die Navigation auf der rechten Seite. Das Ganze sollte auch ein barrierefreies Mobile-Menu für Responsive Design haben und die Accessibility-Richtlinien berücksichtigen. Das Mobile-Menu soll mit einem Hamburger-Icon aufgeklappt werden können und von rechts nach links in den sichtbaren Bereich sliden.”
Sieh dir den Output auf Codepen an:
https://codepen.io/Meternios/pen/qByXQOjm
Das Ergebnis ist ziemlich gut.
Natürlich müssen hier immer noch diverse Sachen angepasst und erweitert werden. Grundsätzlich aber, programmierte ChatGPT genau das, was wir wollten. Das Beachtliche dabei ist: ChatGPT kann dies in allen Sprachen. Wird als Beispiel Vue 3 verwendet, kann ChatGPT dies auch in Vue 3 schreiben.
ChatGPT kann aber nicht nur für Entwickler vor-programmieren, sondern auch Fragen beantworten und Probleme lösen. Mal sehen, wie weit wir mit unserer Frage kommen.
Noch ein Versuch:
“Wie erstelle ich einen Parallax Effekt in vue 3?”
Output:
Ein Parallax-Effekt in Vue 3 kann erstellt werden, indem man die scroll-Position des Benutzers verfolgt und die Position eines Elements auf der Seite entsprechend ändert. Hier ist ein Beispiel, wie man einen einfachen Parallax-Effekt mit der Verwendung von Vue 3 und CSS erstellt:
Erstellen Sie eine neue Vue-Komponente, die den Parallax-Effekt enthält.
- Verwenden Sie das mounted()-Lifecycle-Hook, um einen Scroll-Event-Listener hinzuzufügen und die aktuelle Scroll-Position zu verfolgen.
- Verwenden Sie die data()-Funktion, um eine Variable für die Position des Elements zu erstellen und zu aktualisieren.
- Verwenden Sie die computed()-Funktion, um die Position des Elements basierend auf der Scroll-Position zu berechnen.
- Verwenden Sie die v-bind:style-Direktive, um die Position des Elements in CSS zu aktualisieren.
Es gibt auch viele vue3-Plugins wie vue-parallax und vue-parallaxy die man verwenden kann, um den Parallax-Effekt zu erstellen und zu verwalten.
ChatGPT kann auch effektiv beim de-buggen von Fehlern helfen
ChatGPT Eingabe: “Bei der installation von simple-parallax in meiner nuxt3 Anwendung bekomme ich den Fehler: Window not defined.”
Output:
Der «window not defined» Fehler tritt auf, wenn das JavaScript-Modul versucht, auf die window-Eigenschaft des Browsers zuzugreifen, aber diese Eigenschaft ist nicht verfügbar, weil das Modul auf dem Server ausgeführt wird.
Da Nuxt.js ein serverseitiger Renderer ist, wird der Code auf dem Server ausgeführt, bevor er an den Browser gesendet wird. Simple-parallax greift jedoch direkt auf die window-Eigenschaft des Browsers zu, die auf dem Server nicht verfügbar ist.
Um dieses Problem zu beheben, gibt es ein paar Lösungen:
- Verwenden Sie eine andere Parallax-Bibliothek, die serverseitig funktioniert. Ein Beispiel hierfür ist vue-parallax.
- Nutzen Sie eine Bibliothek, die die window-Eigenschaft nicht direkt aufruft, sondern stattdessen auf eine Abstraktion zugreift, die sowohl auf dem Server als auch im Browser funktioniert, wie z.B. global oder globalThis.
- Nutzen Sie eine Bibliothek, die speziell für serverseitige Render-Anwendungen wie Nuxt.js entwickelt wurde.
- Fügen Sie eine Bedingung hinzu, die überprüft, ob die window-Eigenschaft verfügbar ist, bevor das Modul versucht, darauf zuzugreifen.
if (typeof window !== 'undefined') { // code that uses window here }Verwenden Sie den sogenannten «Dynamic Import» von Nuxt.js, damit das Modul erst auf der Client-Seite geladen wird, anstatt auf dem Server.
export default { components: { Parallax: () => import('simple-parallax-js'), }, // ... }Ich hoffe, dass dies hilft, Ihr Problem zu lösen.
Fazit
ChatGPT ist (noch) kein Ersatz für Entwickler. Und manchmal schreibt es verwirrende, grammatikalisch nicht so ganz korrekte Texte. Vielmehr kann es Entwicklern jedoch helfen, einfache Arbeiten, wie den Grundaufbau einer HTML-Seite, zu generieren oder Fragen, die man nicht technisch ausformulieren kann, zu klären.
Es kann einem auch einen Überblick geben, was zu tun ist oder vielleicht sogar vergessen gegangen ist. Nichts desto trotz muss man das Generierte verstehen können. Oft fehlt auch einiges an zusätzlichen Informationen. Beispielsweise fehlende, aber wichtige Accessibility Attribute. Vielleicht funktioniert das Generierte von ChatGPT mit einer anderen Funktion sogar noch viel performanter. Bei unseren Fun-Tests hatten wir schon mal den Fall, dass ChatGPT eine Funktion erfand, die es gar nicht gibt. So ganz 100% Vertrauen hat ChatGPT von uns noch nicht, aber es beeindruckt uns trotzdem zweifellos.
Fest steht aber: Man muss ChatGPT mit den richtigen Informationen füllen und dann aber auch verstehen, was es generiert, damit man den Code verwenden kann. Ist dies gegeben, bekommt man meistens einen sinnvollen, schnell und gut erklärten Code.
Geschrieben von:
Florian Hitz, Frontend-Entwickler bei der raffiniert media AG
Bleib mit unserem Newsletter auf dem Laufenden
Hast du eine Idee?
Nur keine scheu! Schreib uns.