How to prevent the risks of client-side caching

A good article by Michael Cobb about risk of caching by browser :

Both browsers will cache a document requested over an HTTP connection that has the “no-cache” directive set. Mozilla will not cache any pages by default over an HTTPS connection, whereas Internet Explorer will, unless the user has enabled the “Do not save encrypted pages to disk” option. A Mozilla browser never stores documents set with the “no-store” directive, but Internet Explorer only fully follows this directive when the page is requested over an HTTPS connection. So the only way of ensuring that your sensitive documents and pages are not cached without requiring your users to manually set any IE options is to use the “no-store” directive over an HTTPS connection. All browsers supporting HTTP 1.1 will support this directive.

Full post available on techtarget

Les meilleurs plugins FX pour un développeur

Un excellent article sur simpleentrepreneur.com sur les meilleurs plugins FX pour un développeur :

Le navigateur de Mozilla est un outil formidable pour le développement web. Il intègre en effet un mécanisme d’extensions autour duquel s’est développé tout un écosystème. Certains plugins sont d’ailleurs de véritables perles et offrent des fonctionnalités qui vont bien au-delà de ce que propose Firefox en standard. Voici donc une liste de ceux qui se révéleront vite indispensables si vous voulez concevoir un site Internet.

Aide au développement

  • FireBug : c’est le couteau Suisse ultime ! FireBug permet d’explorer et de modifier la structure d’une page (Javascript, CSS et HTML) et de consulter les échanges effectués avec le serveur (très pratique en Ajax). Si vous rencontrez des problèmes avec vos scripts, il pourra même vous aider grâce à un débuggeur très puissant.
  • Web Developer : ce plugin rajoute une barre d’outils au navigateur. Cette barre permet d’effectuer tout un tas de choses, comme gérer le cache, voir les cookies, mettre en valeur (c’est-à-dire surligner) certaines parties d’une page web, valider une page, mesurer précisément des éléments graphiques, etc.
  • Add N Edit Cookies : comme son nom l’indique, cette extension permet de créer et de manipuler des cookies. La fonction recherche est très intéressante, puisqu’elle permet de retrouver tous les cookies d’un domaine en particulier (sous-domaines inclus).
  • QuickJava : QuickJava permet d’activer et de désactiver à la volée le support du langage de programmation Java et du langage de script Javascript. Il s’utilise très simplement grâce à l’installation de deux boutons dans la barre de statut et est idéal pour vérifier l’utilisabilité d’un site dans ces conditions particulières.
  • Quick Locale Switcher : ce plugin rajoute lui aussi un bouton dans la barre de statut afin d’offrir la possibilité de contrôler facilement la langue du navigateur. Il se révèle donc très pratique – pour ne pas dire indispensable – dans le cadre du développement d’un site supportant plusieurs langues.
  • Server Switcher : il suffit d’installer cette extension pour pouvoir basculer d’un environnement à un autre d’un simple clic de souris. Dommage toutefois qu’elle ne puisse pas gérer plusieurs environnements à la fois (c’est-à-dire plusieurs serveurs : développement, staging, production, …).
  • CookieSwap : CookieSwap permet de définir des profils utilisateurs et de basculer là encore très facilement de l’un à l’autre. Chaque profil disposant de ses propres cookies, il est ainsi possible de tester un site rapidement avec des utilisateurs aux caractéristiques différentes.

