Weitere große Neuigkeiten diese Woche: Wir haben CodePen in die öffentliche Beta-Phase gestartet! Es ist eine Website zum Erstellen von Dingen aus HTML, CSS und JavaScript. Vielleicht um sie später selbst zu erinnern, vielleicht um einen Fehler zu finden oder einen reduzierten Testfall zu erstellen, oder um eine coole Idee zu zeigen, die man hat. Es dreht sich alles um Bildung und Inspiration.
Die Seite wurde von Alex Vazquez, Tim Sabat und mir gebaut. Wir würden uns freuen, wenn Sie sie ausprobieren und uns Ihr Feedback zukommen lassen. Wir haben eine Vision, aber Ihr Feedback wird uns helfen, sie zu gestalten.
Glückwunsch... zum Erreichen der Beta-Phase... muss viel Arbeit gewesen sein... werde es mir ansehen...
Endlich ist es raus und sieht gut aus
Sieht ziemlich großartig aus, ich werde es mir auf jeden Fall ansehen.
Die Seite sieht fantastisch aus! Eine großartige Möglichkeit, Code zu testen und zu teilen. Es gibt dort bereits einige großartige Codebeispiele.
Sieht großartig aus!! Beim Surfen mit Opera 12 gibt es einige kosmetische Mängel. Aber insgesamt sieht es großartig aus!!
Großartig. Fügen Sie einen Facebook Like-Button hinzu. Definitiv wird die Zählung in die Millionen gehen.
Großartige Website, haben Sie dafür WordPress verwendet? Wenn ja, würde mich interessieren, wie Sie sie gebaut haben!
Herzlichen Glückwunsch zum Launch, Chris! Sieht großartig aus, ich liebe, wie Sie iframes für die Vorschau verwendet haben!
Ist es Open Source?
Ein Teil davon wird Open Source sein, das ist der Plan. Wir hoffen, den Editor zu einer Art eigenständigen Sache zu machen.
Es war früher komplett Open Source, aber wir mussten es zurückziehen, als der Code, der zu spezifisch für uns war, sich zu sehr vermischte. Eine seltsame Sache mit Open Source, man muss wirklich dafür planen.
Sehr nett. Es ist, als hätten Sie dribbble.com und fiddle.js kombiniert und eine echte CSS-Showcase-Galerie geschaffen.
Das ist großartig, Chris. Herzlichen Glückwunsch!
So viel besser als Dribbble, ich bin dabei.
tolle Sammlungen
Erstaunlich! Ich liebe die Seite jetzt schon ;) Macht weiter so!
CodePen sieht großartig aus!
Was sind die Vorteile von CodePen gegenüber dem bestehenden jsFiddle, abgesehen vom attraktiveren Editor?
Die soziale Schicht (Leuten folgen, Dinge mögen, Kommentare) ist ein großer Unterschied zu jsFiddle. Und wir fangen gerade erst an! Wir werden den Editor viel besser machen und haben noch viele weitere Ideen zur Erkundung.
sieht wirklich gut aus, muss es testen
Die Seite ist wunderschön! Glückwunsch zu einer großartigen Errungenschaft, die sicher zu einem festen Bestandteil vieler Arbeitsabläufe wird.
Ihre Website und CodePen verwenden beide ein Schriftsystem, das auf separaten Domains gespeicherte Schriftarten nutzt, sodass sie in Mac Firefox nicht geladen werden. Einige Funktionen von CodePen sind praktisch unbrauchbar, da Sie nur zufällige Buchstaben und keine Titelattribute sehen.
Gut bemerkt beim Thema Webfonts!
Einige wirklich coole Sachen da draußen... Ich liebe diese Seite :) Weiter so
Schöne Webseite.
Eine Frage jedoch: Wie unterscheidet sich das von jsFiddle (http://jsfiddle.net)?
Ach egal, ich habe gerade gesehen, dass Sie diese Frage bereits beantwortet haben. Machen Sie weiter so!
Oh Mann, das sieht wirklich gut aus! Ich liebe das Design.
Glückwunsch, Chris, es sieht fantastisch aus. Tatsächlich ist es fantastisch. Vielen Dank!
Gibt es einen RSS-Feed?
Hallo Chris, entschuldigen Sie, dass ich hier Fragen poste. Benötige Ihren Rat.
Mein Blog hat eine feste Breite, aber die horizontale Scrollleiste wird in allen Browsern angezeigt... wie kann das passieren? Ich suche seit Tagen, finde aber immer noch keine Lösung... Ich habe meinen Code überprüft, kann aber nicht finden, was ich falsch gemacht habe.
Ich habe Ihnen noch nicht für Ihre großartigen CSS-Anleitungen gedankt. Sie haben mir sehr geholfen.
danke
CodePen ist eine großartige Plattform, um uns Ihren Code zu zeigen, damit wir Ihnen bei Ihrem Problem helfen können ;)
Cool! Freue mich auf weitere Tutorials!
CodePen ist verdammt genial! Tolle Arbeit!!
Fantastische Arbeit. Ich habe ein paar „Pens“ geforkt. Wenn ich auf mein GitHub-Konto gehe, kann ich sie nicht sehen. Wahrscheinlich bin ich nur doof.
Ich liebe es... gute Arbeit, Bro
Ich liebe es, SASS und LESS nutzen zu können. Und die Möglichkeit, auf eine externe CSS-Datei zu verlinken! Großartig!
Großartig! Sie sind großartig!
Warum haben Sie „io“ (http://codepen.io) in der URL der Website?
Glückwunsch! Sieht großartig aus, ich hoffe wirklich, dass dies irgendwann zu einem Marktplatz wird (ähnlich wie CodeCanyon, kombiniert mit Dribbble).
Wow, tolle Seite! Es ist an der Zeit, dass wir so etwas haben. Ich wünschte, ich hätte es mir ausgedacht.
Feedback: Scrollbalken in der Codebox sind sehr schwer zu benutzen, weil sie so klein sind. Sie sehen super cool aus, aber ich habe Schwierigkeiten, sie zu finden, da sie so subtil sind.
Gute Arbeit!!
Ich bin seit letzter Woche bereits Benutzer.
@Chris Coyier Verwenden Sie PHP für das Backend?
Scheint wirklich cool! Ich liebe das dunkle Schema. Schöner Mashup aus allen anderen.
Die Titelseite ist mit all den laufenden Vorschauen ziemlich schwerfällig und verursacht sofort „Lüfterlärm“ auf meinem Laptop. Ein paar prozessorlastige Vorschauen könnten den Browser leicht zum Absturz bringen. Ich würde Bilder bevorzugen oder eine Art „Klick zum Aktivieren“.
Auch das Logo ist seltsam. Ich meine, es sieht cool aus, ich verstehe einfach nicht die Idee dahinter. Was ist mit der Box?
Vielen Dank für ein so großartiges Werkzeug.
Ich würde mich über einen Tab für „Generierten Quellcode anzeigen“ freuen. Ähnlich wie auf der Try-Seite von sass-lang.com. Es wäre extrem hilfreich beim Erstellen komplizierter Funktionen.
Aha! Sie *können* den generierten Quellcode anzeigen. Sehr durchdacht. Vielen Dank.
Ich mochte es schon mehr als JSfiddle wegen der Unterstützung von SASS und COMPASS. Ich habe versucht, seine Vorteile meiner Freundin zu erklären. Sie fragte, wie man es benutzt... Ich musste sagen...
„Nun, zuerst musst du Ruby installieren, und dann musst du gem install compass eingeben...“
Sie sah mich mit diesen WTF-Augen an... hehehehe
Jetzt kann ich ihr ein paar schöne Beispiele zeigen und ihr dann beibringen, wie man es installiert, konfiguriert und so weiter.
Dieses Tool wird sehr hilfreich sein, danke
Was für eine fabelhafte Idee!!!!
Leider stürzt mein PC immer wieder ab. Gibt es eine Möglichkeit, dass diese als Thumbnails angezeigt werden und einzelne Experimente in (sagen wir) einem Lightbox oder einem neuen Fenster geöffnet werden?
Ich erinnere mich, dass Sie darüber in einem Podcast gesprochen haben, schön, das Endergebnis zu sehen, Sie haben tolle Arbeit geleistet.
OH MEIN GOTT! Das bin ich :D
Ich bin auf dem Bild, zweimal! :DDDDDDDDDD
Die Seite funktioniert nicht gut mit dem iPad Safari Browser. Es lädt nur einen kleinen Teil jedes Vorschaubildes. Nicht skaliert, sondern beschnitten, sodass man nicht viel für jede Vorschau sehen kann. Das Hovern funktioniert auf einem iPad offensichtlich auch seltsam.
coole Bohnen! =D
Sieht wirklich gut aus, eine großartige Idee. Viel besser als jsFiddle.
Sehr cool!
Wirklich großartig, danke!!
Unterstützt es das Compass-Framework?
Hallo,
Ich habe CodePen ausprobiert, aber wenn ich in CSS tippe, gibt es keine Vorschau, ich meine, das HTML bleibt dasselbe.
Sehr nützliches Projekt für Webentwickler. Ich benutze es häufig http://codepen.io/html5web
Das ist wirklich gut! Ich liebe die Echtzeit-Vorschau, die Einreichungs-Galerie und den Farbwähler.
Ich unterstütze die Idee von Thumbnails anstelle von Live-Vorschauen, einige dieser Beispiele lassen Browser ziemlich stark laggen, wenn sie alle auf derselben Seite versammelt sind haha.
Das einzige Problem, das ich hatte, ist, dass es mit jQuery im iFrame problematisch zu sein scheint. Ich bin mir nicht sicher, mit welchem Fehler, aber ein einfacher jQuery-Test auf jsFiddle hat bei CodePen nicht funktioniert.
Hier ist einer, den ich gemacht habe (jQuery aktiviert)
http://jsfiddle.net/ErrRq/
Hier ist dasselbe in CodePen (jQuery aktiviert)
http://codepen.io/anon/pen/cIilg
Unter Chrome/Webkit soll dieser Button nach dem Klicken eine Verzögerung haben, gefolgt von einem animierten Glanzeffekt, der dem Benutzer anzeigt, dass die Button-Aktion erfolgreich war (ich habe ihn ursprünglich mit spin.js kombiniert). Unter CodePen meldet die Browserkonsole einen zufälligen Fehler im Vorschau-iFrame.
Übrigens, der Galeriebereich = pure großartig!
Es ist wirklich großartig! Danke
Schön zu sehen, dass CodePen so gut läuft. Eine so großartige Layout, eine schöne Umgebung zum Spielen mit Code.