Mettre en place Google Tag Manager avec Tarte au citron

Comme vous le savez, Google Analytics dépose un cookie sur le navigateur de vos internautes pour recueillir leurs données de navigation.
Pour être en conformité avec la loi, il est obligatoire d’informer les internautes et de recueillir leur consentement avant l’insertion de ces cookies.

Pour ceux qui ne connaissent pas Tarte au citron, il s’agit d’un petit script JS qui demande l’accord à l’utilisateur avant de déposer des cookies.

Pour l’installer, vous pouvez vous rendre ici.

Une fois tarte au citron installé, voici comment mettre en place Google Tag Manager.

Insérer le code ci-dessous, en bas de votre page en remplaçant GTM-XXXX par votre identifiant Google Tag Manager.

Rien de plus à faire ici, tout le reste se passera maintenant dans Google Tag Manager lorsque vous souhaiterez mettre en place des tags, comme Google Analytics.

Scrolltop qui ne fonctionne pas sur Chrome

Lorsque l’on souhaite appliquer une animation scrolltop et que celle-ci ne fonctionne pas sur Chrome, il faut vérifier sur quel objet est appliquée cette animation.

Si c’est $(‘html’), c’est bien là la source du problème car

ne fonctionne pas sur Chrome. Il faut alors remplacer par ce code qui fonctionne sur firefox, chrome et Safari

Transformez votre WebApp en DesktopApp avec Chrome

True Fact :

Il vous est sans doute déjà arrivé de fermer toutes les fenêtres de navigateur pour vous aperçevoir que vous aviez eu la main un peu lourde, l’un des onglet contenant votre Trello, Asana ou Nextcloud… Si c’est votre cas, voici une solution.

Historique :

Les développeurs ayant un peu de vécu se souviennent sans doute que dans les années 2010-2015, les gars de Google avait placé une fonctionnalité par défaut dans Chrome qui permettait de faire tourner un site dans un navigateur dépouillé de tout. Ceci rendant la WebApp « Desktop ». il y a quelques années quelqu’un chez Google a décidé de cacher cette fonctionnalité dans les options du navigateur (Depuis la version 44.0.2403.89 précisément !).

Comme je suis sympa voilà comment rétablir les choses.

Configuration :

Dans chrome, saisir dans barre d’url :

Un coup de raccourci pour effectuer une recherche rapide :

Recherchez et sélectionnez :

Recherchez et sélectionnez

Nickel. Vous avez maintenant la fonctionnalité de rétablie. Jouons avec 🙂

Utilisation:

  1. Ouvrez un nouvel onglet, et allez sur le site que vous souhaitez transformer en app.
  2. Cliquez sur le menu d’option (le burger menu ou les 3 petits points) en haut à droite du navigateur.
  3. Passez sur le menu Plus d’outils.
  4. Cliquez sur le sous-menu Ajouter au dossier ‘Applications’.
  5. Dans la popup qui s’ouvre, donnez le nom de votre application et cocher la case Ouvrir dans une fenêtre

Si vous êtes sous Mac, vous pouvez alors fermer les fenêtres de Finder qui se sont ouvertes et rechercher votre application avec Spotlight ou Alfred

Et Voilà !

Crontab -l / -e / -r ? Cronjobs

Pour infos :

  • crontab -l : liste les cron
  • crontab -e : édition des cron
  • crontab -r : supprime la table de cron

Comme je n’ai pas volé ma réputation de « jeune fougueux », j’ai tapé trop vite « crontab -e » afin de glisser gentiment sur « crontab -r »… Ce qui fait que j’ai vidé la table des crons 🙂

Pour remédier à ça, il suffit de créer un fichier qu’on chargera dans le crontab et qui nous évitera ce genre de petites erreurs. Pour créer ce fichier, rien de plus simple :

Dirige la sortie de la commande « crontab – l » dans le fichier « cronjobs », créé automatiquement si il n’existe pas.

Ensuite il suffit de mettre à jour le fichier « cronjobs » à notre guise puis de le recharger dans le crontab pour mettre à jour le crontab, en faisant

Voilà.

Rails 5 et les tests de mailer

Les tests se passent dans le dossier test/mailers.

Créer un nouveau fichier avec le format suivant : nom_du_mailer_test.rb (ex : notification_test.rb)

Squelette du fichier :

