Comment déclencher n’importe quel événement en JavaScript vanilla

Publié le par
Répondre

Après avoir réussi à automatiser les clicks sur les fortunes de Cookie Clicker (voir ici), par curiosité je me suis intéressé à la première version de ce jeu (voir ici).

Sur cette version, la première chose que j’ai cherché à automatiser est bien évidemment le click sur le cookie.

Après un rapide coup d’oeil au code de la page, j’ai trouvé l’id de notre cookie (dans notre cas “cookie”), et j’ai mis en place un classique setInterval pour déclencher un clic, avec notre grande amie la méthode click().

let legacyCookieClicker = setInterval(() => {
   document.querySelector('#cookie').click();
}, 250);

Mais cela n’avais par l’air d’avoir d’effet.

Continuer la lecture →

Une flip card en CSS

Publié le par
Répondre

Vous avez toujours voulu savoir comment créer un effet de carte retournée (flip card en anglais) ? Cet article est ce qu’il vous faut !

Le résultat final est disponible ici.

Structure HTML

Pour commencer, attaquons nous à la structure HTML d’une carte.

Pour schématiser, une carte se décompose comme ceci : un cadre, qui contient une planche sur les faces de laquelle il y a ce que l’on veut afficher, et au survol de la souris, on fait pivoter cette planche interne.

Cela nous donne la structure HTML suivante :

<div class="card">
  <div class="card_inner">
    <div class="card_face card_back"></div>
    <div class="card_face card_front"><h2>Don't worry</h2><p>Be happy</p></div>
  </div>
</div>

