IE10:page-break-inside vs print

J’ai développé une application web de gestion des évaluations du personnel. Ceux-ci impriment leur évaluation, et dans toutes grandes entreprises, il n’y a pas un type de poste mais autant que d’employé 🙂 , surtout quand ils accèdent depuis l’extérieur.

J’ai opté pour Bootstrap sur un Zend Framework 2 et une impression naturelle de la page web plutôt que de générer un PDF. Pourquoi faire 2 fois le travail quand il suffit d’un peu de CSS :).

C’est là qu’on me dit que rien ne va quand on imprime, que le nombre de pages est infini, etc. L’utilisateur dans sa splendeur 🙂 rien ne va mais tout va SAUF l’impression sous Windows 8.0 et IE10.

Après une recherche dichotomique pour isoler le méchant code, voici le meurtrieur de navigateur avec sa solution, hop tout en un.

.container .tab-pane {
    page-break-after: always;
    page-break-inside: avoid;
}
.ie10 .container .tab-pane {
    page-break-inside: auto;
}

Le page-break-inside, qui date de IE8 en terme de support, a une belle régression ici et ne s’y retrouve plus, générant ainsi une infinité de page, pète la mémoire et fin de l’histoire, ça ne sort jamais.

Il vous faudra également un petit JS trouvé sur le net qui aidera à la détection de IE10 qui ne peut plus se faire avec les commentaires conditionnés (<!–[if lt IE 9]><![endif]–>).

if (/*@cc_on!@*/false && document.documentMode === 10) {
    document.documentElement.className+=' ie10';
}

Source : http://www.impressivewebs.com/ie10-css-hacks/

Remettre la propriété en auto lui permettra de reprendre ses esprits et de faire son impression.

[jQuery] Self clic & child force click

$('.category-blocs li').click(function(e){
    if (!$(e.target).is('a')) {
        $(this).find('a')[0].click();
    }
}).addClass('clickable');

L’idée est une liste avec du contenu, contenant un lien, et on veut que tout le <li> soit clickable. Hors on ne mettra pas des éléments bloc dans notre lien <a>.

Une solution javascript serait de dire au <li>, lors du click, de chercher l’enfant <a> (considéré seul ici, ou le premier trouvé) et de forcer le click de ce lien.

Too much recursion

Premier problème, ça boucle sur lui même et pète. Un effet de propagation (bubbling) que l’on échappe grâce à un test sur le target.

http://stackoverflow.com/questions/5967923/jquery-trigger-click-gives-too-much-recursion

Force click

Si vous targetez directement l’événement du lien comme ceci :

$(this).find('a').click();

cela ne donnera rien, vous devez prendre l’élément du DOM et non l’objet jQuery.

http://stackoverflow.com/questions/5838241/jquery-force-click-href

OVH, GMail et l’envoie de mail

Prenons le cas où vous avez votre domaine, vous configurez un compte mail et le raccordez à un compte GMail pour plus de facilité. Classique.

D’un autre côté vous avez votre serveur et vous envoyez des mails avec le même compte mail.

Et bim, vous voilà avec un compte bloqué !

OVH sécurise vos comptes mails en surveillant la provenance de connexion. GMail est en Amérique et votre VPS (par exemple) en France, du coup, en même temps vous êtes connecté à 2 endroits = piratage de compte détecté.

Une fois que ça vous arrive, ils vous suffit de déclarer un incident chez OVH et de leur expliquer la situation. Ainsi, plus de soucis.

Évidemment, cela n’arrive que dans le cas où votre GMail rapatrie ou envoie des mails pendant que votre serveur effectue également un envoie de mail. Mais c’est toujours bon à savoir.

Notez que pour débloquer votre compte il vous faudra vous rendre dans votre manager et saisir un nouveau mot de passe (ou le même). 5 à 10 minutes plus tard le statu sera revenu à la normal.

PHPMailer sur OVH en SMTP/POP3

Suite au fait que les emails envoyés par certains de mes sites ne sont plus reçus, j’ai cherché et trouvé une solution qui fonctionne conformément à mes attentes.

Contexte : VPS sur OVH, domaine OVH qui pointe vers ce VPS.

Première chose, j’utilisais déjà PHPMailer, une version précédente et domaine configuré pour SPF et DKIM. Donc mise à jour vers la source github de PHPMailer.

OVH n’est pas clair dans sa documentation quand vous en trouvez une qui est cohérente avec le reste et à jour. Basez vous sur le mail reçus lorsque vous créez votre compte. Le mail vous donne les ports et adresses à utiliser ainsi que l’indication très importante : connexion POP3 avant SMTP.

Par bonheur, la doc de PHPMailer fourni un exemple complet en ce sens.

//Authenticate via POP3.
//After this you should be allowed to submit messages over SMTP for a while.
//Only applies if your host supports POP-before-SMTP.
$pop = POP3::popBeforeSmtp('pop3.example.com', 110, 30, 'username', 'password', 1);

