Mysql2::Error: All parts of a PRIMARY KEY must be NOT NULL

Si à la suite d’un rake db:migrate ou rake db:setup, vous obtenez le message suivant :

Mysql2::Error: All parts of a PRIMARY KEY must be NOT NULL

Ce problème se rencontre notamment lorsque l’on souhaite utiliser MySql 5.7 avec une version de Rails < v4.1.0.beta1.

Créer un fichier nommé mysql2_adapter.rb dans le dossier config/initializers et y ajouter le code suivant :

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

Problème innerHeight et height en JS sur mobile

Petite astuce qui peut éviter de perdre du temps à débugger.

Si lors de l’utilisation de la méthode .height() ou .innerHeight() vous rencontrez des difficultés pour récupérer la bonne valeur de la hauteur d’un élément (principalement sur mobile), Il faut vérifier dans le content de la méta viewport que la valeur height=device-height est bien présente.

Normalement, cela devrait résoudre pas mal de problèmes.

Installer Polymer

Polymer est une bibliothèque (framework) permettant de créer plus facilement des webcomponents.

Pour pouvoir utiliser Polymer, il faut tout d’abord vous assurer:

  • D’avoir la dernière version de Node.js, disponible sur le site. Prendre la version LTS.
  • D’avoir installé git

Installer Bower

Bower est un gestionnaire de dépendances (jquery, modernizr, twitter bootstrap…).

Il s’installe via npm de la façon suivante (en root si nécessaire)

Installer Polymer CLI

Polymer CLI  est une console spécifique à Polymer qui permettra de lancer des lignes de commandes pour faciliter la gestion des projets basés sur Polymer.

Il s’installe lui aussi via npm de la façon suivante (en root si nécessaire)

Si tout s’est bien passé, vous devriez voir la liste des dépendances s’afficher.

Installation polymer CLI

Vous pouvez faire un test en créant un nouveau projet. Tapez

Choisissez element (par exemple) et faite entrée.

Polymer

Saisissez les informations demandées comme le nom du projet (qui doit contenir obligatoirement un -) et la description.

Et voilà Polymer va créer votre projet (vide, bien sûr :)). C’est à vous de jouer maintenant.

Polymer

Les assistants personnels virtuels, une alternative aux formulaires traditionnels ?

Actuellement, la collecte de données (sur un site web/application) afin que celles-ci puissent être traitées par d’autres personnes ou même par un logiciel, passe principalement par l’utilisation de formulaires plutôt standards.

Bien que notre métier de développeur/webdesigner a pour but de rendre la saisie par l’internaute, la plus agréable possible, notamment en lui offrant des formulaires au design toujours plus travaillés et jolis, un formulaire, malheureusement, ça reste froid.

De plus, nous devons très souvent imposer des contraintes dans la saisie de certaines informations (cohérence de données et qualités de celle-ci oblige), ce qui rend l’expérience encore plus frustrante pour l’internaute.

Ce manque d’interaction social entre l’utilisateur et le formulaire, n’invite pas l’internaute à répondre avec le maximum de précision, le poussant parfois même à omettre certaines informations précieuses et utiles pour terminer le plus rapidement la saisie du formulaire.

Alors, l’utilisation des assistants personnels virtuels pour récolter des informations pourrait-elle être une solution ?

Possible, d’aprés cet article The Future of Web Forms.

D’après lui, utiliser un assistant virtuel permettrait d’ajouter cet interraction social qui manque cruellement dans nos formulaires traditionnels.

L’expérience utilisateur serait alors plus humanisée et naturelle, ce qui permettrait à l’internaute de donner des réponses plus précises et plus détaillées.

En tout cas, certains se sont déjà penchés sur la question et ont déjà commencé à utiliser ces assistants pour offrir à leurs internautes une meilleure expérience utilisateur.

Sourcehttps://blog.prototypr.io/the-future-of-web-forms-4578485e1461#.84rri3t3a

