Concours : gagnez 2 exemplaires de « CSS avancées »

Concours : faites moi rire !Oyé oyé, intégrateurs, intégratrices, webdesigners, euh… webdesigners. En partenariat avec l’éditeur Eyrolles, voici un tout premier concours sur HTeuMeuLeu vous permettant de gagner 2 exemplaires du livre « CSS avancées : Vers HTML5 et CSS3 » et 2 exemplaires du livre « CSS2 : Pratique du design web« , tous deux écrits par Raphaël Goetter (le monsieur d’Alsacreations).

Pour gagner, c’est très simple, il vous suffit de me faire rire (et je réponds tout de suite à votre question : non, être graphiste ne suffira pas). Plus précisément, vous allez devoir m’envoyer une image drôle concoctée par vos soins en rapport avec l’intégration HTML ou le web en général. Vous pouvez y inclure des textes, mais impérativement en français (les jeux de mots franglais pourris sont quand même autorisés). Vous pouvez prendre une photo de vous, faire un montage sous Photoshop avec des photos de chatons, ou utiliser un des memes suivants : Steve Jobs / Bill Gates, The situation room, Inception. Vous pouvez consulter La Galerie des Images Drôles pour les Intégrateurs pour inspiration.

Vous avez jusqu’au mardi 31 mai 23h59 pour m’envoyer votre image par e-mail (ou un lien vers votre image) à l’adresse concours@hteumeuleu.fr. Vous pouvez m’envoyer plusieurs participations, mais une seule sera retenue pour gagner. Passé cette date, je choisirais les 4 images qui m’auront le plus fait rire. Les auteurs des 2 premières gagneront 1 exemplaire du livre « CSS avancées : Vers HTML5 et CSS3 » (36€ chez Amazon). Les 2 suivants gagneront 1 exemplaire du livre « CSS2 : Pratique du design web« . Toutes les participations seront diffusées sur ce site après le concours.

C’est compris ? Alors, c’est parti !

Steve Jobs et la différence entre un vice président et un concierge

BusinessInsider a déniché une superbe citation de Steve Jobs sur la différence entre un vice président et un concierge, et la différence de responsabilité.

Jobs raconte aux vice-présidents que si la poubelle de son bureau n’est pas vidée régulièrement, il demande au concierge quel est le problème. Le concierge peut raisonnablement répondre « Et bien, la serrure de la porte a été changée, et je n’ai pas trouvé une clé« .

Un agacement pour Steve Jobs, face à une excuse compréhensible d’un concierge qui n’a pas pu faire son travail. En tant que concierge, il a le droit d’avoir des excuses.
« Quand vous êtes concierge, les raisons sont importantes. […] Quelque part entre le concierge et le CEO, les raisons arrêtent d’être importantes. »

En d’autres mots, vous n’avez aucune excuse en cas d’échec. Vous êtes maintenant responsable de toutes les erreurs qui se produisent, et ce que vous dites n’a aucune importance.

Une blague de référenceur

Vous savez pourquoi c’est toujours propre chez un référenceur ?
Parce qu’il a passé la SERP hier.

Ouverture de la galerie d’images

Histoire de détendre un peu l’atmosphère, j’ai décidé d’ouvrir une galerie d’images drôles pour les intégrateurs. Si vous me suivez assidûment sur Twitter, vous aurez sans doute déjà tout vu. Sinon, c’est l’occasion de rigoler un coup avec une sélection personnelle d’images liées à l’intégration ou au développement web amassées un peu partout sur le net. Je viendrais compléter cette galerie au fil du temps, mais n’hésitez pas à me contacter (par Twitter ou par mail) si vous avez des suggestions. Enjoy !

Le Pixel Perfect

Il y a deux semaines, Julien de Marie&Julien relançait le débat sur l’intégration au pixel près, et se demandait pourquoi les sites web ne s’affichait pas pareil partout, avec toute l’arrogance et la suffisance qu’un graphiste peut avoir quand il parle du travail réalisé sur ses précieuses maquettes. A travers son article bien rédigé et bien construit, il prétend qu’à la fameuse question « Est-ce que les sites web doivent être identiques sur tous les navigateurs ? », la réponse devrait être oui. Forcément, en tant qu’intégrateur, ça me donne envie de vomir, et voici donc une tentative de réponse. Lire la suite de « Le Pixel Perfect »

Microsoft annonce IE10 Platform Preview