//Create a new PHPMailer instance
//Passing true to the constructor enables the use of exceptions for error handling
$mail = new PHPMailer(true);
try {
    $mail->isSMTP();
    //Enable SMTP debugging
    // 0 = off (for production use)
    // 1 = client messages
    // 2 = client and server messages
    $mail->SMTPDebug = 2;
    //Ask for HTML-friendly debug output
    $mail->Debugoutput = 'html';
    //Set the hostname of the mail server
    $mail->Host = "mail.example.com";
    //Set the SMTP port number - likely to be 25, 465 or 587
    $mail->Port = 25;
    //Whether to use SMTP authentication
    $mail->SMTPAuth = false;
    //Set who the message is to be sent from
    $mail->setFrom('from@example.com', 'First Last');
    //Set an alternative reply-to address
    $mail->addReplyTo('replyto@example.com', 'First Last');
    //Set who the message is to be sent to
    $mail->addAddress('whoto@example.com', 'John Doe');
    //Set the subject line
    $mail->Subject = 'PHPMailer POP-before-SMTP test';
    //Read an HTML message body from an external file, convert referenced images to embedded,
    //and convert the HTML into a basic plain-text alternative body
    $mail->msgHTML(file_get_contents('contents.html'), dirname(__FILE__));
    //Replace the plain text body with one created manually
    $mail->AltBody = 'This is a plain-text message body';
    //Attach an image file
    $mail->addAttachment('images/phpmailer_mini.png');
    //send the message
    //Note that we don't need check the response from this because it will throw an exception if it has trouble
    $mail->send();
    echo "Message sent!";
} catch (phpmailerException $e) {
    echo $e->errorMessage(); //Pretty error messages from PHPMailer
} catch (Exception $e) {
    echo $e->getMessage(); //Boring error messages from anything else!
}

Il vous suffit de mettre les valeurs qui vous sont transmise et … ça n’ira pas encore.

Il va vous falloir vous connecter également à SMTP.

//Whether to use SMTP authentication
$mail->SMTPAuth = true;
//Username to use for SMTP authentication
$mail->Username = "yourname@example.com";
//Password to use for SMTP authentication
$mail->Password = "yourpassword";

Il vous suffit de modifier SMTPAuth de false à true et d’ajouter les 2 lignes et c’est fini !

Badawok

Note à ceux qui utilisent le framework badawok (v7 dans mon cas), vous aurez un conflit entre votre classe mailer et base_mailer car badawok utilise déjà un PHPMailer.

Supprimez l’extend de la classe base_mailer et ajouter les require_once des classes : phpmailer, smtp et pop3. Créez un répertoire vendor dans votre projet pour y mettre proprement les 3 classes de PHPMailer et le tour sera facilement joué.

La v7 étant uniquement patchée pour le moment, cette modification ne sera pas répercutée.

Badawok 7.1 & dev.Comitards

Pendant un temps, une hésitation fût, au sujet d’un passage vers GIT, tenté avec succès puis au sujet de rester là où on a commencé, sur SVN, que nous avons finalement gardé. Ceci à titre anecdotique. Une des raisons majeure est la simplicité d’un système connu et qui convient ainsi que la bonne intégration dans notre univers de développement.

Badawok 7.1 a été corrigé en passant sur dev.Comitards à titre de test. Les deux ont ainsi pu être restauré, testé et fonctionnel.

Il ne restait que 2-3 broutilles qui ont été vite réglées, tout va donc pour le mieux.

Comitards pourra désormais tirer partie des nouveautés et Badawok, profitant de l’expérience, pourra évoluer.

Comitards 2 + Badawok

Nous en parlions fin janvier, un projet utilise la dernière version de Badawok, il s’agit de www.comitards.be 2.0. Il se porte comme un charme !

Cela a notamment aidé aux divers affinage du code et correction de bugs.

Il est donc fonctionnel, MAIS ne sera pas releasé en l’état tant que la seconde partie, l’édition en direct, ne sera pas finie. Cela laisserait trop de crasse, code non fini et ne serait pas correcte.

Le travail continue, un peu au ralenti mais en bonne voie !

Comitards 2 – lancement

Comitards 2 a été lancé le 17 mars vers 22h-23h après 27h de boulot en 2 jours pour finir, débugger et migrer de la 1 à la 2.

Le samedi alors que nous annoncions déjà depuis un moment la sortie du site en date du 18 (St Torè) le premier pique de visite ‘pointe’ le bout de son nez avec +1500 vues et 900 le lendemain, puis plus rien pendant 3 jours… FAUX le script de stats n’avait pas été réactivé dans la conf…

Le pique du jeudi (après le St Torè) nous a laissé un indice, soit +1200 vues puis +1500 à nouveau le lendemain.

En même temps la 2.0.4 est sortie corrigeant les quelques petits bugs urgents.

C’est le samedi 6, quand nous avons lancé la newsletter, après avoir ajouté quelques fonctionnalités de modérations et du contenu, que le gros pique a explosé les stats avec +4000 vues pendant 2 jours (pour un nombre de visiteurs unique grandissant).

Et va savoir pourquoi mais lundi 15 bam repique de +2400 vues, sans raison apparente, ah ben si, les mails qui s’ouvrent après coup et boom seconde vague ! Le reste du temps, moyenne agréable de quelques centaines de pages vue et dizaines de visiteurs uniques, pour un site occasionnel… 🙂

