In Coding Projects,Molokoloco | 3 Jun 2012 | Laisser un commentaire
Voici un projet que j’aimerais enfin présenter (6 mois après !). Je ne sais pas par où commencer tellement le sujet est vaste ^^
Pour cerner le sujet en quelques ligne : jQuery BoxFX est un émetteur de particules DOM
C’est un plugin jQuery léger (~1000 lignes) et hyper-customisable qui permet de créer/animer des éléments dans une page. De manière simple. En moins de dix lignes de configuration, pour les développeurs ou les designers…
Pour faire une animation il faut une surface, cela donne les coordonnées X et Y. C’est la “Box”. Cela peut être une DIV, le BODY… Ensuite il nous faut des trucs à faire bouger dedans… des abeilles ? !! Non trop intelligentes les abeilles… on va prendre des “graines” (seeds) On vas secouer des graines dans une boite ^^
Le principe et de 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. Quasi immédiatement, le plugin applique les propriétés CSS de fin, le navigateur se chargeant de faire l’animation, et, au bout d’un certain temps, on recycle l’élément. Le plugin fonctionne aussi très bien avec les Keyframes. Un des avantages est de pouvoir manipuler des éléments en masse, sans éditer de CSS en masse !!
Sur les page web nouvelle génération, il s’agit souvent de flux d’infos : le mur facebook avec des news, Twitter, votre site d’actus préféré, les commentaires autour des morceaux sur soundcloud… Des petites boites avec un contenu qui passent et peuvent disparaissent une fois vue… Un flux de de donné sous forme d’items…
BoxFX est capable de prendre un tableau de donné et de le dépiler dans un nombre d’éléments HTML que vous définissez. Cela peut être 50 news a faire défiler une fois dans une dizaine de “boites” ou à l’inverse 3 mots a faire tourner en boucle dans 100 petites boites.
Tout est expliqué dans le README du projet (qui est assez conséquent et en Anglais… Courage !)
Au fond, le plugin peut s’utiliser de toutes les manières :
(C’est la suite de http://www.b2bweb.fr/molokoloco/emitter-sprites-particules-factory-with-jquery-css3/)
Rien ne vaut une démo… donc :
Voici un exemple concret pour votre site :
$emitter1 = $('div#emitterZone1').boxFx({ seeds : '<div>N°{id} - {title}</div>', data : [ {id:1, title:'toto'}, {id:2, title:'tutu'}, {id:3, title:'toto'}, {id:4, title:'tutu'}, {id:5, title:'toto'}, {id:6, title:'tutu'}, {id:7, title:'toto'}, {id:8, title:'tutu'} ], effect : '', newAtTop : true, stopAtEnd : 'detach', delay : 4000, maxSeeds : 10, emitterRadius : 0, styles : {}, keyframes : [{ duration : '24000ms', timingFunction : 'linear', iterationCount : '1', direction : 'normal', steps : [{ step: '0%', opacity: .7, transform : function() { return 'translate(-100px, '+$.getRand((middleTop - minMax), (middleTop + minMax))+'px)'; } // rotate('+$.getRand(-6, 6)+'deg) }, { step: '30%', opacity: 0 }, { step: '70%', opacity: 0 }, { step: '100%', opacity: .7, transform : function() { return 'translate('+($.q.windowWidth + 100)+'px, '+$.getRand((middleTop - minMax), (middleTop + minMax))+'px)'; } }] }] }); $('a#stop').click(function() { $emitter1.trigger('stop'); }); |
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 [...]
MyBookReadR V2 | jQuery.colonize | jQuery.boxFx | jQuery.analogueClock2 | The RSS Wall | FastWebStart
My latest sources and sheets :
Github sources | Personnal wiki | jsFiddle example | WebDev bookmark