Yesterday night while I was reading some news on my iPhone I discovered Trickle.


I was wondering if I would be able to develop a basic HTML5/Javascript clone in less than 3 hours. Alright, I was.

Since jQuery has his own way of handling data storage, getting data via jQuery.data() from an iframe child element will always return an empty object if the data was set using the iframe's jQuery.

With jQuery AttributeObserver you can bind a callback that will be triggered when an element's attribute value change, and... that's it.

Or in other words: "How to fire real javascript events". But why? jQuery has already a trigger method for this kind of need ! If you can't get why you have to use this plugin. Try to inject jQuery on this Mootools demo page and run:
jQuery('#v_toggle').click(); //or .trigger('click')
Nothing happens... That's because Mootools & jQuery have their own way to create and fire events. They do this way to support bind namespacing, multiple binding ...

jQuery FireEvent allows you to fire real DOM events. Now, come back to the Mootools page, inject jQuery fireEvent plugin and run:
jQuery('#v_toggle').fireEvent('click');
Even if the v_toggle element was binded with some Mootools magic, because we're firing a real DOM event, all works great ! This plugin is really useful in high conflicted environment where we can't find if an element was binded by one or more javascript libraries.

Fork jQuery FireEvent on GitHub

Here is some experiments I've done on a sunday afternoon with an HTML5 Canvas element and some neat javascript stuff. Enjoy !

Problem:

Fatal error: Call to undefined function apc_exists() in xxxx.php on line xx
That's because APC may not be activated or because your APC version is less than 3.1.4.

Fix:

Sometime (mostly in highly conflicted environement) you may want to know if $ is really a jQuery alias. Because $ can be an alias for Mootools too (and of course other libs).

Here is a way to detect jQuery:

And to be more precise: How to get the call-stack of a Javascript function everytime she's called without blocking the execution.

From time to time you may want to see every call-stack of a specific function for profiling concerns.

Here is a naive approach:


When executed in firebug, only 1 Error is shown. We miss the alert() and the second call from doAnotherThing.

Solution? Prefer console.log instead of throw:


Now our 2 error (with call-stack) appear in Firebug while the alert('ok') pop-out as expected.

While watching Inception I couldn't stop thinking about recursion (a dream in a dream).
And here we are...

Il n'y a pas de mots assez fort pour exprimer mon mécontentement vis à vis de iMovie pour iPhone. L'application après 3 jours d'utilisation devient totalement buguée. L'ajout d'un clip au projet empeche la lecture, les transitions ne se lancent plus, le passage d'un clip à un autre ne s'effectue pas (les clips suivants ne sont pas lu). Seul la musique est lancée en arrière plan. Il est possible de redimensionner le dernier clip avec des comportements improbables: réduire le clip au delà de sa taille, entraine la réduction du temps total du projet (et donc la réduction des autres clips)

Comment Apple peut promouvoir un produit aussi bugué lors d'une keynote? Apple est pour moi une marque représantant la fiabilité... iMovie pour iPhone est tout sauf fiable (Il faut parfois plusieurs démarrages avant qu'il ne daigne se lancer)

Le chargement de l'applications et des clips dépassent largement les 10secs (4 projets, plus de 160 vidéos).

Bref, en tant qu'utilisateur je suis extrement irrité par cette application dont les performances et la fiabilitée se rapprochent plus d'une version alpha qu'autre chose.

J'attends une mise à jour gratuite et une application à la hauteur des produits Apple.

I just wrote this piece of code (mainly for fun) which let you use Firebug methods with chained calls.



Usage:



Ps: If you want to create chainable methods, just add "return this;" at each methods end. makeChainable is only usefull with already created objects.

Je développe depuis quelques heures un module web permettant de "monitorer" de manière générique les mouvements et actions d'un visiteur. L'objectif est de reproduire en temps réel via XMPP toutes ces actions dans un autre navigateur (donc DOM différent).

Je devais donc trouver un moyen d'identifier un élément de manière unique sur une page, puis de transférer cet "ID" au navigateur - de l'administrateur par exemple - afin que le module reproduise l'événement.

Il y a 2 ans (déjà!) j'avais développé une fonction permettant de trouver le chemin XPath d'un élément html. Voici une variation afin de trouver un possible sélecteur jQuery pour un unique élément HTML donné (et non à partir d'un $('a.className') car dans ce cas, le selector est simplement un attribut de l'objet jQuery: $('a.className').selector).

(Disclaimer: I've tried in an entirely week-end to animate birds using only CSS3 but without great success... sorry about that).

1) animate the clouds (#clouds):

2) animate the hills (#hill2 & #hill1):
@-webkit-keyframes animHill2{
from {background-position: 0px 258px; }
to {background-position: -1110px 258px; }
}

@-webkit-keyframes animHill1{
0% {background-position: 0px 104px; }
100% {background-position: -2220px 104px; }
}

#hill2{
-webkit-animation: animHill2 25s linear 0s infinite;
}

#hill1 {
-webkit-animation: animHill1 25s linear 0s infinite;
}

You may not have noticed but I've tweeted about jQuery 1.4 new features. Here is my selection of the best jQuery 1.4 brand-new methods:

#jQuery 1.4 .delay( duration, [ queueName ] ) method seems very useful ! http://api.jquery.com/delay/

#jQuery 1.4 .toArray(); //helper
toArray: function() { return slice.call( this, 0 ); }
#jQuery 1.4 .prevUntil() .nextUntil() .parentsUntil() ROCKS! http://bit.ly/5DDcsv //A new way for traversing the DOM :)

#jQuery 1.4 jQuery.noop() ? I Don't get the point... http://api.jquery.com/jQuery.noop/
noop: function(){}
#jQuery 1.4 .isEmptyObject(obj) //helper
isEmptyObject: function( obj ) { for ( var name in obj ) { return false; } return true; }

Voici le diaporama de ma conférence "Découverte HTML5/CSS3" avec une introduction aux bonnes pratiques dans le développement web:


N'hésitez pas à commenter, mettre en favoris le diaporama sur la page slideshare.