Warry

Présentation faite lors de l’évènement Zengularity le 9...

Thu, 17 Feb 2011 21:27:41 +0100

Présentation faite lors de l’évènement Zengularity le 9 février.

Développeurs PHP: démarrez un nouveau projet sous Java/Play!framework

Thu, 17 Feb 2011 15:11:00 +0100

Cet article est une réponse à celui de Florent Messa qui abordait l’opportunité offerte par l’arrivée de PHP 5.3, pour découvrir et adopter d’autres langages et frameworks. Il propose une comparaison entre Django, Symfony et Zend. Pour ma part je vais, sur les mêmes critères, me concentrer sur Play! Framework, bien que je ne connaisse pas ce framework sur le bout des doigts.

Play! est un framework relativement jeune en version 1.1, codé en Java et compatible avec Scala. Il a la particularité, par rapport aux autres frameworks Java, d’être complètement stateless, autoriser le rechargement à chaud (sans re-compilation), et de cibler les architectures REST. C’est en somme un RoR/Django like en Java. Et cocorico, il est français, initié et maintenu par Guillaume Bort et la communauté.

notes:

Dans Play! les modules sont eux-même des applications Play! Ils s’installent à l’aide de la commande “play install module-name-version”
Les Samples sont disponibles dans le répertoire samples-and-test de Play! et sont des exemples des fonctionnalités les plus répandues à travers des exemples concrets (blog, forum, jobboard…).

Fonctionnalités

Comme Florent, je vais détailler l’utilisation de fonctionnalités dans Play!Framework, en réponse à des besoins très basiques, voire récurrents.

1. La gestion de mots clés (tags)

Besoin : taguer n’importe quel type de ressources : article, commentaire, lien, vidéo, etc.

Il n’existe pas de module Play! pour les tags, mais il est extrêmement simple de le créer grâce aux annotations JPA. D’ailleurs, une implémentation est disponible dans les samples de Play! (celui de Yabe plus précisément).

2. Recherche full-text

Besoin : effectuer une recherche sur l’ensemble du contenu et des ressources de l’application.

Le module Search permet de faire de la recherche full texte en base. Et ce module permet de s’interconnecter avec Solr.

3. Gestion des utilisateurs

Besoin : offrir un système complet d’authentification (connexion, déconnexion, validation du compte utilisateur, récupération du mot de passe, etc.), de gestion de groupes d’utilisateurs et de permission.

Il y a l’application Deadbold sur Github, ainsi que certains samples (Yabe, Jobbard…) qui démontrent différentes interprétations de l’authentification. Il y a d’autres exemples, l’authentification est un thème récurrent.

4. Interconnexion avec d’autres plateformes sociales

Besoin : se connecter via des applications tierces et pouvoir partager des liens vers celles-ci.

L’authentification HTTP (pratique pour bootstraper un projet) et OpenID sont build-in. Il existe également plusieurs module pour l’authentification dont OAuth, Facebook connect et un sample pour Facebook.

5. Ajouter des commentaires

Besoin : commenter n’importe quel type de ressource (article, vidéo, etc.) et modérer

Idem que pour les tags, démontré dans le sample Yabe.

6. Gestion d’avatars

Besoin : permettre à l’utilisateur de télécharger un avatar personnel afin de l’affecter à son compte ou utiliser un système décentralisé comme Gravatar.

Non développé, mais la manipulation des images est simple et expliquée dans cet article. Pour Gravatar il y a ce module qui existe déjà.

Spécificités pour les développeurs

1. Intégration des tests unitaires et tests fonctionnels

Besoin : tester toute l’application afin de rajouter des fonctionnalités sans pour autant avoir peur de casser l’existant.

Les tests unitaires et fonctionnels sont accessibles (build-in) via la commande “play test”, et utilisent JUnit. A noter également la possibilité de faire tourner des tests selenium dans votre browser (en mode DEV: mon-site/@test), et affiche en temps réel les echecs et réussites.

2. Héritage dans les templates (template inheritance)

Besoin : définir un template de base que l’on va hériter comme dans un contexte de programmation orientée objet. Ainsi, on affecte à son template des blocks qui peuvent être surchargés dans les templates enfants. Grâce à cette fonctionnalité, les intégrateurs peuvent préparer plusieurs templates de base pour hiérarchiser leurs layouts.

