Wenn wir uns das Klischee eines Entwicklers vorstellen, denken viele an einen einsamen Nerd, der alleine vor seinem Computer sitzt. Dieses Bild ist mittlerweile aber völlig überholt. In der Realität ist Software-Entwicklung eine sehr kommunikative Tätigkeit, erfordert eine umfangreiche Teamarbeit und einen regen Austausch. Für Alleingänge sind die meisten Projekte heutzutage schlicht und ergreifend zu komplex.

Aus diesem Grund nutzen viele Entwickler Seiten wie Stackoverflow, Hackernoon oder CodePen um sich mit Anderen auszutauschen, ihre Lösungen auf Probleme zu präsentieren oder Lösungen für ihre eigenen Probleme zu finden. CodePen wurde 2012 von Tim Sabat, Alex Vazquez und Chris Coyier gegründet und wird als eine Art soziale Entwicklungsumgebung zum Testen und Zeigen von Website-Elementen beschrieben.

Was ist eine Entwicklungsumgebung?

Eine Entwicklungsumgebung ist eine virtuelle Umgebung in der man programmiert. So kann eine Entwicklungsumgebung für viele schon aus einem einfachen Text-Editor wie Notepad++ bestehen. Notepad++ ist aber wirklich nicht viel mehr als ein einfacher Text-Editor und außerdem ziemlich alt und unansehnlich. In der Praxis enthalten Entwicklungsumgebungen deutlich mehr Funktionen. Modernere und professionellere Editoren wie Visual Studio Code, Atom oder Sublime Text sind zum Beispiel mit etlichen Plugins erweiterbar um den Entwickleralltag zu erleichtern.

Auch CodePen ist eine Entwicklungsumgebung. In CodePen lässt sich, wie der Name schon sagt, Code schreiben. Allerdings ist die Plattform auf Web-Entwicklung beschränkt. Entwickler können hier in einem Editor direkt im Browser ganze Webseiten, oder nur kleine Ausschnitte davon programmieren. Diese Ausschnitte nennt CodePen Pens. So können Web-Entwickler Funktionen, die sie in ihr eigentliches Projekt einbauen wollen, auf CodePen vorher ausprobieren.

Angenommen ihr wollt für eure Website ein Menü programmieren, das am rechten Bildschirmrand ausgefahren wird. Auf CodePen könnt ihr, ohne dass ihr die gesamte Anwendung um das Menü herum entwickeln müsst, nur diesen kleinen Teil programmieren. Dafür erstellt ihr einfach einen neuen Pen und programmiert drauf los. Wenn alles so funktioniert, wie ihr es euch vorstellt, könnt ihr das Menü in eure eigentliche Website einbauen.

See the Pen Insert Cards from Left and right by Moritz Stoll (@BerndStrommberg) on CodePen.

Was macht CodePen so sozial?

CodePen ist mehr als eine Entwicklungsumgebung. Tatsächlich ist die Seite eine Art Social Network. Zwar kann man CodePen auch ohne Account benutzen, doch mit einem eigenen Profil könnt ihr eure Pens und Projekte in eurem Profil speichern. Wenn jetzt jemand nach „Menu-Bar-Right“ sucht, könnte es sein, dass er auf euer ausfahrbares Menü stößt und dieses dann auch in seine Website integriert. Dieser Aspekt von CodePen ist gerade dann praktisch, falls ihr im Bereich der Web-Entwicklung noch neu seid. Webseiten werden nämlich nicht nur mit einer, sondern mit drei unterschiedlichen Technologien entwickelt.

Da wäre einmal HTML um die grobe Struktur einer Seite festzulegen, dann CSS um der Struktur Form und Farbe zu geben und schlussendlich JavaScript um die Seite interaktiv zu machen. Das kann am Anfang alles ganz schön überfordernd sein und oft steht man vor dem Problem zwar zu wissen, was man erreichen möchte, aber einfach nicht zu wissen, wie man seine Idee am besten umsetzt. Eine kurze Suche auf CodePen kann einem manchmal die nötige Lösung liefern. Außerdem gibt es auf der Seite, neben dem Erstellen von Pens, die Möglichkeit eigene Posts zu erstellen. Hier teilen erfahrene Entwickler ihr Wissen, was ebenfalls sehr nützlich sein kann.

Die Basis-Funktionen sind dabei kostenlos. Wer aber Funktionen wie kollaboratives Arbeiten, Live View, oder das Einbinden eigener Domains nutzen möchte, kann diese mit einem von drei kostenpflichtigen Abonnements freischalten. Das kleinste Paket Annual Starter kostet acht, das Paket Annual Developer zwölf und das umfangreichste Paket Annual Super 26 Dollar im Monat. Der Umfang an Funktionen wächst dabei mit dem Preis der Pakete. Die meisten der kostenpflichtigen Funktionen sind aber gerade am Anfang eigentlich nicht nötig und man kann die soziale Entwicklungsumgebung wunderbar in der kostenlosen Variante benutzen.

CodePen ist nicht nur für Anfänger!

Bisher klingt es so, als sei CodePen nur etwas für Anfänger um bei Anderen abzukupfern und mit reinem HTML, CSS und JavaScript zu arbeiten. In der Realität der Web-Entwicklung werden aber häufig sogenannte Frameworks und Präprozessoren benutzt um eine Website zu entwickeln. Frameworks stellen dabei eine ganze Reihe an Funktionen bereit, um die Programmierung einer Webseite deutlich zu erleichtern. Präprozessoren werden oft zusammen mit HTML und CSS benutzt. Sie erlauben es eine andere, einfachere Schreibweise als die von HTML oder CSS vorgegebene zu benutzen. Die Präprozessoren wandeln dann den Code in normalen HTML- oder CSS-Code um. In CodePen lassen sich diverse gängige Frameworks und Präprozessoren ganz einfach einbinden und benutzen.

Einfach nur stöbern

Ihr könnt auf CodePen auch einfach nur stöbern. Direkt auf der Startseite werden euch aus den Kategorien Pens, Projects, Posts und Collections sogenannte Picks vorgestellt. Also besonders interessante Inhalte, die von anderen Nutzern erstellt wurden. Stöbert man in diesen herum, kommen einem teilweise selbst neue Ideen für eigene Projekte, oder man lernt etwas Neues dazu. Manchmal hat jemand aber auch einfach einen guten Tetris-Klon erstellt und man ist erst mal für fünf Stunden beschäftigt.

Ihr solltet CodePen einfach ausprobieren

Egal ob ihr Anfänger, Fortgeschrittene oder gar keine Entwickler seid, CodePen ist auf jeden Fall einen Besuch wert. Probiert ein wenig rum, lernt vielleicht das Eine oder Andere, oder setzt gleich ein ganzes Projekt um. Es macht auf jeden Fall Spaß!

---

Image by Max / adobestock.com

Artikel per E-Mail verschicken
Schlagwörter: Browser, CodePen, CSS, entwicklung, HTML, JavaScriot, kollaboratives Arbeiten, lernen, software, Teamwork, Web-Development, Web-Entwicklung