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

Apache2 + SSL + Ubuntu : error 12263

When you apt-get apache2 and activate ssl, you get this strange error “-12263”.

Thanks to theatons.com where I found the solution.
The apt-get installation is indeed incomplete, you have to continue the process to make SSL effective :

wget  apache2-ssl.tar.gz
tar xzvf apache2-ssl.tar.gz
sudo mv ssleay.cnf /usr/share/apache2/
sudo mv apache2-ssl-certificate /usr/bin/
sudo mkdir /etc/apache2/ssl
sudo apache2-ssl-certificate

Then, you need to enable SSL in your apache config files :

sudo a2enmod ssl
sudo ln -s /etc/apache2/sites-available/ssl /etc/apache2/sites-enabled/ssl
sudo cp /etc/apache2/sites-available/default /etc/apache2/sites-available/ssl

sudo gedit /etc/apache2/sites-available/ssl

NameVirtualHost *:443


ServerAdmin webmaster@localhost

SSLEngine On
SSLCertificateFile /etc/apache2/ssl/apache.pem

DocumentRoot /var/www/

Options FollowSymLinks
AllowOverride None


Options Indexes FollowSymLinks MultiViews
AllowOverride None
Order allow,deny
allow from all
# This directive allows us to have apache2’s default start page
# in /apache2-default/, but still have / go to the right place
# Commented out for Ubuntu
#RedirectMatch ^/$ /apache2-default/

ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/

AllowOverride None
Options ExecCGI -MultiViews +SymLinksIfOwnerMatch
Order allow,deny
Allow from all

ErrorLog /var/log/apache2/error.log

# Possible values include: debug, info, notice, warn, error, crit,
# alert, emerg.
LogLevel warn

CustomLog /var/log/apache2/access.log combined
ServerSignature On

Alias /doc/ “/usr/share/doc/”

Options Indexes MultiViews FollowSymLinks
AllowOverride None
Order deny,allow
Deny from all
Allow from 127.0.0.0/255.0.0.0 ::1/128

sudo gedit /etc/apache2/sites-available/default
and make sure the following lines say this:

NameVirtualHost *:80

You will also need to edit sites-available default, and ssl:

sudo gedit /etc/apache2/sites-available/default

And the same again for the ssl file.
Here you will need to change the section which says ‘AllowOverride None’ to:

AllowOverride All

Then, reload your config and that’s all !

/etc/init.d/apache2 force-reload

source

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

Revue de web

  • Un meta-moteur de recherche d’annonces immobilières (achat, location, maison, appart, …) sur toute la France : www.donkiz.fr
  • Estimer les vrais coûts d’utilisation de Paypal ou bien calculer le montant à payer pour que le destinataire reçoive un montant bien précis : www.ppcalc.com
  • Une alternative open, libre et gratuite à Guitar Hero ? Oui, c’est FretsOnFire et ça se joue en prenant votre clavier dans vos bras et avec les touches F1, F2, F3, F4 et F5 !
  • Encore une ville fonérisée : Genève by Fon
  • Quelques planches de BD pour les geeks… Attention, si ça vous fait rire, vous savez ce que ça veut dire ! 🙂
  • Des fauteuils “intelligents”
  • Un artiste vraiment habile de ses mains… le handfarteur ? (dédicace Joseph)
  • Des oldies de chez oldies à télécharger, ou pour dépanner pour un besoin ponctuel : vetusware.com
  • Vous voulez vous construire une imprimante 3D (oui 3D…) ? Ca se passe sur fabathome.org
  • Un peu d’humour sur l’EPO (oui je retarde)
  • Libérez vos stickers
  • Une vidéo à l’image des commentaires sur les blogs ou forums… (même sanction, si vous vous marrez, vous devez consulter)
  • La technique de seamcarving toujours aussi impressionnante

Solutions pour les sauvegardes (remote, incrémentales, chiffrées,…)

Un excellent point sur les différents logiciels et techniques pour mettre en place des sauvegardes de tout type… Plus d’excuse pour ne pas en faire !

Useful Links and Howtos

A comparison of utilities for filesystem backup

incremental

glastree:

doesn’t work remotely, easy, limited options.

incremental and compressed

storebackup

incremental backups to a local disk. lots of options. space efficient (gzipped diffs).

remote and incremental

by hand: (‘rsync’ + ‘cp -al’)

good overview of how and why. this has now been implented and is available in a debian package called rsnapshot

rsnapshot

based on mike rubel’s scripts. clean & easy configuration. push style backups.

snapback2

based on mike rubel’s scripts. clean & easy configuration. pull style backups.

mirrordir

MIRRORDIR mirrors a directory tree in every detail, including devices, ownerships, permissions, symlinks, hardlinks and access times, suitable for timed backups of disk drives. The minimal set of changes needed to make the original directory tree identical to the backup directory tree is executed. Can optionally create backup files before deleting, and store multiple revisions through any number of levels. A scripting language allows for custom excluding of special files. Works over ftp and mcfs. Also implements its own secure sockets for transparent strong encrypted file transfer, using a custom daemon.

dirvish

robust configuration files. confusing terminology,

rlbackup

rlbackup provides a simple secure mechanism for generating linked backups over the network.

remote, incremental, and compressed

rdiff-backup

