Développeur front-office, Drupal themeur en Auvergne
+ Todo list

50 techniques AJAX populaires ; exemples, démonstration, guide

2
04 novembre 2008 à 12:22

J'avais publié ici-même une liste de 240 plugins jquery qui permettent de faire beaucoup de choses pour améliorer l'interface d'un site web. Voici désormais 50 techniques AJAX (tout framework javascript confondu) qui sont très populaires. Ce listing provient de noope.com

Ajax Forms

ShoutBox

Validate a Username AJAX

Ajax Instant Messenger

Ajax Tabs Content

Ajax Shopping Carts

Ajax Star Ratings

Ajax Inline Edit

Ajax Progress Bar

Ajax Pagination

Ajax File Browser & Manager

Ajax Calendar

Ajax Photo Manipulation

Ajax Dynamic Image Gallery and Slideshows

Ajax File Upload

Ajax AutoCompleter

CMS

Polls

Tabular data manipulations

Miscellaneous

Les 10 antisèches du développeur web

7
25 octobre 2008 à 15:11

Pullulent sur le web des mémentos, des antisèches, des cheatsheet de tout genre. Ces documents sont la plupart du temps au format A4 (paysage ou portrait) et sont très pratiques en cas de de panne de mémoire. Ils listent toutes les commandes, fonctions, méthodes, balises, api, etc. indispensables qu'on a déjà utilsé plus ou moins mais dont on ne se souviendrait plus. Difficile de connaître tout par coeur...

Du coup on est souvent amené à chercher sur internet... Sur des sites comme http://www.gotapi.com Mais avec l'expérience je me rends compte que finalement c'est aussi bien d'avoir la doc essentielle sur papier juste sous les yeux, c'est plus rapide et je m'en souviens la fois d'après.

Ainsi, j'ai tapé dans google cheatsheet filetype:pdf et j'ai constaté qu'il y avait énormément de ressources pdf sur l'informatique. Que chaque programme, chaque langage avait plus ou moins son petit récapitulatif qui tenait sur un fond d'écran 1025*768.

Du coup je vais lister celles qui me sont utiles - j'en ai rien à foutre du mémento de matlab et d'excel.

1/ Memento Commandes Unix / Linux (pdf)

2/ Memento Mod_rewrite Apache .htaccess (jpg)

3/ Memento requêtes Mysql (pdf de 2 pages)

4/ Memento Php (jpg)

5/ Memento HTML (pdf)

6/ Memento CSS (pdf)

7/ Memento jQuery (framework javascript, ajax) (pdf/png)
- Le fond d'écran http://cheatsheet.googlecode.com/svn/trunk/cheatsheet/src/jquery/jquery1.2-cheatsheet-1280-001.png
- Le pdf

8/ Memento CMS : Spip, Drupal, Wordpress
- Enrichissement typographique sur spip (pdf)
- Cours sur le back-office de spip côté administrateur (pdf)
- Cours sur le back-office de spip côté rédacteur (pdf)
- phptemplate Drupal 5 (pdf)
- Memento Drupal de base (png)
- Memento pour la traduction d'un site avec Drupal (pdf)
- Espace d'administration de Wordpress (pdf)
- Memento des bonnes pratiques pour optimiser son site pour les moteurs de recherche avec Wordpress (pdf)

9/ Memento du SEO
(pdf)

10/ Divers
- Memento des opérateurs de recherche sur google (pdf)
- Memento de tous les services Google (pdf)
- Memento des paramètres de recherche de google (pdf)
- Memento actionscript 3 (jpg)
- Memento RoR Ruby on Rails (pdf)
- Memento Mootools (framework javascript) (pdf)
- Memento wikipedia (pdf)

John Resig (jQuery/Mozilla) nous parle de javascript avancé et processing.js

0
23 septembre 2008 à 06:57

John Resig a donné de conférences au web2.0 Expo à New York et à Boston. Il a parlé de Javascript. Forcément. De fonctions, de prototypage, d'héritage, etc. Bref que des belles choses. On peut voir sa présentation au format en cliquant sur l'image ci-dessous.


Il a donné un second exposé sur son travail sur processing.js et sur la construction de belles images avec les Canvas

Building a Visualization Language
View SlideShare presentation or Upload your own. (tags: processing canvas)

Il n'a pas oublié de nous représenté son jQuery.

jQuery - Boston IxDA
View SlideShare presentation or Upload your own. (tags: jquery ixda)

