Du libre, du code, des idées, du mélange d’ArraKISS…

De l’épice pour la pensée

Vous avez peut-être déjà entendu parler de l'idée consistant à remplacer les encarts de publicité sur un site web par un bout de code javascript qui permet au visiteur de générer de la cryptomonaie pour le webmaster. Korben en a déjà parlé, et je dois avouer trouver le concept intéressant, mais pas pour les mêmes raisons que lui.

Tout d'abord, permettre à un site de financer son hébergement ne peut que l'encourager à améliorer le contenu. Jusqu'à présent, cela se fait par des publicités, à l'insu du visiteur, c'est envahissant et énervant.

Coinhive propose donc une alternative intéressante et beaucoup moins envahissante. Ce service propose notamment :

  • Remplacer les captchas par la génération d'un peu de cryptomonnaie. C'est pas mal, mais déjà que les captchas normaux m'énervent, si je dois attendre 30s pour pouvoir poster un commentaire, ça va vite me saouler.
  • Lancer la génération de cryptomonnaie lorsque le visiteur visite la page. Si c'est automatique, je trouve ça carrément irrespectueux, le visiteur n'a jamais demandé qu'on fasse cracher son CPU, il veut juste lire une page web.
  • Chacune de ses solutions réclame qu'on désactive un bloqueur de pub. Ben non justement, si le visiteur en a un, c'est pas pour qu'on vienne lui chier dans les bottes avec un message anti-adblock.
  • Par ailleurs, ces deux idées font travailler le pc du visiteur au maximum de ses capacités par défaut, sans fin pour la seconde. En ce qui me concerne, j'ai vite fait de fermer un onglet qui bouffe toutes mes ressources.

Non satisfait par les solutions proposées par coinhive, mais pourtant séduit par le concept, me voilà parti pour javascripter (si si ça se dit) en lisant la doc donnée. Laisser de la doc, je trouve ça vachement cool!
Voici les idées que je souhaite mettre en place :

  • Limiter la charge processeur et prendre soin des ventilos des visiteurs.
  • Proposer un bouton "Super article", qui va hasher une certaine quantité (un peu comme le captcha) et s'arrêter ensuite. C'est le visiteur qui clique s'il a envie de "récompenser".
  • Autre possibilité, lancer le minage de cryptomonnaie après un certain délai, pour une durée limitée. Cela suppose que si le visiteur reste à lire un article pendant un certain temps, c'est que l'article a de l'intérêt et qu'il ne fait pas autre chose en même temps demandant de la charge processeur.

Je pars du principe que c'est intéressant d'afficher la progression du hashage au visiteur, on prévoit dont un petit bout de html qui contiendra nos mesages :

<div id="coinhive"></div>

On démarre le minage après un certain délai en arrière-plan avec cette fonction :

function start_miner_after(delay, to_compute) 
{
	setTimeout(function(){
		start_miner(to_compute, showmsg=false);
	}, delay*1000);
}

Si on veut ajouter un bouton pour que le visiteur lance le hashage par lui-même, on peut mettre le code html suivant dans sa page en précisant la quantité à hasher:

<div id="coinhive"><button onclick="start_miner(1024)">Start mining</button></div> 

La fonction qui lance le minage est la suivante :

function start_miner(hash, throttle=0.5, showmsg=true)
{
	// 'hash' is the number of hash you want the user to compute. 
	// Must be a multiple of 256

	var miner = new CoinHive.Anonymous(public_key);
	miner.setThrottle(throttle);
	console.log('Start mining using ' + throttle * 100 + '% of CPU');
	miner.start();
	// Listen on events
	miner.on('found', function() { /* Hash found */ })
	//miner.on('accepted', function() { /* Hash accepted by the pool */ })

	// Run util it's computed
	var perc = 0;
	var timer = setInterval(function() {
		var totalHashes = miner.getTotalHashes();
		var acceptedHashes = miner.getAcceptedHashes();

		if (totalHashes >= hash){
			miner.stop();
			if (showmsg) { update_miner_msg(finish_msg); };
			clearInterval(timer);
		}
		else {
			if (showmsg) { 
				progress =  '<progress value="' + totalHashes + '" max="' + hash + '"></progress> ';
				txt = loading_msg + progress
				update_miner_msg(txt);
			}
		}

	}, 1000);
}

Voici le code javascript au complet, à inclure comme d'habitude avec

<script src="/path/to/thubancoinhive.js"></script>

J'ai mis quelques options au tout début pour faciliter son utilisation.
La version que j'utilise est disponible en suivant ce lien : thubancoinhive.js

Voilà, je vais tester ça quelques temps voir ce que ça donne, je serai peut-être déçu, mais qui ne tente rien...

EDIT : voici le code html qui me sert à insérer un petit encadré pour permettre aux visiteurs de miner s'ils ont aimé leur visite :


