Matthias Apsel: selfhtml-wiki: JavaScript und CSS

problematische Seite

Hallo alle,

Vielen Dank an @Matthias Scharwies für diesen umfangreichen Artikel, den ich zum Anlass nehmen kann, den mehrfach gewünschten Wiki-Diskussionsseiten-Disclaimer zu testen. Mir sind zwei Sachen aufgefallen:

  1. Es sollte vielleicht besser console.log statt window.alert verwendet werden
  2. Es sollten auf keinen Fall Fehlermeldungen mit window.alert ausgegeben werden sondern die Fehlermeldungen sollten in einem p-Element erscheinen, wie das auch hier im Forum ist.
  • Das passt eigentlich perfekt zu dem angegebenen ToDo (mehrere Elemente ändern)
  • könnte in einen eigenen Artikel zu Formularvalidierung mit JS
    • vieles nimmt HTML schon ab
      • manchmal versagt der Mechanismus, dennoch Absenden ermöglichen
    • serverseitige Validierung ist trotzdem unabdingbar
    • alle Fehler anzeigen
    • bietet auch die Möglichkeit, ein einfaches Beispiel zu arrays zu machen, Fehlercodes, Fehlernummern
    • manchmal versagt auch dieser Mechanismus, weil die Nutzer partout nicht so ticken wollen, wie der Programmierer, dennoch Absenden ermöglichen

Dank auch an @Christian Kruse für die Unterstützung beim „Disclaimer“, speziell beim Zusammenbauen der Links.

Bis demnächst
Matthias

