Binäreres Wachstum der Schwierigkeiten, pug2html

[TS]

Hello,

generell lerne ich ja gerne dazu, aber nicht immer alles auf einmal.

Die Antworten hier (speziell von @Gunnar) erhöhen aber oft eher den Schwierigkeitsgrad, etwas zu verstehen, als dass sie in passenden Dosen Hinweise geben. Für eine gestellte und vermeintlich geklärte Frage bekommt man mindenstens zwei neue Schwierigkeiten zurück...

In diesem Sinne: wie kann ich ohne Visual Studio pug-Files in HTML umwandeln. Das muss auch gar nicht inline geschehen. Ich suche nach einem separaten Programm oder ggf. einem Plugin für notepad++. Leider habe ich bisher nichts gefunden. Kann jemand weiterhelfen, ohne dabei neue Fragen zu erfinden?

Liebe Grüße
Tom S.

[Rolf b]

Das hier kennst Du aber? Wo ist der VS Bedarf?

Rolf

[TS]

Hello,

Das hier kennst Du aber? Wo ist der VS Bedarf?

Nein. Habe ich zwar gesehen, kann ich aber leider nichts mit anfangen. Ich verstehe nur "Bahnhof".

Liebe Grüße
Tom S.

[TS]

Hello,

Das hier kennst Du aber? Wo ist der VS Bedarf?

Nein. Habe ich zwar gesehen, kann ich aber leider nichts mit anfangen. Ich verstehe nur "Bahnhof".

Und auch nach Stunden der Recherche, des Lesens und des Ausprobierens bin ich nicht weitergekommen. Ich habe kein Node.JS, ich habe auch derzeit keinen Linux-Host, auf dem ich das zum üben installieren könnte.

Ich habe nur eine alte Windows-Kiste, die stabil läuft aber einschläft und einen 1jährigen HP-Laptop mit Win8.1, der aber dauernd abstürzt (vermutlich Speicherfehler). Mein Linux-Lappi brummt wie ein Rasenmäher (Ventilator) und wird deshalb zu schnell heiß. Und weil ich ihn nicht auseinandergenommen bekomme, bleibt das wohl auch noch eine Weile so.

Ich habe im Git-Hub etwas gefunden, was ich mir vielleicht anpassen könnte. Zur Zeit funktioniert es leider nicht, vermutlich da es sich noch um Jade und nicht um Pug handelt.

Es wäre daher besonders nett, wenn Ihr mir andere Möglichkeiten zeigen könntet, wie man Gunnars Ergüsse in Pug (als Beispiel) in HTML konvertieren könnte, ohne sie vollständig neu schreiben zu müssen.

Liebe Grüße
Tom S.

[dedlfix]

Tach!

Es wäre daher besonders nett, wenn Ihr mir andere Möglichkeiten zeigen könntet, wie man Gunnars Ergüsse in Pug (als Beispiel) in HTML konvertieren könnte, ohne sie vollständig neu schreiben zu müssen.

Wenn es nur darum geht ... hat er ja gelegentlich dazugeschrieben, dass man da rechts oben den Pfeil nach unten bedient und "View compiled HTML" wählt.

dedlfix.

[TS]

Hello,

Es wäre daher besonders nett, wenn Ihr mir andere Möglichkeiten zeigen könntet, wie man Gunnars Ergüsse in Pug (als Beispiel) in HTML konvertieren könnte, ohne sie vollständig neu schreiben zu müssen.

Wenn es nur darum geht ... hat er ja gelegentlich dazugeschrieben, dass man da rechts oben den Pfeil nach unten bedient und "View compiled HTML" wählt.