Affichage d’informations supplémentaires

  • View Dependencies : ce plugin rajoute une section supplémentaire dans le panneau d’information qui liste tous les fichiers (images, scripts, feuilles de style, …) qui ont été chargés avec une page web. Elle comptabilise également le poids de chaque élément et le poids total de la page.
  • View Cookies : cette extension propose de la même manière un nouvel onglet dans le panneau d’information avec cette fois-ci la liste des cookies liés à la page qui vient d’être chargé. Les actions à disposition sont limitées, puisque seule la suppression d’un cookie est disponible.
  • Live HTTP Headers : comme son nom le laisse sous-entendre, cette extension est très pratique pour consulter les en-têtes des requêtes et des réponses échangées avec un serveur web. Il est même possible de définir des filtres pour restreindre le nombre d’en-têtes à analyser.
  • ShowIP : ShowIP affiche dans la barre de statut l’adresse IP du serveur qui héberge la page qui vient d’être chargée. Il propose également l’accès à des services supplémentaires (whois, traceroute, …) ainsi que la possibilité de copier cette adresse dans le presse-papier.
  • Server Spy : Server Spy est une extension qui analyse les en-têtes des réponses renvoyées par un serveur web et qui détermine (lorsque cela est possible) le type de serveur (et éventuellement d’autres informations comme le numéro de version ou le système d’exploitation) qui a servi la page web.
  • ColorZilla : ce plugin permet de manipuler les couleurs (et leur code au format RGB ou hexadécimal). Il embarque un sélecteur de couleur (color picker en anglais) et permet également de capturer la couleur d’un élément d’une page en la sélectionnant avec la souris.

Analyse des performances

  • YSlow : cette extension conçue par Yahoo! analyse la page en cours et fournit différentes indications sur sa vitesse de chargement et les points qu’il serait nécessaire de retravailler pour l’optimiser. Attention, il faut avoir installé FireBug pour pouvoir utiliser YSlow.

Modification et sauvegarde des requêtes

  • UrlParams : UrlParams est une extension très facile à utiliser qui affiche les paramètres envoyés dans une requête POST ou GET. Elle permet en outre d’intervertir ces deux méthodes d’envoi ou de modifier ces paramètres avant de renvoyer une nouvelle requête.
  • Tamper Data : ce plugin est très proche en termes de fonctionnalités du précédent, sauf qu’il permet de modifier également les en-têtes envoyées au serveur web et donne plus d’informations sur ces échanges. En revanche, il n’est pas possible de rajouter des nouveaux champs à la requête par son intermédiaire.
  • Form Saver : une extension originale qui permet de sauver dans ses favoris le contenu d’un formulaire (sous la forme d’un bookmarklet). Il suffit ensuite de sélectionner ce favori pour remplir tous les champs du formulaire avec ces informations. Très pratique.

Optimisation pour les moteurs de recherche (SEO)

  • SearchStatus : cette extension permet d’afficher dans la barre de statut plusieurs types d’information sur la page en cours : pagerank, classement Compete et classement Alexa. Elle propose ensuite des raccourcis pour accéder à d’autres données (tendance, nombres de liens entrants, détail du trafic, …).
  • Alexa Sparky : à l’inverse de la précédente extension, celle-ci se focalise uniquement sur les données fournies par Alexa. Son principal avantage est de proposer dans la barre de statut un graphique qui fournit la tendance générale en terme de trafic pour la page en cours.
  • KGen : KGen est un plugin capable d’analyser une page et d’en extraire une liste de mots clés en les classant suivant différents facteurs (comme le nombre d’occurrences ou leur importance). Entièrement paramétrable, KGen est donc très utile pour optimiser le contenu de ses pages.

Outils annexes

  • Html Validator : un incontournable ! Cette extension permet de vérifier que la page courante respecte bien la spécification HTML (et ses différentes déclinaisons). La validation est effectuée au sein même du navigateur et permet donc de valider le contenu d’une page suite à la modification du code par une fonction Ajax.
  • LinkChecker : LinkChecker est une extension capable d’analyser le contenu d’une page et de vérifier pour chaque lien trouvé si le site correspondant est accessible. Les liens sont alors surlignés avec une couleur précisant leur état (fonctionnel, invalide, …).
  • Regular Expressions Tester : une extension – certes basique – mais qui permet toutefois de tester rapidement le résultat d’une expression régulière sur une chaîne de caractères. Elle est livrée avec quelques expressions prédéfinies (emails, adresses IP, …).
  • Unicode Converter/Input Tool : cette extension est très complète. Elle permet de manipuler et de convertir des chaînes de caractères dans différents types d’encodage. Une véritable boite à outils pour tous ceux qui doivent concevoir un site avec des jeux de caractères pouvant supporter plusieurs langues.
  • SecurePassword Generator : un générateur de mots de passe bien pratique lorsqu’il faut créer un compte utilisateur. Il dispose de nombreuses options (il est même possible de n’utiliser les lettres que d’une certaine partie du clavier). L’animation lors de la génération du mot de passe est en revanche un peu fastidieuse.

