Sunfox

L’importance des performances Web

30 octobre 2010 1 commentaire — bonnes pratiques, paris web, performances, web

« Motion blur » de theomonnie

Pourquoi faut-il prendre du temps à optimiser une page web pour qu’elle se charge rapidement ? Quelques statistiques tirées de conférences Paris Web.

• Amazon : un délai de 100ms c’est -1% de ventes
• Yahoo! : un délai de 400ms c’est +5 à +9% d’abandon sur un site éditorial
• Google : un délai de 500ms c’est -20% de trafic
• Google : -25% de poids de page c’est +25% d’utilisateurs deux semaines plus tard
• Google UK : les clics sur les pubs doublent en passant de 3s à 0.5s de temps de chargement
• Shopzilla : 5-12% de chiffre d’affaires en plus en passant de 6s à 1.6s
• AOL : 2 à 3 fois plus de pages vues pour des pages optimisées
• Bing : un délai de 2s c’est -4% de revenu par utilisateur

Sources :

• Performances Web de Jean-Pierre Vincent à Paris Web 2010
• Performances Web Côté Client d’Eric Daspet et Nicole Sullivan à Paris Web 2008 (Yahoo!)
• Impact of web latency on conversion rates de Alistair Croll
• Marissa Mayer (Google)

Paris Web is a big family

30 octobre 2010 1 commentaire — conférences, paris web, photo, redheads, webdev

Deezer dans Last.fm, si si, c’est possible

24 octobre 2010 6 commentaires — api, deezer, firefox, greasemonkey, javascript, last.fm, music, radio, web

Utilisateurs de Deezer vous pouvez enfin envoyer la musique que vous écoutez sur Last.fm. Si si. Carrément. Pincez-vous.

Pour ça il vous faut Firefox armé de GreaseMonkey et installer mon script. Allez sur Deezer, autorisez le script à scrobbler et c’est tout.

Bonne musique ! Voilà un album si vous ne savez pas avec quoi l’essayer. Ah et le code est par ici.

(Désolé utilisateurs de Chrome, l’implémentation de GreaseMonkey est trop pourrie, on peut même pas faire d’XMLHttpRequest.)

Planning de concerts en ASCII pour Rock en Seine

18 août 2010 2 commentaires — ascii, calendar, festival, geek, music, rock

__________               __                    
\______   \ ____   ____ |  | __   ____   ____  
 |       _//  _ \_/ ___\|  |/ / _/ __ \ /    \ 
 |    |   (  <_> )  \___|    <  \  ___/|   |  \
 |____|_  /\____/ \___  >__|_ \  \___  >___|  /
        \/            \/     \/      \/     \/ 
  _________      .__               
 /   _____/ ____ |__| ____   ____  
 \_____  \_/ __ \|  |/    \_/ __ \ 
 /        \  ___/|  |   |  \  ___/ 
/_______  /\___  >__|___|  /\___  >
        \/     \/        \/     \/ 

Voici les concerts que je veux voir à Rock en Seine 2010.

Je représente le temps grâce à la joie du monospace et des caractères exotiques grâce à Unicode. Et le tout avec l’aide de sphax3d.

Suite de l’article…

Renverser les URLs

21 juin 2010 17 commentaires — domains, idéaux, rant, url, web, www

Les utilisateurs ne comprennent rien aux URLs. On ne peut pas les blâmer car c’est compliqué d’en décoder une. Pourtant elles sont la meilleure façon de se protéger du phishing.

Qu’est ce qui cloche dans les URLs ?

1. L’ordre des parties est illogique. Je m’en plaignais déjà dans les commentaires, la plus haute autorité pour une adresse (le nom du site) est en plein milieu de l’adresse et l’ordre de lecture est différent pour le domaine et l’adresse.

   Il n’y a qu’à voir l’ordre de lecture d’une URL :

   	4	3	1	2	5	6
   https://	secure	.elysnet	.hsbc	.co.uk	/pay	/form	.html

2. https://foo:bar@[4242:baaa::4242]:4242/qux/corge.php?grault=garply&waldo=fred#thud est un exemple d’URI qu’un utilisateur est sensé savoir décortiquer.

3. Les suffixes de noms de domaines .org, .com, .net, .info, … ne veulent plus rien dire.

4. Les entreprises doivent acheter tous les noms de domaines de leurs marques pour chaque suffixe rien que pour ne pas se les faire piquer. C’est un jeu sans fin car on continue de créer de nouveaux suffixes.

5. Le nom de domaine principal attendu par tout le monde est le .com.

6. Les suffixes qu’il est possible d’acheter peuvent être décomposés comme .co.uk, pvt.k12.wy.us et la liste de suffixes publics est longue et doit être maintenue.