Le moteur de templates par défaut ressemble assez à celui de Django et bénéficie de l’héritage. Il existe d’autre moteurs que vous pouvez découvrir (Mustache, basé sur le moteur Javascript du même nom, ou Scalate en scala).

3. Minification automatique des fichiers statiques (CSS/JS) sur un serveur tiers dédié

Besoin : compresser des fichiers statiques afin de réduire les requêtes HTTP et diminuer le temps de chargement de la page, les télécharger à la volée sur un serveur tiers dédié à cet usage afin de ne pas surcharger le serveur web principal et offrir une réactivité plus importante côté client (performance).

Fonctionnalités offertes par le module greenscript, bien qu’il ne semble pas y avoir la fonctionnalité de l’hébergement sur un serveur tiers, mais seulement la minification.

Courbe d’apprentissage

Dans le contexte d’un switch d’un langage ou framework vers un autre, la courbe d’apprentissage est un critère primordial, et certainement la plus grosse barrière pour une adoption massive de Python ou Ruby.

Points positifs :

Play! est en Java, donc la syntaxe est extrêmement simple et connue, basé sur C++ donc proche de PHP, avec un modèle objet également assez proche. Il est aussi compatible Scala pour ceux qui préfèrent les langages plus fonctionnels. Pour ceux qui ne connaissent pas, Scala est un langage qui est compatible avec la JVM, mais qui ressemble beaucoup plus à Ruby à la fois dans la syntaxe et dans la philosophie.

La philosophie même du framework tend vers un maximum de simplicité (peu de configuration), et de souplesse (tout est facultatif, sauf les controlleurs). Par exemple, tout fonctionne out-of-the box, et le déploiement se fait aussi simplement qu’en PHP, directement avec le serveur Apache Mina intégré à Play.

Play! est full MVC et a été conçu pour faire du vrai Web (REST, XHR, WebSockets…), et très orienté mashups.

Play! utilise par défaut Hibernate et JPA pour la persistance des données. Doctrine utilisant les annotations JPA, si vous connaissez Doctrine: vous connaissez Play!. J’ajouterai que c’est même plus simple puisque tous les setter/getter sont facultatifs.

Play! permet le rechargement à chaud des pages en mode DEV, mais est compilé en mode PROD. Cela a pour conséquences des performances significatives, si l’on compare avec PHP par exemple.

Play! est compatible avec pratiquement toutes les librairies Java existantes. En fait c’est même l’essence du framework qui est principalement utilisé dans un monde Java (déployé dans des banques et assurances), il bénéficie en outre de la solidité de la JVM. J’ajouterais que ce framework est jeune, mais est une compilation de plusieurs librairies très éprouvées (Hibernate, Sienna, Apache Mina…). Play! ne sort pas de nul part. Il est même possible d’exporter votre application dans un war si vous avez un Tomcat (serveur Java classique à papa), mais vous perdrez de l’intérêt du stateless.

Point négatifs :

Le framework est jeune, et la communauté, bien que grandissante, ne vaut pas celle d’un Django ou Symfony, et la documentation, comme les tutoriaux, ne sont pas abondants. De même que les modules ne sont pas très nombreux.

Le langage Java, fait fuir autant qu’il attire. Or Play! utilise Java, est compatible Java, mais n’a rien à voir avec les autres frameworks Java ! Par exemple, l’utilisation d’un IDE est complètement facultative dans Play!. C’est un positionnement qui potentiellement peut plaire au gens de Java, comme au gens pures web, mais aussi le contraire.

L’interrogation concernant l’acquisition de Java par Oracle ? Quel avenir pour Java ?Bien que Play! fonctionne aussi très bien avec OpenJDK.

Les plateformes d’hébergement ne sont pas aussi répandues que celles pour PHP. A noter l’initiative de PlayApps qui permet de déployer ses applications avec la commande “play playapps:deploy”.

Conclusion

En conclusion, Play! est certainement le framework le plus simple d’accès, et d’apprentissage parmi tous ceux que j’ai pu tester, tout en permettant d’aller très loin. Il n’y a pas un gros socle de connaissance à obtenir (ex: connaître des dizaines de lignes commande pour générer une table…), tout se fait assez naturellement. Ceux qui viendront exclusivement de PHP auront principalement à s’approprier le langage plus que le framework (ex: nouveaux types pour les collections, pas seulement des array…).