<div id="coinhivecontainer" style="background:white; padding:15px; border:1px solid #111; position:fixed; bottom:5px; right: 5px; min-width:150px; text-align:center;">
        <a href="javascript:void(0)" onclick="closeCoinhive()" class="coinhiveclose">X</a>
        <div id="coinhive">
                <a href="javascript:void(0)" title="Miner du monero pour récompenser l'auteur" onclick="start_miner(512, throttle=1)"><U+1F449> Cet article m'a intéressé</a>
        </div>
</div>

En cliquant sur la croix, le visiteur peut virer cet encadré s'il est gêné avec ce bout de javascript :


function closeCoinhive() {
    document.getElementById("coinhivecontainer").style.display = "none";
}

EDIT 2 Suite à la remarque de 22decembre, j'ai ajouté un petit test dans le code pour modifier la charge processeur si le visiteur utilise un smartphone :


var cpu_usage = 0.5;
var cpu_usage_mobile = 0.3;
...
...
var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);
        if (isMobile) { var cpu = cpu_usage; }
        else { var cpu = cpu_usage_mobile; }

        start_miner_after(start_delay, to_compute, cpu) ;

EDIT 3
Voici le message envoyé à l'équipe de coinhive, plus qu'à patienter :

Hello,
Interested by the alternative proposed by coinhive to monetize a website, I tried it.
However, I found some aspect quite disturbing with examples in documentation:
- Once a visitor is mining, it never stops until he close the website,
- Throttle is 1 by default, the user might want to leave the website to save its computer ressources
- Smartphones computes as much as PCs.
- How can someone be sure he's computing monero and not something else?

I'm afraid these points lead visitors to leave a website, which is the opposite of what we want.
Maybe you should consider some integration code more respectful of visitors.
You can find on the link below how I start after a delay the mining on my website, don't use all the CPU, set a lower throttle for smartphones and limit the amout of hases that is computed.

Regards.
thuban


link to the code I use : https://yeuxdelibad.net/js/thubancoinhive.js

Je vous présentais il y a peu un bout de code pour automatiquement remplacer certaines chaînes de caractères en smileys. Cependant, on m'a fait remarquer que ces substitutions avaient lieu aussi dans les balises code et pre. Pas chouette :/

J'ai donc repris le code pour corriger ce défaut. Si ça vous intéresse, copiez/collez le code ci-dessous dans vos pages html :


<script>
// regexp and replacement
var strtostr= [
    [/(\s|&nbsp;):\)/g,' 😊'],
    [/(\s|&nbsp;):\(/g,' 😞'],
    [/(\s|&nbsp;):D/g,' 😃'],
    [/(\s|&nbsp;):S/g,' 😖'],
    [/(\s|&nbsp;):s/g,' 😖'],
    [/(\s|&nbsp;):P/g,' 😋'],
    [/(\s|&nbsp;):p/g,' 😋'],
    [/(\s|&nbsp;);\)/g,' 😉'],
    [/(\s|&nbsp;);-\)/g,' 😉'],
    [/(\s|&nbsp;):\//g,' 😕'],
    [/(\s|&nbsp;):\|/g,' 😒'],
    [/(\s|&nbsp;):\'\(/g,' 😢'],
    [/(\s|&nbsp;)oO/g,' 😲'],
    [/(\s|&nbsp;)x\.x/g,' 😵'],
    [/(\s|&nbsp;)O:\)/g,' 😇'],
    [/(\s|&nbsp;)\^\^/g,' 😊']
];

// class div where regexp will be applied
var classes_to_replace = ["com-content", "art-content", "post-content"];

// regexp to find tags (no replacement in <pre> and <code>
var htmlTagRegex =/(<[^>]*>)/g

// loop in classes
classes_to_replace.forEach(function (class_) {
    var tochange = document.getElementsByClassName(class_);
    var codecnt = 0;

    var classcnt;
    for (classcnt = 0; classcnt < tochange.length; classcnt++) {
        div = tochange[classcnt]

        // check if in <code> or <pre>
        var tagArray = div.innerHTML.split(htmlTagRegex);
        var divtxt = "";
        var tagcnt;
        for (tagcnt = 0; tagcnt < tagArray.length; tagcnt++) {
            t = tagArray[tagcnt];
            console.log(t);
            if (t.toLowerCase() == "<pre>" || t == "<code>") {
                codecnt++;
            } else if (t.toLowerCase() == "</pre>" || t == "</code>") {
                codecnt--;
            }
        
            if (codecnt == 0) {
                var i;
                var newtxt = "";
                for (i = 0; i < strtostr.length; i++) {
                    t = t.replace(strtostr[i][0],strtostr[i][1]);
                }
            }
            divtxt += t;
        }
        div.innerHTML = divtxt;
    }
});
</script>

Pour ajouter d'autres smileys, modifiez le tableau strtostr.
Par défaut, le script est prêt pour le moteur de blog blogotext (parce qu'il est super), et ne réalise les substitutions que dans les conteneurs de ces classes : "com-content", "art-content", "post-content", "entry-content".

Voilà voilà, amusez-vous bien ;)

EDIT : j'ai modifié le code car blogotext génère des &nbsp; que les regexp ne reconnaissent pas comme espace :s

Blogotext, l'excellement moteur qui sert à faire tourner ce blog a été repris par BoboTiG il y a peu. On peut d'ailleurs constater que ça avance plutôt bien :

