~bohwaz/blog/

Avec de vrais morceaux de 2.0 !

Carnet de voyage en Océanie : c'est pas terminé !

Je suis revenu d'Océanie depuis maintenant 20 jours, mais dû au retard conséquent dans la rédaction du journal de voyage, il n'est pas terminé et je/on continue de publier régulièrement, pendant probablement encore deux ou trois mois.

Pour suivre les aventures c'est donc là : Journal de voyage en Australie et Nouvelle-Zélande.

Pour ceux qui préfèrent les vidéos d'animaux mignons, voici le résumé en vidéo d'un an en Australie et d'un mois en Nouvelle-Zélande :

Timezone Widget Creator

Four years ago I released a small and simple tool who creates widgets containing multiple clocks displaying multiple timezones.

The widget was static HTML and CSS code generated in PHP on my webserver and called from an object/iframe. It was functional but a bit slow to load those few elements from an external host so I rewrote the application to generate an independent javascript code that you can copy on your website without having to request any external resource. And the best thing is that it will continue to display the right time on your website as it's including the transitions (like when the daylight saving is changing) of the next five years. So now it's fast and lightweight. And I also added some animation on the "matrix" theme!

The best way to use it is generate the widget with the theme "none" and include some styling (like this one) in the CSS of your website, that way it will be the lightest. But if you don't want to do that you can just choose any theme and its style will be embedded to the widget code, you'll just have to copy/paste that to make it work.

If your hosting service doesn't allow you to embed javascript, you can just check the "embed" setting to get a classic object/iframe that will call my webserver.

Oh and by the way it's here to experiment and try it: http://bohwaz.net/misc/tz-widget/

Have fun!

De PalmOS à Android en musique et en visuel avec SunVox, PixiTracker et PixiVisor

Alexander Zolotov est un de ces génies dont on se dit qu'il ne doit pas beaucoup dormir. D'abord il est à l'origine de l'un des logiciels de musique électronique les plus complets au monde : SunVox. À l'origine disponible sur PalmOS, il tourne maintenant aussi sur Windows, OSX, Linux, Maemo, Windows Mobile, iOS, Android et MeeGo (ouf !). Si ça c'est pas un logiciel multiplateforme !

SunVox

Il fonctionne évidemment au top et même sur de vieux Palms il encaisse parfaitement des morceaux complexes. Bref ce logiciel est une petite merveille. Pour vous en rendre compte il y a bien sûr le groupe SunVOX sur SoundCloud mais aussi surtout les albums d'Alexander, sortis sous le pseudo de NightRadio. Le premier, Back To The Source est disponible sous la forme peu commune d'un binaire Windows/Linux qui en plus de vous faire écouter la musique telle qu'elle a été composée vous affiche les instruments virtuels qui jouent en live, c'est un peu un mode "visualisation" de SunVox si on veut, bref un album multimédia. Le second, Soul Resonance part du même principe mais en plus joli et cette fois-ci créé avec le langage de programmation du même Alexander : PixiLang.

Ce langage a donné vie à un nouveau projet dénommé PixiTracker, un tracker simplissime pour iOS/OSX/Android/Windows/Linux qui permet de créer très simplement et ludiquement de la musique 8-bits. L'interface est d'ailleurs superbe et un véritable exemple d'ergonomie.

PixiTracker

Il existe en version 16-bits et 1-bit ce qui varie la qualité des samples et donc de la musique résultante. Un player autonome et open source vous permet de réutiliser le moteur de lecture pour un projet d'album visuel par exemple. Là encore un groupe sur SoundCloud vous donnera quelques idées de ce qui est possible.

Mais le logiciel le plus incroyable est probablement PixiVisor. Alexander avait déjà sorti il y a quelques années Virtual ANS un petit logiciel permettant de transformer une image JPEG en fichier audio et vice-versa. Le résultat était étrange mais bizarrement légèrement musical quand même.

PixiVisor

Ici c'est un cran au dessus. Le principe est simple : un appareil émetteur crée une image animée et la diffuse par le son en temps réel, un appareil récepteur retranscrit alors ce son (reçu via une prise jack ou via un microphone) en temps réel en une image. Évidemment c'est pas comme ça qu'on va transmettre de la HD en temps réel, c'est limité à du 64x64 pixels en 10 fps mais tout de même c'est exceptionnel ! Évidemment on pense tout de suite à tout ce que ça peut permettre notamment dans le domaine du VJ-ing (création vidéo en temps réel pour accompagner de la musique électronique), où la musique deviendrait une vraie composante de la vidéo et vice-versa. Mais aussi aux possibilités infinies que cela permet à ceux plus habitués à travailler le son, par exemple il est possible de mélanger plusieurs vidéos via une table de mixage sonore ! Il suffit de regarder les vidéos montrant le logiciel pour voir le potentiel.