Enfin, je pense que Play! vaut largement le coup si l’on vient de PHP (Zend, Symfony, Ci…) ou du Java à papa (Spring, JBoss…), mais est-ce le cas si l’on vient de Django ou Rails ? Probablement pas. Les langages et la philosophie font que l’on rentre dans ces frameworks comme l’on rentre en religion, source de nombreux trolls. Mais au delà de cela, il y a des choses dans Play! qui pourront frustrer les développeurs qui viennent de Django ou RoR (ex: CRUD moins puissant que dans Django). Si je ne m’étais pas spécialisé dans le développement FRONT-SIDE, j’hésiterai probablement entre Play! et Django.

Voilà, je vous laisse regarder la vidéo d’intro sur le site de Play! qui montre assez bien l’esprit du framework : Vidéo

Développer des WebApps sur iPhone - Etape 2

Sun, 18 Jul 2010 15:23:00 +0200

Wah ! Du temps s’est écoulé depuis notre première étape du tutoriel développer des webapps sur iphone ! Je vous avais promis une application pour l’exemple, et bien nous allons développer une webapp pour Twitter ! C’est du déjà vu mais cela reste un bon exemple.

Toutes les fonctionnalités ne seront pas implémentées : nous allons nous limiter à l’affichage des twitt’s, la composition de nouveaux statuts, la recherche par mot clef, et l’affichage des messages privés. Le résultat final (pour les pressés) est ici.

Pour l’étape 2, nous allons intégrer une application en HTML5/CSS3 et découvrir les nouveaux sélecteurs, les dégradés, les animations… En prenant soin de ne pas y ajouter une seule ligne de Javascript pour le moment. Voici les maquettes que nous allons intégrer :

Pour information, la taille des applications iphone sont 320x460 en mode portrait (480x300 en paysage) soit la résolution de l’iphone moins les 20 pixels de la barre de statut.

1. Le HTML

La structure est la même que pour un site web, avec un doctype HTML5 :



	
		Hotwitt'

On y ajoute également les meta-tags que nous avions vu la dernière fois dans le :

Pour palier au fait que position:fixed n’existe pas sur l’iPhone, on doit procéder comme si on devait utiliser une div avec un overflow:auto, avec un “wrapper” (enveloppe en français) et un “groupe de pages” :

Je place la balise du formulaire d’ajout avant ce wrapper afin de pouvoir le faire apparaitre au-dessus avec un comportement indépendant :

A propos des formulaires justement, il y a de nouveaux attributs disponibles pour les balises input (entre autres), comme le placeholder qui permet d’afficher une valeur par défaut aux champs. La liste de toutes ces nouveautés est disponible ici .

Pour le champ de recherche j’utilise un champ de type “search” et pour le compte un champ type “email” avec l’auto-capitalisation et la correction orthographique désactivés :

Pour afficher chaque twitt j’utilise des listes de définitions, parce que c’est ma lubie, mais vous pouvez utiliser ce que vous voulez. La balise est également mise à contribution pour afficher les dates :


	somebody
	5 minutes ago
	lorem ipsum dolor sit amet consectetuer

On crée le menu à l’aide de la balise nav (qui se comporte comme ul/ol)…


	Timeline
	Compose
	Messages
	Search
	Account

Et c’est fini pour le HTML (résultat ici) ! C’est pas bien sorcier, donc on ne s’y attarde pas. Si vous avez besoin de précisions je vous invite à lire, si ce n’est pas déjà le cas, la première étape de ce tutoriel et la documentation officielle.

2. Les CSS

Là on va jouer ! Je ne vais pas tout détailler mais uniquement parler des CSS3, on va partir d’une feuille de style CSS2 classique et basique dont vous pouvez admirer la beauté ici, et ajouter les modifications.

La première chose que je fais c’est empêcher la sélection de texte intempestive par l’utilisateur, et masquer les zone active lors du touch :

