HTML Editor mit guter Ergonomie gesucht (JS, CSS - Vorschau)

[cumulonimbus8]

Hallo!

Ich suche ein Tool das meinen Anforderungen entgegenkommt:
• Über Tabs mehrere Dateien offen halten, ggf. farbige Hervorhebung das Dateityps
• Vorschau mit den Fähigkeiten aktueller Browser
• Taste\Schaltfläche die die letzte HTML ›aufruft‹ (großes Fenster) während ich an CSS und/oder JS herumbastele…
• …und die selbe Taste schaltet wieder zum Editor zurück (schnell, direkt, ergonomisch)
• Großes Editorfeld mit o.g. Wechsel mit großem Bild statt Minifensterchen nebeneinander

z.B. kommt der PsPad dem nahe, aber die Vorschau mit einer uralten IE-Engine ist völlig unbrauchbar. Andere Vorschläge bauen auf eine Gesamtoberfläche mit unterteilten Fenstern in denen ich nicht genug Code sehen und fassen kann. Rufe ich per PsPad Chrome auf komme ich nur mit Mühe (unergonomisch) zum Code zurück, zudem muss ich erst die HTML vorholen, dann zurück zur CSS…

Welches Tool ist also praxisgerecht fürs Arbeiten? Den Effekt kennt vermutlich jeder aus seinem Umfeld; ich liebe z.B. dieses Office-Ribbon innigst…

CN8

 

[0x8100]

evtl. atom mit html-preview?

 

[kling1]

kannst atom oder visual studio code nutzen.. sind zur zeit die brauchbarsten open source editoren..
würde statt die vorschau in dem editor zu zeigen.. den browser dazu nutzen.. einfach gulp und browsersync einrichten.. den editor auf eine seite und den browser auf die andere seite..

 

[cumulonimbus8]

An atom erinnere ich mich irgendwie… Und er ist als für mich unbrauchbar durchgefallen. Die Preview laut Bild im web ist genau das was nicht nicht will: ein Teilfenster. Die Vorschau soll ein großes Fenster sein, das sich zum Bearbeiten nicht schließt [man muss dann und wann abgucken beim Eintippen], das aber auf Knopfdruck reagiert [und optimal vom Prog aus abschießbar ist wenn JS mal einen Unfall hat].

visual studio code - mir deucht, dasselbe: nicht brauchbar für mich.

Ich suchte vor längerer Zeit mal nach Syntax-Highlighting und -Vervollständigung, »was kann dieser Befehl, wie genau heißt es«. Und da waren schon beide mit dabei wenn Erinnerung und bei Bilder im Web übereinstimmen.
Die Progs scheinen viel Tolles zu können und drängen mir das auf (vgl. Office Ribbonleiste) aber das was der Praktiker täglich zigmal braucht ist schlicht nicht geschmeidig erreichbar (bzw. selbst so zu konfigurieren).

Wenn es denn Geld kostet (kleines Geld…) gebe ich das sogar aus. Einfach eine Weiterentwicklung vom PsPad mit aktueller Vorschau und ohne Wechselzwang von CSS/JS zu HTML um vorzuschauen. Allein das wäre schon ein Segen.

CN8

 

[r15ch13]

Schau dir mal http://brackets.io/ an.
Mit Strg+E kannst du direkt am CSS des jeweiligen HTML-Tags spielen und mit der Live-Preview wirds direkt im Chrome angezeigt.
Chrome und Editor auf jeweils einen Monitor packen und los gehts.

https://www.youtube.com/watch?v=rvo3Mv1Z4qU

 

[cumulonimbus8]

Chrome und Editor auf jeweils einen Monitor packen

Fällt klar wegen Bodennebels aus da diese Option nicht zur Verfügung steht.

CN8

 

[r15ch13]

Links und rechts andocken? Alt+Tab?

 

[cumulonimbus8]

Taugt nicht da es einfach zu unhandhabbar ist.
Ich weiß wo ich mich in der Benutzung, bei der Arbeit, quäle und wo nicht. Und dieses Quälen will ich loswerden.

Aus Raumgründen u.a.m. geht leider kein 2. Bildschirm (hätten tue ich schon gerne einen haben). Selbst Chrome auf Schirm 2 hieße: CSS speichern, rübersausen, F5, zurück. Haben will ich: Taste drücken (F10 in PsPad), Taste für zurück - ohne dass ich die CSS speichere, ohne dass ich zur HTML muss die ich sehen will. Vorschau = letzte benutzte [oder soeben akti4te] HTML, mit diesen Einstellungen im aktiven CSS\JS um das Resultat zu sehen. Nicht live, brav auf Anforderung.
Ergonomisch halt, die Dinge die man dauernd tut vereinfachen. Dass MS mit seinem Explorer und dem ›neuen‹ Office für Dummis aber nicht für Praktiker macht ist übel genug.

CN8

 

[kling1]