Profitant du MIX11, Microsoft a annoncé et rendu disponible une première version d’Internet Explorer 10 en « Platform Preview ». Au programme, pleins de trucs chouettes en HTML5 et CSS3 (Grid Layout, dégradés, transitions, transformations 3D, etc…). Mais surtout, dans son annonce, Microsoft en profite pour lâcher un bon gros troll.

La seule expérience native du Web et d’HTML5 aujourd’hui est sur Windows 7 avec IE9.
Microsoft, maître dans l’art du troll depuis 1975

La définition d’une vraie personne

Les interfaces graphiques sont pour les vraies personnes, et la seule autre interface qui compte ce sont les API, pour les développeurs. Parler de « vraies personnes » comme ça me rappelle le film Reservoir Dogs, après la scène du braquage de la banque, où Mr Pink et Mr White se retrouvent dans un garage, et racontent comment ils se sont échappés. Et Mr Pink demande :
« – Et toi, t’as tué du monde ?
– Juste des flics.
– Pas de vraies personnes ?
– Non, juste des flics. »
Soyons honnêtes, les développeurs ne sont pas des vraies personnes, quand on parle d’interfaces graphiques.
John Gruber, The Gap Theory of UI Design (à 4’30 »)

Tellement vrai.

Du flou gaussien en CSS3

Flou en CSS3J’adore CSS3. Chaque jour, j’en découvre un peu plus, et chaque jour, je suis surpris par de nouvelles utilisations intelligentes et un peu détournées des propriétés. Je suis retombé récemment sur cet article expliquant comment simuler un effet de flou gaussien sur du texte. Avant de passer aux explications, regardez un peu ce que ça donne appliqué sur cette page.

Voir une démo du flou en CSS3

Je suis sympa, vous pouvez recliquer sur le même lien pour désactiver le flou. Maintenant, pour arriver à ça, il vous suffit tout simplement dans votre CSS de mettre la couleur de vos textes en transparent, et d’appliquer une ombre sur le texte à l’aide de la propriété text-shadow. Pour appliquer cet effet à toutes vos balises <p>, vous pouvez ainsi écrire le code suivant.

p
{
color:transparent;
text-shadow:0 0 5px #333;
}

Vous pouvez régler les 4 valeurs de la propriété text-shadow selon vos besoins. Elles correspondent dans l’ordre à la position horizontale de l’ombre, la position verticale de l’ombre, la taille/floutage de l’ombre, et la couleur de l’ombre.

Comme d’habitude, cette propriété n’est supportée par aucune version d’Internet Explorer (même pas IE9, non non). Vous pouvez donc ajouter les lignes suivantes.

filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)";

En bonus, vous pouvez créer une transition CSS3 pour donner un effet de flou progressif pour les navigateurs WebKit et Firefox 4 en ajoutant les déclarations suivantes dans votre règle CSS de floutage.

-webkit-transition: all 2s ease-in;
-moz-transition: all 2s ease-in;

TA-DAM ! A vous la gloire avec ce magnifique effet de flou. Pour un exemple d’utilisation concret, l’auteur initial de cet effet proposait un exemple de floutage du texte derrière une lightbox. Ou sinon vous pouvez activer l’effet de flou sur cette page, et essayer de rédiger un commentaire sans faire de fautes.

La Xoom n’est pas l’iPad

La dernière information du jour concerne les ventes de la Motorola Xoom. Hier, nous vous indiquions que les analystes étaient pessimistes. Seulement, même lorsque des entreprises sortent des chiffres excellents, le marché en attend toujours plus. C’est pourquoi cette information était à prendre avec des pincettes. Mais aujourd’hui la Deutsche Bank estime qu’il n’y aurait eu que 100 000 tablettes vendues depuis la fin février. Une réaction serait de s’alarmer, mais après tout, est-ce vraiment utile ?

FrAndroid, La motorola Xoom ne se serait vendue qu’à 100 000 exemplaires. Et alors ?

Les plus grands analystes et blogueurs high-tech avaient prédis qu‘Apple vendrait entre 1 et 9 millions d’iPad la première année. Apple en a vendu 14 millions. L’iPad 2 s’est vendu à 1 million d’exemplaires en un week-end. Si je travaillais chez Motorola, j’aurais toutes les raisons de m’alarmer.

Le marché des tablettes n’est pas celui des téléphones. Si quelqu’un veut prendre Apple à son propre jeu, il va déjà falloir commencer par proposer une tablette moins cher. La Xoom coûte 599€. L’iPad 2 (32 Go) coûte 591€ (et Apple liquide ses iPad 1 pour 491€). Pourquoi un consommateur lambda irais payer plus cher une tablette autre que l’iPad qui bénéficie d’une publicité incroyable ?