Habe ich jetzt nicht gesehen, das wäre in diesem Fall ja schön einfach. Es ging nicht, weil ich erst das HTML-Fenster etwas vergrößern musste. Vorher hat der Pfeil kein Menu angezeigt beim Klicken... Muss man ja erstmal drauf kommen ;-(

Aber es geht mir auch generell darum, was pug ist, wie man es extern/isoliert konvertieren (compilen?) lassen kann.

Liebe Grüße
Tom S.

[dedlfix]

Tach!

Aber es geht mir auch generell darum, was pug ist, wie man es extern/isoliert konvertieren (compilen?) lassen kann.

Nunja, wenn du ein eigenständiges Template-System mit von HTML stark abweichender Syntax haben möchtest, ist das wohl eine der Möglichkeiten. Obwohl mir das in dem Beispiel eher wie eine View mit eingebautem Model aussieht, um das man in MVC-Begriffen zu sagen.

Wenn du hingegen darauf aus bist, Web-Anwendungen, aka Single Page Applications (SPA), zu schreiben, dann könntest du dir auch alternativ ein fertiges Framework anschauen, beispielsweise Angular.

dedlfix.

[TS]

Hello,

Na gut, für diesen Einzelfall bin ich ja nun zum Ergebnis gekommen. Da hatte ich mich nur zu dumm angestellt. Das weiß man ja aber immer erst hinterher.

Den Rest stelle ich erstmal zurück; bleibt aber auf dem Zettel.

Für den ganzen Extra-JS-Kram und Frameworks brauche ich erstmal wieder einen vernünftigen Arbeitsplatz mit zwei bis vier Bildschirmen. Das muss leider warten.

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@TS

Wenn es nur darum geht ... hat er ja gelegentlich dazugeschrieben, dass man da rechts oben den Pfeil nach unten bedient und "View compiled HTML" wählt.

Habe ich jetzt nicht gesehen, das wäre in diesem Fall ja schön einfach. Es ging nicht, weil ich erst das HTML-Fenster etwas vergrößern musste. Vorher hat der Pfeil kein Menu angezeigt beim Klicken... Muss man ja erstmal drauf kommen ;-(

Generell sollten Beispiele im Web mit der einfachsten Techneik erstellt werden: als Vanilla-JavaScript, nicht jQuery.^[1] Vanilla-CSS, nicht Sass.^[2] HTML, nicht Pug.

Gelegentlich weiche ich davon ab, wenn die zusätzliche Technik Vorteile bringt wie eben Schleifen, über die man iterieren kann und sich damit Arbeit spart. Und bei dem Beispiel, an dem dein Zorn entbrannte, ging es auch nicht so um den HTML-Code, sondern um den JavaScript-Code.

LLAP 🖖

---

1. Es sei den, man möchte explizit zeigen, wie etwas in jQuery gemacht wird. ↩︎

2. Es sei den, man möchte explizit zeigen, wie etwas in Sass gemacht wird. ↩︎

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Gelegentlich weiche ich davon ab …

Und ja, ich würde es begrüßen, wenn es bei CodePen prominenter hervorgehoben wäre, wie man den kompilierten HTML- bzw. CSS-Code angezeigt bekommt.

Oder noch besser, dass man als Pen-Autor einstellen könnte, dass andere gleich den kompilierten HTML- bzw. CSS-Code angezeigt bekommen anstatt des Pug- bzw. Sass-Quelltextes.

LLAP 🖖

[TS]

Hello,

CodePen ist aber nicht das Gelbe vom Ei für unseren Fortschritt mit dem Wiki. Da müssen mMn die fertigen Lösungen dann vollständig rein, am besten immer in eine Single-Page.

Oder wir bauen einen "Forums-Downloader", der alle Beispiele sauber in Einzeldateien und -verzeichnisse zerlegt auf dem lokalen Webspace in einem Zielverzeichnis ablegt.

Wie sollte das Protokoll dafür dann heißen? :-)

Liebe Grüße
Tom S.

[TS]

@Gunnar Bittersmann
Hello Gunnar,

wie der Eventhandler über

event.target.name   
event.target.dataset.author  
event.target.value  

an die Daten herankommt, ist mir zwar klar, aber wie kann ich per JS die gewählten Alternatien für das ganze Formular auslesen, ohne den Event? Das bekomm ich nicht hin.

Wie seht das DOM dafür (innerhalb des Form-Elementes) dann eigentlich aus?

Liebe Grüße
Tom S.

[dedlfix]

Tach!

@Gunnar Bittersmann
Hello Gunnar,

wie der Eventhandler über

event.target.name   
event.target.dataset.author  
event.target.value  

an die Daten herankommt, ist mir zwar klar,

Vielleicht wird es noch klarer, denn du erstmal sowas wie

var radioElement = event.target;

ausführst und dann radioElement.name und so weiter verwendest. event.target ist ja nur eine Referenz auf das DOM-Element. Das ist zwar technisch gesehen nicht notwendig, verdeutlicht aber dem Code-Leser, was da konkret in dem target steckt (oder stecken soll).

aber wie kann ich per JS die gewählten Alternatien für das ganze Formular auslesen, ohne den Event? Das bekomm ich nicht hin.

Wenn du Inhalte anderer Elemente brauchst, kannst du auf diese Zugreifen, wie das unter Javascript üblich ist, also beispielsweise mit getElementById() oder querySelector() oder du hangelst dich über die Parent-Children-Beziehungen am DOM entlang.

Wie seht das DOM dafür (innerhalb des Form-Elementes) dann eigentlich aus?

So wie es der HTML-Autor geschrieben und der Browser interpretiert hat. Zuzüglich dessen, was der Javascript-Autor daran verändert hat.

dedlfix.

[TS]

Hello,

das hatte soweit vermutlich auch schon alles richtig geklappt.
Ich scheitere aber an der Abgrage (Iteration) der Collection.

var selections = formElement.querySelectorAll('input[type="radio"]');
for(var e in selections)
{
   document.querySelector('#divoutput') += '<p>' + e + ': ' + selections[e].name + ' (' + selections[e].dataset.author + ') => ' + selections[e].value +'; ' + selections[e].checked + '<\p>';
}

Inzwischen weiß ich, dass die for ... in-Schleife über die Properties item und length stolpert, je nachdem, in welcher Reihenfolge die sie Collection-Members vorfindet. Was ist überhaupt ìtem?

Ich habe das "repariert", indem ich die Ausgabe in eine Bedingung if (e != 'item' && e != 'length') eingepackt habe, was ja aber kaum DIE Lösung sein kann.

Mache ich das Iterieren klassisch mit for (var i = 0; i < selections.length; i++) durchführe, ist dieser Fehler noch nie aufgetreten. Ist das obligatorisch, dass length und item immer am Ende der Indexaufzählung stehen, also zuerst die Number-Indexe kommen? Die sind ja auch vom Typ String...

Liebe Grüße
Tom S.

[dedlfix]

Tach!

Inzwischen weiß ich, dass die for ... in-Schleife über die Properties item und length stolpert, je nachdem, in welcher Reihenfolge die sie Collection-Members vorfindet.

for..in-Schleifen arbeiten schon immer so, dass sie über die aufzählbaren (enumerable) Eigenschaften eines Objekts iterieren. Das wussten auch bereits ältere SELFHTML-Ausgaben. Das will man nicht, wenn man eigentlich die iterierbaren Elemente eines Arrays oder Objekts haben möchte.

Was ist überhaupt ìtem?

Fragen, die das MDN beantworten kann ...

Ich habe das "repariert", indem ich die Ausgabe in eine Bedingung if (e != 'item' && e != 'length') eingepackt habe, was ja aber kaum DIE Lösung sein kann.

NodeLists (der Rückgabewert von querySelectorAll()) haben auch noch mehr als die beiden genannten Eigenschaften und könnten zudem beliebig erweitert werden. Das Ausklammern ist keine Lösung. Die Lösung weiß aber auch das MDN, wenn man sich die Seite zu NodeList anschaut. for...of-Schleifen lösen das Problem, das man mit for...in hat, weil sie nur das berücksichtigen, was der Iterator als iterierbar zurückgibt. Das Problem ließe sich auch teilweise lösen, indem man mit hasOwnPropery() die geerbten Eigenschaften ausschließt. Moderne Browser machen das aber mit for...of eleganter.

Mache ich das Iterieren klassisch mit for (var i = 0; i < selections.length; i++) durchführe, ist dieser Fehler noch nie aufgetreten.

Ja, weil man damit das Iterieren auf bestimmte Eigenschaften einschränkt.

Ist das obligatorisch, dass length und item immer am Ende der Indexaufzählung stehen, also zuerst die Number-Indexe kommen? Die sind ja auch vom Typ String...

Sicherlich nicht, ist aber auch nicht relevant aufgrund anderer geeigneter Iteriervarianten.

dedlfix.

[TS]

Hello,

danke, wieder einen Schritt weiter.

Liebe Grüße
Tom S.

[TS]

Hello @Gunnar Bittersmann, (muss ich beim @ eigentlich ausschreiben, oder reicht auch "Gunnar"?)

Gelegentlich weiche ich davon ab, wenn die zusätzliche Technik Vorteile bringt wie eben Schleifen, über die man iterieren kann und sich damit Arbeit spart. Und bei dem Beispiel, an dem dein Zorn entbrannte, ging es auch nicht so um den HTML-Code, sondern um den JavaScript-Code.

Das war kein Zorn, sondern eher ein Hinweis für alle, die Antworten geben, und ein wenig meine Verzweiflung, weil ich nun plötzlich nicht mehr nur gegen eine Wand, sondern gegen zwei bis drei lief. Ich versuche nur, anhand meiner eigenen Empfindungen das Verhalten unserer übrigen Forumsbesucher zu verstehen.

Es hat keinen Sinn, den Fragesteller mit zusätzlichen (unerklärten) Fachbegriffen, Methoden, Techniken usw. zu konfrontieren. Der hat ein Problem, das ihn im Moment blind macht für alle anderen Antworten. Das haben wir in dem Thread von Becca, aus dem ja auch meine isolierte Frge übrig blieb, mal wieder deutlich gesehen. Und selbst, nachdem vermeintlich Verständnis geschaffen war, habe ich es leider doch versaubeutelt, indem ich sofort auf die benötigten Techniken verlinkt habe...

Dabei bin ich mir sicher, dass der aufgezeigte Weg schon richtig war.

Wir werden das Antworten auch weiterhin üben müssen, wenn wir einen Vorsprung vor anderen Foren und damit auch eine Existenzberechtigung wiedererlangen wollen. Den hatte dieses Forum einst!

Einen mMn wichtigen Punkt haben wir inzwischen geschafft: wir können Grafiken zum Artikel hochladen. Ein weiterer wird sein müssen, dass wir Beispiele, die zur Zeit extern gezeigt werden, nach Erfolg ganz konsequent ins Forum bzw. Wiki holen müssen. Ich hatte daher das mMn schöne Beispiel von Gunnar als statische HTML-Seite nachbauen wollen. Die ist inzwischen auch fertig (Ich war selbstverständlich auch zu faul, das HTML manuell nachzubauen, was zu dem Folgeproblem führte). Wenn das Thema Event Delegation im Wiki noch ein Beispiel verträgt, sollten wir es dort auch unterbringen.

Es bleiben auch noch ein bis zwei bis drei kleinere Fragen übrig. Und es ist die Erweiterung auf ein XHR-Beispiel mit aktivem Responder (nahezu) fertig vorhanden. Fehlt dann eigentlich nur noch die konsequente Fallback-Lösung. Die bekomme ich dann auch noch hin (bisher ist ja noch nichts kaputt gemacht). Generell sollte man mNm ja immer mit der passiven Lösung (ohne JS) anfangen und dann erweitern.

Preisfrage zum Abend: Gunnar würde das dann wie nennen?
Der Erste der richtig antwortet, hat einen persönlichen Event-Listener gewonnen ;-)

