Bonjour, C’est Gaëtan, Développeur web Freelance dans les Alpes.

Sep 01


—- english below —-

Bonjour,
Google Chrome vient de passer en 37.0.

google chrome v37google chrome v37

Depuis cette mise à jour, les images en lazyload (chargement différé) ne s’affichent plus dans certain cas.

lazy_load_images_not_working_chrome_v37

Pas de problème javascript. C’est simplement du CSS.
En effet, les premières images présentent dans le DOM sous la forme en généralement d’un petit gif transparent d’un pixel (dans mon cas 1x1trans.gif) se voient affecté d’une taille et hauteur de 1px.
Au remplacement de l’image par le plugin/script jquery.lazyload.js, la source est bien remplacée mais l’image reste en hauteur et largeur 1px.

lazyload_jquery_googlechrome_37.0_problem

Il suffit alors d’ajouter une hauteur et une largeur par default dans le css de la page:

img.lazy {
    height: auto;
    width: auto;
}

et tout rentre dans l’ordre.

—- english —-

Hi,
Google Chrome just upgrate to 37.0.
Since then lazyload images are not showing anymore (in some case).

This i not a javascript issue. It’s only CSS.
Indeed, on DOM first images are loaded as little transparent gif (in my case 1x1trans.gif) and are now (since v37) of 1px height and width.
When jQuery lazyload plugin execute, the new source is correct but the DOM element img still 1px height and width.

You just have to set height and width to auto in your CSS file:

img.lazy {
    height: auto;
    width: auto;
}

And everything should be all right again.

Jun 21


Pour mes travaux web (PHP principalement) j’utilise une machine virtuelle (VM) virtualbox Ubuntu (version server).
Ayant une bonne machine, avec un jeu de VirtualHost et un dossier partagé intelligemment choisi, je peux facilement tester mes développements sur une config linux proche de celle utilisée en prod.
L’avantage c’est que je ne quitte pas mon OS préféré et que le déploiement en production est instantané.

Comme l’installation n’était pas tricky, voilà une petite aide pour vous aider à pouvoir débugger avec xdebug dans cet environnement un peu particulier (du remote debugging avec OS divers)

Il faut tout d’abord configurer l’interface réseau de la machine virtuel en sélectionner « Accès par pont ». On utilise alors l’adresse mac de la machine pour obtenir une IP fixe (voir config de votre box).

Sur Ubuntu, dans la VM donc, après avoir installé xdebug, on ajoute dans /etc/php5/apache2/php.ini (le php.ini de mod_php).

<pre lang="php">zend_extension=/usr/lib/php5/extensions/xdebug.so
xdebug.remote_enable=1
xdebug.idekey="netbeans-xdebug"
xdebug.remote_handler=dbgp
xdebug.extended_info=1
xdebug.remote_connect_back=1
xdebug.remote_port=9000
xdebug.remote_log=/var/log/xdebug.log

sur la machine mère, on crée un répertoire à la rachine C:/media/workspace, D:/media/workspace sur windows, ou /media/workspace/ sur Os X.
Il faut alors ajouter ce dossier à la VM, de manière permanente (utilisez workspace pour le nom):

Dans la machine virtuelle, je monte automatiquement ce dossier (il faut installer Guest Addition si vous utilisez VirtualBox).
Pour ce faire, plusieurs solutions: via le /etc/fstab ou, comme j’ai choisi, une ligne dans /etc/rc.local

<pre lang="batch">
mount -t vboxsf workspace /media/workspace
exit 0

Note: N’utilisez pas le montage automatique proposé par VirtualBox. En effet, il fonctionne mais ne montera pas votre dossier celon la même arborescence et Xdebug ne retrouvera pas ses petits (c’est la clef du process).

Dans vos VirtualHost, vous utiliserez donc les sous dossiers de /media/workspace comme DocumentRoot:

<pre lang="php"><virtualhost>
     DocumentRoot /media/workspace/VOTRE_SOUS_DOSSIER_PROJET
     ServerName NOM_DU_SERVEUR_PROD_FINAL
     <directory>
          Order allow,deny
          allow from all
          allowOverride all
     </directory>
     ErrorLog ${APACHE_LOG_DIR}/error_VOTRE_PROJET.log
</virtualhost>

Installez tout ce qui va bien sur netbeans, configurez correctement vos fichier hosts (sur les deux machine)

/etc/hosts de la VM

<pre lang="php">127.0.0.1     NOM_DU_SERVEUR_PROD_FINAL

C:/Windows/Systeme32/drivers/etc/hosts ou /etc/hosts pour respectivement windows et OS X mère.

<pre lang="php">IP_FIXE_VM     NOM_DU_SERVEUR_PROD_FINAL

voilà, maintenant en visitant NOM_DU_SERVEUR_PROD_FINAL, vous devriez avoir votre projet, et vous devriez aussi pouvoir le débugger correctement depuis NetBeans.

/!\ les chemins serveur (VM) et machine mère doivent être les mêmes. (surtout sur Windows apparemment).

Mes sources:

Mar 27


Si vous me suivez un peu, vous savez comme j’apprécie le cms light Get-Simple.
Il est très complet et ne demande pas de base de donnée MySql, ce qui est pour moi un avantage énorme.

La version 3.0 est sortie officiellement hier, alors voici comment l’installer sur un serveur free.fr, l’hébergement préféré du pauvre! :)

Pour commencer, connectez-vous sur votre compte ftpperso.free.fr.
A l’endroit ou vous voulez installer votre nouveau site, déposez le contenue de l’archive téléchargée préalablement sur le site web de Get-Simple.

A la racine de votre ftp, créez un fichier .htaccess avec la seule ligne “php 1” à l’intérieur.
(NB: pas la racine du site, mais bien la racine du FTP si votre Get-Simple est dans un sous dossier.)

Vous pouvez maintenant visiter votre site web.
Comme vous pouvez le voir,  la version de php des serveurs free et en dessous des pré-requis Get-Simple.

Néamoins, ça passe bien, alors on triche!
Modifiez le fichier ./admin/install.php à la ligne 181.

changez 5.2 par 5.1.2 par exemple.

Si vous voulez l’interface admin en français, téléchargez fr_FR.php ici:
http://get-simple.info/extend/language/french-language/94/

et l’uploader dans ./admin/lang/

revenez maintenant sur votre page web.

Vous pouvez poursuivre.
Vous devriez avoir un warning:

N’en tenez pas compte, il n’y a pas de CHMOD sur les serveurs free.fr

Et voilà un beau site Get-Simple 3.0 sur free.fr!
Merci qui? :)

Nov 12


Préparez votre message HTML comme vous préparez un page web, en gardant bien toute les règles en tête:
www.campaignmonitor.com/css/

Sous Linux, Preparez le contenu de votre message dans un document afin qu’il contienne (en plus du html body) l’entête suivante:

To: address@example.com
Subject: Subject
Content-Type: text/html; charset="us-ascii"

enregistrez votre fichier en mymail.html par exemple.
Utilisez sendmail pour l’envoyer:

sendmail address@example.com 

Sous Mac, Ouvrez votre fichier html avec safari, faites fichier, envoyer par email et utilisez mail pour l'envoyer!