MixItUp est un plugin jQuery qui permet de mettre en place des filtres et des tris sur du contenu HTML classé et ordonné, le tout avec une interface animée et compatible responsive design. C’est une excellente ressource pour les portfolios, les galeries d’images ou n’importe quelle liste d’items.

Redonnez vie à vos listes HTML

MixItUp permet d’organiser dynamiquement des listes de données en se basant sur des filtres et des tris que vous aurez préalablement définis via une structure HTML précise. Ainsi, il affiche ou masque les items avec de superbes transitions et transformations CSS3. Pour cela, il se base sur les attributs data-* de HTML5 qui permettent de stocker une donnée associée à la balise HTML courante.

MixItUp est le remplaçant idéal du plugin jQuery Quicksand qui est assez similaire mais qui se fait « vieux ». En effet, le plugin tire profit des meilleures technologies actuelles avec les data HTML5 et les transitions et transformations CSS3, et fonctionne parfaitement avec les media queries (responsive design). Le script est donc optimisé pour les navigateurs modernes, y compris sur tablette et smartphone.

Le plugin dispose de 25 options pour paramétrer votre liste d’items : vitesse de transition, effets easing, types de transformation (fondu enchainé, zoom, rotation, etc), possibilité de modifier les différentes classes CSS (filtre, tri et puces) ou encore quelques fonctions de callback. Bref, le script est complet. Côté CSS, c’est à vous de styliser votre liste comme bon vous semble mais vous pouvez bien sûr récupérer celles disponibles dans les démonstrations.

Mise en place de MixItUp

On commence par inclure jQuery et le plugin MixItUp :

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

Ensuite, on définit notre structure HTML, en l’occurence une liste à puces non ordonnée. Il faut définir un identifiant CSS sur votre liste (ici grid) et une classe CSS sur chaque puce (ici mix). Nous allons également classer et ordonner nos items en leur définissant une classe CSS (filtre) et un attribut data-cat (tri). Notez que dans cet exemple, nos items sont volontairement structurés en désordre (1, 3, 2, etc).

<ul id="grid">
   <li class="mix category_1" data-cat="1">1</li>
   <li class="mix category_3" data-cat="3">3</li>
   <li class="mix category_2" data-cat="2">2</li>
   <li class="mix category_3" data-cat="3">3</li>
   <li class="mix category_2" data-cat="2">2</li>
   <li class="mix category_1" data-cat="1">1</li>
</ul>

Niveau CSS, le strict minimum est d’appliquer ces propriétés CSS sur chaque item :

#grid .mix{
    opacity: 0;
    display: none;
}

Puis on définit la structure HTML du filtre et du tri. Pour le filtre, il faut utiliser des éléments HTML avec une classe CSS filter et un attribut data-filter avec pour valeur la classe CSS que l’on a défini sur chaque item. On peut ainsi créer un filtre sur plusieurs classes. Pour le tri, il faut utiliser la classe sort et l’attribut data-sort.

<div class="controls">	
   <h3>Filter Controls</h3>
   <ul>
      <li class="filter" data-filter="all">Show All</li>
      <li class="filter" data-filter="category_1">Category 1</li>
      <li class="filter" data-filter="category_2">Category 2</li>
      <li class="filter" data-filter="category_3">Category 3</li>
      <li class="filter" data-filter="category_3 category_1">Category 1 & 3</li>
   </ul>
</div>

<div class="controls">
   <h3>Sort Controls</h3>
   <ul>
      <li class="sort" data-sort="data-cat" data-order="desc">Descending</li>
      <li class="sort" data-sort="data-cat" data-order="asc">Ascending</li>
      <li class="sort" data-sort="default" data-order="desc">Default</li>
   </ul>
</div>

Et on termine par l’appel du plugin sur notre liste :

$(function(){
   $('#grid').mixitup();
});

À noter que vous pouvez l’utiliser sur une liste de données classique, pas forcément disposée en grille. Le plugin est gratuit aussi bien pour un usage personnel que commercial, et la documentation est bien fournie, notamment avec un template Boilerplate pour faciliter l’installation sur un projet. Amusez-vous !

Requis : jQuery
Compatibilité : Chrome 4+, Firefox 4+, Opera 10.5+, Safari 3.1+, Internet Explorer 10+
Démonstration : http://mixitup.io/
Licence : Creative Commons Attribution-NoDerivs 3.0 Unported

Salut à tous,

Comme vous le savez, je travaille sur plusieurs trucs en même temps, entre le blog, mon boulot, mes projets personnels. Le tout cumulé à ma vie privée. Je suis arrivé à un stade où je suis obligé de trancher dans le lard pour pouvoir tout gérer.

Donc le plugin osmLeaflet.jquery que j’avais mis en développement saute. De toute façon, je ne travaillais plus dessus depuis un moment. Il y a eu plusieurs propositions intéressantes de fonctionnalités, je ne les développerai pas non plus.

Si vous le souhaitez, vous pouvez participer au développement du plugin et de ses fonctionnalités mais à titre personnel, je ne le maintiendrai plus. Je ne ferai que valider ou refuser les PR. La doc est déjà déplacée sur le dépôt GitHub.

