The tips behind the 'Mutant HTML Invasion”

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!

Game mechanics

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!

The particularities of

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

is extremely interesting and should eventually supplant all modal window implementations in the various component libraries.

In the workshop, I use it in several places:

1. to display the game rules in the home screen;
2. to interrupt a level, when the number of mutants exceeds a hundred;
3. to notify of a failure when submitting code that doesn't work;
4. to inform of success, otherwise — and allow progression to the next level.

Open window

Most are opened programmatically, in response to an event. Nothing could be simpler: just retrieve a reference to the

using querySelector() or a reference to an identifier via named properties access, and invoking the showModal() method (on MDN).

document.querySelector('dialog').showModal();

Without external JavaScript

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 </p>
<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);
}

Dimensions

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.

Close window

I mentioned the ability to close the modal with the Esc key, but the

draws other superpowers from being native, including its association with a

element. This is perfectly natural, since a modal window generally allows you to validate or cancel an action associated with an entry.

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:

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 :

<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..

Emojis

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 characters

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.

Personalization

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!

WebKit

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).

Syntax highlighting without JS

In the game mechanics, portions of code are displayed (to make “hole code”) and code is entered from and .

And for reading and writing code, syntax highlighting is really practical and enjoyable! But loading a script such as PrismJS (in English) or highlight.js (in English) always seemed excessive to me for the added value. The block of code ends up butchered in the DOM, where with more or less readable classes slice each portion of text according to its syntactic role. It’s downright indigestible.

But just as I was preparing this workshop, Heikki Lotvonen published a mind-boggling article: Font with Built-In Syntax Highlighting (in English). In my opinion, this is a small revolution: typography taking advantage of OpenType features and in particular the COLR table. No more , make way for readable and clean code!

If you are interested in OpenType implementation details, I encourage you to read the article. For my part, I focused on customizing the palette, made possible in CSS with @font-palette-values ​​(on MDN, in English) and the override-colors property (on MDN, in English).

Here's what it looks like for the game, in which I take advantage of the use of CSS custom properties for color management:

document.querySelector('dialog').showModal();

The result is not bad, right?

And this is pure incremental improvement: if your browser doesn't support the COLR table, the @font-palette-values ​​rule or the override-colors property, you'll just have plain text with the default monospace.

The Space Invaders

The last point that I had a lot of fun with was the alien level. The alien monster emoji? looks very, very, very similar to the ships from Space Invaders. For an invasion game, that’s good.

So I wanted to assume the reference: black background, animation of the invaders scrolling down, and... a score counter.

The counters

For those who have been doing CSS for a long time, you may have already heard of CSS counters. Our score will simply correspond to the number of aliens present.

However, if our counter starts at 1 and goes up to 100 — and knowing that the original game had a five-digit counter — it won't be elegant or a nice quote. Fortunately, CSS allows us to customize the counter style with @counter-style.

To obtain a five-digit counter, displaying 0s before the counter value, here is the declaration used:

document.querySelector('dialog').showModal();

WebKit (again)

Here too, WebKit is limited: CSS counters are not incremented when adding elements to the DOM. It was Karl Dubost who opened this ticket on Bugzilla (in English).

The colors

Another highlight to quote Space Invaders visually is the bright colors. The emoji used comes with a color that we cannot overload, so we will have to alter it. This technique is not new, but extremely useful: the accumulation of CSS filters to achieve the right color.

It's a complicated exercise, and I thank Barrett Sonntag for his filter generator to convert black to a hexadecimal code (on CodePen, in English). The only constraint is to start with black which is easily solved by first applying grayscale(100%) brightness(0%).

<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 </p>
<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);
}

It's wordy, but it works!

Web Components

And to think that I've only talked about HTML and CSS, for the moment... I won't go into that much detail, but on the JavaScript side, I had (a little too much) fun with Web Components. In summary:

• is the component that displays a mutant, and manages its mutation: a change of attribute, attribute value, content, descent, etc. All at irregular intervals, and in a disorderly manner.
• extends form functionality to standardize responses and send them to the . For a wink, the event which allows the responses to be broadcast is entitled voightkampff.
• is the most critical component: it triggers the invasion, monitors the voightkampff event, executes the submitted code, and gives the verdict (by opening the appropriate modal window).

In all of this, I played a lot with mutationObservers, intervals and timers, emojis, and random value generation.

Conclusion

If all this stuff makes you curious, I invite you to visit the game repository on GitHub and do what you want with it!

And if you start playing the game, I invite you to consult the slides attached to the game. As you progress, you will see that each mutant has its own slide. Don’t move forward too quickly, because the next slide gives the answer…

Turn up your inspector!

---

This article is part of the “Advent of Tech 2024 Onepoint”, a series of tech articles published by Onepoint to lead up to Christmas.
See all Advent of Tech 2024 articles.