Um das Wiki aus den hier diskutierten Beispielen nach und nach ergänzen zu können, müssen die jeweiligen Fragen allerdings auch immer bis zum Ende geklärt werden :-)

Liebe Grüße
Tom S.

[Matthias Apsel]

Hallo TS,

muss ich beim @ eigentlich ausschreiben, oder reicht auch "Gunnar"?

Du kannst warten bis du eine Auswahl angezeigt bekommst. Das geschieht nach zwei Buchstaben. Falls das nicht passiert, musst du den korrekten Benutzernamen angeben.

Ein weiterer wird sein müssen, dass wir Beispiele, die zur Zeit extern gezeigt werden, nach Erfolg ganz konsequent ins Forum bzw. Wiki holen müssen.

Ein richtiger Schritt dahin ist das konsequente Behalten der Beispiele.

Wenn das Thema Event Delegation im Wiki noch ein Beispiel verträgt, sollten wir es dort auch unterbringen.

Klar, warum nicht.

Preisfrage zum Abend: Gunnar würde das dann wie nennen?

Samstag gibts Mathematik zum langen Wochenende.

Bis demnächst
Matthias

[dedlfix]

Tach!

Generell sollten Beispiele im Web mit der einfachsten Techneik erstellt werden: als Vanilla-JavaScript, nicht jQuery.[^jQuery] Vanilla-CSS, nicht Sass.[^Sass] HTML, nicht Pug.