iAd Gallery

iAD Gallery

Vous en avez marre de ces applications qui vous empêchent de regarder tranquillement de la pub ? Heureusement, Apple a pensé à vous et sort l’application iAd Gallery pour iPhone et iPad pour visionner les meilleures pubs réalisées pour iAd, la régie d’annonces publicitaires d’Apple. L’application n’est disponible que pour les US. Car pour rappel, les publicités iAd ne sont disponibles que pour les annonceurs Américains, avec un budget minimum de 500 000$.

La promo d’IE9 est un peu sexiste

Apparemment, je ne suis pas le seul à trouver que Microsoft joue sur des clichés un peu douteux pour faire la promo d’IE9. Asa Dotzler, responsable de Firefox chez Mozilla, pointe du doigt ce t-shirt distribué par Microsoft pour la sortie d’IE9 il y a quelques semaines.

Microsoft fait du sexisme

Pour Microsoft, en 2011, l’illustration de « rapide » c’est une fusée. OK. Pour Microsoft, en 2011, la représentation de « beau », c’est une stripteaseuse. Euh. Les mecs. Peut-être plutôt une fleur ? Un paysage ? Non ?

Forcément, comme on est sur Internet, ce pauvre Asa s’est fait insulté de tous les noms par des internautes fanboys/pervers/misogynes. Heureusement, un de ses collègues de chez Mozilla, Jono, est venu à son secours dans un article en anglais intitulé « Comment osez-vous critiquer une publicité évidemment sexiste ?« . Extrait :

Tous ces mecs débarquent de nulle part dans les commentaires pour défendre agressivement le t-shirt, nient qu’il y a un problème, et reprochent à Asa d’être « politiquement correct » ou « trop sensible ». Beaucoup sont extrêmement violents à propos de ça. Ils ont ce comportement du genre « Comment osez vous montrer ça du doigt ». Ils sont presque profondément blessés que Asa choisisse de critiquer un visuel utilisé à des fins marketing.

E-XA-CTE-MENT les réactions que j’ai reçues sur mon article sur la sortie d’IE9.

Mozilla dénonce les add-ons les plus lents

Dans la continuité de son annonce de vendredi visant à améliorer la performance de ses add-ons, Mozilla a publié une page avec les 50 add-ons qui ralentissent le plus le démarrage de Firefox.

Modules avec le temps de démarrage le plus faible

Voilà une démarche très très hypocrite de la part de Mozilla, après avoir vanté pendant des années la grandeur de sa communauté et mis en avant ces mêmes add-ons. Je n’imagine même pas le scandale que ça provoquerait si Google ou Apple diffusait une liste des pires applications mobiles sur leurs plate-formes respectives.

De la difficulté de comprendre quelque chose

Il est difficile de faire comprendre quelque chose à quelqu’un, quand son salaire dépend du fait qu’il ne le comprenne pas.

Upton Sinclair, écrivain et politique Américain (1935)

J’ai lu cette citation il y a quelques semaines sur l’excellent Daring Fireball. Ca m’a rappelé pourquoi il peut être difficile d’expliquer à un développeur Flash que Flash est train de mourir, ou à un développeur Android qu’Android est loin d’être une plate-forme ouverte.

Mozilla cherche à améliorer la performance des add-ons

Vendredi dernier (le 1er avril), Mozilla a très sérieusement posté un article présentant sa volonté d’améliorer les performances des add-ons développés par la communauté.

En moyenne, chaque add-on que vous installez ajoute environ 10% de temps de chargement au lancement de Firefox. Pour certains utilisateurs, ce ne sont que quelques millisecondes, et pour d’autres ça peut être une demi seconde; tout dépends du matériel et logiciels de chacun. Beaucoup d’add-ons ajoutent moins de 10%, mais malheureusement, il y a quelques add-ons qui ajoutent plus. Mais basé sur nos données de performance, installer 10 add-ons doublera le temps de démarrage de Firefox.

J’ai compté, j’ai 7 add-ons de Firefox activés en permanence. A 10% de temps supplémentaire par add-on, ça suffit en théorie pour doubler le temps de chargement du navigateur. En pratique, sur mon Macbook Pro (de 2010), j’ai plutôt l’impression que le chargement de Firefox approche de la minute que de quelques secondes.