Effets en javascript avec dojo.

0
19 août 2008 à 07:50

Le framework javascript Dojo est intéressant. De nouveaux effets sont disponibles pour animer vos blocs d'informations : transitions, fondus, désintégrations, morcellements, explosions, etc. Et ça reste très personnalisable et configurable pour l'utilisateur : distance entre les pièces, effet de fondus ou non, nombre de lignes et de colonnes à découper, etc.

C'est àvoir sur http://gruppler.dojotoolkit.org/

via ajaxian

Compresser du javascript. Réduire la taille de ses fichiers JS.

3
15 août 2008 à 20:52

Pour gagner quelques centièmes de secondes afin d'optimiser le temps de chargement de votre page web, il est judicieux de compresser votre code javascript, surtout si celui-ci est important.

Les frameworks de type jquery, extjs, yahoo! library, dojo ou encore prototype utilisent bien évidemment la compression dans les fichiers de productions. Ainsi jquery, mon framework préféré, met à disposition des internautes 3 versions à chaque fois à télécharger :
- une version à utiliser pour la production. La version où les variables sont renommées et encodées et où les espaces, tabulations, sauts de lignes sont supprimés. >> jQuery 1.2.6 (16kb, Minified and Gzipped)
- une version sans encodage de variables mais avec suppressions des espaces, tabulations et sauts de ligne. >> jQuery 1.2.6 (30kb, Packed)
- une version sans compression jQuery 1.2.6 (97kb, Uncompressed)

Il existe une petite application en ligne http://dean.edwards.name/packer/ qui fait ça très bien. Vous copiez/collez votre code dans le champ de formulaire, vous cochez Base encode et Shrink variables et vous cliquez sur le bouton Pack.

Et vous obtenez un code qui commence comme celui-ci :