Mais comitards 2, il change quoi ?

En gros la base de données a été refondue, et on a coupé 1/3 des tables refondues en un système unifié, plus flexible.

Le design a lui aussi été complètement réécrit, ainsi que les interfaces et la manière d’interagir.

Le contenu a été complété encore et encore et de nouveaux types de contenus ont été introduit comme les autocollants, les guerres, …

Un long travail, jamais fini, mais qui en cet état représente une belle évolution de sa version précédente.

Cela n’a pas été facile mais pour ceux qui nous ont envoyé (à Sophie et moi) des mails de contribution et même des remerciements, ça me fait plaisir de l’avoir fait. Aux autres qui râlent sans prendre la mesure, même si on traite leur demande, on a juste envie des les envoyer au diable avec leçons de politesse, de comprendre qu’il ne paye pas et que quelqu’un derrière fait nuit blanche pour eux…

Le lancement ne c’est pas fait que sur internet.

Effectivement nous avons pris part à la St Torè (Liège) et distribué des centaines de flyers et autocollants de penne en guise de campagne promotionnelle. Merci à ceux qui nous ont aidé !

Là tout de suite Comitards 2.0.4 c’est 1928 inscrits, 267 groupes folkloriques pour 4 pays et 6 traductions.

Ce n’est pas fini 🙂

724_g

Comitards 2.0 – phase 2 et 3

Ça y est j’ai trouvé le temps ! Impossible avant avec une maison à finir, emménager etc… mais voilà ça y est j’ai trouvé du temps !

La phase 2 est terminée dans son idée originale. La DB est fonctionnelle selon la nouvelle idée. Certaines observations me font penser que d’autre tables vont sauter, comme la correction de penne selon option d’étude.

La phase 3 est en cours, j’ai placé un autocomplete pour supprimer les formulaire rébarbatif d’encodage d’études, titres et oripeaux.

Le tout en plus ou moins 30 heures de boulot en 3 jours. La suite est planifiée, y a encore pas mal de boulot et je ne vous parle même pas d’encodage supplémentaire.

Dans un premier temps on va finir le profil, aménager le générateur de couvre chef, je pense qu’une réfection en objet serait la bonne chose à faire avec héritage et cas particulier au lieu de conditions internes un peu sauvage.

Un gros travail sur la protection des données serait le point suivant avec la finition de la DB et d’un fallback de langue.

On terminera par un grand coup de peinture (CSS) pour le côté neuf moderne.

Sans oublier les nouvelles fonctionnalités, les encodages, les outils de modération de groupes folklorique, …

Seul ce n’est pas facile mais on va y arriver ! 🙂

Comitards 2.0

On est au w-e de deadline et Comitards v2.0 n’est pas prêt comme il devrait. Il y a eu des imprévus, beaucoup, et des soucis, qui ont été réglés. Cependant, la phase 1 est clôturée.

Il s’agissait de faire passer Comitards sous le nouveau framework badawok 7, toujours en développement. Ce dimanche aura été le rush des derniers tests et débogages et on y est, ce soir, Comitards ronronne.

Il se peut qu’on ai oublié un cas ou l’autre, on est jamais à l’abri, mais le site fonctionne comme il doit, comme il l’a fait jusqu’à présent.

La phase 2 consiste à transformer la base de données vers sa nouvelle formules et faire l’équivalent des fonctionnalités.

Ensuite la phase 3 intègrera les nouveautés et modifications attendues (fonctionnelles), et peut-être un coup de neuf sur le design. Bien sur une mise à jours des dépendances avec upgrade du code est également prévu.

Comitards.be lancé !

Ça y est, c’est fait ! Le site comitards.be a été lancé ce mercredi 24 novembre lors de sa soirée de lancement qui se déroulait à L’Imprévu.

En arrivant chaque comité recevait un pack contenant un dossier de presse résumant la présentation et des flyers pour le comité. Chaque personne recevait également un flyers et un autocollant.

Les comitards sont arrivés, merci Adelein pour les cotillons 😉 et Aurélien et Jérémie pour leur feux de Bengale.

Une fois tout le monde assis, activation en direct du site et début de la présentation, suivis par une démo et les questions.

Enfin, on dégage un peu les chaises et le bar que tenait la Famille du Band Bleu proposait de finir la soirée par une guindaille de circonstance.

Le Petit Torè a fait un interview, article prévu pour février !

La soirée s’est très bien passée, un publique attentif et intéressés, une bonne ambiance, que du bonheur.

Les photos sont disponibles sur le site de la Famille du Band Bleu : http://famille.bandbleu.be/photos/fbb/cat%C3%A9gorie/36#titre

Lendemain, outre un mal de crâne réglementaire : des mails, et pas qu’un peu ! Des félicitations, remerciements, encouragement, des informations à ajouter, des erreurs à corriger, des propositions d’aide.

Mais aussi des chiffres. En un peu plus de 24h, il y a déjà +200 inscrits, +1000 visites et +24000 pages vues !!!

Un lancement rassurant, prometteur et très bien accueilli.