Quelques jours après la sortie de la version beta d’Internet Explorer 8, Mozilla a sorti une version beta de Firefox 3. Qu’en est-il de cette nouvelle version du navigateur favori des web designers ? Quelles sont les nouveautés ? Mais surtout : est-ce que les gros défauts de Firefox 2 (notamment l’utilisation de mémoire) ont été gommés ?

Interface

L’interface de Firefox m’a toujours plu, car elle est sobre mais fonctionnelle. La version 3 apporte son lot de nouveautés, plus ou moins intéressantes.

Bouton « Précédent » grossi

Ca saute aux yeux. Personnellement, j’utilise plutôt le raccourci clavier mais pour les fans de la souris, c’est un détail très pratique, conséquence de l’utilisation plus importante de ce bouton par rapport au bouton « Suivant ».

Barre d’adresses enrichie

Sous FF2, elle offrait déjà l’url et le titre de la page. De plus, elle mettait en premier les sites les plus visités. Avec FF3 s’ajoutent la favicon et une icône si elle est dans les favoris, avec en prime un design plus pratique pour bookmarker directement un site.

Gestion des favoris

Elle s’est bien développée. Les favoris seront gérés comme une mini-base de données, avec moteur de recherche, historique, gestion des tags… Les plugins de favoris ne seront plus nécessaires.

Performances

Mémoire

C’est le gros point noir de Firefox 2 : il utilise énormément de mémoire, sans compter celle que les plugins utilisent. Les développeurs ont beaucoup travaillés dessus. Stuart Parmenter, un développeur de Mozilla, explique comment ils sont arrivés petit à petit à gagner en performances. Le test consistait à ouvrir 29 pages dans 30 fenêtres, et ceci, 11 fois d’affilée, en fermant au fur et à mesure les fenêtres pour en garder 30 ouvertes à chaque instant. A la fin, une seule fenêtre restait ouverte pour voir si les navigateurs (ici FF2, FF3 Beta et IE7) récupéraient de la mémoire.

On voit que IE7 n’arrive pas à récupérer de la mémoire, même en laissant une seule fenêtre ouverte. Et on voit que le maximum qu’atteint FF3 est moins grand que ce que FF2 obtient au final.

N’oublions pas Safari et l’excellent Opera, qui ont été testés dans cet article et dont résulte ce graphique. Firefox 3 reste le plus performant.

Javascript

Le Javascript est omniprésent (notamment avec l’AJAX) que ses performances sont primordiales aussi. Là aussi, FF3 est le plus rapide.

Utilisation

Un navigateur se doit aussi de respecter l’internaute, et d’améliorer son expérience.

Sécurité

Ce n’est pas le point faible de FF2 mais mieux vaut prévenir que guérir. FF3 inclura un outil pour avoir directement des informations sur les sites qu’on visite, et aura un outil anti-phishing plus performant.

Standards du Web

En tant que web designer, cela nous intéresse. Au test Acid 3 (plus bas dans la page), FF3 s’en sort remarquablement.

Firefox semble devancer largement ses concurrents, et on espère que les plugins seront rapidement mis à jour, parce que c’est pour moi le point fort de Firefox.

MAJ : Safari est lui aussi en phase de beta test mais n’était pas inclus dans les résultats ci-dessus, faute de tests. Plus d’informations dans les commentaires ci-dessous.

La bataille très fructueuse des navigateurs continue. Un nouveau comparatif de performances JavaScript de Firefox 3.0 Beta 5 et Safari 3.1 sur Mac OS X nous montre que Firefox est plus rapide (de peu). Il est intéressant de noter que Firefox est encore en beta tandis que Safari est dans sa version stable. Ces deux là ne cessent de se battre au coude à coude. Une chose est sûre : nous (utilisateurs et web designers) sommes les grands gagnants de cette course vers la performance et le respect des standards.

Si vous avez quelques minutes à perdre, testez donc ce surprenant Mario Kart en Javascript. C’est tout léger et c’est super sympa. Cependant, ne vous attendez pas à revivre les mêmes sensations qu’il y a 15 ans. Pas tous les concurrents, pas toutes les courses, pas de ralentissement dans l’herbe, pas de pièces, et surtout pas d’items. Mais il faut avouer que le plaisir de jeu est bien présent.