/!\ Vérifier dans le fichier de config/test.rb, que la ligne suivante soit bien présente :

  1. On crée le mail en appelant la méthode du mailer :
  2. On envoie le mail et on teste qu’il est bien parti :
  3. On teste l’expéditeur, le sujet, le destinataire …. :

Pour plus d’informations sur les tests de mailers, et notamment l’utilisation avec des fixtures, aller lire l’article suivant : http://guides.rubyonrails.org/testing.html#testing-your-mailers.

Fixtures into fixtures

Lors de tests, on peut être amenés à jouer avec les associations has_many, belongs_to & co.

Si vous travaillez avec des associations, vous pouvez simplement définir une référence entre deux fixtures différents. Voici un exemple avec une association belongs_to / has_many :

# Dans fixtures/categories.yml
a-propos:
  nom: About
# Dans fixtures/articles.yml
one:
  title: Coucou monde !
  contenu: Hello world !
  categorie: a-propos

La clé « one » trouvé dans fixtures / articles.yml a une clé-valeur categorie => « a-propos ». Ceci indique à Rails de charger la catégorie « a-propos » dans « categorie » de l’article concerné.

 

Sources : http://api.rubyonrails.org/v5.1.1/classes/ActiveRecord/FixtureSet.html

Rails streaming de videos

Ayant voulu mettre une vidéo en utilisant le streaming de rails je me suis heurté à un problème sur Internet Explorer 11

Ci-dessus la méthode employé pour récupérer les vidéos (format mp4 et webm) qui marche sous firefox et chrome.

cependant sur Internet explorer 11 et safari une erreur survient.

Concernant Internet explorer, si au chargement de la page dans l’onglet reseau la vidéo possède le mime type suivant Application/octet-stream c’est qu’il faut passer un attribut type dans le send file.

Concernant Safari je n’ai trouvé aucune solution pour le moment.

Rails 5 : Comment récupérer les erreurs de validate d’un model enfant dans le model parent

Le cas : Un model Utilisateur peut avoir 0+ model Enfant (définit par un has_many). Enfant a un validate_presence_of sur le prénom. On veut savoir dans le modèle parent Utilisateur quand il y a une erreur de validation dans le modèle enfant Enfant.

Pour ce faire, il faut rajouter un hook au validate du modèle parent :

En clair, on ajoute les errors.full_messages des enfants dans le errors[:enfants] d’un utilisateur

Ensuite, pour les récupérer en front par exemple, il suffit de :

 

Gestion de la cohérence des migrations Rails 5 en utilisant des branches Git

Nous nous sommes posés la question théorique suivante : que se passe t-il si une branche master, représentant le site de production, continue d’évoluer en parallèle d’une branche de développement, représentant un site de démonstration de fonctionnalités ?

Est-ce que le framework Rails serait capable de retrouver la cohérence entre des migrations en se basant sur leurs timestamp de génération, sachant que tous les fichiers du dossier db/ sont correctement rassemblés lors des merges, mais que le schema.rb perd l’information des champs ajoutés en base au fur et à mesure ?

Nous avons tenté l’expérience, voici notre retour :

1. Pour mettre la branche dev sur la branche master, on commence par merger master dans dev pour que les conflits aient lieu en dev.

Lors d’un conflit de schema.rb, conserver toujours la migration la plus ancienne :

Après conflit, il doit rester ceci :

2. On applique ce nouveau schema.rb sur la branche dev avec l’habituel rake db:migrate et on observe la réécriture du schema.rb :

3. On va sur la branche master et on merge dev dans master. Normalement, on est content.

Délai de répétition d’une vidéo

Si un jour l’envie vous prend de vouloir lancer une vidéo en lecture automatique et que vous voulez que celle-ci ce relance automatiquement après un délai de quelques secondes, voici comment faire :

il suffit d’écrire la balise vidéo habituelle avec les options que vous souhaitez :

puis d’y inclure le JS suivant :

Petite explication du js :

On récupère avec l’id notre balise vidéo via un get(0).

Puis on écoute l’événement ended du gestionnaire d’événement, dans lequel on aura au préalable configuré un setTimeout avant de relancer la vidéo avec la fonction .play()

Dans notre cas la vidéo se relance 5 secondes après s’être arrêter.

Astuce : si l’attribut loop est présent dans la balise vidéo l’événement ended n’arrive jamais.