Déterminer la ligne de flottaison

Lorsque l’on développe un site internet, il est important de réfléchir en amont à l’agencement des informations et encore plus à l’emplacement des informations principales et importantes pour l’internaute.

Sur les différents terminaux, il existe une limite virtuelle entre ce que l’internaute voit à l’écran dès le chargement de la page de ce qu’il ne voit pas si il n’utilise pas la barre de défilement, c’est ce qui est couramment appelé la ligne de flottaison.

image_ecran_flotaison_2

Cette limite de flottaison varie forcément en fonction du terminal utilisé, de la définition de son écran, de l’utilisation ou non de la barre de favoris. Il est donc impossible de la déterminer avec certitude.

Du coup, pour la déterminer au mieux, il faut regarder dans les statistiques quelle est la résolution la plus utilisée.

Dans l’exemple que je vais vous donner, je me suis basé sur une résolution qui domine ces dernières années et qui continue de progresser il s’agit de la résolution 1366×768 .

Sur ces 768px, il faut retirer la partie haute du navigateur (environ 90px) et la barre des tâches du bas (environ 40px). Ce qu’il fait qu’il reste  768-90-40 = 638px pour la zone au dessus de cette ligne.

La recherche de cette ligne peut être utile notamment dans le développement d’un e-commerce mais pour le reste des sites, des études tendent à montrer que la partie située sous la ligne est de plus en plus regardée et parfois plus longtemps que la zone située au dessus de la ligne.

A chacun de faire son choix.

Un peu d’interactivité avec la pseudo-classe :target

Menu, onglet, modal, pourquoi ne pas amener un peu d’interactivité sur un site sans forcément passer par du JS ?

Il existe en CSS une pseudo-classe très intéressante :target.

Si on regarde la définition du W3C de cette pseudo-classe, il s’agît d’un élément qui est la cible d’un lien (comme les ancres par exemple).

Prenons un petit exemple, pour montrer l’intérêt de ce :target.

Vous pouvez retrouver le code sur Codepen, c’est par ici.

Imaginons un bouton, représenté par une div qui portera l’id  bouton_menu, et que sera entouré d’un lien pointant sur l’ancre #menu dont le but sera de faire afficher le menu.

Puis un autre bloc, qui sera ce fameux menu et qui portera l’id menu

Le but va être d’afficher le bloc menu (qui par défaut est caché) en cliquant sur notre lien Afficher le menu.

Pour cela, dans la feuille de style, il suffit d’ajouter l’id ici #menu suivi de la pseudo-classe :target et d’ajouter entre accolade, le code qui va permettre de venir afficher le menu (en utilisant des transitions, si vous voulez faire du joli).

Pseudo classe :target

Faîtes un petit test en cliquant sur Afficher le menu. Génial, non?

Et tout cela en CSS.

Pour l’exemple, j’ai ajouté aussi un petit bouton Fermer pour que cela soit plus pratique.

Comme vous le voyez, cette pseudo-classe peut se révéler extrêmement pratique pour limiter l’utilisation du javascript tout en apportant une touche de dynamisme.

Concernant la compatibilité des navigateurs

La pseudo-classe :target est actuellement supportée par la plupart des navigateurs sauf IE8 et inférieur

Si vous souhaitez connaître exactement tous les navigateurs supportés, vous pouvez consulter cette page.

:target compatibilité

I18n – Ajouter une variable dans un fichier yml avec ruby on rails

Si vous gérez des sites multilingues, vous devez sûrement connaître la gem I18n et les fameux fichiers .yml que l’on place dans le dossier config/locales.

Ces fichiers, permettent de traduire plus facilement des parties de texte d’un site en plusieurs langues.

Dans ces fichiers, il est parfois nécessaire d’ajouter des variables comme dans l’exemple suivant.

J’ai besoin de traduire en anglais et allemand la phrase

« Bonjour Antoine, bienvenue sur le site »

Antoine étant une variable prenom, changeant en fonction de l’utilisateur connecté.

Dans le dossier config/locales, il y’a donc 2 fichiers en.yml et de.yml dont voici le contenu.

Dans en.yml

Dans de.yml

Alors comment remplacer Antoine par n’importe quel prénom (variable).

Dans en.yml et de.yml, il suffit de remplacer Antoine par %{prenom}. Ce qui donne

en:

phrase_accueil: « Hello %{prenom}, welcome to the website »

Maintenant dans la vue où sera appelée la traduction,  il suffira d’ajouter à la fonction de traduction t(:phrase_accueil) un paramètre supplémentaire prenom

add_frozen_gem_path: undefined method source_index for Gem:Module

Si lorsque vous essayez de redémarrer un projet avec une très ancienne version de ruby (ici un ruby 1.8.7) et que vous obtenez le message d’erreur suivant

add_frozen_gem_path': undefined method source_index’ for Gem:Module (NoMethodError)

Il faut tenter d’updater vers la version 1.8.25 via la commande suivante

Si tout se passe bien, vous devriez voir à la fin de l’update le message suivant

RubyGems installed the following executables:
/usr/local/rvm/rubies/ruby-1.8.7-p374/bin/gem

RubyGems system software updated

Générer des chaînes de caractères aléatoires avec Rails

Dans une application, il est parfois nécessaire de devoir générer des chaînes de caractères aléatoires. Ces chaînes peuvent avoir des caractéristiques spécifiques comme une longueur spécifique, des caractères non souhaités. Voici donc une technique parmi d’autres qui permettra de répondre à cette problématique.