Via Kottke

Par l’ami Bouctoubou, j’ai découvert un jeu très surprenant : JavaScript Rock Star. Ce qui est surprenant, ce n’est pas le gameplay mais plutot la technologie utilisée. La jouabilité est encore à revoir mais c’est néanmoins ludique. Utilisez les touches A,S,D,F et G pour taper respectivement les « notes » rouge, orange, jaune, verte et bleue. Une prouesse est d’avoir parfaitement synchronisé la vidéo Youtube au jeu. Une belle pub pour jQuery.

Vous l’aurez peut-être remarqué si vous trainez parfois sur le site, j’avais ajouté un sélecteur de thèmes dans la colonne de droite. Il y avait 2 thèmes, et c’était un truc tout bête en javascript : en cliquant sur l’un des liens, ça changeait la « class » du body, et grâce à l’arborescence en CSS, ça changeait le fond du site. Malheureusement, dès qu’on changeait de page, ça revenait au thème par défaut.

J’ai donc demandé à quelqu’un qui s’y connaissait en JS pour ajouter une fonctionnalité pour sauvegarder le choix dans un cookie. Merci à Sylvain de m’avoir aidé. J’en ai profité pour rajouter un 3e thème, histoire de donner un peu le choix.

Hier je suis tombé sur un post très surprenant : une librairie JavaScript qui fait fonctionner IE6 comme IE7.

Il s’agit d’un JS à implanter sur son site et qui (si le JS est actif chez le client) fixe les divers problèmes HTML et CSS de IE6. En gros, plus de problème de :

• PNG
• Margin
• Pseudo-classes (hover notamment)
• Positionnement
• …

Je l’ai implanté sur mon site, mais n’ayant pas d’IE6 sous la main, je n’ai pas pu vérifier la performance du JS. Si un passant encore sous IE6 pouvait me le dire, ça serait sympa. Comment vérifier ? C’est simple : mon site est cassé sous IE6 (parce qu’il est bien codé 😉 ) et ne le serait pas a priori avec ce JS.

« It sounds to good to be true, right? »

Comme le dit le site lui-même, ça semble trop étonnant pour être vrai. Les heures passées à régler les innombrables bugs d’IE6 seraient de l’histoire ancienne ? Cela voudrait dire aussi que l’excellent Position Is Everything ne serait plus indispensable ?

La réponse est : attendons de voir. Ce JS est relativement passé inaperçu donc je ne sais pas ce qu’il vaut exactement. Mais ça reste un grand espoir pour les web designers hostiles à ce fossile qu’est IE6.

Depuis le temps que je veux en faire un… Voici enfin mon portfolio. Il m’aura fallu :

1. Regrouper et trier mes travaux en 3 catégories (web, graphisme, intégration)
2. Créer une interface simple mais sympa
3. L’intégrer sous forme de page et sous-page WordPress (en essayant de garder un maximum dynamique)
4. Trouver un système de galerie léger et sympa : slideViewer
5. Créer des images pour cette galerie (en cours)

Voici le résultat :

Vous savez sans doute que Google Chrome est réputé pour ses performances, notamment en JavaScript. C’était un de ses principaux arguments au lancement.

Pour le prouver, Google a lancé Chrome Experiments : une galerie de démonstrations JS qui marchent surtout dans Chrome. J’ai essayé de lancer différentes démos dans Firefox et c’était loin d’être fluide.

Exemple de démo surprenante: Ball Pool (restez appuyé sur le clic).

Il y a aussi:

• Google Gravity : la page d’accueil Google s’effondre!
• Monster : un monstre généré en 3D
• ColorsCube : un cube multicolore en 3D

J’adore le label des boutons lorsqu’on essaye de lancer une expérience sur un navigateur autre que Chrome : « I’m gonna roll the dice » ou bien « I prefer to live dangerously ». Génial.

Je ne connaissais pas cette astuce et j’en avais besoin pour mon tout récent blog 29minparjour.com où je poste beaucoup de code dans des balises <pre>.

