Sam & Max » html http://sametmax.com Du code, du cul Sat, 07 Nov 2015 10:56:13 +0000 en-US hourly 1 http://wordpress.org/?v=4.1 Un petit goût de meteor.js en Python 30 http://sametmax.com/un-petit-gout-de-meteor-js-en-python/ http://sametmax.com/un-petit-gout-de-meteor-js-en-python/#comments Thu, 06 Mar 2014 10:37:34 +0000 http://sametmax.com/?p=9703 WAMP. Il existe du coup des implémentations du protocole en plusieurs langages, donc une en Python avec autobahn.]]> Je n’ai jamais caché ma jalousie envers les codeurs Javascript sous meteor.js. C’est à mon sens la techno la plus révolutionnaire en matière de dev Web depuis l’invention des frameworks HTTP.

Ca permet notamment de faire du PUB/SUB entre le navigateur et le serveur. C’est à dire qu’un navigateur déclenche un événement, le serveur le reçoit, et tous les browsers abonnés le reçoivent aussi. Du coup, on modifie une page, toutes les autres pages sont modifiées en temps réel.

Dommage que ce soit codé dans un langage pourri.

Heureusement depuis quelques temps, un standard est en train d’émerger autour du RPC et PUB/SUB entre navigateurs et serveurs : WAMP. Il existe du coup des implémentations du protocole en plusieurs langages, donc une en Python avec autobahn.

Ca s’utilise ainsi : pip install autobahn.

Puis, un petit coup de Python :

import sys
 
from twisted.python import log
from twisted.internet import reactor
 
from autobahn.twisted.websocket import listenWS
 
from autobahn.wamp1.protocol import WampServerFactory, WampServerProtocol
 
 
class MyPubSubServerProtocol(WampServerProtocol):
    def onSessionOpen(self):
        # On choisit un namespace pour enregistrer ses events PUB/SUB
        self.registerForPubSub("http://example.com/events/bam")
 
if __name__ == '__main__':
   # on lance notre serveur avec moult verbosité
   log.startLogging(sys.stdout)
   wampFactory = WampServerFactory("ws://127.0.0.1:9000", debugWamp=True)
   wampFactory.protocol = MyPubSubServerProtocol
   listenWS(wampFactory)
   reactor.run()

On lance le serveur directement :

python votre_script.py

Côté client (pas besoin de serveur, on peut l’ouvrir dans le browser cash pistache) :

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://raw.github.com/tavendo/AutobahnPython/master/examples/twisted/wamp1/pubsub/simple/example1/autobahn.min.js"></script>
    <script type="text/javascript">
 
    $(function(){
        ab.connect("ws://localhost:9000", function(session) {
 
            $('#foo').click(function(){
                // au clic sur le bouton, on envoit un evenement BAM
                session.publish('http://example.com/events/bam', ['bam']);
 
                // On ajoute bam à la liste en local car le publisher ne
                // reçoit pas ses propres events
                $('#doh').append('<li>bam</li>');
            });
 
            session.subscribe('http://example.com/events/bam', function(topic, evt){
                // on s'inscrit pour recevoir l'event quand il est
                // déclenché. Ceci marchera dans tout autre tab que celui
                // qui a déclenché l'event
                $('#doh').append('<li>bam</li>');
            });
        })
 
    });
 
    </script>
 
</head>
 
<body>
 
<!-- Notre liste qui va se remplir de bam ! -->
<ul id="doh"></ul>
<button id="foo" value="Bam">Bam</button>
 
</body>
</html>

Ce qui ce passe, c’est que quand j’appuie sur le bouton “Bam”, ça envoit un événement Bam au serveur via Websocket, qui propage l’événement à tous les clients. Donc tous les tabs ouverts sur cette page récupèrent l’événement et peuvent y réagir. Ici, les deux pages sont mises à jour en simultané.

Mise à jour de deux pages web en simultané avec autobahn

Chez moi ça marche

Bien entendu, ceci est un exemple très basique fait pour vous donner un avant goût de la techno. D’ailleurs, meteor.js, c’est bien plus que du PUB/SUB. Il y a de la gestion de la deco, la synchro de la base côté client, le hot push de code, etc. Ils ont fait un vrai travail de fond sur les problématiques concrètes.

