Dans la même lignée que Doctype, jQueryExchange propose, comme son nom l'indique, des échanges entre les utilisateurs novices et plus expérimentés. Vous pourrez poser une question purement technique ou plutôt à titre d'information, en général une réponse claire et précise sera proposée. La communauté et le partage des connaissances fera ici de jQueryExchange un lieu d'aide rêvé pour les codeur jQuery.

N'hésitez pas à poser votre question, je pense que c'est avec plaisir que les autres utilisateurs répondront ! Cependant, petite précision… étant donné que le site en totalement anglophone, il est plutôt conseillé de poser votre question en anglais, sous peine de ne pas vous faire comprendre. Petit inconvénient pour ceux qui ne sont pas à l'aide avec cette langue, tout de même.

Une nouvelle série d’articles pointera le bout de son nez dès aujourd’hui et se nommera le plus simplement possible, La semaine jQuery (raccourci en "SJQ #1, #2, #3…"). 6 épisodes seront disponibles, étalés à un par jour. Ils auront pour but de vous proposer selon une thématique précise (par exemple 6 menus kwicks), des plugins jQuery disponibles et développés par des fans et utilisateurs convaincus de cette librairie javascript magique.

Voici le programme sans plus attendre :

1. Lundi : Afficher un bloc en le faisant slider
2. Mardi : Créer un accordéon
3. Mercredi : Présenter du contenu avec les modalbox
4. Jeudi : Afficher des twitts
5. Vendredi : Afficher une infobulle
6. Samedi : Le fondu est souvent très efficace

Autant dire que plusieurs sujets seront approfondis ! En général, un épisode se constituera de 5 à 10 plugins, histoire de ne pas se limiter à une seule et unique solution. J’espère que cette série vous plaira !

Snipplr est un site qui regroupe des milliers de snippets qui sont en fait des parties de code javascript, php, css, html ou d’un tout autre langage. Le principe est simple : vous cherchez dans un langage de programmation (celui que vous voulez, il y en a une tripotée !) et vous aurez devant vous une liste de bouts de codes traitant d’un sujet. Vous aurez par exemple une redirection en htaccess, des bordures arrondies en css, une détection de navigateur en javascript, un hack d’opacité en css…

Un tri par popularité est aussi présent, ce qui aidera probablement dans la recherche d’un code utilisé fréquemment. Bien entendu, vous pourrez soumettre votre snippet afin de le partager à la communauté !

Le mieux est d’aller faire un tour et de chercher ce que l’on veut, on le trouvera souvent ou bien quelque chose de similaire, voir mieux.

Pour bien commencer cette semaine remplie de travail (pour mon cas… l’effet rentrée va réellement commencer :/), voici 2 outils bien pratiques concernant le javascript. Compression et décompression seront le but principal de cette découverte !

• L’un s’appelle JavascriptCompressor et permet, comme son nom l’indique, de compresser ses scripts .js de manière très simple et dotée de plusieurs options à savoir :
  • "Packer" son code, c’est à dire réduire au maximum son code pour qu’il ne tienne qu’en une ligne et de manière mathématique. N’allez pas me demander comme sa marche, c’est purement scientifique, le code ne ressemble plus à rien, mais le résultat est fonctionnel et vous gagnerez un maximum de chargement de page.
  • Compresser son code, cela signifie réduire tout le code javascript que vous avez inséré pour n’en faire qu’une ligne. Similaire au packer, mais que dans l’aspect. En effet, il ne fait que supprimer les commentaires, les espaces, les tabulations etc. Vous pourrez alors avoir un code encore un peu praticable.
• L’autre se nomme JsBeautifier et propose tout l’inverse de JavascriptCompressor puisqu’il clarifiera votre code pour le rendre exploitable au maximum : ligne par ligne, sauts de lignes, tabulations, espaces… Tout pour coder proprement et sainement ! Il sera très utile pour savoir comment est organisé un code, savoir comment il marche ou pour bien d’autres raisons.

J’espère que ces deux services vous seront utile. Pour ma part je m’en sert quasiment tout le temps (compresser des plugins jQuery, en décompresser pour modifier une partie…).

Pour démarrer Dev’nsound, je propose un billet plus ou moins technique. Vous vous en douterez (au vu de l’image ci-dessus), je vais parler de la célèbre et extrêmement puissante -pour un poids minime-, jQuery ! De part la simplicité du code produit et la facilité à apprendre, la librairie javascript jQuery connait un fort succès. Mais il est bien beau de la connaître et savoir ce qu’elle fait, il faut aussi des ressources, pour pousser plus loin sa créativité et ses fonctionnalités.

Je vous propose donc plusieurs sites de ressources, à savoir :

• jQuery Style — Un merveilleux site sous forme de galerie de sites utilisant jQuery, avec le type de fonctionnalité utilisée, une capture d’écran et un lien vers le site concerné. Une excellente source d’inspiration pour ceux et celles qui ne savent pas trop comment rendre interactif son site, ou tout simplement être curieux et voir les différentes techniques d’utilisation.
• UseJquery — Un peu comme son camarade d’en haut, une autre galerie de site (showcase) mais cette fois ci avec des options déjà plus intéressantes. En effet, il indique la liste des plugins éventuels utilisés pour réaliser les effets produits sur les sites, propose de voir le nombre de lignes présentes dans le code source javascript utilisé par jQuery et même, consulter la source du code utilisé, afin de ne pas chercher le ou les fichiers utilisés sur le site.
• jQuery List — jQuery List rentre plus dans le cœur du problème en listant un nombre considérable de plugins développés par des contributeurs externes. Nous aurons droit à plus de 200 plugins comme des slideshows, des slides, des rollovers, des formulaires, des systèmes de vote, des onglets, des infobulles, des bords arrondis… Une véritable mine d’or pour les plugins jQuery ! C’est aussi une très bonne solution pour avoir un aperçu rapide de ce qu’on peut faire avec jQuery : à peut prêt tout.
• jQuery sur Delicious – Le simple fait de chercher sur Delicious le tag jQuery vous offrira une source de liens, de plugins et de tout un tas de choses. Un bon départ pour s’initier à la librairie, soit plus de 700 000+ liens bookmarkés !

Sans pousser dans l’initiation à jQuery, voici un exemple d’événement jQuery.

$(document).ready(function(){ // On vérifie que jQuery est bien chargé
 
 $('a.link').click(function(){
 //Si on clique sur un lien de classe "link"
 
 $(this).animate({marginTop:'15px', marginLeft:'8px'}, 600).fadeTo(1200, 0.25)
 //On fait une translation pendant 0,6sc, puis un fondu vers une opacité de 0,25% pendant 1,2sc
 return false; // On annule le lien vide
 
 });
 // On clôt l'évènement
});
// On clôt le tout

Mon exemple n’est pas complexe, mais vous remarquerez qu’avec seulement ~55ko de javascript et quelques lignes de code, on peut produire des effets très simplement !

Je sens déjà que vous aimez… ou que vous allez aimer ! Ce premier billet n’est qu’une introduction au parcours que le blog aura concernant jQuery, étant donné que je suis le premier fan de ce blog à aimer, utiliser, et développer (avec)  cette librairie. Bien entendu, si vous voulez vous informer un peu plus sur le propos, je vous invite à consulter le (très beau) site officiel, qui liste plugins, démos, bugs, documentation complète, blog, forums… etc !