body {
	-webkit-user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

Ensuite, il faut modifier la balise #wrapper afin que le scroll se fasse avec overflow:auto, du coup sur iPhone il sera impossible de défiler en attendant le javascript. -webkit-box-sizing:border-box permet de modifier le box model pour que le width et le height inclusent le padding et le border, et ainsi pouvoir mettre un height 100%. En vérité c’est un attribut CSS2, mais associé aux CSS3 (détails) :

#wrapper {
	...
	overflow: auto;
	-webkit-box-sizing: border-box;
	border-bottom: 43px solid transparent;
}

Mettons maintenant en forme le menu à l’aide des masques CSS. Il suffit de créer un png où les zones transparentes sont cachées, et cela nous permet d’avoir des icônes de toutes les couleurs en utilisant qu’une image par icône (en changeant les background), et ils s’utilisent pratiquement comme les background :

nav a {
	...
	text-indent: -999em;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
}
nav a[href="#timeline"] {
	-webkit-mask-image: url('images/twitts.png');
}

On répète l’opération pour toutes les icônes, et pour avoir des boutons actifs avec un look d’onglets on utilise les border-images :

nav li.active {
	-webkit-border-image: url('images/button.png') 0 5 0 5 stretch stretch;
}

On ajoute des dégradés :

nav li.active a {
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#555));
}

Ils s’utilisent en background (ou en masques) de cette façon dans webkit : -webkit-gradient([linear ou radial], [position début], [position fin], from([couleur début]), to([couleur fin]). Vous pouvez aussi ajouter des points d’arrêts, je vous laisse regarder la documentation pour en savoir plus.

Intéressons-nous au formulaire d’ajouts, en particulier le petit compteur de caractères restants car il va nous permettre d’aborder 3 sujets : les bords arrondis, les ombres des boites, et les ombres de texte :

#chars-left {
	...
	-webkit-box-shadow: 0 2px 2px #000;
	-webkit-border-bottom-left-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	text-shadow: 1px 1px 0px #fff;
}

Les ombres s’utilisent de la manière suivante (textes ou boites) : [décalage horizontal] [décalage vertical] [taille du flou] [couleur]. Il y a aussi les ombres internes (qui ne fonctionnent pas encore sur iPhone) en ajoutant le mot-clef “inset” : -webkit-box-shadow: inset -2px -2px 5px #000;

N’oubliez pas, vous pouvez utiliser les couleurs rgba, c’est à dire avec la transparence : rgba(0,0,0,.5) = noir à 50%.

Les bords arrondis sont connus, il suffit de préciser le rayon de l’arrondis : -webkit-border-radius: 3px;

Avec l’iPhone, il y a tout une partie des CSS qui s’envole, c’est tout ce qui touche au survol (hover) ! Plus gênant qu’autre chose cet attribut sur iPhone est géré basiquement (1ère tape = hover, 2ème tape = click). Mon conseil est donc de ne pas l’utiliser.

En revanche je vous recommande le pseudo-sélecteur :target afin de créer une navigation basique, en attendant le javascript. L’attribut target permet d’ajouter des styles aux div qui sont pointées dans l’url (index.html#id1 > id1 — voir le html de la navigation) :

section {
	...
	display: none;
}
section:target {
	display: block;
}

Pour se la péter un peu on fait la même chose avec le formulaire d’ajout, et on y ajoute une animation :

#compose {
	...
	-webkit-transition: top 200ms linear;
}
form:target#compose {
	top: 0;
}

Les animations en CSS3 sont simples, il suffit de préciser les attributs à animer (séparés par des virgules, ou all pour indiquer tous les attributs), la durée en millisecondes (ms) ou secondes (s), et enfin la forme de l’animation (accélération, décélaration, linéaire…), Plus d’infos ici.

Après avoir répété toutes les actions ci-dessus aux bon endroits, on obtient le résultat est disponnible ici, vous pouvez aussi y accéder avec votre iPhone. Un Github est aussi mis en place ici.

C’est tout pour aujourd’hui ! La prochaine et dernière étape concernera la couche javascript. Nous y verrons les limitations des évènements et du scroll en détail, ainsi que des trucs plus funs comme le localstorage. A bientôt !

Si vous en voulez encore voici deux petits liens :

Et pour finir en beauté comme la dernière fois, sachez que ma société Zenexity (Paris 9) est actuellement à la recherche d’un webdesigner (UI-designer & front developper) pour des applications web et web mobile. Contactez-moi pour plus d’informations.

La Farce.fr !