Tout d’abord, on définit l’ensemble des caractères que l’on souhaite utiliser pour générer notre chaîne

Comme vous pouvez le voir sur cet exemple, nous prenons tous les caractères alphanumériques à l’exception du O,I,1,0.

Ensuite sur cette liste de caractères nous allons faire un suffle (tirage aléatoire) afin d’obtenir une chaîne de 6 caractères

Autocomplete avec plusieurs mots clés en jQuery

Autocomplete est une fonctionnalité de jQuery qui permet d’appliquer de l’autocomplétion de manière simple et efficace sur un champs de type texte.

Pour ceux qui l’ont déjà utilisé, vous avez surement remarquez que la fonctionnalité de base est certes facile à mettre en place mais que le fonctionnement de la recherche est vite limité.

Voici un petit exemple pour comprendre son fonctionnement, sa limite et le moyen d’y remédier.

Prenons l’exemple d’une liste de 4 trajets de train

  • caen lisieux evreux paris
  • caen paris
  • cherbourg caen lisieux evreux paris
  • cherbourg caen lisieux evreux

et du code qui me permet d’ajouter un champs autocomplete pour faire des recherches sur ces trajets.

Imaginons que je recherche tous les trajets passant par Caen et Paris

Quand, je commence à taper caen, parfait, il me trouve bien toutes les occurences caen dans toutes mes listes.

autocomplete

Par contre, quand je continue de taper paris, problème. Il me trouve bien la ligne 2 caen paris, mais il ne me ressort pas la première ainsi que la ligne 3.

autocomplete

Tout simplement parce que dans la fonctionnalité de base, il va rechercher les 2 mots qui se situent l’un à côté de l’autre.

Pour pouvoir faire ressortir tous les résultats contenants les différents mots que vous avez saisis, peu importe l’ordre dans lequel ils sont, voici l’une des solutions possibles.

autocomplete

Uncaught TypeError: Cannot read property ‘Autocomplete’ of undefined Google Map API

Si lorsque vous souhaitez utiliser la librairie Google Places, vous rencontrez l’erreur suivante dans votre console de développement web

Uncaught TypeError: Cannot read property ‘Autocomplete’ of undefined Google Map API

Une solution qui a très bien fonctionnée de mon côté, et de vérifier si dans votre appel javascript Google API, vous avez bien renseigné le paramètre libraries=places comme sur l’exemple ci-dessous.

Problème de récupération de valeur d’un champs autocomplété

Si lorsque vous essayez de récupérer la valeur sélectionnée d’un champ input type text autocomplété, celle-ci est tronquée, une des solutions possibles pour y remédier est d’ajouter un setTimeout, comme sur l’exemple ci-dessous.

Vérifier facilement la présence d’une valeur dans un tableau avec jQuery

Lorsque l’on récupère une liste de données sous forme de tableau, on peut être amené à devoir vérifier la présence d’une information dans celui-ci. Avec Javascript, il serait un peu fastidieux de devoir réaliser cette recherche.

C’est pourquoi jQuery va nous faciliter grandement la vie avec une méthode qui s’appelle inArray(). Un exemple valant mieux qu’un long discourt, voici comment utiliser cette méthode de recherche.

Prenons l’exemple d’un tableau contenant la liste de grandes personnalités du WEB.

Maintenant, imaginons que l’on souhaite savoir si notre cher John Resig en fait partie. En javascript, voici ce que ça aurait pu donner.

Un petit peu long à écrire ? Et bien là, John Resig vous allez l’apprécier car grâce à lui et son invention de jQuery, il suffit d’utiliser la méthode inArray et d’écrire le code suivant pour obtenir le même résultat.

A savoir, la fonction inArray prend en argument la valeur à tester et le tableau contenant les données.

inArray(« valeur_a_tester », « tableau_de_valeurs », [index_de_depart_donnee_optionnelle] )

Elle retourne -1 si la valeur n’est pas comprise dans le tableau, sinon elle retourne sa position.

Ajouter un attribut virtuel avec Rails 4

Il arrive parfois lorsque l’on développe, de devoir travailler avec un objet dont l’un de ses attributs ne nécessite pas d’être permanent.

Prenons un exemple tout bête mais qui vous permettra de mieux comprendre là où cet article veut en venir.

Imaginez que vous êtes en train de remplir un formulaire qui vous permettra d’enregistrer des informations sur une voiture dans une base de données.

On souhaite enregistrer toutes les informations en base à l’exception du champs photo. Dans notre cas, cette information est uniquement temporaire car elle n’a besoin d’exister que pour enregistrer la photo dans un dossier et non en base.

Alors comment faire pour garder la syntaxe bien pratique de rails pour manipuler un objet (mon_instance_objet.photo) et ainsi récupérer la valeur du champs dans le controller, sans pour autant devoir créer ce champs en base de données (ce qui ne nous servirez à rien) ?

Et bien c’est là que Rails a mis en place le système d’attribut virtuel. Comme son nom l’indique, cet attribut est virtuel et donc temporaire, le temps de traiter l’information.

Voici donc comment ajouter cet attribut virtuel à notre objet Voiture.

Dans le model de Voiture (voiture.rb), il suffit d’ajouter la ligne attr_accessor :photo .

Et voilà, le tour est joué. Vous pouvez maintenant manipuler ce champs photo comme les autres champs. La seule différence, c’est que l’information qu’il contient ne sera pas sauvegardée en base comme les autres champs.