Bref cet artiste/programmeur russe me surprend à chaque projet avec quelque chose de génial, j'ai hâte de voir et entendre la suite !

Le web est une poubelle, et tout le monde s'en fout

Depuis maintenant neuf mois que je voyage en Australie sur les routes, mon seul accès au net est via les accès WiFi publics (bibliothèques, centre villes, etc.) ou via une clé 3G-WiFi. Il faut savoir qu'en Australie tous les accès à Internet sont limités. Pour la 3G il n'y a quasiment pas de fair-use, et je paye 20 dollars (15 €) pour 5 Go de données. Les WiFi publics sont limités aussi, souvent à 50 Mo par session. Pour l'ADSL c'est la même chose : pour 60 dollars par mois (45 €, engagement de 24 mois) vous aurez droit à 50 Go de quota chez la plupart des opéraDepuis maintenant neuf mois que je voyage en Australie sur les routes, mon seul accès au net est via les accès WiFi publics (bibliothèques, centre villes, etc.) ou via une clé 3G-WiFi. Il faut savoir qu'en Australie tous les accès à Internet sont limités. Pour la 3G il n'y a quasiment pas de fair-use, et je paye 20 dollars (15 €) pour 5 Go de données. Les WiFi publics sont limités aussi, souvent à 50 Mo par session. Pour l'ADSL c'est la même chose : pour 60 dollars par mois (45 €, engagement de 24 mois) vous aurez droit à 50 Go de quota chez la plupart des opérateurs. Bref vous faites gaffe à ce que vous faites pour garder votre quota...

Et s'il n'y avait que ça, mais la 3G est poussive, et dans les villes les réseaux sont saturés dès 17-18h jusqu'à 22-23h, avec des débits à pleurer, parfois de l'ordre de 1Ko/s. Le reste de la journée ça va mieux, mais reste le problème du quota. Je pensais qu'avec 5 Go je ferais pas mal de choses, je pourrais même télécharger un peu de musique, genre le dernier Lacrymosa sur Altermusique.org, mais je me suis vite rendu compte que mes sessions web bouffaient le quota à vitesse grand V.

Du coup surfer sur le web me fait souvent m'arracher les cheveux. Car les sites web de nos jours sont conçus par des gens qui sont connectés 24h/24 à la fibre, ou à de l'ADSL illimité comme en France. Des gens qui n'en ont rien à foutre de vous faire charger des centaines d'éléments inutiles sur chaque page. Bref des incompétents qui n'ont aucune idée des usages des vrais gens.

Prenons un exemple : Twitter. Ce service propose de relayer des messages de 140 caractères. Déjà passons sur le fait qu'il est impossible de se retrouver dans l'historique des messages de sa timeline : aucune pagination, aucune mémorisation de ce que vous avez lu. Donc quand on n'a pas que ça à foutre de rester connecté 24/24 à suivre des prouts et des images de chatons, bon courage pour retrouver les messages que vous n'avez pas pu lire. Il faut aller sur la timeline et cliquer sur « More Tweets » des dizaines de fois, charger plein de conneries. Ou alors si vous avez activé Javascript il faut faire défiler la page et attendre que le Javascript veuille bien charger l'historique. Rappelez-moi quel est le crétin qui a décrété que le « défilement sans fin » devait remplacer la pagination ? C'est encore pire !

Mais sans même parler de l'ergonomie déplorable de ce site (qui possède des centaines de développeurs, des ergonomes, des designers, etc. et sans parler du chiffre d'affaire colossal), il suffit de vouloir aller voir un tweet en particulier pour constater qu'ils sont nuls à chier leurs dévs. Prenons un exemple : le message de Sam Hocevar de ce 2 août 2013 qui dit « Tapie : c’est par terre ? ». Il fait 25 caractères. 25 octets. Je veux aller le lire, combien va faire la page ? 100, 200, 300 Ko ? Et non c'est pire : 528 Ko. Et encore c'est compressé.

Je veux bien être gentil et dire que la présentation, les menus, tout ça, une page de 100 Ko serait correcte vu que la page ne contient quasiment rien. Mais là franchement, quel foutage de gueule.

Alors, à quoi ça sert tout ça hein ? Déjà il y a 15 Ko de HTML compressé. Une fois décompressé ça donne plus de 100Ko. Y'a déjà un petit souci à ce niveau. Surtout qu'en regardant de près, on y voit plein de CSS/JS imbriqué pour faire trois fois rien (8Ko de CSS pour définir 4 couleurs et 2 images de fond, chapeau), et des tas d'éléments vides qui ne servent qu'à la présentation et au javascript. Je pense que le web sémantique ils doivent pas connaître chez Twitter, surtout quand on voit des perles comme ça :

  <li class="dropdown-divider"></li>

