Sunfox

Comment j’ai rendu mon blog responsive

9 août 2014 5 commentaires — css, future-friendly, html, web

L’HTML et le CSS de ce blog ont été écrits en 2006. En années Internet c’est comme si je l’avais fait il y a 3042 ans.

À cette époque l’iPhone n’existait pas encore et on ne se préoccupait pas de savoir si un site fonctionnait sur son assistant personnel ou pas. La première mention de Responsive Web Design date de 2010 (il y a 520 ans environ). Essentiellement il s’agit de transformer un site pour qu’il puisse s’adapter de façon fluide à toutes tailles d’écrans.

Transformer quelque chose qui n’a pas été pensé mobile first n’est pas chose facile, alors un vieux site au CSS croupissant, cela paraît insurmontable.

Suite de l’article…

EasouSpider le robot qui ne sait pas parler l’utf8

23 juillet 2014 — rack, rails, robots, ruby, web, webdev

Ces derniers jours je recevait une trentaine d’emails par jour m’indiquant qu’une erreur avait éclatée sur cults3d.com. Ces exceptions provenaient toutes d’un robot chinois, EasouSpider, qui parcoure le Web pour remplir son moteur de recherche.

Ce robot ne sait pas parler l’unicode comme tout le monde et envoie dans les formulaires des valeurs mal encodées, ce qui fâche Ruby on Rails. Le problème est surtout que Rails ne traite l’erreur que bien trop tard, lorsqu’on essaie de lire les paramètres de la requête. Et là l’erreur est une incompréhensible ArgumentError :

invalid %-encoding (Q/B0*ÜHܘ0ÅÅ1 0 U GB1 0 U.…

Suite de l’article…

N’utilisez plus « www »

15 novembre 2010 14 commentaires — domains, uri, url, web, www

www

Pourquoi ne plus utiliser « www. » quand on donne un lien vers un site :

• on dit « va sur facebook.com » et pas « va sur www.facebook.com »
• www ne sert à rien techniquement
• www est difficile à dire
• on sait que c’est un site Web sans ajouter www
• l’adresse devient plus longue
• il faut en choisir un des deux et le garder pour des raisons de référencement et de performances Web
• on ne mets jamais de www devant les sous-domaines, qui sont pourtant aussi sur le World Wide Web (images.google.com, dev.sunfox.org, …)
• les sites qui s’internationalisent mettent souvent un pays à la place (fr.msn.com, fr.wikipedia.org, …)
• www n’existe que pour de vieilles raisons historiques

« Le World Wide Web est la seule chose que je connaisse pour laquelle la version plus courte est trois fois plus longue à dire que l’expression entière. » Douglas Adams

Quelques sites qui les retirent tout le temps :

• twitter.com
• cs5.org
• rapidshare.com
• thepiratebay.org
• pitchfork.com
• posterous.com
• digg.com
• github.com
• tinyurl.com
• no-www.org

Un site qui en mets deux :

• www.www.arson-news.com

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)

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.)

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>

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 :)

CSS Naked Day Havoc

10 avril 2008 — css, dates, standards, web

Le CSS Naked Day est une idée rigolote, que j’ai mis en place avec entrain sur mon blog. Elle consiste à ce que tout le monde désactive ses feuilles de style à une date donnée pour promouvoir les standards du Web.

C’est pourquoi le 5 avril mon blog désactivait ses styles en affichant un petit message et un lien vers le site officiel. Tout était automatique pour ne pas avoir à modifier l’apparence de mon site à minuit, en utilisant un morceau de code PHP qu’ils proposent eux-même sur le site officiel.

Manque de pot ils ont décidé de changer la date ! Cette année le jour du CSS tout nu tombe le 9 avril, alors que les deux années précédentes la date était fixée au 5. Évidemment cela casse les très nombreux plugins ou scripts qui ont été crées pour l’événement, comme ce que j’utilisais sur mon blog.

D’après le site officiel la date est désormais fixée au premier Mardi, Mercredi ou Jeudi d’avril qui ne soit pas le 1er avril. Oui. C’est carrément nul.

J’arrète donc de promouvoir cet événement jusqu’à ce qu’ils ne remettent une date fixe. Ou au moins quelquechose de calculable. Comme le premier mardi d’avril à part le 1er, au moins je pourrais le calculer facilement et ne pas avoir à éditer le code de mon site chaque année…

Flickr en construction

15 décembre 2007 — flickr, images, web