mit browsersync musst du deine browser nicht selbst aktualiesieren.. dein pspad ist eine anwendung aus der letzen eiszeit.. get over it

wenn du geld ausgeben möchtest.. dann leg dir webstorm zu https://www.jetbrains.com/webstorm/ hat auch ein liveedit.. ist aber kein bloßer editor sondern eine ganze ide mit enormen funktiounsumfang..

 

[d0zer]

Visual Studio Code

 

[cumulonimbus8]

@d0zer

visual studio code - mir deucht, dasselbe: nicht brauchbar für mich.

@kling1
«browsersync» soll bitte was sein und tun? Mir graut vor Heinzelmännchen die klüger sein wollen als ich.
(Ein Auto-Sync während ich tippe, das herumzappelt oder so, ist etwas das ich absolut nicht verknusen kann. Die Forderung nach dem Knopfdruck hart schon ihren Grund.)

PsPad ist nicht das Neueste, ist mir klar. Aber er ist beileibe nicht die einzige (Sorte) Software deren »Nachfolger« auf Bunt und Glamour setzen statt auf Usability. Wir kultivieren einige ältere Pflänzchen

Eine IDE wäre in der Tat nicht das was ich will. Keine komplexe Entwicklung sondern eher Troublshooting oder kleine Operationen. Ein Sägewerk nützt mir nix, aber die Säge die ich brauche sollte halt scharf sein.

»Es gibt für alles eine App«, aber 'n ordentlicher Editor soll nicht zu finden sein?

CN8

 

[r15ch13]

Brackets zeigt in der Livepreview jede Aenderung an ohne zu speichern oder manuell neuladen zu muessen.
Beispiel Video: https://www.youtube.com/watch?v=jGoErIDq_4Y

Edit: Also Liveedit ist wegen geflacker auch nicht gewuenscht? Dann weiss ich nicht weiter.
Ordentliche Editoren haben wir bereits genannt, aber dein Anwendungsfall ist etwas zu speziell fuerchte ich

 

[cumulonimbus8]

Mit Geflacker meine ich ein automatisches Ändern «im» Bild wenn ich eine Eingabe mache (sagen wir eine Größe/Höhe/Breite verändere oder eine Farbe).
Und solche »halben« Fenster sind für meine Anforderungen auch nicht zu gebrauchen da das HTML-Resultat eine gewisse minimale Breite (und auch Höhe) haben muss damit ich sehe ob das alles klappt; sinngemäß das normal in maximierten Browsern sichtbare Feld. Der Tastendruck an sich tut nicht weh.
Auch beim Editieren hätte ich gerne viel Platz. Selbst VBA und dann sehen was ein Makro in Excel treibt ist mir schon zu viel Fenstergefriemel. Irgendwie nicht praxisgerecht gestrickt…

CN8

 

[thecain]

Editor offen, Browser offen (Beides Vollbild), Browsersync, Fensterwechsel mit Alt-Tab. Wenns für dich dann noch praktischer ist, kannst du Alt-Tab ja auf F9 binden

 

[kling1]

oder virtuelle desktops benutzen.. browser und editor im vollbild und halt hin und her wechseln...
mit browsersync

 

[cumulonimbus8]

Nööööö.
Alt-Tab ist mit schon zu unzuverlässig (ja, eigentlich schaltet es zuerst zur letzten Anwendung) - und selbst unter 10 hat mir das BS das Handling virtueller Desktops abgewöhnt.
(Ich, Sturköpfchen, will mit einer Taste aus dem Tool raus zu Vorschau und zurück. Mehr ist unergonomisch.)

Ich habe eben nach ‹brosersync htlm› gegoogelt (damit die Adresszeile sucht) und bin bei browsersync.io gelandet. Ist das richtig? Der Link dort, browsersync.io/docs/options, erschlägt einen…

CN8

 

[Rossie]

Aus Raumgründen u.a.m. geht leider kein 2. Bildschirm (hätten tue ich schon gerne einen haben).

Man kann Monitore auch hochkant betreiben (ich nutze aktuell drei nebeneinander). Wenn es Platzprobleme gibt, kann ev. ein flexibler Monitorarm helfen.

Ohne ausreichend Displayfläche wird beim Arbeiten zwangsläufig die Produktivität leiden.

 

[cumulonimbus8]

Da gebe ich dir völlig recht.
Wenn aber der Platz knäpplich ist (in alle drei Richtungen) ist und bleibt man gekniffen. Und muss es mal auf dem Laptop sein geht in der Richtung praktisch gar nichts.

Nichtstedstoweniger - es löst mein Problem nicht. Ich müsste nach wie vor jedes File speichern, mit der Maus rüber (Tastatur ist zu »windig«, auch mit Dingen wie AutoIt), da soll XMouse noch als Verienfachung gelten, F5, retour mit der Maus… - und all da sollte mit 2 Tastendrücken (Kugelschreiberfunktion) abzuwickeln sein.
Nein, ich will kein Browseraktualisierungstool.

CN8