7. Les www ne servent à rien. Retirons-les.

8. Les // sont inutiles également, l’inventeur du Web s’en excuse.

Exemples de simplifications

En changeant les URLs telles qu’on les les connaît on pourrait avoir :

• http:google
http://www.google.com/
• https:google.mail
https://mail.google.com/
• http:flickr.static.farm5/4008/4307231011_ce7f628393.jpg
http://farm5.static.flickr.com/4008/4307231011_ce7f628393.jpg

Plus court, plus simple, respectant l’ordre de lecture, la plus haute autorité du lien serait le premier mot après http:.

Malheureusement le gain est trop petit pour changer une infrastructure et des habitudes aussi énormes. Dommage.

Quelques caractères Unicode

19 juin 2010 2 commentaires — images, unicode, web

☀ ☼ ☽ ☾ ☂ ☔ ☁ ☃ ☄ ☎ ☏ ✉ ⌨ ✍ ✌ ☯ ☺ ☻ ☹ ☠ ☢ ☣ ✆ ✇ ♨ ✎ ✏ ✐ ✂ ✄ ✈ ♻ ♜ ♞ ♝ ♛ ♚ ♟ ♖ ♘ ♗ ♕ ♔ ♙ ☬ ☭ ❤ ❥ ❀ ➳ ☜ ☝ ☞ ☟ ★ ✪ ✰ ♬ ♀ ♂ ⚤ ⚣ ⚢ ⚥ ⚦ ⚧

Utiliser font-face pour des images ?

18 juin 2010 3 commentaires — font-face, html, images, performances, sprites, unicode, web

Depuis que @font-face est utilisable partout, on a envie de pousser les limites de son utilisation. Utiliser des générateurs automatiques, créée des police d’écritures qui ne transforment que le caractère &, etc.

Dans l’article ever- thought about using font face for icons? ils expliquent comment faire une page où toutes les images seraient contenues dans un fichier de police. En appliquant chaque icône à une lettre, on a des images dans la police d’écriture

Cela donne des images :

• qui s’agrandissent sans perte de qualité ;
• très faciles à colorer, agrandir, souligner en CSS ;
• rapides à charger car cela ne fait qu’une requête HTTP pour tout le paquet d’icônes.

Mais cette technique souffre de serieux points faibles. En plus d’être plus difficile à maintenir, il faut choisir entre un HTML qui n’a aucun sens comme <span class="phone-icon">a</span> ou une feuille de style CSS imbitable qui ne fonctionne pas sous IE :

.phone-number:before {
  content: 'a';
  font-family: "Mes Icônes"
}

La solution serait de ne remplacer que les quelques caractères Unicode qui représentent déjà des icônes. Ainsi on garde du sens à l’HTML et on peut profiter de la cascade des polices d’écriture disponibles.

<li>☎ +33-666-42-42-50</li>

Le Sunfox

9 juin 2010 1 commentaire — clearideaz, cosmic, image, ironie, logo, sunfox

Les gens qui me font un logo aussi chouette et une bannière d’enfer par la même occasion en à peine trois petites minutes je les déteste.

Apéro Ruby spécial GitHub

17 février 2010 — apéro, git, github, html, javascript, ruby, sinatra

Le dix-huitième Apéro Ruby organisé par Ruby France était tourné autour de GitHub. Étaient présents les géniaux Scott Chacon et PJ Hyett de GitHub.

Schacon a présenté ShowOff, son application Ruby pour faire des présentations. Pas aussi bien qu’HTML5 Slides, mais je ne suis pas très objectif sur le sujet. Sinon c’est Sinatra, markdown, HTML, JS, que du bon et plein de bonnes idées pour la suite. Ses slides sont même un fork sur GitHub. Miam.

S’en sont suivi plein de questions sur GitHub. Plein de bonnes choses de prévues comme pouvoir utiliser SVN avec n’importe quel dépôt GitHub, ou auxquelles ils réfléchissent sérieusement comme les tickets et le wiki dans une branche du dépôt. Ils m’ont même assuré que l’internationalisation arrivait d’ici une semaine ou deux. \o/

Oh et c’était open bar. Thanks GitHub!

Facebook chat via XMPP

15 février 2010 3 commentaires — chat, facebook, im, xmpp

Vous utilisez un client de messagerie instantanée qui supporte XMPP (aussi appelé Jabber) comme Pidgin ou Adium ? Vous pouvez dorénavant discuter avec vos contacts Facebook sans passer par un plugin qui ne fonctionne qu’à moitié ou un formulaire qui demande votre date de naissance.

