News

Das sind die 100 beliebtesten Code-Snippets auf Codepen

(Screenshot: codepen.io)

Codepen, die Plattform zum Schreiben und Teilen von Frontend-Code, hat die besten Pens aus dem vergangen Jahr veröffentlicht. Wir stellen sie euch vor.

Codepen, die Plattform für begeisterte Entwickler aus den verschiedensten Bereichen. Eine Community zum austoben und inspirieren, für Profis sowie Anfänger. Codepen-Nutzer können ihre Arbeiten oder genauer gesagt den Code dahinter veröffentlichen, Test-Cases erstellen oder sich einfach nur inspirieren lassen. Kurz gesagt: Eine Plattform zum Frontend-Code schreiben und teilen.

Besonders die Inspiration kann oft eine echte Hilfe sein, denn durch den offen gelegten Code können zum Beispiel einzelne Snippets beliebig angepasst oder kopiert werden. In der Live-Preview werden Veränderungen in Echtzeit ausgegeben. Wer also auf der Suche nach Code für eine verrückte Animation ist, wird auf Codepen sicher fündig.

Die Code-Snippets nennen sich „Pens“ und können privat oder public sein. Codepen ist somit besonders für Berufseinsteiger eine geeignete Plattform zur Präsentation bereits absolvierter Projekte.

Die besten drei Pens aus 2017

Die Community hat die Möglichkeit „Pens“ anderer Nutzer zu bewerten oder kommentieren. Die Bewertung erfolgt meistens  durch „Hearting“ – eine Art Like, nur wird nicht mit einem Daumen, sondern mit einem Herzen geliked. Jeder Nutzer kann einen Pen bis zu drei Mal bewerten.

Jetzt hat Codepen die Pens mit den meisten Herz-Bewertungen aus dem vergangenem Jahr zusammengefasst und veröffentlicht.

Auf Platz eins der Codepen-Auswertung ist das Werk vom Microsoft-Entwickler David. Mit seinem Pen „CSS Responsive House“ hat er die Community begeistert und konnte 1.681 Likes sammeln.

Den zweiten Platz gewinnt Giana mit ihrem „CSS-only directionally aware hover“ Pen. Je nachdem aus welcher Richtung gehovert wird, legt sich ein Overlay über die Bilder.

Mit 1.310 Likes gewinnt Fabio Ottaviani den dritten Platz. Sein Werk ist die „Split Slick Slideshow“. Durch eine sanfte Scroll-Animation teilt sich das Bild und scrollt zum nächsten.

Hier gelangt ihr direkt zur Übersicht der 100 ausgewählten Pens.

Das könnte euch auch interessieren:

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

Ein Kommentar
JanSolo76
JanSolo76

Kann es sein, dass ihr die Reihenfolge vertauscht habt und euer Platz 1 in Wirklichkeit nur Platz 100 ist? ;)

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung