Développeur
Angular (2+), jQuery et jQuery-ui sont sur un bateau
Notes
jQuery a pas mal mauvaise presse et certain vont jusqu’à déclarer leur code « jQuery free », comme si ce framework était pestiféré.
Je trouve cependant que jQuery a quelques point fort qui sont toujours d’actualité :
- Beaucoup de plugins et librairies qui souvent ne sont pas « jQuery free ».
- Beaucoup de plugins et librairies qui sont souvent très bien testées, débuggées et très bien maintenues.
Alors c’est clair que pour une conférence, dire qu’on utilise jQuery, c’est « has been ». Par contre, si on a envie d’avoir quelque chose de stable qui fait bien le boulot, l’écosystème de jQuery conviens très bien !
Dans le cas qui m’occupe j’avais besoin d’un « drag » et d’un « drop » d’éléments qui serve à autre chose qu’ordonné une liste.
Je n’ai trouvé aucun module qui s’occupe de cela. Tous ceux que j’ai trouvé (en tête, le drag&drop du CDK d’angular) s’intéresse uniquement au fait de trier des listes... Et ce n’est absolument pas ce dont j’ai besoin...
Bref, tout cela pour dire que je me suis tourné vers... jQuery-ui draggable et droppable.
Installation
Pour installer jQuery-ui avec npm, il faut utiliser le paquet jquery-ui-dist. Je ne sais pas à quoi sert le paquet jQuery-ui, mais ce n’est clairement pas le plus simple à utiliser.
- npm install jquery jquery-ui-dist
- npm install --save @types/jquery @types/jqueryui
Dans le angular.json, dans la partie scripts
on ajoute les librairies :
- "./node_modules/jquery/dist/jquery.min.js",
- "./node_modules/jquery-ui-dist/jquery-ui.js"
Au début du composant Angular, on va déclarer jQuery (mais en dehors du @Component) :
- declare var $: any;
On peut maintenant utiliser les plugins jQuery-ui dans les composants Angular. Il semble recommandé de le faire dans le hook AfterViewInit
.
- ngAfterViewInit() {
- $(this.thumb.nativeElement).draggable({
- revert: true,
- zIndex: 100
- });
- $(this.thumb.nativeElement).droppable({
- drop: (event, ui) => {
- this.documentService.combine([this.document.id, draggable_id]);
- }
- });
- }
Binding datas
Pour ajouter des données aux éléments « draggés », une petite pirouette :
- $(this.thumb.nativeElement).data('document', this.document);
Que l’on récupère ensuite dans l’élément ui.draggable :
- $(this.thumb.nativeElement).droppable({
- drop: (event, ui) => {
- const draggable = ui.draggable.data('document');
- this.documentService.combine([this.document.id, draggable.id]);
- }
- });
Muuri - Responsive, sortable, filterable and draggable grid layouts
Woutch ! Super cool grid, ça pourrai être super d’avoir un constructeur de layout basé la dessus !
Favicon Generator for all platforms : iOS, Android, PC/Mac...

Les favicon c’est le bordel, du coup quelqu’un a mise en place des petits outils en ligne pour aider un peu
Front-End Checklist | Front-End-Checklist
Une check list pour les front dev ! Elles semble super complète
Des packs d’icones pour vos projets de développement - Korben

Grosse collection d’icône par Korben, ça aide toujours d’en avoir sous la main !