Donc on en est encore loin, surtout que même leur techno est toujours expérimentale. Mais on a enfin de quoi rattraper le temps perdu. Et avec asyncio, îl n’y aura même pas besoin de dépendre de twisted pour ce faire. 2014 va être trop fun !

]]> http://sametmax.com/un-petit-gout-de-meteor-js-en-python/feed/ 30 Preprocesser ses fichiers statiques et recharger son navigateur automatiquement avec Python livereload 6 http://sametmax.com/preprocesser-ses-fichiers-statiques-et-recharger-son-navigateur-automatiquement-avec-python-livereload/ http://sametmax.com/preprocesser-ses-fichiers-statiques-et-recharger-son-navigateur-automatiquement-avec-python-livereload/#comments Sun, 10 Nov 2013 06:47:39 +0000 http://sametmax.com/?p=7698 Livereload est une extension multi-navigateur qui permet de recharger tout ou partie d’une page quand un fichier a changé sur le disque.

C’est très pratique pour développer un site Web puisque si vous modifiez un template, un fichier JavaScript, une image ou un fichier CSS, vous n’avez pas besoin de cliquer sur la fenêtre du navigateur et appuyez sur F5 pour voir le résultat. Si vous avez un double écran (et si vous faites du dev Web, vous devriez), vous ne quittez pas votre éditeur de code.

L’extension est gratuite, mais le serveur existe en plusieurs version. Il y a une version graphique pour Windows et Mac qui est payante. Si vous avez un peu de budget et pas envie de vous prendre la tête, achetez là et arrêtez la lecture de l’article, c’est beaucoup plus facile.

Sinon, suivez le guide pour la version gratos en ligne de commande.

Installation

Il existe une version Python en ligne de commande du serveur : Python livereload. Il y a aussi une version pour les rubistes.

Je vous invite donc à l’installer avec pip:

pip install livereload

Il vous faudra aussi l’extension de navigateur.

Après, depuis votre terminal, mettez vous dans le dossier que vous voulez surveiller (par exemple le dossier contenant vos fichiers CSS), et lancez le serveur :

livereload

Et activez l’extension pour la page que vous voulez recharger automatiquement. Normalement, c’est juste un clic sur un bouton.

C’est bon, votre page devrait recharger automatiquement.

Rechargement à la carte

On peut choisir ce qu’on va recharger plus précisément en créant un fichier de configuration.

Créez un fichier de code Python nommé “Guardfile”, sans l’extension “.py”. Il va ressembler à ceci :

#!/usr/bin/env python
# -*- coding: utf-8 -*-
 
from livereload.task import Task
 
# watcher les js ou les css
Task.add('chemin/relatif/vers/fichier/a/surveiller.css')
Task.add('chemin/relatif/vers/fichier/a/surveiller.js')
 
# watcher les images ou les templates
Task.add('chemin/relatif/vers/dossier/a/surveiller')

Et lancez la commande livereload en étant dans le même dossier que ce fichier. Notez que le serveur ne parse ce fichier que quand l’extension est activée et que vous avez visité la page au moins une fois.

On peut même demander d’effectuer des tâches avant le rechargement de la page. Cela peut être des tâches complètement arbitraires, mais des raccourcis existent pour les tâches les plus courantes, telle que minifier du JS ou compiler un pre-processeur CSS.

Par exemple, j’utilise cette fonctionnalité pour compiler mes fichiers LESS CSS à chaque modification.

Pour cela, il faut installer le compilateur LESS. Sous Ubuntu, ça se fait en deux coups de cuillère à pot :

sudo apt-get install npm
sudo npm install -g less

Et dans le Guardfile, il faut ajouter un code du style :

from livereload.task import Task
from livereload.compiler import lessc
 
Task.add('../apps/core/static/less/boostrap/boostrap.less',
         lessc('../apps/core/static/less/boostrap/boostrap.less',
               '../apps/core/static/css/boostrap.css'))

