Showcases of modern Browser technologies


Sorting cards is a popular pastime. As far as I am concerened, re-programming it for the web is just the same. But finding a solution with good performance prooved to be more difficult than it first seemed.

I had designed the card faces as SVG . Thus using the vector grafics format also for displaying the game seemed like a evident solution. But the cards need to be moved by drag & drop – and that is where all the browsers for so many years failed to render a fluent movement. Neither Chrome, nor Internet Explorer, and certainly not Firefox. So in the end it had to be PNG dot grafics. Only in 2020, seven years after initial publication, am I able to use the vector grafics. For optimal loading performance they are pre-loaded to the local Web Storage .

This is also where the last game played and the language of the user interface are retained. This avoids cookies, although permission for them must be given all the same, as browser use this same setting to determine the permission for the storage feature. (Which actually makes sense from a security standpoint.)

The game page uses several CSS3 techniques like transforms  and flexbox . (including a fallback for IE 9) Presentation is realised with the D3 framework , the game engine is written in .

The rules of the individual games are loaded asynchronously as JSON files. For their validation I have developed a JSON-Schema .

All sources are published at Github  and can be downloaded and reused under the terms of a copyleft licence.