Puisque je suis tout bloqué avec une minerve, forcé à me tenir droit sans bouger, je n'ai d'autre choix que de geeker un peu. Si si, ça se dit! :)

Je me suis donc donné le défi de convertir automatiquement dans un commentaire les smileys. Ainsi, si quelqu'un écrit un ":" suivi de ")", on voit apparaître un magnifique ☺.
La mise en place est très naïve : un petit bout de javascript fait une boucle sur tous les conteneurs de type commentaire, puis remplace toutes les occurences de smileys "texte" par leur emoji équivalent.

Voici le code, à inclure à votre fichier list.html d'un thème :


<script>
var strtostr= [
    [/ :\)/g,' ☺'], 
    [/ :\(/g,' ☹'], 
    [/ :D/g,' 😃'],
    [/ :P/g,' 😋'],
    [/ :p/g,' 😋'],
    [/ ;\)/g,' 😉'],
    [/ ;-\)/g,' 😉'],
    [/ :\//g,' 😕'],
    [/ :\'\(/g,' 😢'],
    [/ oO/g,' 😮'],
    [/ x\.x/g,' 😵'],
    [/ O:\)/g,' 😇'],
    [/ \^\^/g,' 😁']
];

var classes_to_replace = ["com-content"];


classes_to_replace.forEach(function(class_){
    var tochange = document.getElementsByClassName(class_);
    var j;
    for (j = 0; j < tochange.length; j++) {
        var i;
        for (i = 0; i < strtostr.length; i++) {
            var oldtxt = tochange[j].innerHTML;
            var newtxt = oldtxt.replace(strtostr[i][0],strtostr[i][1]);
            tochange[j].innerHTML = newtxt;
        }

    }
});

</script>

C'est très simple à personnaliser, il suffit de rajouter des entrées dans le tableau définit au début.

Le code doit sans doute pouvoir être optimisé, je n'ai jamais appris le javascript 😉 .
Alors certes, le javascript n'est peut-être pas la meilleure méthode, c'est sans doute moins rapide qu'en PHP, mais ça ne surcharge pas la génération des pages, et en plus, si quelqu'un a désactivé le javascript, je suppose qu'il n'a pas grand chose à faire des émojis.

Tiens en passant, il y a une liste des émojis sur github

Voilà voilà, c'était le bout de code inutile mais indispensable de la journée, je vous laisse faire mumuse avec les smileys 😁

C'est les vacances! Alors pour ne pas tout oublier, et pour s'occuper au cours des transports pour trouver/déménager votre nouvel appart à 3h de chez vous suite aux mutations, vous avez chemspeed :

Le but du jeu? Faire le plus grand score.
Pour gagner des points, il faut écrire le nom de l'élément avant qu'il ne soit tombé hors de l'écran. Attention aux accents :)

Le code du jeu est toujours disponible en affichant le code source de la page où en allant directement ici. J'ai utilisé phaser qui décidément me plaît beaucoup :)

Amusez-vous bien :)

@Starsheep : t'as de nouveaux scores à battre ;)

C'est l'ami Péhä qui me l'a suggéré, puis ma curiosité a été piquée par la conception de jeux en html5. Le principal intérêt est de pouvoir y jouer dans un navigateur sans avoir besoin du fuck%#! flash. Ça fonctionne donc partout, tant que le navigateur est récent et fiable : lisez firefox ici.

Comme je ne suis pas développeur, que je suis plutôt habitué au langage python et non au javascript, j'ai cherché un framework. Autrement dit, il me fallait un truc qui fait que ça marche sans trop me prendre la tête. C'est là qu'intervient phaser.

J'ai choisi phaser car :

  • C'est un simple fichier javascript à importer dans sa page web où on veut faire le jeu :
    <script type="text/javascript" src="js/phaser.min.js"></script>
    .
  • Il est sous licence libre (MIT)
  • Il propose un tas de petites fonctions qui permettent de faire un jeu facilement : gestion de la physique, des collisions, des armes...
  • Il est très facile à prendre en main. Pour moi qui ne connais pas le javascript, je me suis vite repéré.
  • Il s'apprend au travers d'exemples, ce qui me convient parfaitement.
  • Le petit bonhomme a une bonne tête :
alt

Avant de me lancer dans la conception de jeux complets et funs que j'ai en tête, je vois avec phaser l'occasion de créer des activités et simulations pédagogiques. C'est ma maîtresse favorite qui m'a mis au défi de faire un petit jeu de géographie pour ses élèves. C'est juste des fleuves et massifs montagneux à placer : https://yeuxdelibad.net/Programmation/Jeux/geotest/ .

Ça ne paie pas de mine, mais ça m'a bien amusé :)

Vous pouvez voir les sources du jeu en affichant le code source de la page : view-source:https://yeuxdelibad.net/Programmation/Jeux/geotest/ .

À l'avenir, je vais tenter de rassembler les petites fonctions qui m'ont permis de faire certaines choses, comme le chargement au départ ou la gestion des scores.
À suivre :)