--
Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
  1. Servus!

    1. Es sollte vielleicht besser console.log statt window.alert verwendet werden
    2. Es sollten auf keinen Fall Fehlermeldungen mit window.alert ausgegeben werden sondern die Fehlermeldungen sollten in einem p-Element erscheinen, wie das auch hier im Forum ist.
    • Das passt eigentlich perfekt zu dem angegebenen ToDo (mehrere Elemente ändern)

    Ok, kann man ja ändern, da sowieso noch Live-Beispiele erstellt werden müssen.

    console.log klingt elegant, praktischer wäre aber p.

    • könnte in einen eigenen Artikel zu Formularvalidierung mit JS
      • vieles nimmt HTML schon ab
        • manchmal versagt der Mechanismus, dennoch Absenden ermöglichen
      • serverseitige Validierung ist trotzdem unabdingbar
      • alle Fehler anzeigen
      • bietet auch die Möglichkeit, ein einfaches Beispiel zu arrays zu machen, Fehlercodes, Fehlernummern
      • manchmal versagt auch dieser Mechanismus, weil die Nutzer partout nicht so ticken wollen, wie der Programmierer, dennoch Absenden ermöglichen

    Dieser Artikel: JavaScript/Anwendung und Praxis/Formulareingaben überprüfen ist wie geschaffen für eine Aktualisierung, bei der man diese Vorschläge gleich mit reinnehmen könnte.

    Ich versuche die letzten selfhtml-Aktuell-Artikel zu portieren und habe schon was Passendes zur Datensatzauswahl bei Tabellen gefunden.

    Dank auch an @Christian Kruse für die Unterstützung beim „Disclaimer“, speziell beim Zusammenbauen der Links.

    dito

    Herzliche Grüße

    Matthias Scharwies

    1. Aloha ;)

      console.log klingt elegant, praktischer wäre aber p.

      console.log ist für genau das da und sinnvoll einzusetzen, was es schon selbst aussagt: Zum Loggen (technischer) Informationen, Zielgruppe: der Programmierer der Seite. Fehlermeldungen mit Relevanz für Besucher einer Seite haben mMn da nichts verloren, insofern sind p und console.log keine gleichwertigen Alternativen für ein und die selbe Message.

      Auf Beispielseiten sind übrigens auch gerade technische Informationen für die "Besucher der Seite relevant".

      Zu den Nachteilen von p gegenüber window.alert in Beispielen (resultierend in einem Trade-Off) habe ich ja schon einiges geschrieben.

      Grüße,

      RIDER

      --
      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
    2. Servus!

      1. Es sollte vielleicht besser console.log statt window.alert verwendet werden
      2. Es sollten auf keinen Fall Fehlermeldungen mit window.alert ausgegeben werden sondern die Fehlermeldungen sollten in einem p-Element erscheinen, wie das auch hier im Forum ist.
      • Das passt eigentlich perfekt zu dem angegebenen ToDo (mehrere Elemente ändern) Ok, kann man ja ändern, da sowieso noch Live-Beispiele erstellt werden müssen.

      console.log klingt elegant, praktischer wäre aber p.

      Ich glaube wie Orlok weiterhin, dass ein p.fehlermeldung zusammen mit input.fehlermeldung hier besser wäre, kann man ja im Live-Beispiel so realisieren.

      Dieser Artikel: JavaScript/Anwendung und Praxis/Formulareingaben überprüfen ist wie geschaffen für eine Aktualisierung, bei der man diese Vorschläge gleich mit reinnehmen könnte.

      Hier existiert sogar schon ein neuer Thread!

      Besser als jedes ToDo, dass anscheinend nicht so oft gelesen wird.

      Herzliche Grüße

      Matthias Scharwies

      1. Hallo Matthias Scharwies,

        Ich glaube wie Orlok weiterhin, dass ein p.fehlermeldung zusammen mit input.fehlermeldung hier besser wäre, kann man ja im Live-Beispiel so realisieren.

        Der Konsens ist wohl:

        • Fehlermeldungen für den Entwickler an die Console ausgeben
        • Fehlermeldungen für den Nutzer in das DOM einbauen
        • Testausgaben mit window.alert nur in kurzen Wikibeispielen verwenden um nicht vom eigentlichen Thema abzulenken

        Hier existiert sogar schon ein neuer Thread!

        Besser als jedes ToDo, dass anscheinend nicht so oft gelesen wird.

        Na, ich bin gespannt.

        Bis demnächst
        Matthias

        --
        Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
        1. Aloha ;)

          Der Konsens ist wohl:

          • Fehlermeldungen für den Entwickler an die Console ausgeben
          • Fehlermeldungen für den Nutzer in das DOM einbauen
          • Testausgaben mit window.alert nur in kurzen Wikibeispielen verwenden um nicht vom eigentlichen Thema abzulenken

          Genau, gute Zusammenfassung.

          Hier existiert sogar schon ein neuer Thread!

          Besser als jedes ToDo, dass anscheinend nicht so oft gelesen wird.

          Na, ich bin gespannt.

          Ich finds auch produktiver so. Ist zwar ungewohnt, so viele Meta-Threads zu sehen, aber so wird Aufmerksamkeit für das Wiki und die Baustellen dort generiert. Es ist doch viel einfacher, gelegentlich im Forum über was zu stolpern, was ohne viel Aufwand zu tun ist. Ich bin also bisher schon überzeugt. Zumindest hab ich heute schon einen inneren Drang verspürt, mich im Wiki zu beteiligen, den ich sonst nie so zu Wort kommen lasse - und das einzige was mich davon abgehalten hat, mir gleich ein <i> an den Aufgaben zu sichern war, dass ich dir ja auch schon per PN versprochen hatte, einige Änderungen vorzunehmen. Ich mach das wie ein schlechter Scheduler: First Come, First Served ;)

          Grüße,

          RIDER

          --
          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
  2. Aloha ;)

    1. Es sollte vielleicht besser console.log statt window.alert verwendet werden
    2. Es sollten auf keinen Fall Fehlermeldungen mit window.alert ausgegeben werden sondern die Fehlermeldungen sollten in einem p-Element erscheinen, wie das auch hier im Forum ist.

    Ich kann fast vollumfänglich zustimmen. Es kann zwar Momente geben, in denen die Aufmerksamkeit des Nutzers tatsächlich gefangen werden soll. Um sicherzustellen, dass der User die Meldung tatsächlich zur Kenntnis nimmt, zum Beispiel. Die Ursprungsbedeutung des Worts alert eben. Die sind aber selten und in ihrer sinnvollen Verwendung in der Minderheit. Von daher ja, Fehlermeldungen in die Seite direkt einbinden - zumindest grundsätzlicher.

    Was console.log angeht ist meine Meinung gespaltener. Technische Informationen, z.B. Debug-Informationen, sollten auf jeden Fall über console.log gehen. Soweit so gut. Wenn wir jetzt aber über die (ansehen-)Beispiele im wiki reden, so ist window.alert oftmals deutlicher und bewahrt mich als jemanden, der in dem Fall an der Information genau interessiert ist, vor den weiteren Klicks, die es benötigt, die Konsole zu öffnen. Bei den Beispielen kommt dazu, dass ein Einbinden von Meldungen in p-Elementen den Quellcode aufbläht; man muss sich da dann jeweils gut überlegen, wie es mit dem Tradeoff zwischen best practice und intuitiver Verständlichkeit des Beispiels aussieht. So ist es in einem Beispiel unter Umständen einfacher verständlich (und dadurch angebrachter), wenn window.alert verwendet wird, weil der User intuitiv versteht was (semantisch) dort passiert - was beim Einfügen einer Meldung in ein p-Element nicht unbedingt der Fall ist.

    Will sagen: Ich stimme dir zu, es sollte jetzt aber nicht grundsätzlich jedes window.alert durch p-Elemente oder console.log ersetzt werden (weil Übersichtlichkeit des Beispiels bzw. Zugänglichkeit der Information u.U. leiden), sondern eben mit Maß und Gefühl - zumindest mMn.

    Ein ähnliches Dilemma gibts auch bei der Verwendung von .addEventListener in kleinen Beispielen, auch wenn da die Faktenlage natürlich viel deutlicher zur Verwendung der best practice drängt als bei window.alert.

    Ich hoffe ich habe die Ursprungsfrage richtig verstanden und gerade nicht völlig an dir vorbeigeredet?

    Grüße,

    RIDER

    --
    Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
    1. Hallo Camping_RIDER,

      Will sagen: Ich stimme dir zu, es sollte jetzt aber nicht grundsätzlich jedes window.alert durch p-Elemente oder console.log ersetzt werden (weil Übersichtlichkeit des Beispiels bzw. Zugänglichkeit der Information u.U. leiden), sondern eben mit Maß und Gefühl - zumindest mMn.

      Ich hoffe ich habe die Ursprungsfrage richtig verstanden und gerade nicht völlig an dir vorbeigeredet?

      Jein, aber da es eine Diskussionsseite zu einem Wikiartikel ist, vielleicht doch ;-)

      Es geht mir ausschließlich um

      // Vorhandensein einer Klasse prüfen:
      if (element.classList.contains('beispielklasse')) {
          window.alert('Klasse gefunden.');
      } else {
          window.alert('Klasse nicht gefunden.');
      }
      // Ausschnitt aus dem Artikel
      

      Technische Informationen, z.B. Debug-Informationen, sollten auf jeden Fall über console.log gehen.

      Das trifft in diesem Fall wohl zu.

      Bei den ausführbaren Beispielen sollte man in beiden Fällen beim alert bleiben, wenn man jedoch Projekte vorstellt, sollten console.log und p-Elemente statt alert Verwendung finden.

      Hätte ich das in die Diskussionsseite des Artikels geschrieben, wäre wohl klarer gewesen, dass sich die Bemerkungen ausschließlich auf den Artikel beziehen. Deshalb meine Bedenken, Diskussionen über Wikiartikel in das Forum auszulagern. Obwohl ähnliche Gedanken schon vor langer Zeit geäußert wurden[1].


      Unsere Seite selfhtml.org müsste auch mal wieder textlich überarbeitet werden, weil „Derzeit wird die in sich geschlossene Dokumentation in ein offenes Wiki überführt.“ nicht mehr stimmt. Sehr gut hat mir gefallen:

      • Unser Ziel: Wir schreiben eine deutschsprachige Dokumentation zu HTML und verwandten Webtechnologien, die sowohl Anfänger gemäß dem aktuellen Stand der Technik an die Erstellung von Webseiten heranführt als auch Profis mit verlässlichen und detaillierten Referenzinformationen versorgt.
      • Unsere Idee: Dass Sie, vielleicht erst als Leser, dann als Mitautor oder als Helfer sich an diese Dokumentation beteiligen.
      • Unser Motto: Die Energie des Verstehens

      Quelle: Wiki-Startseite Februar 2010[1:1]

      Das ist mindestens ausbaufähig.

      Bis demnächst
      Matthias

      --
      Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)

      1. Falls jemand jetzt beim Umherschnorcheln in den Versionsgeschichten über nicht anklickbare Links stolpert, der Fehler ist erkannt und wird gebannt. ↩︎ ↩︎

      1. Aloha ;)

        Unsere Seite selfhtml.org müsste auch mal wieder textlich überarbeitet werden [...]

        Ich nehm dir dieses <i> mal ab, wenns dir Recht ist. Zugriff habe ich ja auch.

        Kann ich gleich mal ein bissl üben.

        Grüße,

        RIDER

        P.S.: Ich habe bei meiner Antwort durchaus die Wiki-Seite mit einbezogen, auch wenns sich vielleicht nicht so angehört hat ;)

        --
        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
        1. Hallo Camping_RIDER,

          Unsere Seite selfhtml.org müsste auch mal wieder textlich überarbeitet werden [...]

          Ich nehm dir dieses <i> mal ab, wenns dir Recht ist. Zugriff habe ich ja auch.

          Klar. Bevor es online geht, würd ich aber gern mal rüberschauen ;-)

          Bis demnächst
          Matthias

          --
          Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
          1. Aloha ;)

            Klar. Bevor es online geht, würd ich aber gern mal rüberschauen ;-)

            Sir-yes-sir, ich branche und werde mich hüten den current-Tag zu setzen bevors kein Okay gibt ;-)

            Grüße,

            RIDER

            --
            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
            1. Hallo Camping_RIDER,

              *g*

              Bis demnächst
              Matthias

              --
              Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
    2. Hallo Camping_RIDER

      Ich denke, die Art der Meldungsausgabe wird in erster Linie dadurch bestimmt, für wen die Meldung gedacht ist, für den Benutzer oder für den Entwickler.

      Ist letzteres der Fall, sollte prinzipiell die console API verwendet werden, wobei ich allerdings zu bedenken geben mag, dass die Methode log nur eine unter vielen ist und im Zweifel nicht unbedingt die Methode der Wahl, man denke etwa an info, warn, error oder auch an assertions.

      Die Frage, welche Methode hier zu wählen ist, hängt von den Umständen im Einzelfall ab und kann nicht pauschal beantwortet werden.

      Soll die Meldung hingegen an den Benutzer addressiert sein, ist die Lage schon schwieriger. Zwar existiert mit dem Element dialog ein semantisch passendes HTML-Element, aber die Unterstützung ist leider momentan noch nicht so, dass dieses ohne Polyfill bedenkenlos verwendet werden kann.

      Da sich die Artikel im Wiki grundsätzlich an (angehende) Entwickler richten, tendiere ich dazu im Zweifel der console API den Vorzug zu gewähren, zumindest insofern das Beispiel nicht tatsächlich die Meldungsausgabe an Benutzer beinhaltet, wie es etwa auf der verlinkten Seite und dem Beispiel mit der Formularüberprüfung der Fall zu sein scheint.

      Wenn dem so ist, halte ich die Ausgabe mit window.alert ebenso für vertretbar wie die Verwendung eines p-Elementes, wobei vielleicht in dem Fall, dass window.alert verwendet wird noch ein kurzer Hinweis auf eine HTML-Lösung mittels p bzw. dialog hinzugefügt werden sollte.

      Gruß,

      Orlok

  3. Lieber Matthias,

    1. Es sollte vielleicht besser console.log statt window.alert verwendet werden

    aus meiner Sicht ist window.alert grundsätzlich zu bekämpfen.

    Ein Aufruf von alert legt den Browser lahm. Sämtlicher JavaScript-Code wartet - und das ist völlig gegen die Natur von JavaScript, welches ja Event-basiert ist. Also führt die Verwendung von alert jeden Anfänger in die Irre, da es suggeriert, dass Anwendereingaben vom Programm abgewartet werden, ehe dieses in seinem linearen Verlauf überhaupt weiter voranschreitet. Und wir wissen ja, dass "man" so nicht arbeitet! Warum Einsteigern also erst falsch vormachen?

    Mein Credo: Anfängern ist alert als giftig und strengstens zu vermeiden abzuempfehlen.

    1. Es sollten auf keinen Fall Fehlermeldungen mit window.alert ausgegeben werden sondern die Fehlermeldungen sollten in einem p-Element erscheinen, wie das auch hier im Forum ist.

    Nein. Entwickler haben aus sehr guten Gründen die Console-API entwickelt. Auch ich habe sie sehr zu schätzen gelernt, insbesondere console.dir(obj) ist (kenne es jetzt nur im Firebug) einfach unersetzbar! Wer keinen Firebug in seinem FF nutzt, kann trotzdem über die Entwickler-Tools selbige Konsole nutzen. In Chrome sollte das ebenso möglich sein. MS-Browser sind mir hier egal, sollen sich andere mit deren Console-API herumschlagen.

    Liebe Grüße,

    Felix Riesterer.

    1. Hallo Felix Riesterer,

      1. Es sollten auf keinen Fall Fehlermeldungen mit window.alert ausgegeben werden sondern die Fehlermeldungen sollten in einem p-Element erscheinen, wie das auch hier im Forum ist.

      Nein. Entwickler haben aus sehr guten Gründen die Console-API entwickelt.

      Gemeint sind hier Fehlermeldungen für den normalen Anwender. Der weiß oft nicht, dass es eine Konsole überhaupt gibt.

      Bis demnächst
      Matthias

      --
      Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)