Et en bonus

  • Tab Mix Plus : une extension indispensable qui améliore grandement la gestion des onglets dans Firefox. Grâce à elle, tout devient vraiment configurable (affichage d’une nouvelle fenêtre, clic de souris, menu contextuel, fermeture d’un onglet, etc). Elle propose même une fonction undo très pratique.
  • Organize Status Bar : ce plugin ne propose pas beaucoup de fonctionnalités, mais il remplit bien son objectif : offrir un moyen simple de réarranger le contenu de la barre de statut. De cette manière, il est possible de trier les informations affichées par d’autres extensions dans cet espace restreint.

Pour les spécialistes en optimisation des moteurs de recherche, il sera peut-être préférable d’installer SeoQuake à la place de SearchStatus et d’Alexa Sparky. Cette extension est en effet bien plus puissante, mais aussi plus complexe à prendre en main et véritablement destinée à cette activité particulière.

Et si vous êtes web designer, sachez qu’il existe un générateur de Lorem Ipsum.

Générer certificats SSL pour Apache

Comment générer un certificat SSL auto-signé pour apache.

openssl genrsa 1024 -rand/var/log/messages > nom.domaine.ltd.key

-> ne pas mettre de passphrase, sinon il faut la retaper à chaque démarrage d’apache.

openssl req -new -x509 -days 3650 -key nom.domaine.ltd.key -out nom.domaine.ltd.crt

-> génère un certificat valable 10 ans
-> dans les réponses, entrer le code pays, le département, la ville et puis le nom.domaine.ltd pour la partie "Common Name (eg, YOUR name)"

configurer apache2.conf (ou autre ssl.conf en fonction) avec :

SSLCertificateFile /etc/apache2/ssl/nom.domaine.ltd.crt
SSLCertificateKeyFile /var/lib/dtc/etc/ssl/nom.domaine.ltd.key

pour générer le fichier pem (utile pour courier par exemple) :

cat nom.domaine.tld.key nom.domaine.tld.crt > nom.domaine.tld.pem

Programmation JavaScript Objet par l’exemple

Un très bon exemple de programmation JS Objet (concis et rapide) sur le blog jflad :

Ce tutoriel vous présente la syntaxe de la programmation Objet en Javascript. Pour la petite histoire, le Javascript était le précurseur des langages orienté Objet pour le Web. Décliner en Action Script pour Flash ou il a connu un très grand succès, il a perdu progressivement de sa notoriété au fil des années, mais heureusement avec le Buzz du Web 2.0 et Ajax, ce langage bénéficie d’une seconde vie !

Voici un exemple qui vous montre comme créer vos propres objet en Javascript et les instancier:

// Object JS
var monObjet = {

// Paramètre
param1: {“x”: 0, “y”: 0},    // On constate qu’un variable de paramètre peut aussi être un objet
param2: 2,
param3: 333,

// Méthode
maMethode1 : function (var1, var2) {
this[‘param1’].x = var1;   // On pointe sur le paramètre objet avec des crochets comme dans Flash!
this.param2 = var2;         // Poitage classique sur un paramètre
alert(‘Var1: ‘+var2);
},

maMethode2 : function() {
var var2 = this[‘param1’].x;
alert(‘Var2: ‘+var2);
},

maMethode3 : function() {
var var3 = this[‘param3’];
alert(‘Var3: ‘+var3);
}

}

