12/27/2010

[Edit] Trickle clone (free iPhone/Android web app)

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.

Test Trickle-clone on your iPhone using this url: http://fgribreau.com/trickle/ 

Disclaimer: This app is only a proof of concept, your iPhone may explose, burn, die...

[Update] Trickle seems to work on Android Too.
[Update 28 Dec.] The source code is now available on my GitHub
11/30/2010

How to get the jQuery's data of an iframe child element

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.

9/12/2010

jQuery AttributeObserver - Observe HTML elements attribute change

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


8/10/2010

jQuery FireEvent - A Plugin for firing real DOM events

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
8/08/2010

[Video] Some experiments with HTML5 Canvas

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

8/02/2010

[Snippet PHP] apc_exists for APC < 3.1.4

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:


How to know if $ is jQuery ?

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:

How to get the call-stack of a javascript function

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.
7/30/2010

[Fun] The Inception Code ! (spoiler)

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

7/19/2010

iMovie pour iPhone == nul !

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.
6/16/2010

How to make Firebug methods chainable.

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.
6/09/2010

Trouver le selecteur jQuery d'un élément HTML ( jQuery getPath )

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).


Fork jQuery getPath on Github

[MAJ] XPath ainsi que $('*').index(htmlElement); sont aussi d'autres moyens pour arriver à la même finalité.
3/24/2010

Spritely in PURE CSS3

(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):
@-webkit-keyframes animClouds{
0% {background-position: 0px 102px; }
100% {background-position: -1068px 102px; }
}

#clouds {
-webkit-animation-name: animClouds;
-webkit-animation-duration: 70s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;

/* is the same as */
-webkit-animation:animClouds 70s linear 0s infinite;
}

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;
}


And that's all ! Check the demos here (Safari/Chrome only): Demo 1 Demo 2

1/13/2010

jQuery 1.4: What's new & useful

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; }

Don't forget to follow me on twitter @FGRibreau :)

1/09/2010

Diaporama de ma conférence "Découverte HTML5/CSS3"

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.
« »
 
 
Made with on a hot august night from an airplane the 19th of March 2017.