Am 17. Oktober veranstaltete ich beim devFest Nantes einen Workshop mit dem Titel „The Invasion of Mutant HTML“.
Ein Workshop muss per Definition die Teilnehmer einbeziehen, ich habe mich entschieden, als Unterstützung ein Minispiel zu erstellen. Es handelt sich um eine statische Website, die online verfügbar ist und auf GitHub als Open-Source-Quelle zur Verfügung steht – Sie können sie also verbessern!
Wenn ich statisch sage, meine ich statisch: Das Repository hat eine einzige Abhängigkeit, den Server, der für die Bereitstellung eines grundlegenden HTTP-Servers für die lokale Arbeit verantwortlich ist, und der Server selbst hat keine Abhängigkeiten. Der Rest ist nur HTML, CSS und JavaScript.
Es ermöglichte mir, zu den Grundlagen zurückzukehren und deutlich an Effizienz zu gewinnen; aber vor allem… entdecken Sie jede Menge Tipps und Tricks!
Wenn Sie das Spiel starten, beginnen Sie mit der Anpassung Ihres Charakters. Das einzige Ziel dieses Schritts besteht darin, die visuelle Struktur eines Levels zu entdecken, die es Ihnen ermöglicht, persönlich in das Spiel einzusteigen. Die gewählten Werte werden sozusagen so schnell wie möglich auf alle Charaktere im Spiel angewendet Spiegeldarstellung .
Nachdem Sie Ihren Charakter ausgewählt haben, werden Sie in einem Trainingslevel mit der sehr einfachen Mechanik des Spiels vertraut gemacht: ein Teil des Codes, den Sie vervollständigen und einreichen müssen, der live ausgeführt wird und sich auf das Gebiet auswirkt, in das nach und nach Mutanten eindringen! Dieser Code ist in den meisten Ebenen die an einen mutationObserver übergebenen Optionen, manchmal aber auch in der Callback-Funktion.
Im Falle eines Misserfolgs oder Erfolgs informiert Sie ein modales Fenster. Lassen Sie uns über dieses modale Fenster sprechen!
Ich habe 2022 auf der Paris Web und dann auf dem devFest Nantes in meinem Thema „Entdecken Sie „gutes HTML“ und speichern Sie JS und CSS“ darüber gesprochen, dem
In der Werkstatt verwende ich es an mehreren Stellen:
Die meisten werden programmgesteuert als Reaktion auf ein Ereignis geöffnet. Nichts könnte einfacher sein: Rufen Sie einfach einen Verweis auf den
document.querySelector('dialog').showModal();
Eine Ausnahme jedoch, um das Hinzufügen eines unnötigen Ereignis-Listeners zu vermeiden: Das Spielregelfenster wird mithilfe eines HTML-Onclick-Ereignishandlers aufgerufen:
<button type="button" onclick="rules.showModal()">Règles du jeu</button>
<dialog>
<h5>
Aparté : la projection des identifiants HTML en objets globaux
</h5>
<p>Dans cet exemple, j’invoque l’ouverture de la fenêtre modale avec rules.showModal(), sans avoir défini la variable rules. Comment est-ce possible ? En résumé, tout élément porteur d’un attribut id devient mécaniquement une propriété globale de l’objet window, et devient donc accessible directement par son nom. C’est spécifié sous le joli nom de Named Access on Window Object (en anglais).</p>
<p>C’est drôlement pratique, non ? Figurez-vous que c’est aussi un vecteur d’attaque méconnu faisant partie d’un groupe sobrement intitulé DOM clobbering (en anglais). Je vous encourage à parcourir les recommandations de l’OWASP pour mitiger le DOM clobbering (en anglais).</p>
<h4>
Accessibilité
</h4>
<p>La méthode showModal() permet d’ouvrir une fenêtre modale, pas une simple boîte de dialogue — en respectant les exigences en matière d’accessibilité : la focus est mécaniquement piégé dedans, la fermeture est possible avec la touche <kbd>Échap</kbd>, etc.</p>
<h3>
L’arrière-plan
</h3>
<p>Une fois la fenêtre modale ouverte, on peut s’appliquer à la styler. Là où moult bibliothèques de composants imposent une <div> (voire plusieurs) pour servir d’arrière-plan à la fenêtre, la version native est livrée avec un pseudo-élément ::backdrop qui s’étend naturellement sur tout le viewport et est promue, avec la fenêtre modale, par-dessus le reste de la page dans ce qui est spécifié sous le nom de top layer.
<p>Vous n’avez plus qu’à lui appliquer une couleur, une opacité ou que sais-je encore. Dans le jeu, j’ai utilisé une propriété au nom évocateur de backdrop-filter pour appliquer un effet de flou grisé sur l’arrière-plan.<br>
</p>
<pre class="brush:php;toolbar:false">dialog::backdrop {
backdrop-filter: grayscale(50%) blur(.25rem);
}
Da ich den Spielanzeigemodus nicht beherrschte, habe ich ein wenig modernes CSS für die Breite des modalen Fensters verwendet, damit es eine fließende Breite hatte, aber mit Minimal- und Maximalwerten.
dialog {
max-inline-size: clamp(50vw, 100%, 67.5rem);
}
Die Eigenschaft „max-inline-size“ ist die logische Eigenschaft, die im Fall von Französisch der Eigenschaft „max-width“ entspricht. Und die Funktion „clamp()“ ist ein kleines Juwel, das ich in Diagrammen (auf Englisch) bereits ausgiebig missbrauche, um einen Pseudo-Booleschen Wert in CSS basierend auf einem Wert zu erhalten, wie auf Folie 27 meiner Konferenz „Zeichne mir eine Grafik (auf Englisch)“ erklärt CSS)“ verliehen beim devFest Nantes 2023, TNT #24 und DevQuest 2024.
Ich habe die Möglichkeit erwähnt, das Modal mit der Esc-Taste zu schließen, aber der
Aus diesem Grund wird der Dialogwert zur Formularübermittlungsmethode hinzugefügt. Es entspricht keiner HTTP-Methode wie get oder post, sondern einem HTML-Kontext und ermöglicht Ihnen das direkte Schließen des übergeordneten modalen Fensters. Es ist sehr einfach zu verwenden:
<form> <p>Et, pour revenir à du HTML à l’ancienne : saviez-vous qu’un bouton à l’autre bout du DOM peut soumettre un formulaire ? Il suffit de lui indiquer le formulaire à soumettre :<br> </p> <pre class="brush:php;toolbar:false"><button form="fermer">Fermer la fenêtre</button>
Und da haben Sie es: Es handelt sich um eine Schaltfläche zum Senden des Formulars, die das Formular mit der Kennung „Close“ sendet, wodurch wiederum das Dialogfenster geschlossen wird. Es ist wunderschön, nicht wahr? Und dieses Attribut stammt aus (mindestens) 2006, in den W3C Web Forms-Spezifikationen (auf Englisch), deren erste Entwürfe aus dem Jahr 2004 stammen.
Für diesen Workshop brauchte ich böse Eindringlinge und Dekorationen. Es fehlt eindeutig die Zeit, Illustrationen von Hand anzufertigen, und es fehlt auch die Möglichkeit, Bildmaterial zu kaufen. Bei einer Suche im Internet habe ich herausgefunden, dass die Art von Visuals, nach der ich gesucht habe, Top-Down-Kachelsets genannt werden, diese kleinen Einstellungen und Charaktere im Allgemeinen in 8-Bit mit einer gestauchten Perspektive.
Beim Betrachten von 8-Bit-Visuals stellte ich schließlich eine Verbindung zu einer alten Gewohnheit in meinen Konferenzmaterialien her: dekorative Emojis am Ende von Titeln. Verdammt, aber das ist es auf jeden Fall! Emojis!
Emojis sind großartig. Dabei handelt es sich um rein textuelle Unicode-Punkte, die jetzt sehr zahlreich sind und in jeder Unicode-Version viele neue Funktionen enthalten. Es gibt sogar Variationen, die nacheinander komponiert werden!
Das beste Beispiel für eine Unicode-Sequenz sind meiner Meinung nach die Zeichen: das neutrale Niemand? kann man ein Mann werden? oder eine Frau? durch Hinzufügen des Unicode-Punkts des männlichen Geschlechts ♂️ oder des weiblichen Geschlechts ♀️, getrennt durch einen Joiner mit der Breite Null, ).
Um einen Feuerwehrmann ?? zu bekommen, fügen wir einfach ein Feuerwehrauto ?? hinzu. zu einer Person? ! Ist das nicht großartig, ehrlich? Und natürlich können wir Geschlecht und Hautton hinzufügen.
So können Sie im ersten Level das Geschlecht und die Hautfarbe des Helden personalisieren.
Das Formular besteht nur aus zwei Gruppen von Optionsfeldern, von denen jede einen Wert hat, der dem betreffenden Unicode-Punkt entspricht.
document.querySelector('dialog').showModal();
Und das ist es: Firefox-Benutzer laden nichts und andere laden eine Typografie herunter, um dasselbe wie Firefox anzuzeigen. Wählen Sie beim nächsten Mal besser Ihren Browser!
Wie so oft, wenn ich ein Thema vorbereite, bin ich auf einige Browser-Einschränkungen gestoßen. Tatsächlich hat WebKit, die Engine von Safari und Epiphany, Probleme mit den Tönungsvarianten von Twemoji-COLR. Ich konnte ein Ticket auf ihrem Bugzilla eröffnen (auf Englisch).
In der Spielmechanik werden Teile des Codes angezeigt (um einen „Lochcode“ zu erstellen) und der Code wird über