Il y a un a tas d’options donc checkez la doc, mais aussi le code source car la doc n’est pas exhaustive.

]]> http://sametmax.com/preprocesser-ses-fichiers-statiques-et-recharger-son-navigateur-automatiquement-avec-python-livereload/feed/ 6 Dites non aux animations 3D 15 http://sametmax.com/dites-non-aux-animations-3d/ http://sametmax.com/dites-non-aux-animations-3d/#comments Mon, 14 Oct 2013 16:07:48 +0000 http://sametmax.com/?p=7435 Juste parce que vous pouvez ne veut pas dire que vous devez, et le fait que maintenant la plupart des navigateurs supportent des belles transitions 3D ne signifie certainement PAS que vous devriez les utiliser.

En ergonomie, une règle essentielle est de ne pas mettre ou faire de choses qui n’ont pas de valeur ajoutée pour l’utilisateur.

L’esthétique est certes, en soi, une valeur ajoutée. Mais il faut considérer deux choses :

  • Cette technique apporte-t-elle une valeur esthétique qui n’est pas remplaçable par le bénéfice d’une autre technique ?
  • Le bénéfice que mon utilisateur en retire compense-t-il les inconvénients auxquels il est confronté ?

Pour les animations 3D, la réponse est clairement NON, dans 99% des cas.

D’abord, généralement l’animation est lente, ne serait-ce que pour que le mec devant son écran puisse la voir. Vu le temps qu’on passe à se faire chier à rendre une app plus rapide et fluide à utiliser, pourquoi voulez-vous, VOLONTAIREMENT et ARTIFICIELLEMENT faire patienter votre utilisateur 400ms de plus devant le slide à cube rotatif pour voir la photo suivante ?

Ensuite, malgré l’énorme progrès de nos navigateurs, ça bouffe beaucoup de ressources. Bien sûr, quand vous testez sur votre machine quad core avec chrome et un tab ouvert, c’est parfaitement fluide. Mais il suffit de jouer sur seul de ces paramètres pour que ça ne le soit plus :

  • 20 tabs sont ouverts.
  • Un autre tab utilise Javascript comme un goret (Hello Twitter !).
  • Un autre tab utilise de la 3D.
  • Un autre tab charge beaucoup d’images.
  • Un autre tab utilise flash.
  • L’utilisateur a des logiciels récents sur une vieille machine.
  • L’utilisateur utilise d’autres logiciels que son navigateur qui sollicitent la carte graphique (quelle honte, il ose avoir une vie en dehors de facebook et votre site de merde!).

Dans la vraie vie vivante, ce sont plusieurs de ces paramètres qui rentrent en compte, presque systématiquement. Et je ne vais même pas vous parler de ceux qui utilisent IE avec plein de toolbar sur une machine infectée jusqu’à la moelle. Qui sont, je le rappelle, la majorité des personnes dans le monde. Pas forcément la majorité de votre cible, mais tout de même…

…vous êtes une putain de page Web, vous ne pouvez pas pré-supposer de ce que l’utilisateur fait et dans quel contexte.

Bref, à moins d’avoir une app avec une connotation visuelle primordiale, par exemple un jeu vidéo, arrêtez avec ces foutues transitions 3D, ça rend votre app inutilisable. Les transitions 2D suffisent largement à améliorer l’ergonomie et l’esthétisme d’une page, et elles bouffent beaucoup moins.

Merci

]]> http://sametmax.com/dites-non-aux-animations-3d/feed/ 15 Comment parser du HTML avec des Regex ? 26 http://sametmax.com/comment-parser-de-html-avec-des-regex/ http://sametmax.com/comment-parser-de-html-avec-des-regex/#comments Wed, 05 Jun 2013 18:24:09 +0000 http://sametmax.com/?p=216 Il y a longtemps que je voulais traduire cette réponse de StackOverflow, qui donne une bonne fois pour toute la réponse à cette question souvent posée.

Voici (le formatage exotique a été conservé au maximum):