Créer un nouveau compte avec comme protocole « XMPP » et comme domaine chat.facebook.com. Comme utilisateur et mot de passe ceux de Facebook (en prenant soin de vous choisir un nom d’utilisateur Facebook si ce n’est pas déjà fait). Enfin, penser également à désactiver la connexion sécurisée SSL/TLS.

Phishing and domain names: size matters

14 décembre 2009 7 commentaires — domains, online, payment, rant

The last website where I entered my credit card info was www.securepaiement.elysnet.hsbc.fr. This domain name is way too long.

Dear online payment solutions, if you want people to look at the domain name to make sure they don’t get phished, use shorter domains! You might then find out it’s easier for people to trust a plain simple hsbc.fr.

La Distribution : la solution contre le Minitel 2.0 ?

16 octobre 2009 12 commentaires — décentralisation, distribution, openid, web, webdev

Facebook, Flickr, Delicious, Twitter, … nos données et nos identités ne nous appartiennent plus. Chacun devrait pouvoir héberger soi-même ses données et ses applications et être maître de sa propre identité. Le Web tel qu’il a été imaginé.

Le plus court chemin vers la liberté passe par son propre domaine. Mais le gros frein à la décentralisation reste d’avoir un hébergement à soi puis d’installer et de mettre à jour chaque application. C’est long, c’est compliqué et les configurations sont toutes différentes.

La Distribution est la solution pour reprendre le contrôle. Elle permet d’installer un blogware, un wiki ou un forum en un clic. Mais ce n’est pas tout :

• Dépôts distants d’applications, comme dans toute bonne distribution Linux
• Identifiants d’administration uniques à travers vos sites
• Cookies d’authentification partagés ! (Bluffant.)
• Internationalisation unifiée
• Client OpenID
• Serveur OpenID
• Mises-à-jour centralisées
• Des tas d’applis PHP déjà supportées : WordPress, Dotclear, Habari, DokuWiki, bbPress, Moonmoon, Spip, Gallery, …
• Maintenu activement
• Du bon logiciel libre comme on en fait plus ma bonne dame

Testez donc La Distribution sur votre serveur, envoyez du feedback, partagez l’info, décentralisez vos infos.

Ah et joyeux anniversaire à François Hodierne, le valeureux créateur de La Distribution :)

Paris Web 2009

13 octobre 2009 4 commentaires — conférences, css, html, parisweb, quotes

© Thanh

L’édition 2009 des conférences Paris Web est terminée. Une fois de plus la grande qualité des conférences et le bon esprit qui règne étaient là. J’ai a-do-ré.

Quelques citations :

Après tout ça j’ai des milliers de nouvelles idées et de choses à faire. Par exemple il faut que je me renseigne sur l’HTTP « bis » qui est en cours de discution au w3c, que je lise cette documentation sur le cache, que j’installe phpsecinfo, que je lise à propos des méthodes agiles de Jeff Patton, que j’utilise les favelets de Stéphane Deschamps, que je regarde de plus près les CSS media queries, que je me remette à jour dans mes sauvegardes, que je retrouve la proposition de Daniel Glazman sur les règles CSS qui permettent de cibler la disponibilité de certaines propriétés dans les navigateurs, que j’implémente Foaf+SSL quelque part, que je mette la main à la pâte sur La Distribution, …

Merci Paris Web !

7 raisons de pisser assis

16 septembre 2009 18 commentaires — hommes, hygiène

© mayhem

1. On a pas à viser
2. Il n’y a pas de lunette à rabaisser
3. On se fait pas surprendre par une plus grosse envie
4. C’est plus hygiénique : pas besoin de la tenir
5. On peut lire
6. Il y a moins d’éclaboussures et de ratés
7. Je peux écrire cette liste sur mon calepin

Solidays vs Rock en Seine

15 septembre 2009 1 commentaire — festival, music, rock

Cet été j’avais envie de concerts. Avec Solidays en juillet et Rock en Seine en août j’ai été servi.

Comparatif de mon expérience aux deux festivals

	Solidays	Rock en Seine