C’est plutôt drôle de voir qu’une des plus grandes « forces » de Firefox, mise en avant depuis le tout début, se trouve aussi être sa plus grande faiblesse.

L’équipe de Google Chrome sur Reddit

Google Chrome

J’adore Reddit. Dans la rubrique IAmA (« Je suis un… »), des internautes célèbres ou ayant une particularité intéressante proposent de répondre aux questions des Redditeurs. Cette semaine, ce sont 3 membres de l’équipe de développement de Google Chrome qui se sont prêtés au jeu, et ça donne des questions/réponses intéressantes, drôles, et humaines. Vous trouverez donc ci-dessous un petit condensé sélectionné et traduit par mes soins des réponses de Jeff Chang (product manager), Glen Murphy (user interface designer) et Peter Kasting (software engineer). Si vous voulez tout lire en anglais, direction Reddit.

Lire les questions/réponses avec l’équipe de Google

La pizza IE8 est toujours en vente

La pizza IE8 de chez Speed Rabbit

Il y a 2 ans, pour la sortie d’Internet Explorer 8, Microsoft s’était associé avec Speed Rabbit Pizza pour faire une pizza spéciale « IE8 Explorer » (« Internet Explorer 8 Explorer » ???). Microsoft étant très attaché à son image de marque, on se doutait que l’opération allait être renouvelée pour le lancement il y a 2 semaines d’Internet Explorer 9. Ah, attendez, on me fait signe que non. La pizza « IE8 Explorer » est toujours en vente chez Speed Rabbit Pizza. Et moi qui pensais que le seul intérêt d’IE pour Microsoft était commercial… Ceci dit, ce sera toujours surement un plus grand succès que la pizza IE6.

La pizza IE6

« Ensemble, créons des liens »

Transpole

« Ensemble, créons des liens » est le slogan de Transpole, la société de transport lilloise. Vu que le métro tombe en panne quasiment tous les jours, je suppose que c’est du nofollow.

Ajouter un avatar aléatoire dans les commentaires de WordPress

La semaine dernière, j’ai mis à jour la présentation des commentaires de ce blog en affichant en plus un avatar. Ça fait joli, et ça me permet surtout de reconnaître tout de suite les gens que je connais ou que je suis sur Twitter. Pour faire ça, WordPress est bien fait puisqu’il inclut par défaut le système de Gravatar. Le principe est simple : vous créez un compte chez Gravatar, vous configurez une ou plusieurs adresses e-mails et y associez un avatar. Ensuite, les sites qui le souhaitent iront chercher automatiquement votre avatar pour l’afficher. Par défaut, on peut afficher une image pour les gens qui n’ont pas de compte chez Gravatar. C’est sympa, sauf que ça peut faire vite répétitif si plusieurs de vos lecteurs n’utilisent pas le système. Du coup, j’ai fait une petite fonction PHP qui va retourner une image aléatoirement.  Voici un petit tutoriel tout simple pour faire ça. Lire la suite du tutoriel

Internet Explorer 9 est sorti

Comme prévu, Microsoft a sorti officiellement Internet Explorer 9 cette nuit. Pour l’occasion, ils n’ont pas hésité à sortir les gros moyens et à utiliser les plus gros clichés ethniques pour vanter son navigateur.

IE9 est sorti

La sortie d’un nouveau navigateur devrait toujours être source de fête pour les intégrateurs, et pourtant je n’en vois aucun porter de chapeau pointu les fesses à l’air sur la photocopieuse. Quasiment 2 ans jour pour jour après la sortie d’IE8, cette nouvelle version fait couler beaucoup d’encre (ou pas), mais pas forcément pour les bonnes raisons. Lire pourquoi IE9 c’est de la merde

Firefox partout

Aujourd’hui, c’est la sortie officielle d’Internet Explorer 9. Vous vous en doutez, la presse spécialisée et grand public ne parle que de ça et tout le monde a les yeux rivés sur Microsoft… Attendez… Quoi… Non… Depuis quelques jours, ce n’est pas Microsoft mais Mozilla, essentiellement en la personne de Tristan Nitot (fondateur de Mozilla Europe), qui monopolise tous les médias. Le nouvel obs, Clubic, 20minutes, Silicon.fr, Ecrans.fr/Liberation et même France Culture.

#fxpartout

Vu que ça risque de ne pas se calmer les prochaines semaines d’ici la sortie de Firefox 4, je propose d’utiliser le hash #fxpartout – ou #firefoxpartout ou #nitotpartout – sur Twitter (en souvenir de vous savez qui).