Paris JS #10 : Introduction à PhantomJS, un navigateur webkit headless

Posted on by
2

Mise à jour : la vidéo est disponible sur http://lacantine.ubicast.eu/videos/parisjs-10/

Pour le dixième meetup ParisJS, j’ai présenté le projet PhantomJS. Pour résumer rapidement, PhantomJS est un navigateur Webkit sans interface graphique, qui se pilote en Javascript (ou Coffeescript).

Voilà les diapos de ma présentation (la captation vidéo sera peut être disponible plus tard):

ParisJS #10 : PhantomJs

Dans les choses que j’ai oublié de mentionner :

  • PhantomJS fonctionne sous Windows, Mac et Linux
  • il existe une version en Python, qui permet de créer des plugins pour étendre l’API standard

Les exemples de scripts

J’avais prévu des démos, mais je n’ai pas pu toutes les montrer. Je vais donc les publier ici, dans la suite de l’article. Certains exemples sont inspirés de ceux publiés par Nicolas Perriault dans son article Scrape and test any webpage using PhantomJS.

Continue reading →

Appel à orateurs pour Paris Web 2011

Posted on by
1

Paris Web 2010

Pour sa sixième édition, Paris Web vient de lancer son appel à orateurs sur le thème K.I.S.S, Keep it Simple & Smart (ou Faites simple et élégant en français). Comme vous avez des choses intéressantes à dire sur le sujet, vous avez jusqu’au 18 juin 2011 pour envoyer votre proposition. Si vous avez peur de ne pas avoir assez de choses à dire, vous pouvez proposer une présentation d’à peine 15 minutes. Et si vous avez peur de parler tout court, l’équipe organisatrice a pensé à tout : une session d’entraînement est prévue le 14 mai.

Pour tous les détails sur l’appel à orateurs, le plus simple est d’aller sur le site de Paris Web 2011 : Dates et appel à orateurs Paris Web 2011

Interview sur Utilise.ca

Posted on by
Reply

Le site Utilise.ca regroupe des “mini-entrevues avec des geeks francophones qui nous partagent les outils qu’ils utilisent au quotidien pour accomplir leur travail”. Le concept est similaire à The Setup qui compte déjà des dizaines d’interviews.

La semaine dernière, Rémi Prévost, qui édite le site, m’a demandé de me plier à l’exercice. Vous pouvez lire mes réponses aux traditionnelles quatre questions là: mauricesvay.utilise.ca.

Merci Rémi!

Soirée Performance Web le 21 juillet 2010 chez Octo

Posted on by
Reply

Éric Daspet organise une soirée sur le sujet des Performances Web le 21 juillet 2010. Sponsorisée par le cabinet de conseil Octo, la soirée aura lieu dans ses locaux à partir de 19h. Stoyan Stefanov, qui fait partie de l’équipe Exceptional Performance de Yahoo! fera une présentation de plusieurs techniques avancées pour améliorer la performance des vos sites Web. La présentation sera suivie d’une séance de questions/réponses plus libre. L’inscription est gratuite, faites passer le mot!

Si vous êtes intéressé par cet événement, tous les détails sont disponibles sur cette page : Webperf User Group France, 21 juillet 2010 Paris

PageSaver extension for Safari5

Posted on by
14

pagesaver.png

Version française à la fin de l’article.

Safari 5 has just been released with an API for writing extensions. Writing extensions is fairly easy, as long as you know javascript. I gave it a shot and wrote my first extension: PageSaver. This extension saves a screenshot of the visible part of the page to an image in your download folder. Right now, it’s still rough (images have filenames that make no sense) but it was nice to be able to write it within an hour.

Get the extension here: PageSaver.safariextz 1.1

En français: Safari 5 vient juste de sortir, avec une API pour développer des extensions. Ces extensions sont plutôt faciles à développer, dans la mesure où il suffit de savoir programmer en javascript. J’ai essayé et j’ai pu créer ma première extension: PageSaver. Cette extension fait une capture de la partie visible de la page et la sauvegarde en tant qu’image dans votre dossier de téléchargement. Pour le moment, c’est encore assez brut (les images ont des noms qui ne ressemblent à rien) mais c’est assez sympa de pouvoir écrire une extension en une heure à peine.

Chunk Five font, now with accents

Posted on by
19

Chunk Five is a great font from The League of Moveable Type. It’s a nice slab serif that works perfectly for headlines. I recently wanted to use it for a project but there was a major deal breaker: the font has no accent and is missing a lot of characters. Very disappointing. But the cool thing, is that this font is open source: not only it can copied or embed as a webfont, but it can also be modified!

Because I love open source and I love this font, I spent the week-end adding the missing glyphs to Chunk. My version of the font has now twice more glyphs than the original (from 85 to 170). However, it’s still missing many glyphs and it might be buggy.

If you want to give it a try, just download Chunk Five with accents.

Chunk Five with accents

Créer un spot lumineux avec CSS3 et Javascript

Posted on by
3

css3-spotlight.jpg

Il y’a quelques mois, j’avais essayé de faire un effet de spot lumineux avec SVG. Pour expérimenter, j’ai voulu réaliser le même effet avec HTML, CSS et Javascript seulement. Mais avant de continuer l’explication, je vous donne le lien pour tester avec un Webkit récent (Safari4 ou Chrome) ou Firefox:

Démo CSS3 Spotlight

Donc, pour réaliser cette démo, j’ai mélangé les ingrédients suivants:

  • des CSS gradients, pour générer le spot;
  • des web fonts, pour avoir une jolie typographie;
  • des CSS transforms, pour incliner le texte;
  • des couleurs RGBA, pour avoir de la transparence;
  • la propriété pointer-events, pour pouvoir cliquer sous le spot
  • et un peu de Javascript, pour rendre ça interactif.

La raison pour laquelle cette démo ne fonctionne qu’avec Webkit, c’est que je n’ai pas trouvé comment réaliser le même dégradé radial avec Firefox. Je sais que Firefox les supporte, mais la syntaxe est différente et ne permet pas de définir la taille du dégradé manuellement.

J’ai dit une connerie, ça marche très bien sous Firefox grâce à Florent Verschelde.

Je pense qu’il doit y avoir encore plein d’autres manières de créer cet effet (avec du <canvas> par exemple). Vous feriez ça comment vous?