Ich halte diese Aussage nicht für sinnvoll. Wo ist denn die Grenze zwischen Vanilla und nicht mehr Vanilla? Zählen selbst geschriebene Funktionen, um sich das Leben zu erleichtern nicht mehr zu Vanilla, weil der Code dadurch nicht mehr einfachst ist? Sind Eventhandler etwa einfachstes Javascript? Vielleicht sind ja nach dieser Definition selbst geschriebene Funktionen doch noch einfachstes Javascript, warum sind es aber die von anderen geschriebenen Funktionen nicht mehr, wenn sie zu einem Framework zusammengestellt worden sind? Warum ist es nicht mehr einfachst, wenn ich eine komplexe Tätigkeit hinter einem einfacher zu bedienendem API verstecke?

Gelegentlich weiche ich davon ab, wenn die zusätzliche Technik Vorteile bringt wie eben Schleifen, über die man iterieren kann und sich damit Arbeit spart. Und bei dem Beispiel, an dem dein Zorn entbrannte, ging es auch nicht so um den HTML-Code, sondern um den JavaScript-Code.

Ich weiche sehr gern davon ab, eigenen Code schreiben und unter vielen Geräten, die ich nicht besitze, testen zu müssen, wenn mir ein Framework, das von vielen Augen kontrolliert wird, diese Testarbeit abnimmt und ich mich mehr oder weniger auf meine Geschäftslogik konzentrieren kann, statt mich um die Zipperlein der Browser zu kümmern.

dedlfix.