Der ursprüngliche Titel dieses Beitrags lautete „Ernsthaft, Mach Einfach Einen JSFiddle“. Er wurde geschrieben, bevor ich Mitbegründer von CodePen wurde. Es ist kein Geheimnis oder eine Überraschung, dass CodePen von Apps wie JSFiddle und JSBin inspiriert wurde. Es ist meine Aufgabe, Sie auf CodePen hinzuweisen, und meine Meinung ist, dass es eine gute Wahl für Sie ist.
Hat Sie schon einmal jemand um Hilfe bei der Fehlersuche für eine Kombination aus HTML, CSS und JavaScript gebeten und die Gesamtheit aller Dateien per E-Mail oder in einem Forenbeitrag kopiert und eingefügt? Das ist sehr üblich, betrachten Sie dies also als eine Intervention. Wenn Sie Schwierigkeiten haben, etwas herauszufinden
- Gehen Sie zum Editor von CodePen.
- Legen Sie das HTML in den HTML-Bereich, das CSS in den CSS-Bereich und das JavaScript in den JavaScript-Bereich
- Sehen Sie, ob das Ergebnis das Problem demonstriert, und passen Sie es nach Bedarf an, um das Problem sehr deutlich zu machen.
- Drücken Sie Speichern, um eine öffentliche URL zu erhalten.
- Teilen Sie diese URL dort, wo Sie Hilfe bei der Fehlersuche suchen.
Idealerweise können Sie es auch auf das absolute Minimum reduzieren, das das Problem noch zeigt.
Der Schlüssel ist, **das Ergebnis sehen zu können**. Für Ihren potenziellen Troubleshooter ist es 100 Mal einfacher, damit zu experimentieren, als zu versuchen, anhand Ihres Codes allein zu erraten, was passiert.
Oftmals lösen Sie das Problem während des Prozesses der Erstellung dieses Pens (nennen wir es, wie es ist: ein reduzierter Testfall) selbst. Und wenn nicht, steigen die Chancen, Hilfe von jemand anderem zu bekommen, enorm.
Das tun wird Sie zu einem besseren Coder und besser im Bett machen. Ich verspreche es.
XOXOXO,
-Chris
Das ist wirklich sehr praktisch.
Sie brauchen nicht einmal die <head>-Informationen im HTML-Bereich!
jsFiddle erlaubt es Ihnen auch, „Revisionen“ zu speichern, um Ihren Fortschritt zu verfolgen.
Das ist genial, ich werde das auf jeden Fall als Lesezeichen speichern!
Die Formulierung „Ernsthaft“ ist zu beleidigend, war das nötig?
Ja.
Ja, das war es…. manchmal muss man einfach die Wichtigkeit eines Problems hervorheben…. ernsthaft.
JA!
Ich habe kürzlich angefangen, Antworten zu StackOverflow beizutragen, und ich glaube nicht, dass ich jemals einen Beitrag gesehen habe, der ein jsFiddle enthielt, das nicht zu einer schnellen und schmerzlosen Lösung führte.
Das ist das „Beweisfotos oder es ist nicht passiert“ der Webentwicklung. Ich will deine lausigen Ausreden nicht hören, warum du keinen Link zu deiner Seite angeben kannst, mach einfach ein Fiddle.
Wenn Sie das beleidigend finden, müssen Sie wirklich etwas dickere Haut bekommen.
Hat sich jemand gefühlt, als ob dieser Beitrag auf ihn/sie gerichtet war? hehe :D
ja
Wow. Sind Sie ERNSTHAFT beleidigt von dem?
Ich denke, es könnte eine größere Bevölkerungsgruppe (in Hawaii) geben, die von Ihrem Pseudonym beleidigt sein könnte.
... ernsthaft. :-|
Das ist ein wirklich großartiges Werkzeug im Netz. Leicht zugänglich & tolle Link-Sharing-Funktion.
Ich habe es von Ihnen gelernt & in meinem Beitrag verwendet
Ich benutze jsFiddle immer wegen seiner glatten und einfach zu bedienenden Benutzeroberfläche, außerdem ist es wirklich praktisch für schnelles Cross-Browser-Testing für sehr kleine Code-Schnipsel.
Gute Arbeit, Ginger!
Toller Beitrag!
Ich werde Leute auf diesen Beitrag verweisen, wenn sie Hilfe wünschen, da Sie eine großartige Schritt-für-Schritt-Anleitung für Leute haben, die mit diesen Tools nicht vertraut sind.
Ich habe einen j.mp-Link für den Beitrag erstellt: http://j.mp/makeajsfiddle
Gut, das zur Hand zu haben :D
Prost!
Danke für das Teilen, Chris... das macht es mir leicht...
Wenn doch nur all die Leute, die das noch nicht tun, das lesen würden.
SPAMMT DIE FOREN >.<
JSBin hat die schönste Benutzeroberfläche – super minimalistisch.
Offenlegung: Ich habe die Benutzeroberfläche entworfen :)
Ich bevorzuge definitiv das Panel-Layout von jsFiddle. Warum habt ihr euch für 3 Spalten entschieden?
Ich habe letzten Monat jsFiddle verwendet, um ein jQuery 101 für einige meiner Kollegen zu machen. Ich konnte ein mehrstufiges Projekt einrichten und jeden Schritt als eine andere Revision speichern. Dadurch konnte ich jeden Schritt des Projekts zeigen, ohne neu codieren oder 10 verschiedene Dateien haben zu müssen. Außerdem hatte ich die Möglichkeit, diesen Link mit ihnen zu teilen, damit sie ihn bei Bedarf selbst noch einmal durchgehen konnten, wenn sie mit einem jQuery-Projekt begannen.
Guter Anwendungsfall!
Warum sind alle so vernarrt in JSFiddle?
Ich habe es benutzt. Ich habe anderen damit geholfen. Aber ich hasse es. Es ist eine Qual
Warum ist es eine Qual für Sie?
„Das tun wird Sie zu einem besseren Coder und besser im Bett machen. Ich verspreche es.“
– genial LOL :)
Besser im Bett, weil Sie mehr Zeit haben, im Bett zu sein, da Ihr Code funktioniert! :-)
Ich benutze jsFiddle viel! Das macht mich also zum Meister im Bett *strahl*... jetzt, wenn da nur jemand mit mir wäre o.O
Gut, ich werde es versuchen.
Ich habe es schon einmal gesehen, aber in Ihrem Kontext ergibt es Sinn.
Ich habe es gerade als Lesezeichen gespeichert, danke Chris. Ich mag die Benutzeroberfläche wirklich und obwohl ich Probleme auf meinen eigenen Server hochlade, um sie öffentlich anzuzeigen (weil ich auch erkannt habe, dass Leute gerne mit dem Code spielen), ist dies ein schönes Werkzeug.
Chris, danke für diesen Beitrag! Ich helfe viel bei #jquery auf IRC freenode und helfe auch Leuten bei der Nutzung von jsfiddle!
Danke für die Promotion von jsfiddle. Vielleicht hilft dieser Artikel dabei, den Schritt zu entfernen, bei dem wir jemanden bitten müssen: „Bitte posten Sie ein Fiddle“.
Diese Werkzeuge sind nur zum Debuggen nützlich und nicht für schwere Arbeiten und nicht zum Überprüfen von Hacks oder CSS-Pfeilen…
Ähm, Markup kann auf jsFiddle überprüft werden.
Ich benutze die Seite jetzt, während wir sprechen. Es steckt so viel Wahrheit in diesem Artikel!
Chris,
Ich habe die Kommentare und Richtlinien in JSfiddle gesehen, um zu „speichern“, um eine öffentliche URL zu erstellen, aber in dem JSfiddle, das ich verwende, steht auf dieser Schaltfläche „Aktualisieren“, nicht „Speichern“? Mache ich etwas falsch?
Ignorieren Sie mich... es war ein langer Tag und ich bin sehr müde! Ich habe bereits auf „Speichern“ geklickt und natürlich wäre der nächste logische Schritt „Aktualisieren“!
Mist!
*Jon senkt beschämt den Kopf, während er eine weitere Kanne Kaffee macht!
Sobald Sie gespeichert haben, aktualisieren Sie.
Das ist großartig, wenn man bedenkt, dass ich all die Zeit Pastebin verwendet habe :s
Anscheinend lässt es nicht zu, den Prototypen eines Objekts zu ändern. Das ist sehr bedauerlich.
Ich benutze das jetzt schon seit Monaten! Es ist immer mühsam, Leuten in Foren zu helfen, wenn man alles lokal kopieren und einfügen muss.
Ich wünschte nur, es hätte eine brauchbare iPad-Benutzeroberfläche. Es ist unmöglich, Tastenanschläge zu verwenden, um Panels auf dem iPad auszublenden.
Ja, und Sie und jeder andere können Ihre Lösung in ihrer einfachsten Form jederzeit leicht abrufen. Das macht das Teilen Ihrer *Genialität* mit anderen super einfach.
Tolle Lektüre, wie immer.
@Chris – Schönes letztes Statement.
Persönlich mag ich die Echtzeitansicht in JSBIN, aber ich hasse die Vorlagen-Sachen.
Sie sollten auch erwähnen, dass Leute klickbare Links posten sollten. Ich mag es wirklich nicht, wenn Leute Text als Links posten, die man in einen neuen Tab kopieren/einfügen muss.
Ich stimme Ihnen voll und ganz zu, und das ist einer der Gründe, warum ich meine Web-App erstellt habe, http://qip.li , sie ermöglicht es Ihnen, Webseiten zu hosten, Sie können sie auch verwenden, um Ihren Code mit anderen zu teilen, was die Fehlersuche erheblich erleichtert.
Schöne Seite... jetzt, wenn sie nur eine scrollbare Leiste hätte, anstatt mich zwingen zu lassen, Super Ballerspiele zu spielen, um nach unten zu scrollen ;)
Schön. Danke für den Tipp. Ich bin sicher, ich muss es irgendwann tun.
einfache Navigation
http://jsfiddle.net/arck7/DakDQ/
nutzen Sie es, wenn nötig
schönes Menü und sanfter Übergang, es gefällt mir, danke!
Ich muss zugeben, dass ich die Benutzeroberfläche von jsfiddles viel mehr mag als die von jsdo.it, das ich in letzter Zeit benutze.
jsdo.it ist neu für mich. Aber ja, ich stimme Ihnen zu, ich bevorzuge auch die Benutzeroberfläche von JSFiddle. Alles scheint für Sie an der richtigen Stelle zu sein.
Ich hatte noch nie von diesen Diensten gehört, aber sie scheinen mir wirklich Zeit zu sparen!
Ja, das ist alles schön und gut, wenn es in einem einfachen HTML/CSS/JS-Framework funktioniert, aber was ist, wenn Sie ein dummes ASP.NET-Problem haben und die Dinge nicht zum Laufen bringen können :-)
Ich weiß, ich weiß, ASP.NET ist ein anderes Biest – jsFiddle ROCKT WIRKLICH!
Hey, das ist großartig. Danke fürs Teilen. Wir haben JotForm einmal auf einer Website verwendet und tagelang damit verbracht, die JavaScript-Probleme zu debuggen und herauszufinden.
Übrigens habe ich neulich mein kostenloses CSS Tricks-Shirt getragen. Habe es von Ihnen auf der #frontendconf bekommen. Vielen Dank! :)
Ich stimme zu, JSFiddle ist großartig! So viel Hilfe bei der Nutzung einer Seite wie StackOverflow.
Ich bin überrascht, dass nicht mehr Leute auf StackOverflow es benutzen (oder die Leute, die kommentieren, es nicht „verlangen“, bevor sie helfen…)
Ich benutze es seit kurzem. Es macht es viel einfacher, Hilfe zu bekommen. :)
Nur für Experten he3x.
Ich bin Anfänger
Oh ja, komisch, ich habe das gerade auf eine Seite meiner Website gestellt. Das muss geteilt werden.
http://jsfiddle.net/Amelecuk/LnmpR/
Ich möchte die aktuell ausgewählte Überschrift schließen, sobald man auf die Überschrift klickt, z. B. „Hauptmerkmale“.
Sie erweitert sich also wieder in sich selbst, und der Effekt ist Öffnen und Schließen.
Klick 1 – Überschrift öffnen, um Text zu lesen
Klick 2 – Diese Überschrift schließen
Nicht alles wird in diesen Tools korrekt gerendert, z. B. CSS-Pfeile!
Dieser Artikel hat mich inspiriert, mit jsfiddle anzufangen. Ich liebe es.
Ich habe neulich eine Frage auf Stack Overflow gestellt, ein Fiddle verwendet und es lief großartig... hat mir wirklich geholfen, es zu „verstehen“... danke für den Vorschlag, Chris!
Danke Chris.
Es ist wirklich hilfreich.
In der Tat sehr nützliche Online-Tools! Jemand auf Stackoverflow hat mir jsfiddle empfohlen... kannte jsbin und cssdesk nicht.....
Ich frage mich, wie viele Stunden Schlaf ich ohne diese verpasst habe :)
JSFiddle ist mein Ding. Macht mein Leben so viel einfacher
http://kodtest.com mein bester Live-Code-Editor..
Chris, Sie haben wirklich einen sehr hilfreichen Job gemacht, indem Sie CodePen vorgestellt haben. Ich benutze es für meine Front-End-Designanforderungen. Vielen Dank!
http://liveweave.com hat eine schöne Code-Hinting-Funktion und lässt Sie den gesamten Code in einer .zip-Datei herunterladen
Das sind großartige Funktionen. Nur zur Klarstellung: CodePen bietet auch Zip-Export (neben anderen Exportmöglichkeiten) und robuste Code-Hints für CSS, HTML und JS.