Syntaxhighlighter ? Pas une solution pour moi.

Au début, je voulais utiliser le syntaxhighlighter (très connu et très utilisé) mais je n’aimais pas avoir à spécifier à chaque fois dans le html que tel bloc devait être stylé, et dans quel language. De plus, le code à insérer (name= »code ») n’est pas valide…

J’avoue que le rendu est élégant (sauf avec la version 2.0, la dernière en date). D’ailleurs, Viget Labs avait amélioré le JS en permettant d’agrandir la fenêtre au survol. Une belle amélioration.

Malgré tout, c’était au niveau HTML que je trouvais ça laborieux. Je voulais quelque chose de tout simple.

CSS, aide-moi!

Je voulais juste un simple retour à la ligne pour éviter que les balises <pre> ne dépassent en largeur. J’ai trouvé ça sur le site de Tyler Longren :

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Ca fonctionne sous FF 3 et IE6. Le comble étant que le reste du site est un encore un peu cassé sous IE6… (soupir)…

J’aimais pas trop les lightbox au début, un peu trop « fancy » à mon goût. Certains la critiquaient même exagérément. Bref, que l’on aime ou pas, ça utilise techniquement toujours du JavaScript.

Mais un ninja a réussi à le réaliser sans JavaScript, juste en CSS. Ca utilise la pseudo-classe :target. Et il appelle ça Futurebox.

Ok, ça marche pas sous IE (6,7,8) mais qu’est-ce qu’on s’en fout. Tiens d’ailleurs, gros f*ck à Microsoft pour son discours de merde (IE8 = le meilleur navigateur du monde entier de l’univers) et ses décisions de merde (Outlook 2010 utilisera le moteur de Word pour afficher le HTML).

Si vous en avez marre d’attendre que le grand public mette à jour ses navigateurs pour pouvoir utiliser du HTML 5 et du CSS 3, vous pouvez utiliser Modernizr :

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Je testerai sans doute à la prochaine refonte du site, c’est à dire prochainement (?).

Même si le HTML 5 est encore un joli bordel, des développeurs s’en donnent à coeur joie pour trouver des fonctionnalités très intéressantes, comme ce Drag & Drop en HTML 5 et JS.

Après Mario Kart en JavaScript, voici Wolfenstein 3D en JavaScript. C’est fluide, même sous Firefox. C’est dire la qualité du code!

Waker, c’est un site de bêtises trop fréquentes et trop futiles pour être postées ici.

Au départ, c’était un WordPress avec un thème pas trop travaillé, mais j’aimais bien la palette de couleurs. Et puis je me suis rendu compte que poster avec WordPress était trop contraignant, car trop long. Même avec le bookmarklet Press This, poster un simple lien ou une photo prenait trop de temps.

Résultat : je prends un tumblr tout simplement. Le bookmarklet est très efficace : il récupère facilement les photos ou la vidéo de la page où l’on est, et l’upload est direct. Au début, j’ai pris mon thème bbxtumblr, mais il manquait d’identité pour Waker.

Donc, j’en ai fait un autre.

Navigation au clavier

La grande particularité est d’avoir intégré grâce à une lib JavaScript, la navigation au clavier comme pour Google Reader ou FFFFOUND, c’est à dire la touche « J » pour suivant et « K » pour précédent, sachant qu’elle gère aussi la pagination dès que vous arrivez en haut ou en bas de la page.

Et si vous voulez savoir pourquoi ça s’appelle « Waker », et bien voilà pourquoi.

Depuis que mon thème est en réalité un Tumblr déguisé, j’essaye de l’alléger encore plus. J’ai au passage laissé tomber mon responsive design, trop mal implémenté de ma part.

Lire la suite

Me demandez pas comment ça marche. Dispo sur GitHub.

J’ai remplacé le vieux syntax highlighter sur WordPress Le Tutoriel par celui-ci: highlight.js

Pourquoi ?

1. Il n’utilise que 2 fichiers.
2. Il détecte tout seul le language.
3. Il propose l’exceptionnel thème Solarized.

Le rêve de beaucoup de graphistes se réalise malheureusement enfin.

Partez d’un Google Doc ou d’un JSON et voilà.