Fundstück
Codepen Top 10 2019: Die besten Code-Beispiele des Schnipseldienstes
Das sind die beliebtesten Pens auf dem Entwicklerdienst Codepen 2019. (Screenshot: t3n)
Codepen ist für Entwickler zu einer zentralen Anlaufstelle geworden. So könnte Codepen durchaus als das Dribbble für Entwickler bezeichnet werden. Allerdings ist die Qualität auf Codepen im Schnitt höher.
Als Rückblick auf das Jahr 2019 haben die Betreiber nun eine Top 100 der Best Practices zusammengestellt. Für das Ranking haben sie die Zahl der vergebenen Favoritenpunkte, auf Codepen Herzen genannt, und die Zahl der Herzengeber einbezogen. Das ist insofern relevant als jeder Herzengeber bis zu drei Herzen an ein Projekt heften kann.
Die Top 100 findest du hier. Mit der Top 10 befassen wir uns folgend näher:
CSS Card Hover Effects. (Screenshot: t3n)
Entwickler Jhonier Riascos Zapata belegt Platz 10 mit seinem Hover-Effekt für kartenbasierte Designs, den er in reinem CSS umgesetzt hat. Dabei wird eine Karte zunächst monochrom abgeblendet dargestellt, um dann on Hover farbig zu werden und weitere Inhalte zu zeigen.
The Cube. (Screenshot: t3n)
Dieser Pen ist beeindruckend. Boris Šehovac hat mit HTML, CSS und Javascript den berühmten Zauberwürfel (Rubik’s Cube) nachgebaut. Nach einem Doppelklick auf den Würfel mischt sich dieser durch. Danach kann per Mauszug oder Push-Tap auf mobilen Geräten versucht werden, den Würfel zu lösen. Dabei wird die Zeit gezählt. The Cube ist auch optisch überaus ansprechend.
Displacement Scroll. (Screenshot: t3n)
Dieser Pen von Matthew Willox implementiert einen Scroller, der Bilder durchblättert und dabei den Übergang als eine Art Morphing gestaltet. Die Bilder scheinen beim Scrollen ineinander zu verfließen. Wilcox bringt dafür HTML, CSS und Javascript zum Einsatz.
Platz 7: Mini Music Player – Vue.js
Mini Music Player – Vue.js. (Screenshot: t3n)
Muhammed Erden überzeugt mit seinem optisch ansprechenden Music Player auf Basis von Vue.js. Funktional könnte seine Lösung noch von einer API-Anbindung profitieren, damit nicht jeder Song erst heruntergeladen werden müsste.
Color this Sofa. (Screenshot: t3n)
Kyle Wetton liefert ein Beispiel dafür, wie eine SVG-Grafik nebst Hintergrund per CSS Blend Mode frei eingefärbt werden kann. Dafür benötigt er neben HTML und CSS auch Javascript.
Simple CSS Waves. (Screenshot: t3n)
Daniel Österman, als Goodkatz auf Codepen, präsentiert eine einfache Möglichkeit, Websites mit animierten Wellenbewegungen auf reiner CSS-Basis zu versehen. Die Wellen bewegen sich über die volle Breite und funktionieren auch in Mobilbrowsern.
CSS Grid: Style Guide. (Screenshot: t3n)
Olivia Ng zeigt auf Codepen einen Teil ihrer CSS Grid Collection und kann sich mit dem Style Guide aus der Kollektion den vierten Platz sichern. Per einfachem Klick ändert ihr einen kompletten Design-Stil, der nicht nur die Farbgebung, sondern auch die Typografie, Buttons, Links und Alerts betrifft. Das ist wirklich gut gemacht.
Click the Button. (Screenshot: t3n)
Der Nutzwert dieses Pen ist beschränkt. Dennoch ist der Effekt aus CSS und Javascript sehenswert und bringt Bård N Hovde den dritten Platz ein. Versucht einfach mal, den einzigen Button dieses Pen zu klicken. Ihr werdet euch wundern.
Platz 2: Pure CSS Still Life – Water and Lemons
Pure CSS Still Life – Water and Lemons. (Screenshot: t3n)
Ben Evans zeigt uns, was mit purem CSS möglich ist. Das Bild dieses Pen zeigt ein Wasserglas und zwei Zitronenteile, basiert aber nicht auf einem oder mehreren Fotos. Vielmehr generiert Evans die Darstellung vollständig aus CSS.
Platz 1: Credit Card Form – Vue.js
Credit Card Form – Vue.js. (Screenshot: t3n)
Den Entwickler des visuellen Kreditkartenformulars auf Basis von Vue.js haben wir auf Platz 7 bereits kennengelernt. Mit seiner optisch ansprechenden „Credit Card Form“ sichert sich der Javascript-Experte auch den ersten Platz.
Passend dazu: Das sind die 100 beliebtesten Code-Snippets auf Codepen
Bitte beachte unsere Community-Richtlinien
Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.
Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.
Dein t3n-Team
„So könnte Codepen durchaus als das Dribbble für Entwickler bezeichnet werden. Allerdings ist die Qualität auf Codepen im Schnitt höher.“
Sie vergleichen hier Äpfel mit Birnen und sagen dann, dass Äpfel besser sind …
Es ist zudem zwar schön zu sehen, was alles mit moderner Webtechnologie möglich ist, doch die meisten Beispiele sind im Grunde nur Spielereien.