Vous ne pouvez pas analyser [X]HTML avec des regex. Parce qu’HTML ne peut être analysé par des regex. Les regex sont un outil qui ne peut être utilisé pour analyser correctement du HTML. Comme je l’ai répondu dans des question HTML-et-regex ici de nombreuses fois auparavant, l’utilisation de regex ne permet pas de consommer du HTML. Les expressions rationnelles sont un outil qui n’est pas suffisamment sophistiqué pour comprendre les constructions employées par HTML. HTML n’est pas une langage rationnel, et de fait ne peut être parsé par des expressions rationnelles. Les requêtes par regex ne sont pas équipées pour diviser du HTML en parties qui ont du sens. Tant de fois, mais je ne m’en lasse pas. Même des expressions irrationnelles telles qu’utilisées par Perl en sont pas à la hauteur de la tâche que représente l’analyse de HTML. Vous ne me ferez pas céder. HTML est un langage d’une complexité telle qu’il ne peut être analysé par des expressions rationnelles. Même Chuck Norris ne peut analyser du HTML avec des expressions rationnelles. Chaque fois que vous essayez d’analyser du HTML avec des expressions rationnelles, l’enfant damné pleure du sang de vierge, et des hackers russes pown votre webapp. Analyser du HTML avec des regex invoque des âmes perdues dans le royaume des vivants. HTML et les regex vont ensemble comme l’amour, le mariage et les rituels infanticides. Le <center> ne peut tenir, il est trop tard. La force des regex et du HTML ensemble dans le même espace conceptuel détruira votre esprit comme l’humidité détruit les joints. Si vous analysez du HTML avec des regex, vous vous adonnez à Eux et leurs traditions blasphématoires qui nous condamnent tous à un labeur inhumain pour Celui dont le Nom ne peut être exprimé avec le Plan Multilingue Basique, il arrive. HTML-plus-regex liquéfiera les nerfs des êtres les plus sensibles sous vos yeux, votre psyché dépérissant sous les assauts de l’horreur. Les an̷al̵y͘s̕e͝urs ̸HT͝M͡L basés sur les regex sont le cancer qui tue StackOverflow il est trop tard il est trop tard nous ne pouvons être sauvés la trangession d’un en̵f͝ant amènera les regex à consommer tout tissue vivant (excepté pour le HTML puisqu’il ne le peut, tel que prophétisé précédemment) oh seigneur aide nous comment qui que ce soit peut-il survire à cet fléau utiliser des regex pour analyser du HTML a condamné l’humanité à la terreur de la torture and aux failles de sécurité utiliser les regex comme outil pour travailler du HTML établie un brèche entre ce monde et le royaume terrifiant des entités corrompues (comme les entités SGML, mais plus corrompues) un bref regard vers le monde des analyseurs regex pour HTML transportera instantanément la conscience d’un programmeur dans un monde de cris sans fin, il arrive, la nauséabonde plaie des infections regex dévoreront votre parser HTML, votre application et votre existence pour l’éternité comme l’a fait Visual Basic mais en pire il arrive il arrive ne vous débattez pas i̢l͞ a͘rr̸i҉v̡é,̨ sa radiance damnée détruisant toute illumination, des ͠t̕a̕g͡s ̶H͞TM̵L͞ ̕c̸o͜ùlan͜t̀ de̶ vos͜ ͟y͏eưx te̷l̛s̡ de l͜a̶ ̛d͝ǫu͜lȩur҉ ͝l̡iquid͝ee, la chanson de l’analyse par expressions rationnelles reduit au silence les voix de l’homme mortel depuis la sphère je peux le voir pouvez-vous le voir c’est magnifique l’expurgation de tous les mensonges de l’Homme  TOUT EST PERDU TOUT EST PERDU le poney il arrive i͟l arrive il̸ ̕arr̴i҉ve͢ ̕l’̵ich҉or ̸p̴é͝n͘è͟t̡r͞e tout MON V̴ISA҉ĢE͘͜ M̵̢͟O̶N ͢͏V͏I̧̨S͞AG̶̕͞E̷̡̕ oh mon dieu no Ņ̵̨ON̕ ̢҉̀N̸͡͞OO͏̢͝O̶͠O̷҉N҉͝ ͡N̶͘͏O̧N͟ ́͜͡s̀͟͡t̶͟o̧͝p̧ ̕͘l̴e҉͠s ͟ań̴gl͏ę̀͏s͢͝ ͜͝n̡e͏̡ ́so҉͜nt̵̡ ͢p̧͘a̛s̀ ̸͞r͞é̕͞e̛l̸͏s̨ ̧̀ZA̷Ĺ͝GO̸ ̸E̴͜͝Ş̵̛T̴̸͠ ̨T̨̢Ó͜N͡Y̢ ̷̨̕L̀E̵͠ PONE̕Y͟ I͖̮̝̥̞͟L̴̬͈͍͞ ̞̦A̴҉͕̩͉R͎͉̯̼̹̫͈̹R̩͎̙̥̦I̶̢͓̘̗V̤̳͓͓͇̯̭̯̥͜͢͢E̹̣͚̩̯̙͡.