Trouvé dans les images internes de Flickr, très web 0.1 :)

In Rainbows

11 octobre 2007 4 commentaires — musique, web, zik

Oh, des arcs en ciels !

In Rainbows est le dernier album de Radiohead. Plus qu’un album c’est un symbôle, car une fois sur le site vous pouvez acheter leur album en ligne… au prix que vous voulez. Vraiment.

Si vous ne savez pas combien donner sachez qu’après approximatif calcul ils gagnent environ $2.14 par album normalement commercialisé, ajoutez-y $0.5 de prix de bande passante et vous paierez le même montant qu’ils auraient reçu si vous aviez acheté l’album autrement. Au delà d’1.13 £ vous faites un geste qui encourage l’initiative et tous les sous vont directement au groupe.

Vous recevez alors un magnifique inrainbows.zip de 48.35Mo contenant 6 10 titres en mp3 160kbps sans DRM. Et les morceaux valent le détour.

Jyte permet de voter sur d’importantes affirmations

26 juillet 2007 10 commentaires — openid, social, vote, web

Ficlets

24 juillet 2007 — aol, code, openid, photo, web

Cerisier au Jardin des Plantes

Une de mes photos inspire un poème sur Ficlets.

Ficlets est un site qui invite à écrire des petites histoires et à compléter les histoires créées par les autres utilisateurs en y ajoutant une suite ou un début.

L’authentification, très simple, passe par OpenID. Le site est chaleureux, ouvert, simple, très joli, très abouti.

Chapeau à AOL, qui remonte énormément dans mon estime. Avec ce brin de poésie s’alliant au meilleur de la technologie, ils semblent enfin avoir compris à quoi devrait ressembler le web.

Edit!

9 juillet 2007 7 commentaires — ajax, application, code, javascript, php, web

J’ai créé une petite application web, entre wiki et paster, nommée Edit!.

Un morceau de code ou un bout de texte à partager ? Il suffit de vous rendre sur http://edit.sunfox.org/cequevousvoulez et de coller. C’est tout. La page s’enregistrera toute seule toutes les deux secondes. Pas besoin de s’identifier, pas de bouton Envoyer ni de redirection, aucun autre choix à faire que cequevousvoulez.

En contrepartie de cette légèreté, tous ceux à qui vous avez fourni l’url peuvent modifier votre page et tout supprimer. Il n’y a pas de moyen d’annuler. Edit ne sert donc pas à stocker quelque chose auquel vous tenez énormément, mais peut tout de même servir de léger petit wiki à condition qu’il reste entre amis.

Son code est disponible, sous GPL.

Robots.txt ou comment se couper du web

28 février 2007 8 commentaires — accessibilité, idéaux, robots, standards du web, w3c, web

Je rencontre de plus en plus un phénomène qui m’irrite beaucoup, celui de bloquer l’accès à tout son site à tous les robots, via son fichier robots.txt.

L’intérêt des règles de ce fichier est de bloquer l’accès à des ressources sensibles (personnelles, d’administration, de statistiques, que l’on ne souhaite indexer nulle part, etc.) par les robots qui suivent le protocole. On spécifie alors quel chemin bloquer pour quel robot.

User-agent: *
Disallow: /

Ces lignes-là en revanche bloquent l’ensemble du site à tous les robots. Y compris aux moteurs de recherche. Y compris aux pings, aux trackbacks. Y compris (en théorie seulement) aux lecteurs de fils de syndication. Y compris aux futures applications qui naîtront du web.

Il est agaçant de voir qu’on ne peut pas utiliser un moteur de recherche externe quand le moteur interne d’un site n’est pas assez performant, voire inexistant. Agaçant également de ne pas pouvoir revenir en arrière dans les versions précédentes du site. Agaçant enfin de voir sa conduite imposée par les créateurs du site. Par exemple, cela m’interdit de faire un script qui récupère tout seul les dernières versions du site pour les lire hors-ligne.

Karl par exemple, que j’admire énormément par ailleurs, interdit l’accès à tout son site par tous les robots. Il se justifie par « l’esclavage 2.0 » des données mais milite d’autre part pour que le web devienne sémantique, pour que le sens de ce qu’on publie sur internet soit lisible… par des robots.

Certes il faut se méfier des dérives, du vol d’informations, du partage sans retour, etc. Mais tout de même, sans Google, sans Archive.org, sans les services pour rechercher, archiver et simplifier nos vies, internet ne serait pas un aussi chouette endroit.