ou encore :

  <li class="dropdown-caret">
    <span class="caret-outer"></span>
    <span class="caret-inner"></span>
  </li>

Vous vous souvenez du design avec des tables ? Twitter lui fait du design avec des listes. Y'a pas à dire, on a grandement évolué...

Vous dites oui mais y'a le cache des éléments statiques. Oui bien sûr, sauf que pas mal d'éléments ont un cache qui ne dure qu'une demie-heure et évidemment mon disque dur n'est pas extensible à merci (sans compter la gestion chaotique des fichiers de cache par Firefox), et je me retrouve à télécharger toutes ces merdes à chaque session...

Twitter est un exemple criant de disproportion, mais je pourrais aussi vous parler de Facebook, dont les pages sont tellements lourdes à charger que si j'en charge une ça bloque le chargement des autres pages. C'est à dire que le chargement d'une page Facebook arrive à saturer une connexion 3G à 2 Mbps pendant plusieurs secondes.

On pourrait penser que des développeurs plus sensibilisés feraient mieux. Oui, mais non. Par exemple le Shaarli de Sebsauvage.net fait 100 Ko, dont 80 de jQuery, tout ça pour... cacher des boutons.

<script>
$(document).ready(function() {
	$('a.qrcode').click(function(){
	  hide_qrcode();
	  var link = $(this).attr('href');
	  $(this).after('<div class="qrcode" onclick="hide_qrcode();return false;"><img src="'+link+'" width="200" height="200"><br>click to close</div>');
	});
});
function hide_qrcode() { $('div.qrcode').remove(); }
</script>

Alors que ça serait bien plus efficace et léger en Javascript natif (arrêtez de faire du jQuery bordel, si vous mettez du javascript dans votre page faites du javascript) :

<script>
(function () {
	document.addEventListener('DOMContentLoaded', function () {
	    document.querySelectorAll('a.qrcode').forEach(function ()
	    	this.onclick = show_qrcode;
	    });
	});

	var show_qrcode = function () {
		hide_qrcode();
		var link = this.getAttribute('href');
		this.innerHtml += '<div class="qrcode" onclick="hide_qrcode();return false;"><img src="'+link+'" width="200" height="200"><br>click to close</div>';
	};

	var hide_qrcode = function () {}
        var div = document.querySelector('div.qrcode');
        div.parentNode.removeChild(div);
    };
} ());
</script>

Un autre exemple : cet article sur le blog de m0le. La page fait 313 Ko. Y'a plein de JS pour faire des trucs rigolos, je sais pas si ça sert mais admettons qu'on veuille les garder. Rien qu'en activant Adblock Edge (remplaçant communautaire d'Adblock), Ghostery et en bloquant cette merdasse inutile qu'est WOT (qui bloque d'ailleurs certains de mes sites sans raison), on descends à 200 Ko. Sérieusement, 113 Ko de tracking, pub et autres gadgets dont je n'ai que foutre comme 99% des visiteurs.

Aller s'il vous plaît un petit effort, pensez au tiers-monde numérique, arrêtez de surcharger vos pages !

Joyeux anniv' sebsauvage !

40 ans

Timo m'a fait part d'une initiative collective visant à souhaiter l'anniversaire de sebsauvage ensemble, au même moment, pour lui faire une jolie et belle surprise.

J'avoue que je me sens obligé et heureux d'y participer.

En effet seb (on peut se tutoyer hein depuis le temps), je te connais depuis longtemps. Depuis 1999 en réalité. D'une époque où je n'avais que 14 ans et où je surfais sur le web en mode texte sur mon minitel avec le 3615 INTERNET d'AlternB (Valentin Lacambre), où je checkais mes mails sur le 3614 FREE et où je visitais des sites web sur CD-ROM qui étaient fournis avec des revues que j'allais acheter chez le marchand de journaux. Bref une époque où je n'avais pas Internet chez moi. Une époque où pour avoir accès à Internet en France il fallait payer un abonnement mensuel de l'ordre de 15 € et les communications téléphoniques à la minute de l'ordre de 0,50 €. Bref un sacré luxe que je ne pouvais pas me payer.