Découverte de Verlet-JS

Verlet-Js est une librairie javascript qui permet de créer des formes plus ou moins complexes dans un monde 2D. Pour cela, il faut utiliser un système de particules/contraintes assez complexe à gérer.

Ces formes peuvent être utilisées pour la réalisation de jeux vidéos mais aussi dans des simulations à but scientifique.

Pour télécharger et utiliser la librairie Verlet-JS, un dépôt gitHub est disponible à cette adresse https://github.com/subprotocol/verlet-js

Pour comprendre plus en détail le fonctionnement de cette librairie et comment réaliser des formes plus ou moins complexes. Il existe plusieurs sites ou tutos, comme notamment :

 

Pseudo-classes hover et active : bien les utiliser en responsive

En responsive, on utilise souvent les pseudo-classes pour styliser des éléments comme les liens par exemple.

Sur la version desktop, on souhaite souvent utiliser l’animation au survol avec la pseudo-classe :hover. Par contre, sur les versions tablettes et mobiles, le survol (:hover) n’a pas de logique et on préfère souvent donner de l’effet lorsque nous appuyons dessus en utilisant la pseudo-classe :active par exemple.

Pour que ces pseudo-classes fonctionnent correctement et pour éviter les effets de bord, il faut penser à bien séparer les 2 dans le css à l’aide des médias queries. Dans l’exemple ci dessous, Le :hover c’est pour le desktop et le :active pour mobiles et tablettes.

Attention, je n’ai pas dit que « le :active, c’est uniquement pour les tablettes et mobiles ». Il peut très bien s’utiliser sur desktop.

Codepen - hover et active

Si je n’avais pas séparé, qu’est-ce qui ce serait passé ?

Codepen - hover et active

Sur desktop, pas trop de problèmes. Le hover remplirait bien son job et on aurait aussi un effet lors du clic avec le :active (ce qui n’est pas le plus génant).

Maintenant sur mobiles et tablettes, c’est une autre histoire. Le :hover est tout de même reconnu lorsque l’on appuie dessus (pas pour tout les mobiles et tablettes, mais pour beaucoup). Le problème, c’est qu’il n’a pas le comportement que l’on attend.

Si j’appuie sur mon lien, le :active fonctionne correctement, et au tout début mon lien devient bien rouge. Par contre, dès que je relâche, le :hover s’est lui aussi déclenché et le bouton va devenir bleu en permanence. Ce n’était pas du tout l’effet recherché.

bouton_rouge

bouton_bleu

 

Tout ça pour dire de bien ranger les choses au bon endroit, en séparant bien à l’aide de médias queries pour obtenir le résultat attendu et ne pas avoir de mauvaises surprises.

Le code source utilisé pour l’exemple est disponible sur le lien http://codepen.io/SoisNet/pen/VKEJJm .

Remplissage automatique d’un formulaire d’adresse avec Google Place autocomplete

Dans le but d’améliorer l’expérience utilisateur des internautes, l’aide au remplissage des formulaires de façon automatique peut être intéressante.

Pour cela Google Place autocomplete permet de remplir automatiquement les champs d’adresses (rue, ville, code postal, pays) à partir d’une proposition de Google.

google_place_02 google_place_03

 

 

 

 

Pour commencer dans votre page html, faire appel à l’API Javascript Places Autocomplete

N’oubliez pas de remplacer votre_cle_api par votre api key que vous pouvez obtenir ici.

Maintenant, dans votre fichier HTML, il faut créer un formulaire comme celui-ci

L’id de chacun des champs a son importance pour que toutes les informations de l’api soient correctement replacées dans les champs appropriés.

Maintenant, un peu de javascript pour faire la liaison entre l’api et le formulaire.

Et voilà, une façon simple de proposer aux internautes une aide à la saisie pour la partie adresse.

Source : https://www.lewagon.com/blog/tuto-google-place-autocomplete