Sat, 17 Jul 2010 14:35:00 +0200

Le site France.fr a été présenté cette semaine, avec les déboires que l’on connait : serveur incapable de supporter la charge dans un premier temps, puis audit de sécurité par la suite… Une débandade générale, et les médias internationaux s’en donnent à cœur joie. Après l’équipe de France de foot, les affaires, l’invitation de chefs d’états africains controversés au 14 juillet… le nom de notre pays est décidément mis à rudes épreuves ces derniers temps.

Revenons au site en lui même. Dès que l’on rentre sur le site, quelque chose choque : la france est franchement coupée au Nord :

Là où c’est très choquant, c’est que lorsque l’on fait une superposition avec une carte des régions, cette image s’arrête pil-poil à la limite de la région du Nord. Bon j’avoue qu’avec leur film il m’ont bien cassé les noix mais on parle d’un site qui est censé représenter la France dans le Monde, la banière du PSG en devient moins outrageante.

Et si l’on fouille un peu, on remarque que cette image s’appelle background2.jpg, regardons alors background.jpg et bam surprise plus de Bretagne !

La belle affaire, depuis le temps que cela devait être officiel ! Je me suis donc donné à une petite interprétation de notre carte de France, en enlevant la Bretagne, le Nord, la Corse, le Pays Basque…

Vous imaginez la météo la dessus ? Moi je trouve que ça roxe ! Du coup il vous faudrait un nouveau nom : la Frnce ? la Frace ? Nan je sais : la FARCE ! Moi je retourne dans ma Belle Zone Humide.

Développer des WebApps sur iPhone - Etape 1

Sun, 07 Mar 2010 19:14:00 +0100

Depuis qu’Apple a introduit l’AppStore, la plus part d’entre nous a délaissé ce qui à l’origine était le seul moyen de développer des applications pour iPhone à savoir les WebApps. Aujourd’hui, les annonces d’emplois, de projets, les éditeurs de contenus ne jurent que par Objective-C et les applications natives. Mais pour la plus part des usages, html5 et la puissance des css3 sont largement suffisants pour construire de très bonnes applications. Et si vous souhaitez quand même profiter de la publicité offerte par l’introduction de votre app sur l’AppStore, vous pouvez toujours la mettre dans une WebView et apprécier le labyrinthe de la validation d’Apple, et la joie de payer pour un iPhone developper program (99$).

Pour cette première étape, nous allons faire une rapide visite des fonctionnalités disponibles sur Webkit mobile afin de développer des WebApps qui ont tout des grandes, suivez le guide !

Les options spéciales d’HTML5

Pour gérer les relations avec le système, certains meta-tags sont indispensables :

Sur iPhone, l’ensemble du système repose sur UTF-16, donc si vous avez des versions japonaise ou arabe, pas de problème !

Ce tag permet de contraindre le zoom de votre appui. Dans l’exemple on interdit tous les zooms utilisateur :

Ici on dit au système que notre application peut tourner en dehors de Safari. Lorsque l’utilisateur ajoutera votre application à sa Home il ne vera plus les barres de Safari :

La barre du haut est également personalisable: noir ou gris.

Pour se la jouer encore plus application native, on peut ajouter une icône et un écran de chargement, l’URL de l’icône est même détectée sur Android !

La plus part des nouveautés de HTML5 sont également prises en compte :

Local storage, WebSQL : conservez des données même lorsque la connexion est indisponible
Les médias vidéo et audio sont pris en charge
Les nouvelles balises (lien)
Canvas
SVG natif
La géolocalisation
L’accès au carnet d’adresse
Orientation verticale/horizontale
Des protocoles spéciaux (ex: href=”tel:+3300000000”)
Des types de formulaires dédiés (types number, email, search…)

Par contre, on ne pourra pas accéder à des couches plus basses comme l’appareil photo ou les notifications.

La puissance des CSS3

Voici une liste des nouveautés de CSS3 :

Sélecteurs
Dégradés
Fonds multiples
Border-images
Ombres (textes et boites)
SVG
Masques
Couleurs rgba
Transitions/animations CSS

Et peut-être d’autres que j’ai oublié !

Egalement deux d’attributs très utiles pour le développement iPhone :

-webkit-tap-highlight-color: rgba(0,0,0,0)