J’espère que les utilisateurs de mon plugin me pardonneront si ils attendaient les évolutions, mais je n’ai plus le temps. Je préfère arrêter avant de perdre le nord.

Petite semaine après la grosse qui a précédé. On se lance :

Comme souvent, Sam Deering publie un article de qualité sur jQuery4u. Il nous propose une comparaison de $.closest() et $.parents().

Dans les outils qui manque sur le site officiel de jQuery, on peut y compter un constructeur de versions personnalisées. Pour rappel, depuis la v2.0, jQuery peut être construit selon vos besoins. La version 1.10 devrait proposer la même chose à sa sortie qui s’annonce prochaine.

Et pour finir, le dernier petit truc sympa : jQuery Annotated Source. L’idée est de vous proposer de lire dans le code source du framework comme dans un livre. L’approche est intéressante, je n’ai pas tout lu mais c’est original.

Voilà, c’est tout pour la semaine. Et comme depuis quelques mois, vous pouvez récupérer toutes ces ressources dans un carnet de notes dédié.

desoSlide est un slider d’images avec affichage des miniatures. Le changement d’image peut se faire manuellement (au clic ou au clavier) ou bien automatiquement avec un bouton « play » (touche « espace » du clavier) qui se chargera de faire tourner les images en fade.

Pour les anciens, c’est une refonte de mon ancien plugin du même nom. :)

$(function() {
	$('#my_thumbs').desoSlide({
		mainImage: '#mainImage' // conteneur qui recevra l'image à afficher
	});
});

Fonctionnalités clés du plugin :

• Gratuit et open source (repo GitHub)
• Personnalisable, beaucoup d’options disponibles
• Contrôle du slider avec le clavier
• Ajout d’une légende et éventuellement un lien pour chaque image

Si vous êtes curieux, démonstrations, instructions et documentation sur http://sylouuu.github.io/desoslide/.

QUOTES

“The best way to predict the futur is to design it” @AnnePascual #next13 (@Rouffi)

.

“Products with no data portability are “designed to delete your wedding photos” #realtimeconf (@jcoglan)

.

“As a developer your job is to absorb complexity and expose simplicity.

End users should reap the benefits of your understanding.“ (@dam)

.

“How long to develop this feature?”
– How long does it take to catch a fish?
“ehm…”
– Yes, about that long. (@freekl)

.

“Just realized that I am most productive when practicing anger driven software development” (@cramforce)
.

“Whatchadoin? [...]

Voilà une bonne semaine que la version 2.0 du célèbre Framework javascript jQuery est sortie. Voici une partie des nouveautés concernant cette version :

