Lokale Kodierungsumgebungen sind großartig, aber oft möchte ich Espresso nicht aufbrechen und ein paar Minuten damit verbringen, den Code einzurichten, wenn ich wirklich nur eine Idee testen oder an einem Fehler arbeiten möchte. Die Freigabeoptionen für die meisten lokalen Codierungs-Apps sind begrenzt und erfordern normalerweise die Integration einer externen App wie Dropbox.
Online-Spielplätze oder Sandkästen wie jsFiddle lösen dieses Problem, indem Sie eine sofort einsatzbereite Programmierumgebung bereitstellen, in der Sie mit dem Experimentieren beginnen können, sobald die Seite geladen wird. Mit diesen Tools können Sie CSS, HTML und oft sogar JavaScript kombinieren, um Codierungsbeispiele zu erstellen und zu teilen. Ich bin völlig süchtig nach diesen Dingen und habe jeden ausführlich getestet, den ich in die Finger bekommen kann. Heute gehe ich meine fünf Favoriten durch und diskutiere nicht nur, warum ich an jeder Option mag, sondern auch, wo sie unterlaufen.
CSSDesk
Ich fange mit CSSDesk an, weil es eine der ältesten auf dieser Liste ist. Es ist schon seit Jahren ein leises und obskures kleines Werkzeug, das äußerst hilfreich für das Spielen mit grundlegendem Webcode ist. CSSDesk ist ein sehr einfaches Werkzeug, das sich ausschließlich auf HTML und CSS konzentriert.
Was ich an CSSDesk mag
Es gibt viele Dinge, die ich an CSS Desk mag. Es gibt drei Hauptabschnitte: HTML-, CSS- und Live-Vorschau, deren Größen mit einem Klick und Ziehen leicht geändert werden können. Ich mag es, dass Sie alles, was Sie brauchen, auf einen Blick sehen können. Hier ist kein Aufwand oder Setup erforderlich, laden Sie einfach die Seite und beginnen Sie mit dem Erstellen.
Es gibt auch grundlegende Syntax-Hervorhebungen, genau wie alle anderen Werkzeuge in dieser Liste. Eine ziemlich eindeutige Funktion, die Sie bei diesen Werkzeugtypen nicht häufig finden, sind Zeilennummern. Es ist eine so einfache Ergänzung, aber ich neige dazu, Zeilennummern zu mögen, daher schätze ich die Aufnahme wirklich.
Die Toolbar-Funktionen sind auch ziemlich cool und bieten einige Optionen, die Sie einfach nicht an anderen Orten finden. Neben der Standardfreigabefunktion können Sie auch das herunterladen, was Sie gerade erstellt haben. Außerdem gibt es eine Reihe von Standard-Hintergrundtexturen, die angewendet werden, wenn Sie sie nicht manuell überschreiben. Diese machen Spaß, wenn Sie nur eine Schaltfläche oder ein Widget erstellen und etwas anderes als den typischen weißen Hintergrund wünschen.
Was mir an CSSDesk nicht gefällt
Ehrlich gesagt gibt es an diesem nicht viel zu mögen. Sicher, es ist einfach und verfügt nicht über einige der ausgefallenen Funktionen der anderen Optionen, aber das macht es auch großartig. Ich benutze diese selten mehr, aber jedes Mal ist es so schön, dass ich denke, ich sollte öfter vorbeischauen.
Der größte Nachteil für Hardcore-Codierer ist die fehlende JavaScript-Unterstützung. Wenn dies ein Dealbreaker für Sie ist, probieren Sie eine der anderen Optionen aus.
JS Bin
JS Bin ist ein weiterer beliebter Ort, an dem Sie mit Ihrem Code herumbasteln können. Das Design dieser App ist ziemlich minimal und erlaubt Ihnen wirklich, sich auf den Code zu konzentrieren. Standardmäßig werden auf der Seite nur die HTML- und Live-Vorschaufenster angezeigt. Sie können jedoch auch JavaScript hinzufügen.
Was ich an JS Bin mag
Es gibt einige schöne Funktionen in JS Bin. Das Erste, was ich zu schätzen wusste, ist die Tatsache, dass das Aktualisieren der Seite Ihre Arbeit nicht tötet. Die Vorschau wird automatisch aktualisiert, aber in seltenen Fällen, in denen Sie eine manuelle Aktualisierung benötigen, ist es schön, dass Ihr erster Instinkt (Befehlstaste-R) nicht zum unbeabsichtigten Verlust einer Stunde des Bastelns führt.
Wie bei CSSDesk speichern, teilen und laden Sie Ihre Arbeit. Der Ort, an dem dies offensichtlich vorankommt, ist die JavaScript-Implementierung. Sie können natürlich Ihre eigene JS eingeben, aber als Bonus können Sie auch beliebte Bibliotheken wie jQuery verwenden.
Eine weitere coole Funktion ist die Möglichkeit, durch Manipulation der URL zu steuern, welche Bereiche angezeigt werden. Zum Beispiel? Http: //jsbin.com/#javascript,html,live? erhalten Sie alle drei Bereiche, während? http: //jsbin.com/#html,live? Ich werde nur zwei bekommen.
Was mir an JS Bin nicht gefällt
Um ehrlich zu sein, ist JS Bin meine am wenigsten bevorzugte Option auf dieser Liste. Es ist nicht schlecht, aber es fehlt definitiv der Charme der anderen. Was mich immer reizt, ist, dass es keinen speziellen Platz für CSS gibt, der Sie zwingt, es in Ihren HTML-Code einzubetten. Das funktioniert gut, ist aber nicht so schön wie die absichtliche Trennung, die bei den anderen Optionen zu sehen ist.
jsFiddle
jsFiddle hat sich in den letzten Monaten bis zu einem Jahr vollständig erholt und ist derzeit wahrscheinlich die beliebteste Option auf dieser Liste. Und aus gutem Grund ist dies eine erstaunliche App. Seien wir ehrlich, sobald Sie sich mit jsFiddle befasst haben, werden Sie möglicherweise nie wieder eine der anderen Optionen betrachten.
Was ich an jsFiddle mag
In meiner Liste von Gründen, warum Sie jsFiddle verwenden sollten, gibt es eine Menge großartiger Dinge, die Sie behandeln sollten. An erster Stelle steht das Layout. Es gibt vier Bereiche (HTML, CSS, JavaScript und Vorschau), mit denen Sie alles sehen können, was Sie zum gleichzeitigen Ändern der Größe benötigen. Das Layout-System hier fühlt sich sehr flexibel an und macht Spaß damit.
Während wir über Panels diskutieren, können Sie die CSS- und JavaScript-Panels an Ihre bevorzugten Tools von Drittanbietern anpassen. Sie finden Unterstützung für die Sass SCSS-Syntax und CoffeeScript.
Mit jsFiddle können Sie ein Login erstellen und ein Dashboard Ihrer vergangenen gespeicherten Arbeit anzeigen. Nachdem Sie eine Geige gespeichert haben, gibt es eine Vielzahl von Menüoptionen und Werkzeugen. Meine Favoriten sind die Möglichkeit, schnell eine Verzweigung zu erstellen, und die Möglichkeit, Ihre chaotische Codestruktur automatisch aufzuräumen.
Neben den Anpassungsoptionen für das Bedienfeld bietet die Seitenleiste eine Reihe weiterer großartiger Funktionen. Sie können beispielsweise schnell alle wichtigen Bibliotheken hinzufügen, die Sie einbinden möchten (jQuery, MooTools usw.), sowie Ihre eigenen JavaScript- / CSS-Ressourcen.
Eine letzte erstaunliche jsFiddle-Option, die ich erst neulich entdeckt habe: Sie können Geigen in eine Webseite einbetten. Diese Option befindet sich im Share-Menü und ist eine großartige Alternative zu anderen Code-Embedding-Diensten.
Was mir an jsFiddle nicht gefällt
Meine Hauptaufgabe bei jsFiddle ist das Fehlen einer automatischen Aktualisierungsoption für die Vorschau. Wenn Sie alle anderen Optionen in dieser Liste verwendet haben und die Freude an der automatischen Aktualisierung erlebt haben, ist es schwierig, alle paar Sekunden manuelle Aktualisierungen in jsFiddle zu akzeptieren.
Was andere Features angeht, so ist es das Beste auf der Liste, aber dieser Ärger treibt mich oft woanders hin, wenn ich nur einen schnellen Test machen möchte. Tastenkombinationen helfen, aber sie sind immer noch nicht so gut wie etwas Automatisches.
Dabblet
Dabblet ist ein recht junges Kind in diesem Genre. Wie CSSDesk konzentriert es sich nur auf HTML und CSS ohne JavaScript. Zählen Sie es jedoch nicht heraus, denn es bringt ernste Innovationen in die Tabelle, die Sie in keinem anderen Editor finden.
Was ich an Dabblet mag
Standardmäßig ist Dabblet in drei Registerkarten unterteilt: CSS & Ergebnis, HTML & Ergebnis und Ergebnis. Dies bietet Flexibilität und Fokus, während Sie das Ergebnis stets im Auge behalten.
Sie können die Einstellungen mit den unten gezeigten Steuerelementen ändern. Die Aufteilung kann vertikal, horizontal oder vollständig erfolgen. Es gibt auch einen interessanten Code hinter dem Code. Modus, in dem Ihr Ergebnis einfach der Hintergrund für den Codierungsbereich ist. Beachten Sie, dass auch eine Meldung über die Verwendung von Präfix-Free angezeigt wird. Ich benutze Dabblet die ganze Zeit und habe das erst jetzt bemerkt! Das bedeutet, dass Sie keine verrückten Herstellerpräfixe verwenden müssen und die einfachen Standardwerte kodieren können. Das versteckte JavaScript sorgt dafür, dass Ihr Browser dies richtig interpretiert.
Dabblet hat auch einige großartige Einsparungsmöglichkeiten wie "anonym speichern". Es ist auch ein Link zu Ihrem GitHub-Account, den Kodierer wie Nerds lieben werden.
Mein bevorzugtes Dabblet-Feature ist die Integration des Super-Slick-Hover-Effekts in CSS. Sie sind leichter zu beschreiben, beschreiben. Hier zwei Beispiele:
Wie Sie sehen, werden bestimmte kleine Tooltips, die wirklich großartig sind, durch das Bewegen über bestimmte CSS-Elemente angezeigt. Sie können eine Vorschau für Schriftarten, Farben, Größen und sogar Bilder anzeigen.
Was mir an Dabblet nicht gefällt
Dabblet ist aus visueller Sicht ein bisschen skurril, du liebst es oder hasst es. Ich persönlich genieße es wirklich, aber ich wünschte wirklich, ich hätte mehr Kontrolle über die Panelgröße. Eine automatische 50/50-Aufteilung zu haben ist großartig, aber ich sollte in der Lage sein, das manuell einzustellen, je nachdem, was ich wähle.
Soweit ich weiß, gibt es auch keine Möglichkeit, HTML und CSS gleichzeitig anzuzeigen. Dies ist etwas ärgerlich, wenn Sie Optionen wie jsFiddle gewohnt sind, bei denen Sie alles auf einmal im Auge behalten können.
Tinkerbin
Tinkerbin ist die nächste Alternative zu jsFiddle, die ich gefunden habe. Obwohl es nicht alle ausgefallenen Features von jsFiddle bietet, hat es ein paar Tricks, die wirklich nett sind.
Was ich an Tinkerbin mag
Das Standard-Panel-Layout von Tinkerbin ist wahrscheinlich mein Favorit auf dieser gesamten Liste. Es ist ein sehr logisches Layout, das den Code auf der linken Seite und eine schöne große Vorschau für die automatische Aktualisierung auf der rechten Seite platziert. Die HTML-, CSS- und JavaScript-Abschnitte sind alle übereinander gestapelt. Mit optionalen Registerkarten können Sie sich auf nur eine davon konzentrieren.
Außerdem unterstützt Tinkerbin noch mehr alternative Syntaxoptionen als jsFiddle. Sie können zwischen HTML und HAML wählen. CSS, SCSS (mit Compass), die alte SASS-Syntax oder LESS; und JavaScript oder CoffeeScript. Es ist unnötig zu erwähnen, dass Sie für Pre-Prozessoren die Option wählen.
Tinkerbin ist die einzige Option, die es Ihnen ermöglicht, Ihre Vorschau für eine schöne, umfangreiche "Quelle" auszutauschen. Fenster.
Was mir an Tinkerbin nicht gefällt
Noch mehr als bei Dabblet ist das Tinkerbin-Layout völlig starr. Klar, ich mag das Standard-Setup am besten, aber manchmal möchte ich die Vorschau breiter machen und ich habe hier einfach keine Option.
Außerdem sind die Einsparungsmöglichkeiten nicht die besten. Es gibt keine Kontoeinrichtung, kein Dashboard, keine GitHub-Integration usw. Sie speichern Ihre Experimente einfach unter einer verkürzten URL.
Fazit
Ich bin mir sicher, dass Sie die Vorteile einiger Lesezeichen sehen können. Ich möchte Sie dazu ermutigen, so oft wie möglich mit neuen Ideen zu experimentieren, um sich selbst auf dem neuesten Stand zu halten, und diese Dienste bieten eine großartige Möglichkeit, dies zu tun.
Ich hoffe, dass diese Überprüfung hilfreich war, um die Details jeder dieser Lösungen zu überprüfen. Sie sollten jetzt nicht nur wissen, was jede Option einzigartig macht, sondern auch, wo jede Option fehlt. Dies hilft Ihnen, eine fundierte Entscheidung darüber zu treffen, auf welche der beiden Hauptthemen Sie sich konzentrieren möchten.
Ich persönlich hüpfe mit allen ziemlich regelmäßig hin und her, aber in letzter Zeit habe ich mich hauptsächlich mit jsFiddle, Dabblet und Tinkerbin beschäftigt. Welches davon ist dein Favorit und warum?