Lorsque que vous cliquez sur un élément qui a un évènement onclick, un cadre noir apparait automatiquement, cet attribut vous permet de choisir sa couleur, et de le masquer

-webkit-user-select: none

Cet attribut permet d’empêcher l’utilisateur de sélectionner du texte (ce qui arrive tout le temps, généralement par erreur).

Mais tout n’es pas rose, nous allons encore le voir par la suite, il y a un truc très très très chiant : l’absence de l’attribut “position: fixed”. Cela veut dire qu’il n’est pas possible de placer des éléments immobiles type header ou footer comme on en trouve sur la plus part des applications. Et comme les iframes ou les boites avec “overflow: auto” ne se défilent qu’avec 2 doigts, et bien il faut chercher des solutions peu heureuses en javascript (la moins pire selon moi est iScroll).

Le Javascript

Je ne suis pas partisant de l’utilisation de jQuery sur iPhone — lourd à charger pour des petites connexion 3G — et la fonction magique querrySelectorAll nous permet de créer un mini framework en 50 lignes qui va nous permettre déjà de démarrer une application simple :

/* -----------------------------------------------
 * UNIVERSAL SELECTOR
 * -----------------------------------------------
 */
window.$ = HTMLElement.prototype.$ = function(selector, context) {
	if (selector == null)
		return null
	var context=context||this==window?document:this,results=context.querySelectorAll(selector),isId=/^\#[a-zA-Z]*$/;
	if (isId.test(selector) && results)
		return results[0]
	else
		return results
}

/* -----------------------------------------------
 * EACH FUNCTION
 * -----------------------------------------------
 */
var each = function(c) {
	for(var i=0; i
L’autre gros problème sur iPhone en plus du scroll, ce sont les évènements focus/blur qui sont bridés. En effet, on ne peut pas les récupérer en dehors d’un évènement click. Cela veut dire qu’il est très complexe de pouvoir gérer l’affichage/masquage du clavier virtuel qui ne se montre que lorsqu’un champ texte est actif.
Malgré tout, ne pas avoir IE6 dans les pattes et pouvoir jouer avec html5 et css3 c’est un grand bonheur ! Il n’y a plus qu’à espérer que la Team Webkit soit à l’écoute des développeurs, deux petites limitations à corriger ce n’est pas la mer à boire !
Conclusion
Dans cet article je n’ai pas parlé de toutes options pour développer des WebApps sur iPhone. Il y a bien-sûr Dashcode, le meilleur choix si vous voulez créer une application avec le look and feel classic d’Apple. Mais il y a aussi des solution hybrides telles que Appcelerator qui permettent de créer des applications natives à l’aide de Javascript, et qui donne accès à des couches plus basses du téléphone (appareil photo, notifications).
Dans le prochain article, nous mettrons en pratique ce qui a été abordé ici avec un exemple concret. J’espère vous y retrouver !
J’en profite pour signaler aux fans de technologies pure web et javascript que ma société, Zenexity (Paris 9), recrute actuellement des développeurs pour la division iPhone, contactez-moi pour plus d’informations.
MAJ: Etape2 du tutoriel développer des webapp pour iPhone est disponible.

Museum of modern betas

Thu, 22 Oct 2009 23:24:42 +0200

Museum of modern betas

Citation

Mon, 19 Oct 2009 12:38:51 +0200

« Avec plus de 70 millions de machines utilisées dans le monde, les ordinateurs DOS fabriqués par des sociétés telles qu’IBM, Compaq, Tandy et des millions d’autres sont de loin les plus populaires. D’un autre côté, les fans de Macintosh noteront que les cafards sont bien plus nombreux que les humains, mais que ce chiffre seul ne dénote pas d’une forme de vie plus avancée. »

New York Times, 26 novembre 1991

Multitouch, une réflexion sur le digne descendant de la souris.

Sun, 18 Oct 2009 19:26:30 +0200

Multitouch, une réflexion sur le digne descendant de la souris.

Webdesign russe !

Sun, 18 Oct 2009 16:39:37 +0200

Webdesign russe !

I am Warry !

Sun, 18 Oct 2009 15:56:21 +0200

Un peu à l’étroit chez les cousins d’en face, Twitter, j’ai décidé d’ouvrir un espace un peu plus large, voici Tumblr !