C'est à cette époque que je suis tombé sur ton site (si mes souvenirs sont bons) distribué sur le CD-ROM de l'Écho du Village, où tu avais également écrit des articles très didactiques sur le fonctionnement du MP3 (j'ai encore le magazine chez moi !). J'ai adoré les explications sur l'informatique, j'ai apprécié les coups de gueule et les liens vers des logiciels de qualité. Bref j'ai appris plein de trucs qui m'ont beaucoup servi par la suite. Plus tard j'ai utilisé Le Grand Manitou pour tricher aux jeux vidéos. J'ai utilisé webGobbler pour faire des fonds d'écran au boulot. Et plus récemment j'ai même forké ton projet AutoBlog. Et évidemment il y aussi Shaarli et ZeroBin, que je n'utilise pas mais que je trouve simplement géniaux dans l'idée et la réalisation (bon sauf dans le code).

Bref, en presque quinze ans, on a partagé un bout de chemin et quelques trucs, et le plus beau peut-être c'est que jamais on ne s'est serré la pince, jamais nous ne sommes croisés dans la rue, mais tu as apporté pourtant des éléments importants à ma vie et c'est grâce à des gens comme toi que mon métier est développeur, et que l'informatique me plaît autant, par tout ce que ça apporte et tout ce qu'on partage, simplement avec des bits qui transitent dans des câbles.

Alors merci, et joyeux anniversaire. Et à bientôt !

Dicky - Skyrock.com compression library

Dicky is a compression/decompression library from jedisct1 which was developed for the Skyrock.com social network. I don't know if it's still in use nor if it was really used one day. It's main purpose was to compress the text written on blogs by users, who happen to be using a very personal way of using Unicode characters. Just to know what are we talking about here is an example:

ღ...ღ V0us ne pensez pas qu'un bl0g sans déc0 est beauc0up m0ins j0li ღ?ღ Il est tant d'habiller votre skybl0g et v0ici un j0li magazin ღ!ღ ღp0ur skybl0g f0nd blancღ 0u p0ur t0us les autres, suffit de demanderღ Enfin bref, b0n sh0pping et b0nne visite ღTu seras t0uj0urs le ou la bienvenueღ

Well maybe that's not the best example but the basic idea is that they're replacing usual vowels with diacritics or Unicode characters that look the same, eg. 'Voir' is replaced by 'Wôÿr'. Dicky is a solution to help compress efficiently this content, and more important, compress it fast, because it is very high load website. Before Dicky, Skyrock.com was using zlib to compress content. Dicky only handles ISO-8859-1 encoding, not UTF-8.

To use Dicky you have to download its source code from its GitHub page and then you'll need to append this line to the 'dicky_p.h' file:

#define SIZE_T_MAX 102400

Because it's missing from the released package. Then just compile the small test program using:

$ gcc -Wall -o dicky dicky.c test.c

Using Dicky in a program should be easy, just read the test.c program source code or the small API doc from the GitHub page.

Fotoo Hosting upgrade: now with HTML5 client-side resize

I already told you about my little Fotoo Hosting project but now it's time to make the announcement of the first revamp of this software.

So this new 2.0.0 version has a new design, an easier admin-mode (just click on login), and a big improvement on picture upload as I got rid of the Flash applet which was used to resize picture before upload, so your bandwidth stays low. Now there is a HTML5 (Javascript + Canvas) client-side resize before upload, it works better than the Flash applet, and it's easier to use.

And another big news is that you can now upload a complete album of multiple pictures at one time, all the pictures will get listed under the same page.

So what are you waiting for?

Lightweight PHP SMTP library

As always, I like to keep things simple and light in my code so one day I was looking for a PHP library able to send mails directly via SMTP. I still find it amazing that PHP doesn't have this feature in its standard package but hey why not. So I looked and I found some libraries from bigger frameworks like PEAR and Zend. They are good, but the PEAR Mail package depends on Net_SMTP, which depends on Socket, which depends on... You get the idea.

I like things that interact directly with standard PHP features, things that don't make a new interface for everything. For example PHP has a fairly good socket API so why bother adding an abstraction layer here?

So in a couple of hours, including some RFC reading (did you know that you can include comments in email addresses, like for example bohwaz@(oh that seems nice ! (but not as nice as emails addresses like "oh, look !"@example.tld))other.example.tld, what a nightmare that would be to parse with a regexp¹), and here it is: just a light and simple PHP SMTP library: lib.smtp.php

It's licensed under the LGPL and it can handle SSL, TLS, and SMTP-AUTH. It only sends text/plain emails in UTF-8 but <troll>who cares about HTML emails anyway?</troll>

¹ Even if I'm really supportive of the fight Stéphane Bortzmeyer is leading against the badly written email validation checks, I have to admit that it's sometimes tricky to do things right. Like here I had to extract multiple addresses from one string, and it's not easy if you don't want to use a very big and slow regexp.

Notes rapides... ↓