// Pour instancier un objet ‘monObjet’ et lui appliquer des méthode
monObjet.maMethode1(100,200);
monObjet.maMethode2();
monObjet.maMethode3();

Comme vous pouvez le constater, ce n’est pas très compliquer, mais il y a beaucoup de mauvaise utilisation du Javascript qui porte souvent à confusion. Mais cet exemple illustre la véritable syntaxe orienté objet du Javascript, couplé avec Mootools, vous allez vraiment avoir un grande liberté d’action un fois ce principe maitrisé !

source

Fix horizontal scrollbar in IE

How To Avoid Horizontal Scroll Bars in Internet Explorer 6

When you open a web page in your browser, the browser has a look at what is listed in that DTD file. Then, if there is some code found on your page that is not found in that list, most browsers will ignore it. However, Internet Explorer 6 behaves in a very special way: it shows a horizontal scroll bar.

Fortunately there are a few ways to avoid horizontal scroll bars in Internet Explorer 6:

  • Whenever you can, do not use deprecated code. Use CSS instead.
  • If you want to use deprecated and/or proprietary code, remove the link to the DTD file. But leave the DOCTYPE specification on your page:

    To remove the reference to the DTD file, do the following. Locate the following in your file.

    
    

    Remove the URL so that it appears as follows.

    
    

Doing this leaves Internet Explorer 6 content and you are happy that there are no ugly horizontal scroll bars.

http://www.adobe.com/devnet/dreamweaver/articles/horizontal_scroll.html

Cross domain security iframe communication

Une solution trop peu connue je trouve qui permet de communiquer entre IFrame avec des domaines différents : la technique du fragment identifier.

http://en.wikipedia.org/wiki/Fragment_identifier

– un excellent document qui fait le point sur le problème et les différentes solutions pour la communication entre domaines : http://www.collinjackson.com/research/papers/fp801-jackson.pdf

– la doc de Dojo qui explique pourquoi ils ont choisi cette solution et comment ça fonctionne :
http://manual.dojotoolkit.org/WikiHome/DojoDotBook/Book75

– un architecte de Microsoft qui décrit également cette solution qu’ils ont utilisé pour leur techno Windows Live, les avantages et inconvénients. L’article se situe entre les pages 14 et 18 du PDF linké à cette adresse : http://blogs.msdn.com/dthorpe/archive/2007/06/18/secure-cross-domain-communication-the-architecture-journal.aspx

– un exemple fonctionnel :
http://www.tagneto.org/blogcode/xframe/ms/ui2_workaround.html
(discussion ici)

Forge CodingTeam

Une forge anglo/franco dynamique et à l’allure sympathique.

Sur CodingTeam, chaque projet dispose :

  • d’un espace de téléchargement,
  • d’un wiki,
  • d’un système d’actualité,
  • d’un dépôt Subversion (SVN),
  • d’un suivi des bugs,
  • d’une liste d’objectifs,
  • de la traduction en ligne,
  • d’un espace de discussion.

http://www.codingteam.net/index_fr.php 

Une bonne alternative au gigantesque Sourceforge !

JODConverter

JODConverter, the Java OpenDocument Converter, converts documents between different office formats.
It leverages OpenOffice.org, which provides arguably the best import/export filters for OpenDocument and Microsoft Office formats available today.

JODConverter can be used in many different ways

  • As a Java library, embedded in your own Java application
  • As a command line tool, possibly invoked from your own scripts
  • As a simple web application: upload your input document, select the desired format and download the converted version
  • As a web service, invoked from your own application written in your favourite language (.NET, PHP, Python, Ruby, …)

JODConverter is open source software released under the terms of the LGPL and can be downloaded from SourceForge.net.

http://www.artofsolving.com/opensource/jodconverter