On October 17, I hosted a workshop at devFest Nantes entitled “The Invasion of Mutant HTML”.
A workshop must by definition involve the participants, I chose to create a mini-game as support. It's a static site available online, open-sourced on GitHub — so you can improve it!
When I say static, I mean static: the repository has a single dependency, server, responsible for providing a basic HTTP server for working locally and server itself has no dependencies. The rest is just HTML, CSS and JavaScript.
It allowed me to get back to basics and considerably gain efficiency; but above all… discover a whole bunch of tips and tricks!
When you start the game, you will start by customizing your character. The sole objective of this step is to discover the visual structure of a level, allowing you to get personally involved in the game. The chosen values will be applied as soon as possible to all the characters in the game, in a sort of mirror representation .
After choosing your character, a training level familiarizes you with the very simple mechanics of the game: a portion of code to complete and submit, executed live, which affects the area gradually invaded by mutants! This code is in most levels the options passed to a mutationObserver, but sometimes also in the callback function.
In case of failure or success, a modal window will inform you. Let’s talk about this modal window!
I talked about it in 2022 at Paris Web then at devFest Nantes in my topic “Discover “good HTML” and save JS and CSS”, the
In the workshop, I use it in several places:
Most are opened programmatically, in response to an event. Nothing could be simpler: just retrieve a reference to the
document.querySelector('dialog').showModal();
One exception however, to avoid adding an unnecessary event listener: the game rules window is invoked using an HTML onclick event handler:
<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);
}
Not having mastered the game viewing mode, I used a bit of modern CSS for the width of the modal window so that it had a fluid width, but with minimum and maximum values.
dialog {
max-inline-size: clamp(50vw, 100%, 67.5rem);
}
The max-inline-size property is the logical property corresponding to max-width in the case of French. And the clamp() function is a little gem, which I already abuse copiously in chaarts (in English) to obtain a pseudo-Boolean in CSS based on a value, as explained on slide 27 of my conference “Draw me a graphic (in CSS)” given at devFest Nantes 2023, TNT #24 and DevQuest 2024.
I mentioned the ability to close the modal with the Esc key, but the
This is why the dialog value is added to the form submission method. It does not correspond to an HTTP method like get or post, but to an HTML context, and allows you to directly close the parent modal window. It’s very simple to use:
<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>
And there you have it: it's a submit type button which will submit the form with the identifier close, which itself will close the dialog window. It’s beautiful, isn’t it? And this attribute dates from (at least) 2006, in the W3C Web Forms specifications (in English) whose first drafts date back to 2004..
For this workshop, I needed evil invaders and decorations. Clearly no time to do illustrations by hand, nor the means to buy visuals. A search on the internet taught me that the type of visuals I was looking for are called top down tilesets, these small settings and characters generally in 8-bit with a crushed perspective.
By looking at 8-bit visuals, I ended up making the connection with an old habit in my conference materials: decorative emojis at the end of titles. Damn, but it sure is! Emojis!
Emojis are great. These are Unicode points, purely textual, and extremely numerous now with loads of new features in each version of Unicode. There are even variations, composed in sequence!
The best example of a Unicode sequence in my opinion are the characters: the neutral Nobody? can become a man? or a woman? by adding the unicode point of the masculine gender ♂️ or feminine ♀️, separated by a zero-width joiner, ).
To get a firefighter ??, we simply add a firetruck ?? to a person? ! Isn’t that great, honestly? And we can obviously add gender and skin tone.
Thus the first level allows you to personalize the gender and complexion of the hero.
The form is made up of only two groups of radio buttons, each with a value corresponding to the Unicode point in question.
document.querySelector('dialog').showModal();
And that's it: Firefox users won't load anything, and others will download a typography to display the same thing as Firefox. Choose your browser better next time!
As is often the case when I prepare a topic, I encountered some browser limitations. As it happens, WebKit, the engine of Safari and Epiphany, has problems with the tint variants of the Twemoji-COLR. I was able to open a ticket on their Bugzilla (in English).
In the game mechanics, portions of code are displayed (to make “hole code”) and code is entered from and