Une photo	Keziah Jones © monsieurlam	Them Crooked Vultures (John Paul Jones, Dave Grohl et Josh Homme) © Maxime Dodinet
Concerts qui m’ont marqué	Puppetmastaz Les Wampas Poni Hoax Naive New Beaters The Ting Tings Manu Chao The Dø Emir Kusturica Keziah Jones The Virgins Groundation Bénabar	The Prodigy Birdy Nam Nam Bloc Party Them Crooked Vultures Eagles of Death Metal Yeah Yeah Yeahs Lilly Wood & The Prick MGMT Madness Vitalic Passion Pit The Horrors The Offspring Metric Calvin Harris Keane Sliimy Robin McKelle
Nombre de jours	3	3
Prix	45 €	99 €*
Annulations	Joey Starr	Oasis*
Site web	Full-flash tout nul, musique automatique au démarrage, animation d’introduction emmerdante	Flash mais pas partout, musique au démarrage
Accès et transports	Ok	Ok
Derniers métros	Ok	Ok
Derniers RERs	Ratés	Ratés
Suis passé au stand VIP	Non	Oui
Inscrits sur Last.fm	127	445
Nombre de personnes que je connaissais ou qui me connaissais croisées	3	1
Programmation	6/10	9/10
Découvertes	5/10	8/10
Propreté	9/10	8/10
Expositions en plus	5/10	7/10
Bonne cause	10/10	0/10
Note globale	6/10	8.5/10

* Oasis a été annulé pour Rock en Seine mais je ne les attendais pas tellement, je suis donc ravi de me voir remboursé 15 € sur le prix de mon billet.

Rock en Seine l’emporte donc dans mon petit cœur, surtout par sa programmation malgré le double du prix. Déjà hâte d’y être l’année prochaine :)

360 méridiens en 365 jours

9 septembre 2009 1 commentaire — blog, voyage

photo © striatic

J’offre un petit coup de pouce de 15 € à un brave garçon qui vient de partir faire le tour du monde en un an. En échange il m’enverra pour mon anniversaire une carte postale d’Oulan Bator. Un endroit que je ne connaissais même pas.

Allez-donc suivre le carnet de voyage de Joachim et devenez vous aussi un microsponsor de son aventure.

Cinéma en plein air au Parc de la Villette

9 juillet 2009 2 commentaires — cinéma, paris

Tout comme l’année dernière, Le Parc de la Villette accueille du 15 juillet au 16 août 2008 des séances de cinéma en plein air. Si l’année dernière l’entrée était à 2 maigres euros la séance, cette année l’entrée est redevenue gratuite !

Mais parce que la liste de films est longue j’ai une fois de plus alimenté le calendrier google disponible pour l’occasion au format ical, très simple à intégrer à tout logiciel d’agenda.

Suite de l’article…

Mort aux tabulations

23 mai 2009 11 commentaires — caractères, clavier, code, éditeurs, text

\t

Le signe tabulation en informatique est utilisé pour aligner du texte ou indenter du code. Mais c’est un caractère perfide : dans un environnement à chasse fixe c’est le seul caractère qui a décidé de prendre plus de place que les autres.

Et cette taille est variable, jusqu’à même prendre parfois une taille nulle. Elle est d’autant plus variable qu’aucun éditeur ne s’accorde sur la taille maximale que le caractère doit prendre, entre 8 et 2 caractères. Du coup, ça casse l’indentation voulue lorsque l’on décide de l’ouvrir autre part.

Exemple d’alignement avec des tabulations qui font 8 caractères de large au maximum :

Spam	Egg	Yoke
Foo	Bar	Yoke
Whizzey	Bam	Yoke

Le même texte affiché dans un éditeur où les tabulations font 4 de large :

Spam    Egg Yoke
Foo Bar Yoke
Whizzey Bam Yoke

On perd l’alignement choisi et donc le sens des colonnes.

De plus, c’est un caractère invisible. Il n’apparaîtra différent d’un espace que dans certains éditeurs de texte. Or mélangez les deux et vous n’avez pas fini de vous tirez les cheveux, surtout lorsque l’indentation est importante, comme en Python.

Le choix de la taille d’indentation doit être choisi par projet plutôt que de s’adapter aux facéties de chaque développeur. En remplaçant les tabulations avec des espaces, ces problèmes n’ont plus lieu.

Enfin la tabulation est pénible à écrire dans certaines applications—comme dans un navigateur web—car la touche tabulation sert avant tout à passer d’un champ à l’autre.

L’HTML avant la tempête

12 mai 2009 2 commentaires — cms, css, html, integration, xhtml

La page blanche. Puis viens ce moment pur où, dôté de la maquette du site, il ne reste plus qu’à faire la page la plus propre possible. À nous le choix d’XHTML ou d’HTML, d’utiliser ou pas tt, address, … De créer de jolies listes, des titres à plusieurs niveaux. De choisir avec soin le nom des ids et des classes et de saupoudrer le tout de microformats. Le tout propre et bien indenté.

J’aime ce moment où on peut s’approcher le plus possible des idéaux de l’HTML sémantique… jusqu’à ce que CMS et CSS, bourreaux des cœurs, nous imposent de souiller la pureté de nos documents.

Dotfiles suck.

20 mars 2009 10 commentaires — configuration, english, linux, shell, unix