La classe .card, représente le cadre, la classe .card_inner la planche et la classe .card_face les deux faces de cette planche (avec également une classe différente pour chaque face.

Continuer la lecture →

Automatiser le clic sur les fortunes de Cookie Clicker

Publié le par
Répondre

Aujourd’hui, après avoir effectué une ascension sur Cookie Clicker, je me suis dit : “Si je veux débloquer les fortunes (qui apparaissent dans le fil d’actualités), il va falloir encore que je reste attentif devant mon écran…”.

C’est alors que je me suis demandé s’il n’y avait pas moyen d’automatiser cela.

La première étape fut d’analyser le code principal du jeu.

Contrairement à d’autres aspects du jeu (les mini-jeux ou encore les cookies dorés…) le fil d’actualités n’est pas géré par l’intermédiaire de l’objet principal du jeu (Game dans le code du jeu).

Pour arriver à mon but, il faut donc passer par le code HTML du jeu. Un rapide coup d’oeil à ce code me donne l’ID (commentsText1) de la div qui contient la nouvelle affichée.

Avec cet ID je peux maintenant le sélectionner avec document.getElementById().

Continuer la lecture →

Animer les variables CSS

Publié le par
Répondre

La semaine dernière j’ai rapidement mentionné qu’il était maintenant possible d’animer les variables CSS.

L’utilité des variables CSS

Les variables CSS (également appelées « propriétes personnalisées ») permettent de stocker des valeurs spécifiques. Et ces valeurs peuvent être modifiées par des événement JS ou des pseudos classes CSS (comme par exemple :hover).

Elles se déclarent et se modifient comme ceci : --my-property: 123;, et s’utilisent comme cela : var(--my-property).

L’intéret de ces variables vient quand on a besoin de préciser un seul paramètre dans une longue déclaration (comme par exemple une position dans une déclaration de dégradé) ou alors pour indiquer une couleur qui peut être amenée à changer et qui est utilisée dans différentes classes.

Le problème de ces variables, c’est qu’il n’est pas possible de les animer. C’est là qu’intervient la at-rule @property.

Continuer la lecture →

Animer un dégradé en CSS

Publié le par
Répondre

La semaine dernière je vous ai présenté comment créer un texte en dégradé avec uniquement du CSS. Aujourd’hui je vais vous montrer comment animer ce dégradé au survol de la souris.

Le principe

L’élément sur lequel on veut placer un dégradé ne laisse voir qu’une partie de ce dégradé, et on bouge le dégradé au survol de la souris.

Continuer la lecture →

Un texte en dégradé avec CSS3

Publié le par
Répondre

Comme indiqué à la fin de mon gloubi tuto sur le texte en dégradé, il est maintenant possible d’obtenir un résultat similaire uniquement avec CSS3.

Les techniques CSS utilisées

Pour réaliser un texte en dégradé avec CSS3, on utilise deux techniques : les dégradés et le découpage d’arrière-plan (propriété CSS background-clip).

J’ai déjà présenté ces deux techniques chacune dans un article dédié :

Fusion !

Il est maintenant temps de rassembler ces deux techniques.

Continuer la lecture →

Créer un interrupteur en CSS

Publié le par
Répondre

Aujourd’hui, retour dans le monde des CSS.

Ce dont j’ai décidé de parler cette semaine est une manière de créer un interrupteur comme ci-dessous :



Le HTML

Concernant le HTML derrière cet interrupteur, c’est un input de type checkbox qui se cache dessous.

Cet input, caché en CSS, est englobé dans un label, avec un span à ses côtés. C’est le clic sur le label qui permettra de cocher/décocher la checkbox.

Continuer la lecture →

Quelques commandes git que j’utilise (presque) au quotidien

Publié le par
Répondre

Aujourd’hui, j’ai décidé de parler d’un outil que j’utilise au quotidien dans ma vie professionnelle, le système de gestion de version git.

Avec cet outil j’utilise certaines commandes très utiles. Mais je n’avais pas d’idée de comment contextualiser ces commandes pour vous en parler. Cet alors que je me suis souvenu d’un projet grace auquel j’avais pu un peu monter en compétence : gitstery.

Ce dépot est disponible à cette adresse : https://github.com/nivbend/gitstery.

Le fichier README du projet, visible sur la racine du projet présente déjà deux commandes git.

La première, est la commande de base si vous voulez récupérer un projet sur votre machine, git clone.

Cette commande, sous sa forme la plus basique, se présente comme ceci : git clone <url_du_projet>. Par défaut, le contenu sera placé dans un dossier portant comme nom la dernière partie de l’URL dans notre cas gitstery.

git clone https://github.com/nivbend/gitstery

Après s’être déplacé dans ce nouveau dossier, il faut lire le contenu du fichier instructions.txt présent dans ce dossier. Pour cela, on pourrait utiliser la commande Unix de base cat. Mais, comme indiqué dans le README, git dispose de sa propre commande : git cat-file.

Cette commande se décompose comme suit : git cat-file <type_objet> <hash>:chemin/vers/objet.

Dans notre cas, ce que nous voulons, c’est le contenu du fichier instructions.txt, à l’endroit où nous nous trouvons (HEAD).

git cat-file blob HEAD:instructions.txt

Comme indiqué à la fin de ce fichier, je vais par la suite vous présenter des commandes permettant de faire notre enquête sans quitter la branche actuelle (avec la commande git checkout).

Continuer la lecture →

Gloubi script – une horloge illustrée

Publié le par
Répondre

Aujourd’hui, j’ai décidé de m’attaquer à la version gloubi d’un script que j’ai également déjà créé de mon côté : l’horloge illustrée.

La version gloubi est visible ici, tandis que la création de ma propre version, faite avec jQuery, est présentée ici.

Présentation de la version gloubi

Pour commencer, on créé 10 objets de type Image() en leur attribuant à chacun l’attribut src correspondant.

c1=new Image(); c1.src="c1.gif";
c2=new Image(); c2.src="c2.gif";
c3=new Image(); c3.src="c3.gif";
c4=new Image(); c4.src="c4.gif";
c5=new Image(); c5.src="c5.gif";
c6=new Image(); c6.src="c6.gif";
c7=new Image(); c7.src="c7.gif";
c8=new Image(); c8.src="c8.gif";
c9=new Image(); c9.src="c9.gif";
c0=new Image(); c0.src="c0.gif";

Vient ensuite la fonction affiche(), permettant de changer les images, qui prend 3 paramètres en entrée : le nombre d’heures, le nombre de minutes et le nombre de seconde. Pour chacun des trois paramètres on détermine l’image à afficher pour les dizaines et les unités. Chaque image est modifiée en passant par la propriété images de l’objet document.

Continuer la lecture →

Quel est le plus vieux navigateur ?

Publié le par
Répondre

Dernièrement, je me suis posé la question de quel est le plus vieux navigateur web toujours en cours de développement.

J’ai donc fait quelques recherches que je vais essayer de vous synthétiser au mieux ici.

Présentation des candidats

J’ai orienté mes recherches autour des 5 navigateurs les plus utilisés actuellement, en début 2023 (voir Statcounter) :

  • Firefox
  • Opera
  • Edge
  • Safari
  • Chrome

Selon les critères utilisés, l’ordre peut changer et être plus ou moins précis.

Premier classement, l’age de la première version officielle du navigateur

Si on utilise comme critère la date de sortie de la première version du navigateur, le classement est très facile.

Parmis les 5 candidats, le plus ancien est clairement Opera, dont la première version est sortie en 1995.

Des autres navigateurs, le plus ancien est sorti 8 ans plus tard, et il s’agit de Safari, dont la première version est sortie le 23 juin 2003, pour être ensuite inclus par défaut dans Mac OS X 10.3 « Panther », sorti le 24 octobre de la même année.

Vient ensuite Firefox, dont la première version est sortie le 9 novembre 2004.

Puis Chrome est arrivé en septembre 2008. Quant-au petit dernier, Edge, il a été dévoilé au monde en avril 2015.

Continuer la lecture →