sept 24

Depuis près d’ un an, les navigateurs comme Chrome, Firefox ou encore Safari redoublent d’efforts pour améliorer sensiblement la vitesse d’exécution du JavaScript, et ceci nous offre de nouvelles perspectives comme par exemple ajouter de la 3D dans nos pages.

Je vous propose de lire un article qui montre comment créer un petit moteur 3D en JavaScript et comment l’utiliser avec jQuery.

Ce moteur est composé de 3 classes:

  • La scène
  • La caméra
  • L’objet 3D (qui est un cube dans cet article)

Ce moteur n’utilise pas la nouvelle technologie WebGL qui gère la 3D avec des balises canvas, mais simule simplement le rendu 3D en convertissant les points 3D définis (X,Y,Z), en 2D (X,Y), la profondeur est simulée via la taille et l’opacité d’un objet.

Le moteur n’utilise pas entièrement jQuery  puisque les calculs de conversions (3D => 2D) sont déjà  lourds et l’ajout de fonction jQuery au milieu de ces calculs ne ferait que ralentir l’ animation 3D; les fonctions natives comme getElementById() ont donc été préférées pour le cœur du moteur.

Pour lire l’article c’est ici.

Pour voir la démonstration c’est ici.

moteur-3d-javascript-jquery

Post to Twitter Twitter ce post


juin 16

C’est officiel depuis quelques jours : les robots de Google (les GoogleBots) suivent maintenant les liens JavaScript !

C’est à dire qu’ils savent interpréter le JavaScript qui se trouve sur les attributs onclick d’apparement toutes les balises (<a>,<div>,..)

Rappelons que cette pratique permettait de cacher un lien au robots de Google, soit pour éviter de donner son PageRank à une autre page, soit pour cacher des liens « vendus » ( créé contre rémunération ) qui ne sont pas recommandés par Google..

Voici différents liens qui pourront être suivis pas le Google bot:

1
2
3
4
5
6
7
<div onclick="document.location.href='http://foo.com/'">
 
<tr onclick="myfunction('index.html')">
 
<a href="#"onclick="myfunction()">new page</a>
 
<a href="javascript:void(0)" onclick="window.open('welcome.html')">open new window</a>

Source Vanessa Fox

Ceci va aussi permettre  une meilleure indexation des pages qui utilisent l’Ajax à tout-va.

Conclusion  : faites des pages pour vos visiteurs et non pas pour le Google Bot puisque celui-ci devient petit à petit un visiteur à part entière.

Post to Twitter Twitter ce post

mar 10

PHPjs est un projet dont le but est de recréer les fonctions PHP les plus utilisées, en fonction Javascript. PHPjs comprend pour l’instant près de 300 fonctions converties, ce qui n’est pas négligeable! Sans compter que le projet est souvent mis à jour. Si vous êtes développeur PHP, cette librairie devrait vous ravir!

Télécharger PHPjs

Documentation

phpjs-javascript-fonctions

Post to Twitter Twitter ce post

mar 04

La beta de Safari 4 vient de sortir il y a quelques jours, et les premiers résultats des tests sont plutôt concluants, en effet le nouveau moteur javascript baptisé Nitro surpasse tous les autres navigateurs , chrome compris, comme vous pouvez le voir ci-dessous.

vitesse-rapidite-safari-4-nitro-javascript-affichage-benchmark

Néanmoins on peut regretter le manque de nouveauté au niveau des fonctionnalités, en effet on y retrouve la plupart, voir la totalité des nouveautés amenées par Chrome(onglets, page d’ accueil des sites les plus visités,navigation privée…etc).

safari-4-beta

Mais malgrès ce petit manque de nouveauté croustillante, Safari 4 vient se placer en leader sur ce marché, avec un respect des strandarts plus que parfait avec 100/100 au test Acid 3, et une rapidité d’affichage des pages et de traitement du Javascript bien au dessus de tous ces concurrents.

Post to Twitter Twitter ce post

fév 03

favoris-favoritesVoici une fonction javascript qui permettra à vos visiteurs d’enregistrer votre beau site dans leurs Favoris.

Cette fonction fonctionne sous IE et Firefox, pour les autres navigateurs il n’y a apparemment aucun moyen d’y parvenir..

Fonction à placer entre les balises de votre page HTML:

1
2
3
4
5
6
7
function mettre_en_favoris(titre, url) {
	if (navigator.appName != "Microsoft Internet Explorer"){
		window.sidebar.addPanel(titre,url,"");
	}else {
		window.external.AddFavorite(url,titre);
	}
}

Lien d’appel à la fonction:

1
<a href="#" onclick="mettre_en_favoris('Titre du site','http://url.com');return false;">Mettre ce Site dans mes favoris</a>

Post to Twitter Twitter ce post

jan 26

reflectiomaker_com

Enfin! Après plus de 6 mois sans nouvelle version majeure, Jquery revient en force avec sa version 1.3.1 !

Au menu :

  • Un moteur de sélection complètement réécrit,  il devient un module indépendant nommé Sizzle, celui-ci serait 2 fois plus rapide que l’ancien :

    Performances du Moteur de sélection de Jquery 1.3

    Performances du Moteur de sélection de Jquery 1.3

  • L’ arrivée des Live Events qui permettent d’attacher une action sur évènement des Éléments existants ou futurs: Exemple.
  • La réécriture de la gestion des évènements ( Aucun impact pour nous)
  • La réécriture de l’injection HTML qui décuple la vitesse d’execution des injections :

    Performances Jquery 1.3 - Injection HTML

    Performances Jquery 1.3 - Injection HTML

  • Réécriture du calcul de position d’un Élément, la encore la performance est présente !
    Performance Jquery 1.3 - Calcul de position

    Performance Jquery 1.3 - Calcul de position

    Plus de nombreuses corrections…. Et tout ceci tient toujours en 18 ko dans sa version gzippé!

Pour aller plus loin, suivez ce lien.

Post to Twitter Twitter ce post