good for big files, because only the changes are transmitted and stores gzipped files and then gzipped diffs. includes meta data files, so that even if the backup user can’t change file ownership permissions, this information is retained and will restore correctly.
from the website: rdiff-backup backs up one directory to another, possibly over a network. The target directory ends up a copy of the source directory, but extra reverse diffs are stored in a special subdirectory of that target directory, so you can still recover files lost some time ago. The idea is to combine the best features of a mirror and an incremental backup. rdiff-backup also preserves subdirectories, hard links, dev files, permissions, uid/gid ownership, and modification times. Also, rdiff-backup can operate in a bandwidth efficient manner over a pipe, like rsync. Thus you can use rdiff-backup and ssh to securely back a hard drive up to a remote location, and only the differences will be transmitted.

backupninja

Backupninja allows you to coordinate system backup by dropping a few simple configuration files into /etc/backup.d/. Most programs you might use for making backups don’t have their own configuration file format. Backupninja provides a centralized way to configure and coordinate many different backup utilities (including rdiff-backup).

remote, incremental, and encrypted

Duplicity

Duplicity backs directories by producing encrypted tar-format volumes and uploading them to a remote or local file server. Because duplicity uses librsync, the incremental archives are space efficient and only record the parts of files that have changed since the last backup. Because duplicity uses GnuPG to encrypt and/or sign these archives, they will be safe from spying and/or modification by the server.
Here is a useful duplicity tutorial.

Box Backup

An open source, completely automatic on-line backup system for UNIX. All backed up data is stored on the server in files on a filesystem — no tape or archive devices are used. The server is trusted only to make files available when they are required — all data is encrypted. A backup daemon runs on systems to be backed up, and copies encrypted data to the server when it notices changes. Only changes within files are sent to the server, just like rsync. Old versions of files on the server are stored as changes from the current version. Behaves like tape — old versions and deleted files are available.

remote and encrypted

DIBS

Distributed Internet Backup System (DIBS). peer to peer distributed backup using encrypted chunks so that no one knows what they are backup up from other peers.

Recommendations

I tried them all, and I didn’t like any of them. So I wrote backupninja. Backupninja is not actually a backup program. Instead, it manages your entire backup scheme using easy ini style configurations files in /etc/backup.d/. Most programs you might use for making backups don’t have their own configuration file format. Backupninja provides a centralized way to configure and coordinate many different backup utilities. Features:

  • easy to read ini style configuration files.
  • you can drop in scripts to handle new types of backups.
  • backup actions can be scheduled
  • you can choose when status report emails are mailed to you (always, on warning, on error, never).
  • console-based wizard (ninjahelper) makes it easy to create backup action configuration files.
  • passwords are never sent via the command line to helper programs.
  • works with Linux-Vservers.

Backup types:

  • secure, remote, incremental filesytem backup (via rdiff-backup). incremental data is compressed. permissions are retained even with an unpriviledged backup user.
  • backup of mysql databases (via mysqlhotcopy and/or mysqldump).
  • backup of postgresql databases
  • backup of ldap databases (via slapcat and/or ldapsearch).
  • basic system and hardware info.
  • encrypted remote backups (via duplicity).
  • backup of subversion repositories.
  • burn CD/DVDs or create ISOs.

It slices, it dices!

source

SFR Illimythics : le mythe de l’illimité

Enfin quelques nouvelles offres pour l’accès internet illimité mobile… SFR Illimythics.

Mais il y a encore du chemin à faire. Voici quelques extraits des conditions générales.

Internet 3G+: exclusivement sur et depuis votre mobile (non relié à un ordinateur)

Je ne sais pas comment ils vont techniquement empecher cela… Si le téléphone y a accès, alors rien n’empeche de le transformer en passerelle

Si vous n’avez pas d’accès GPRS/3G, votre navigation sur les portails wap s’effectuera en mode wap CSD, au prix d’un appel normal.

Certains vont avoir des surprises en passant dans une zone non couverte par la 3G+. Un peu de transparence et une bascule automatique en mode dégradé (WAP) gratuite serait normale. Quid des personnes qui habitent dans une zone sans 3G+ ?

Tout autre usage est interdit et notamment Voix sur IP, Peer to peer et Newsgroups.

Pareil que la remarque 1, techniquement impossible de vérifier ce qui se passe sur le réseau, il suffit que l’abonné “tunnelle” de manière chiffrée sa communication et SFR sera tel un aveugle sur une plage de nudistes. Interdire la voix sur IP, c’est empecher la saine concurrence (30 cts/min la voix sur GSM, 0 cts/min la voix sur IP)… en fait, c’est surtout retarder l’inéluctable évolution du marché au terme de laquelle SFR et les autres opérateurs ne feront quasiment plus que du transport DATA avec en option la voix inclus dans le forfait.

Le réseau 3G étant mutualisé entre tous ses abonnés, SFR se réserve la possibilité, afin de leur en permettre l’accès dans des conditions optimales, de limiter les débits des utilisateurs procédant à plus de 500 Mo d’échanges de données par mois, usage non entendu comme raisonnable

On y vient, illimité mais dans certaines limites. Cette condition est à mes yeux complètement abusive, qui est SFR pour juger ce qui est raisonnable, normal, dans la moyenne, habituel ou encore usuel ? Il suffit de regarder 20 vidéos sur Dailymotion pour dépasser ce quota. Sans parler qu’ils ne différencient pas upload de download. 500 Mo, de nos jours c’est équivalent à avoir une voiture avec laquelle vous ne pouvez faire que 5 km par mois sinon à être limité à  20 km/h le temps de terminer le mois.

L’arrivée de l’Iphone a donc du bon au niveau de la concurrence, même si on est encore loin d’une révolution à 30 Euros / mois avec voix illimité, data illimité et de VRAIS nouveaux services : transfert d’argent aussi simple qu’un SMS, service GPS / radars, etc.