eval(function(p,a,c,k,e,r){e=function(c){return(c

Quelle est la manière de coder les boucles en Javascript la plus rapide (while do, for, arr.forEach, etc.)

2
28 juillet 2008 à 18:50

http://blogs.sun.com/greimer/entry/best_way_to_code_a

I built a loop benchmarking test suite for different ways of coding loops in JavaScript. There are a few of these out there already, but I didn't find any that acknowledged the difference between native arrays and HTML collections. Since the underlying implementations are different (HTML collections for example lack the pop() and slice() methods, etc), benchmarks that don't test against both are probably missing important information.

My suspicions were confirmed. Accessing the length property is more expensive on HTML collections than on arrays, depending on the browser. In those cases, caching it made a huge difference. However, HTML collections are live, so a cached value may fail if the underlying DOM is modified during looping. On the other hand, HTML collections will never be sparse, so the best way to loop an HTML collection might just be to ignore the length property altogether and combine the test with the item lookup, since you have to do that anyway:

Native Array (length=1000, looped 100 times)
Basic for loop. for (var i=0; i<arr.length; i++) { } 8ms
For loop, but caching the length. for (var i=0, len=arr.length; i<len; i++) { } 5ms
While loop that imitates a for loop. var i = 0; while (i < arr.length) { i++; } 7ms
While loop that imitates a for loop, caching the length. var i = 0, len = arr.length; while (i < len) { i++; } 4ms
While loop in reverse, simplifying the test condition. var i = arr.length; while (i--) { } 2ms
do ... while loop in reverse. var i = arr.length-1; do { } while (i--); 3ms
While looping by popping values (this fails on sparse arrays). var x; while (x = arr.pop()) { } 10ms
for ... in loop for (var i in arr) { } 30ms
for ... in loop, with integer test var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; for (var i in arr) { if(!isInt.test(i)){continue;} } 206ms
For loop, testing on existence rather than length (this fails on sparse arrays). for (var i=0; arr[i]; i++) { } 5ms
For loop, testing on existence rather than length, plus array lookup. for (var i=0; arr[i]; i++) { var x = arr[i]; } 9ms
For loop, testing on existence rather than length, array lookup is combined with test. for (var i=0, x; x = arr[i++];) { } 5ms
For reference. for (var i=0, len=arr.length; i<len; i++) { var x = arr[i]; } 9ms
Array.forEach() native implementation. arr.forEach(function(x){}); 41ms
For reference against forEach(). var f=function(x){}; for (var i=0, len=arr.length; i<len; i++) { f(arr[i]); } 43ms
Sparse Native Array (length=11698, sporadically populated with 1000 items, looped 100 times)
Basic for loop. for (var i=0; i<sarr.length; i++) { } 111ms
For loop, but caching the length. for (var i=0, len=sarr.length; i<len; i++) { } 59ms
While loop that imitates a for loop. var i = 0; while (i < sarr.length) { i++; } 106ms
While loop that imitates a for loop, caching the length. var i = 0, len = sarr.length; while (i < len) { i++; } 53ms
While loop in reverse, simplifying the test condition. var i = sarr.length; while (i--) { } 31ms
do ... while loop in reverse. var i = sarr.length-1; do { } while (i--); 32ms
for ... in loop for (var i in sarr) { } 36ms
for ... in loop, with integer test var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; for (var i in sarr) { if(!isInt.test(i)){continue;} } 197ms
Array.forEach() native implementation. sarr.forEach(function(x){}); 183ms
For reference against forEach(). var f=function(x){}; for (var i=0, len=sarr.length; i<len; i++) { f(sarr[i]); } 668ms
HTML Collection (length=1000, looped 100 times)
Basic for loop. for (var i=0; i<hColl.length; i++) { } 130ms
For loop, but caching the length. for (var i=0, len=hColl.length; i<len; i++) { } 5ms
While loop that imitates a for loop. var i = 0; while (i < hColl.length) { i++; } 129ms
While loop that imitates a for loop, caching the length. var i = 0, len = hColl.length; while (i < len) { i++; } 4ms
While loop in reverse, simplifying the test condition. var i = hColl.length; while (i--) { } 3ms
do ... while loop in reverse. var i = hColl.length-1; do { } while (i--); 3ms
for ... in loop for (var i in hColl) { } 111ms
for ... in loop, with integer test var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; for (var i in hColl) { if(!isInt.test(i)){continue;} } 269ms
For loop, testing on existence rather than length (this fails on sparse arrays). for (var i=0; hColl[i]; i++) { } 133ms
For loop, testing on existence rather than length, plus array lookup. for (var i=0; hColl[i]; i++) { var x = hColl[i]; } 262ms
For loop, testing on existence rather than length, array lookup is combined with test. for (var i=0, x; x = hColl[i++];) { } 137ms
For loop, testing on existence rather than length, array lookup is combined with test, item() instead of array brackets. for (var i=0, x; x = hColl.item(i++);) { } 222ms
For reference. for (var i=0, len=hColl.length; i<len; i++) { var x = hColl[i]; } 138ms

Les frameworks javascript les plus utilisés ? Prototype, jQuery, Mootools, Yahoo! UI

3
16 juin 2008 à 12:12

Parmi 200 sites du top100 d'Alexa US et du top100 de Web Apps, la société Pingdom a examiné ceux qui utilisent un framework Javascript tels que : Prototype, JQuery, MooTools, Yahoo! UI Library, Dojo, ExtJS and MochiKit. En réalité l'étude s'est concentré uniquement sur Prototype, jQuery, Mootools, et Yahoo! UI Librairy. Les autres n'étant pas vraiment utilisés.

A noter que cette étude n'a porté que sur les pages d'accueil de ces sites.

Pour Prototype. Un total de 13 sites a été recensé.

 

Pour jQuery. Un total de 11 sites a été recensé.

 

Pour Mootols. Un total de 4 sites a été recensé.

Pour Yahoo. Un total de 7 sites a été recensé.

Il est intéressant de constater que certains sites comme Digg(Prototype et jQuery), Bebo (Mootools et YUI), YouSendIt (Prototype et YUI) utilisent 2 frameworks conjointement.

Jeu en Javascript avec la bibliothèque MooTools.

0
02 juin 2008 à 08:07

BeSlimed est un jeu façon Jewel où il faut aligner 3 personnages identiques pour espérer gagner.

C'est pas mal et très distrayant.

Super Mario Kart en javascript

0
28 mai 2008 à 08:06

Le code Javascript est ici.

Et la course se passe ici.

Google Doctype. Le wiki du webmaster

0
16 mai 2008 à 15:22

L'arrivée de Google Doctype est une chose intéressante pour les webmasters, c'est une petite source à plaisirs où l'on trouve toute la documentation (en anglais) utile pour la bonne utilisation de l'HTML, CSS, DOM, Javascript, etc.

Il est possible de mettre soi-même du contenu à condition d'avoir un compte gmail, bien sûr.

Syndiquer le contenu