In Molokoloco,Shared Items | 7 Jan 2012
CasperJS is an open source navigation scripting & testing utility based on PhantomJS, the scriptable headless WebKit engine. It eases the process of defining a full navigation scenario and provides useful high-level functions, methods & syntactic sugar for doing common tasks such as:
In the following example, we’ll query google for two terms consecutively, “capserjs” and “phantomjs”, aggregate the result links in a standard Array and output the result to the console.
Fire up your favorite editor and save the javascript code below in a googlelinks.js file:
In the following example, we’ll query google for two terms consecutively, “capserjs” and “phantomjs”, aggregate the result links in a standard Array and output the result to the console.
Fire up your favorite editor and save the javascript code below in a googlelinks.js file :
var links = []; var casper = new phantom.Casper(); function getLinks() { var links = document.querySelectorAll('h3.r a'); return Array.prototype.map.call(links, function(e) { return e.getAttribute('href') }); } casper.start('http://google.fr/', function(self) { // search for 'casperjs' from google form self.fill('form[name=f]', { q: 'casperjs' }, true); }); casper.then(function(self) { // aggregate results for the 'casperjs' search links = self.evaluate(getLinks); // now search for 'phantomjs' by fillin the form again self.fill('form[name=f]', { q: 'phantomjs' }, true); }); casper.then(function(self) { // aggregate results for the 'phantomjs' search links = links.concat(self.evaluate(getLinks)); }); casper.run(function(self) { // echo results in some pretty fashion self.echo(links.length + ' links found:'); self.echo(' - ' + links.join('\n - ')).exit(); });
In Molokoloco,Shared Items | 7 Jan 2012
@floriancargoet (whom i meet at @ParisJS) come with a nice idea : automating some elements screenshot in a WebApps/WebPages powered with #PhantomJS (headless WebKit with JavaScript API). He’s idea is to generate multilingual documentation for a complexe application (Ext JS / Sencha).
In his example, the use of Ext.js give some constrain finding the element offset in the page…
/* * page.evaluate() is sandboxed * so that 'component' is not defined. * * It should be possible to pass variables in phantomjs 1.5 * but for now, workaround! */ eval('function workaround(){ window.componentSelector = "' + component.selector + '";}') page.evaluate(workaround); var rect = page.evaluate(function(){ // find the component var comp = Ext.ComponentQuery.query(window.componentSelector)[0]; // get its bounding box var box = comp.el.getBox(); // box is {x, y, width, height} // we want {top, left, width, height} box.top = box.y; box.left = box.x; return box; }); page.clipRect = rect; page.render(component.output);
But with jQuery it could be as simple as this…
page.clipRect = $('ul#menu').offset(); page.render(component.output);
See the blog post for more infos
In Molokoloco | 7 Dec 2011 | Laisser un commentaire
Merci à @bobylito qui vient de mettre les vidéos (du live) en ligne sur Dailymotion.
On trouve entre autre ma présentation sur readr.js . Mais aussi plein de super autres sujets (http://www.dailymotion.com/ParisJS #ParisJS)
Ça fait drôle de se voir en vidéo, et ça fait drôle de parler devant beaucoup de gens avec plein de lumière dans les yeux :)
In Coding Projects,Molokoloco | 1 Dec 2011 | Laisser un commentaire
“My Book ReadR” La présentation que j’ai faite hier soir à la conférence #ParisJS 13 (parisjs.org).
In Coding Projects,Molokoloco | 29 Aug 2011 | Laisser un commentaire
[UPDATE 30/11/11 - Présentation en ligne : http://www.b2bweb.fr/bonus/my-book-readr/]
J’ai passé pas mal de temps pour réécrire complétement le code du lecteur de livre en ligne que j’avais publié avant les vacances.
My Book Readr, c’est un code source ouvert qui peut permettre à tout à chacun de publier un long texte sur Internet via une page dédiée à la lecture en ligne.
Voici donc un code tout frais, inspiré des recommendations officielles de la team jQuery.
Je ne suis pas parti dans un code purement orienté object, mais dans un concept qui me parait beaucoup plus souple, et adapté à une forte customisation de tous les paramètres.
Le mieux que vous puissiez faire, c’est jeter un coup d’oeuil sur le fichier JavaScript principal (Cf. lien plus bas…)

Exemple de code, créé pour l’application…
My Book ReadR V1.12 – Polished HTML5/CSS3 and jQuery powered “read-a-book” page
This start from the idea to design a page specially engineered to read a long book on the web…
[Appel] Ce projet manque de contributeurs sur GitHub !!!
Il reste quelques pétouilles à corriger (évidemment… ;), deux ou trois TODOs dans les commentaires, et surtout, prendre un peu de temps pour le faire tourner sur les i-machins et autres Droids…
In Coding Projects,Molokoloco | 13 Jul 2011 | Laisser un commentaire

Personnal codingsheets! New source code is now hosted on Github !
And also my Virtual Admin PHP4/JS Prototype Framework, for managing CMS (2005~2008)
Julien Guézennec 2011 | molokoloco@gmail.com | http://www.b2bweb.fr …. Work definitely in progress…
View more presentations from Addy Osmani
Hey guys. I just wrapped up my talk on Tools for jQuery Application Architecture over at Web Directions in London and wanted to make sure anyone interested had access to the slides. This is the extended version, which includes about 15 slides that weren’t in the original deck, but may prove useful.
Some of the topics I cover include:
In Molokoloco,Shared Items | 17 Apr 2011
Shared by molokoloco
On me conseille ce framework pour l’embarqué, à tester…
Performances are mainly achieved by :
Example :
/* <button>Hello</button> */ scope.ready(function(my, $) { $('button').on('click', function() { my('box').setText('Hello World from my.js!') .addClass('message') .setLeft(200, {duration: 300}); }); });
MyBookReadR | The RSS Wall | Carousel slider | Fast web start | Try it :)
My latest sources and sheets :
Github sources | Personnal wiki | jsFiddle example | WebDev bookmark