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 Coding Projects,Molokoloco | 23 Oct 2011 | Laisser un commentaire
[UPDATE : Projet en cours de refonte ici : https://github.com/molokoloco/jQuery.boxFx]
J’ai voulu tester ce que pouvais donner un émetteur de particule en DOM jQuery/CSS (Sans canvas)…
C’est un plugin léger et hyper-customisable, son principe et de (re)générer, X fois par secondes, un élément HTML, de lui appliquer des propriétés CSS3 (de départ), de l’insérer dans le DOM.
Le plugin applique quasi immédiatement les propriétés CSS de fin, et, au bout d’un certain temps, recycle l’élément : L’animation n’est pas faite avec jQuery $.animate() mais grâce aux propriétés CSS3 de transition, afin de bénéficier de l’accélération matériel (GPU)
En arrière plan, le plugin contient quelques méthodes qui permettent aux propriétés “cssFrom” et “cssTo” de supporter automatiquement l’ajout du “browser prefix” :
$.fn.crossCss = function(css) { return this.each(function() { var $this = $(this); if (typeof css != 'object') return $this; for (var p in css) if (Modernizr.prefixed(p)) css[Modernizr.prefixed(p)] = css[p]; return $this.css(css); }); };
Support cross-browser : Transition, borderRadius, borderImage, maskImage, Transform, boxShadow, etc
Le plugin écoute (bind) plusieurs événement via des méthodes publiques : start, stop, update, …
Exemple d’utilisation :
// Permet de mettre à jour, depuis n'importe quelle fonction, une ou des propriétés de l'émetteur $emitter1.trigger('update', [{emitterRadius:16, rate:0}]);
Il envois (trigger) un évènement à chaque emission de particule (Cf. source) :
// Ecouter si un nouveau sprite à été émis $emitter1.bind('emit', function(e, $sprite) { $sprite.html('Ok'); // On modifie en live le contenu });
Si la valeur “options.rate” est mise à Zéro, le plugin utilise la fonction “requestAnimationFrame()”, à la place de “setTimeout()”, afin de maximiser les performance.
Pour le moment il fait des bulles dans l’espace… mais on peu tout imaginer, des tweets, une cascade verticale, des images, beaucoup beaucoup de possibilités… de la synchro audio/vidéo,… Par exemple tapez une lettre entre les deux balises “<div></div>”
C’est pour cela que le code est ouvert sur Github ! :)
J’ai fais ce que j’ai pu pour chasser les bugs, mais il doit bien en rester ^^, vos commentaires sont les bienvenus…
PS : Cette ancienne démo est rigolote aussi :
http://jsfiddle.net/molokoloco/wRS8A/
In Coding Projects,Molokoloco | 8 Oct 2011 | Laisser un commentaire
Je voulais partager mon nouveau plugin jQuery d’horloge analogique. C’est un script léger, sans image, et uniquement basé sur CSS3 et jQuery.
J’ai essayé d’écrire un code compatible sur les différents navigateurs et c’est commenté… Merci à cet article “quick-look-math-animations-javascript” et d’autres, pour l’inspiration…
La petite démo est ici : http://jsfiddle.net/molokoloco/ajcRz/
La grosse démo (V2) est ici : http://jsfiddle.net/molokoloco/V2rFN/ [Edited]
—
I want to share my new jQuery analogue clock plug-in.
This is à lightweight code, with no images, and only powered with jQuery and CSS3.
I’ve intended to write a annotated cross-browser -past and futur-proof CSS3 code and a simple as possible jQuery extend… Thank to this article “quick-look-math-animations-javascript” and others, for the inspiration…
You can watch the demo here : http://jsfiddle.net/molokoloco/ajcRz/
Demo V2 : http://jsfiddle.net/molokoloco/V2rFN/ [Edited]
GitHub sources :
In Shared Items | 27 Sep 2011
Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more. With the help and feedback of many engineers at Twitter, Bootstrap has grown significantly to encompass not only basic styles, but more elegant and durable front-end design patterns.
Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox. Bootstrap comes complete with compiled CSS, uncompiled, and example templates.
Shared by molokoloco
Excellente présentation de PhantomJS par @mauriz…
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) :
View more presentations from Maurice Svay
Dans les choses que j’ai oublié de mentionner :
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…
In Molokoloco,Shared Items | 6 Jul 2011
Shared by molokoloco
Enorme ! Une tonne d’astuces JS ici (Attention, c’est plus advanced que mon propre Wiki !)
using yield operator (JavaScript 1.7)
// thread definition function Thread( name ) { for ( var i = 0; i < 5; i++ ) { Print(name+': '+i); yield; } } // thread management var threads = []; // thread creation threads.push( new Thread('foo') ); threads.push( new Thread('bar') ); // scheduler while (threads.length) { var thread = threads.shift(); try { thread.next(); threads.push(thread); } catch (ex if ex instanceof StopIteration) {} } // Prints : foo: 0 bar: 0 foo: 1 bar: 1 foo: 2 bar: 2 foo: 3 bar: 3 foo: 4 bar: 4
PS : A regarder aussi, JSlibs : http://code.google.com/p/jslibs/
JSlibs is a standalone JavaScript development runtime environment for using JavaScript as a general-purpose scripting language.
JSlibs uses SpiderMonkey library that is Gecko’s JavaScript engine and provides a set of native modules like : zlib, SQLite, FastCGI, NSPR, ODE, libpng, libjpeg, librsvg, SDL, libiconv, OpenGL, OpenAL, ogg vorbis, libTomCrypt, libffi, etc…
In Coding Projects,Shared Items | 30 Jun 2011
Shared by molokoloco
@Clochix a fait un bon résumé du #ParisJS d’hier, avec un petit passage, qui m’a bien fait rire, sur votre humble serviteur ;)
J’attaque enfin sérieusement ma reconversion professionnelle à JavaScript, et ai donc été faire un tour hier soir à la huitième soirée organisée par le groupe des utilisateurs parisien de JavaScript, histoire de prendre la température de la communauté. Quelques ressentis personnels et un résumé des
présentations.
L’engouement pour JavaScript que je ressens sur le Net se confirme sur le terrain. Il [...]
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:
MyBookReadR | The RSS Wall | Carousel slider | Fast web start | Try it :)
My latest sources and sheets :
Github sources | Personnal wiki | jsFiddle example | WebDev bookmark