Avez vous essayé un parser XML à la place ?

]]> http://sametmax.com/comment-parser-de-html-avec-des-regex/feed/ 26 De l’inutilité de <dl> 16 http://sametmax.com/de-linutilite-de/ http://sametmax.com/de-linutilite-de/#comments Sat, 30 Mar 2013 18:28:01 +0000 http://sametmax.com/?p=3261 Sémantiquement c’est génial :

<dl>
<dt>Couleurs disponibles :</dt>
<dd>Bleue</dd>
<dd>Rouge</dd>
<dt>Pas de RAM</dt>
<dt>Pays : </dt>
<dd>France</dd>
<dd>Espagne</dd>
<dd>Wonderland</dd>
</dl>

On peut faire une liste avec des sortes de titres, et on sait que les éléments de la liste sont liés par leur titre.

Sauf que :

  • Les moteurs de recherche en ont rien à foutre. On a constaté aucune différence en passant de ça à un <ul> ou même une imbrication de <div>.
  • C’est impossible à styler : on ne peut pas grouper en CSS un <dt> et ses <dd>. Et les foutre dans des conteneurs rend le code invalide.
  • On ne peut pas mettre de balise block dans le <dt>. WTF ? C’est une putain de balise de titre !

Bref, la definition list est la balise la plus inutile de tous les temps. J’ai essayé de l’utiliser dans un millions de cas de figure, au final un <ul> avec un <strong> et un <span> dans le <li> ou des <div> pour les gros morceaux sont toujours plus facile à style. Les développeurs front end peuvent se mettre la sémantique au cul.

]]> http://sametmax.com/de-linutilite-de/feed/ 16 Évolution de la courbe d’apprentissage d’un dev front end 12 http://sametmax.com/evolution-de-la-courbe-dapprentissage-dun-dev-front-end/ http://sametmax.com/evolution-de-la-courbe-dapprentissage-dun-dev-front-end/#comments Mon, 07 Jan 2013 16:42:50 +0000 http://sametmax.com/?p=4029 ]]> http://sametmax.com/evolution-de-la-courbe-dapprentissage-dun-dev-front-end/feed/ 12 Echaper du HTML en Python ou avec jQuery http://sametmax.com/echaper-le-html/ http://sametmax.com/echaper-le-html/#comments Wed, 28 Nov 2012 15:02:56 +0000 http://sametmax.com/?p=3395 La question bateau du jour: mais comment transforme-t-on des tags HTML en entités HTML pour sécuriser les inputs utilisateurs qui seront affichées sur le site ?

En Python

On peut utiliser le module sax, qui a la base sert à échaper les caractères pour du XML. On va juste étendre sa table de caractères pour rajouter le simple et le double quote.

from xml.sax.saxutils import escape, unescape
 
a_echapper = {'"': "&quot;", "'": "&apos;"}
a_reconstituer = dict((value, key) for key, value in a_echapper.iteritems())
 
def echape_html(text, a_echapper=a_echapper):
    return escape(text, a_echapper)
 
def reconstitue_html(text, a_reconstituer=a_reconstituer):
    return unescape(text, a_reconstituer)

Avec jQuery

En pur JS, ce sera galère. Mais avec jQuery, c’est :

$('<div></div>').text(text_a_echaper).html();

Je ne sais pas comment on peut faire facilement l’opération inverse par contre.

]]> http://sametmax.com/echaper-le-html/feed/ 0