• Fin de la prise en charge de IE 6/7/8 (cependant les version 1.x de jQuery seront toujours supportées)
• Une taille de librairie réduite. En effet, environ 12% plus légère que la version 1.9.1 (surtout avec le fait de ne plus prendre en charge certaines versions de navigateurs)
• Personnalisation des builds et réduction de leur taille, ainsi qu’une simplification d’utilisation
• Appels d’API compatibles avec jQuery 1.9 (cf. http://jquery.com/upgrade-guide/1.9)

Comme je l’ai dit, pas de panique, on a le temps de s’habituer à cette nouvelle version, car les version 1.x sont toujours soutenues. Par contre, commencez dès à présent à migrer vos développements vers la 2.0, du moins, avant la fin du support des versions antérieures (même si ce n’est pas d’actualité)

Pour en savoir plus sur cette version 2.0 de jQuery, rendez vous sur le billet du blog jQuery traitant de cette actualité.

Site officiel jQuery : jquery.com

Articles qui peuvent vous intéresser :

• GMAP3 – Plugin jQuery – Facilitez-vous l’intégration de Google Maps
• Growl – Plugin jQuery – La SimpleBox
• quickSearch – Plugin jQuery – La recherche facile dans vos listings
• carouFredSel – Plugin jQuery – Le carrousel customisable
• Tiny Circleslider – Plugin jQuery – Le slider en cercle original

Select2 est un plugin jQuery qui améliore le look & feel et l’ergonomie de vos menus select (recherche, données distantes et scrolling infini parmi les résultats) — dans le même esprit que Chosen. (Merci Emilien).

Select2 est disponible sur GitHub.

La planète s’est motivée cette semaine pour me donner plein de boulot pour cette chronique. Sérieusement, vous avez fait un concours, non ?

Sortie de jQuery 2.0 !

J’ai pas trop vu le truc venir, c’est un peu arrivé sans annonce, même si il y a eu des beta. Avant de rentrer dans le détail, vous pouvez retrouver l’annonce ici. Je vous laisse le lien vers l’annonce de la beta 3 (même si inutile maintenant)

Maintenant, voyons ce qu’on a là dedans :

• fin du support de IE 6, 7 et 8 (ça, tout le monde vous l’a dit) ;
• fin à venir du support des Android/webkit 2.x (le marché est encore trop important mais ils font sauter asap) ;
• 12 % moins « lourde » que la version 1.9.1.

Il n’est pas recommandé d’utiliser jQuery 2 pour tout et n’importe quoi en production. Pour le moment, l’équipe recommande de l’utiliser pour des utilisations modernes, soit pour :

• Google Chrome add-ons
• Mozilla XUL apps and Firefox extensions
• Firefox OS apps
• Chrome OS apps
• Windows 8 Store (“Modern/Metro UI”) apps
• BlackBerry 10 WebWorks apps
• PhoneGap/Cordova apps
• Apple UIWebView class
• Microsoft WebBrowser control
• node.js (combined with jsdom or similar)

Dans les autres changements, vous pouvez construire votre propre version de jQuery à partir de 12 modules éjectables selon vos souhaits. En plus d’un coeur immuable bien entendu. Les 12 modules sont les suivants :

• ajax : tout le moteur AJAX, donc : $.ajax(), $.get(), $.post(), $.ajaxSetup(), .load(), transport, et les alias d’évènements ajax tels que .ajaxStart() ;
• ajax/xhr : la partie XMLHTTPRequest seule ;
• ajax/script : la partie Ajax qui permet de récupérer des scripts ;
• ajax/jsonp : la gestion de JSONP (je prépare une article là dessus d’ailleurs) ;
• css : la méthode .css() plus toutes les parties non-animées de .show(), .hide() et .toggle() ;
• deprecated : tout ce qui est deprecated mais pas encore supprimé; pour le moment, il ne reste que .andSelf() ;
• dimensions : méthodes .width() and .height(), incluant les variations inner- et outer- ;
• effects : la méthode .animate() et ses raccourcis comme .slideUp() ou .hide(« slow ») ;
• event-alias : tous les déclencheurs d’évènements et alias de méthodes concernant les évènements, tels que .click() ou .mouseover() ;
• offset : méthodes .offset(), .position(), .offsetParent(), .scrollLeft() et .scrollTop() ;
• wrap : méthodes .wrap(), .wrapAll(), .wrapInner() et .unwrap() ;
• sizzle : le moteur de sélection d’éléments, permet d’utiliser un mini-moteur basé sur la méthode native querySelectorAll.

L’exclusion de tous ces modules peut mener à un poids minimal de 10 Ko, une fois minifiée et gzippée. Sur le dépôt GitHub, vous pouvez retrouver comment construire votre version.

Comme déjà dit dans le passé, je ne recommande pas l’usage de cette version. A mon sens, utiliser les CDN (de préférence celui de Google pour jQuery) est un meilleur choix. Ceci dit, si vous utilisez en interne, pour du minifié, et dans d’autres cas, ça peut être utile. Si vous souhaitez bosser proprement avec votre version perso, je vous conseille cependant de virer les modules deprecated, effects, event-alias et sizzle. Ce sont ces trucs inutiles et ne faisant que dans la fioriture. Si vous courrez après le poids et la performances, ce sont ces modules qui devraient être les premiers à sauter.

Petite précision, si comme moi vous avez besoin de continuer le support de IE 6, 7 et 8, vous pouvez rester sur la version 1.9. Les modifications apportées dans l’objectif de la 2.0 seront aussi portées dans la version 1.10. Version qui conservera aussi le support des navigateurs obsolètes.

Même si il n’y a rien de nouveau coté jQuery Mobile ou UI dans les fils officiels, je ne les oublie pas. Et .Net magazine non plus. Ils ont publié un article expliquant les 5 raisons pour lesquelles vous devriez utiliser jQuery Mobile.

Sam Deering de jQuery4U a publié ses résultats de tests de performances. Il a comparé $(this).attr(‘id’) et this.id.

Passons aux tutoriels. Je vous en suggère un qui fait le point sur les évènements personnalisés. A priori, la version 2 de jQuery ne change pas la donne quand à ces explications.

Didier Mouronval a publié, sur Developpez.com, un tutoriel pour construire des sélecteurs personnalisés.

Coté tutoriels, il y a Snap.js qui me plait bien, ça c’est pour les menus latéraux sur lesquels je fais une fixette depuis quelques semaines.

Je vous propose un petit thème pour jQuery Mobile nommé nativeDroid. Il est optimisé pour jQuery Mobile 1.3. Il a l’air bien sympa. (private joke : coucou AG :p)

Les officiers de police de New York travaillent sur un nouveau projet. Ils utilisent une appli jQuery Mobile qui leur donne accès notamment à l’historique judiciaire des gens dans le coin etc.

Et pour terminer, voilà pourquoi vous devriez arrêter d’utiliser jQuery. Ce n’est pas un troll, juste une piqûre de rappel. jQuery ne doit pas servir dans tous les cas, toutes les conditions. Il faut savoir quand utiliser un 4*4 ou un scalpel.

Chosen est un plugin Javascript qui rend les longues et indigestes listes select bien plus présentables. Au lieu d’obliger vos utilisateurs à faire défiler toutes les options de vos listes, Chosen leur permet de commencer à saisir le début d’un terme pour n’afficher que les résultats pertinents, à valider d’un clic de souris ou via la touche Enter.

→ Chosen est disponible sur GitHub.