Placer un break point pour écouter une interaction JS avec un élément du DOM

Vous est-il jamais arrivé de vous arracher les cheveux pour trouver quelle ligne de js était à l’origine d’un comportement étrange dans la page ? La situation s’apparente assez à : “chercher une aiguille dans une botte de foin” ?

Eh bien je viens de découvrir une super astuce dans la console (sans doute présente depuis toujours). Il suffit d’inspecter l’élément, de lui faire un click droit et de choisir l’un des trois comportement suivant :

Continue reading “Placer un break point pour écouter une interaction JS avec un élément du DOM” →

Ras le bol de devoir return false sur les balises link au click event ?

Si vous aussi vous en avez marre de devoir spécifier (ou carrément d’oublier de spécifier) les return false sur les balises <a href="#"></a> pour éviter que l’internaute soit violemment expulsé en haut de la page quand il clique sur le lien en question, eh bien sachez qu’une lecture rapide de la doc du W3C concernant les balises link vous aurait appris que l’attribut href est optionnel !

Citation W3C :
“Authors may also create an A element that specifies no anchors, i.e., that doesn’t specify href, name, or id. Values for these attributes may be set at a later time through scripts.”
++

Traduction :
“Les auteurs peuvent aussi créer un <a> qui ne spécifie pas d’ancre, par exemple, qui ne spécifie ni href, ni name ou id. Les valeurs pour ces attributs peuvent être set up plus tard via des scripts.”

Il vous est donc possible d’écrire vos liens comme ceci dans vos pages :

# html
<a id="bob" class="leponge">click me!</a>

# js
$('#bob').on('click', function(){
    noNeedToReturnFalseYou(ahahah);
});

# css
a { cursor:pointer; }

Et voilà plus besoin d’annuler le comportement habituel du lien en javascript au moment du click.

Détecter les différentes versions d’iPhone et d’iPad en JavaScript

Je travaille en ce moment sur une web app (html5, css3, terminaux mobiles, media queries et compagnie) et je cherchais un test simple pour détecter si on se trouve sur un iPad 3. Ne trouvant pas mon bonheur du côté de Modernizr, j’ai finit par tomber sur deux choses qui à mon sens sont suffisamment précises pour obtenir un test fiable. Et oui je parle bien de tester le user agent…

Bouuu trop la loose de tester le user agent. Ouais mais bon ça a le mérite d’être ultra rapide à écrire 😛 et puis faute de mieux c’est ce que je vais utiliser.

Habituellement on teste la totalité de la chaîne de caractères (le user agent donc) avec une regex et ça donne un truc comme ça :

if (navigator.userAgent.match(/iPad/i)) { /*doSomethingAwesome...*/ }

C’est simple rapide et concis mais on peut pas cibler un iPad 3 versus un iPad 2 par exemple. En fait on peut affiner le test pour être du coup quasi sûr de ne pas se tromper.

1. window.pixelRatio

Le pixelRatio aura la valeur “2” pour les iOS avec écran Rétina, c’est-à-dire les écrans HD d’Apple actuellement équipés sur les iPhone 4, 4S et iPad 3. Et il aura la valeur “1” notamment pour les iPhone 3GS, les iPad 1 et 2.

2. navigator.platform

Contrairement à navigator.userAgent (qui renvoi une chaîne interminable) eh bien lui il ne renvoi qu’une toute partie du user agent, en l’occurrence seulement ce qui concerne la plateforme. Et il se trouve que pour l’iPad le navigator.platform c’est “iPad” 🙂 cool non ? Plus rapide que de tester TOUTE la chaîne avec une regex.

Et donc j’en suis arrivé à ce petit bout de js, très moche certes mais on s’en fiche, sous cette forme il a un côté facile à appréhender.

if (window.devicePixelRatio === 2) {
  if (navigator.platform === "iPad") {
    alert('iPad 3');
  } else if (navigator.platform === 'iPhone') {
    alert("iPhone 4");
  };
} else {
  if (navigator.platform === 'iPad') {
    alert('iPad 2');
  } else if (navigator.platform === 'iPhone') {
    alert('iPhone 3');
  }
};

Après on prend que certaines parties ou bien on l’adapte à ses besoins selon l’humeur.

Ressources

Modernizr : pour faire de la feature detection plutôt que du test de user agent
HTML5 Mobile Boilerplate : pleins de ressources pour faire de la web app
Alex Gibson demo page : pour utiliser un splash screen comme dans les apps natives