You-Dont-Need-jQuery/README-fr.md
▻https://github.com/nefe/You-Dont-Need-jQuery/blob/master/README-fr.md
#jquery
-
-
nanoJS - Minimal standalone JS library for DOM manipulation
▻https://vladocar.github.io/nanoJSnanoJS is around 100 lines of code (0.6 Kb compressed) JavaScript library for basic DOM manipulation. It has jQuery like syntax and supports chaining.
Because is so small and simple you can add or remove methods directly in the library, meaning is very customizable. All methods are unrelated so removing one will not affect the library in any way (except each method). -
Top 5 Free #jquery Courses for Web Developers — Best of Lot
▻https://hackernoon.com/top-5-free-jquery-courses-for-web-developers-best-of-lot-9f65a1ff25b6?soTop 5 Free jQuery Courses for Web Developers — Best of LotThe Complete jQuery Course: From Beginner To Advanced!Hello guys, if you are thinking to learn jQuery and looking for some awesome free resources e.g. books, tutorials, and online courses then you have come to the right place.In this article, I am going to share some of the best free jQuery courses from Udemy and Pluarlsight which you can take to learn this awesome #javascript library.In the past, I have also shared some free books and tutorials on jQuery, which complements these courses. You can also take a look at then while learning different parts of jQuery.Before I share these free courses, let me brief you about what jQuery is and why you should learn it? Well, jQuery is a JavaScript library but unlike any other library it is (...)
-
Code JS , lien mené à l’ancre sinon à la page
Au clic sur un lien possédant une ancre, teste si la cible de l’ancre existe bien dans la page avant de réécrire le lien en ancre simple. Le but est d’avoir une navigation par ancre très rapide mais avec une alternative en dur.
<code>
jQuery(document).ready(function(){
$("a[href*=’#']").click(function() {
var href = $(this).attr(’href’);
anchor = href.split(’#')[1];
var $myDiv = $(’#'+anchor);
if ($myDiv.length) {
$(this).attr(’href’, ’#'+anchor);
}
});
});</code>
<code>Et pour créer des #ancres sur des titres SPIP en retirant les accents et ajoutant des tirets inter mots, utilisez le filtre |url_nettoyer{200} sans oublier d’inclure la fonction reprise de SPIP (plugin dist urls_etendues)
include_spip(’action/editer_url’) ;</code>
Code touti-
>> utilisez le filtre |url_nettoyer{200} <<
Rrooh punaize ! Je me souviens d’une nuit sur IRC où l’on cherchait le meilleur moyen de créer ce genre de filtre de nettoyage avec R3alET ^^
-
Merci pour ce code.
J’avais utilisé la boucle URL pour ça :
<code class="spip">
<BOUCLE_scroll(RUBRIQUES){id_parent}{par num titre, titre}>
<BOUCLE_url(https://seenthis.net/URLS){type=rubrique}{id_objet=#ID_RUBRIQUE}>
[(#SET{url,#GET{url}|array_merge{#ARRAY{rub#ID_RUBRIQUE,#URL}}})]
</BOUCLE_url>
<li class="item"><a href="/tag/jquery#[(#GET{url}|table_valeur{rub#ID_RUBRIQUE})]">#TITRE< ;/a></li>
</BOUCLE_scroll>
</code>BOUCLE_scroll : on construit le menu à partir des sous rubriques.
BOUCLE_url : pour chaque entrée du menu, on rentre son url (sans les + et le .html) dans un tableau (rub1 > url_de_la_rubrique_1... etc)Et pour générer l’ancre dans la page (dans une boucle RUBRIQUES) :
<code class="spip">id="[(#GET{url}|table_valeur{rub#ID_RUBRIQUE})]"</code>
-
@seenthis : les balises ne <code class="xxx"> ne fonctionnent pas dans les posts ?
Et la BOUCLE_url fait un truc chelou : l’adresse du site apparait en lieu et place de URL.
Voir la boucle originale : ▻http://spip.pastebin.fr/55209 -
-
C’est surtout que je ne connaissais pas |url_nettoyer :)
Par contre, quid de la permanence des ancres si le titre change ?
C’était la raison pour laquelle j’étais parti sur URL... -
-
Je pense aux liens envoyés par mail ou depuis d’autres sites par ex. Si on change le titre d’un article, l’ancre change et le lien n’amène plus à l’ancre.
Bon, c’est pas bien méchant vu qu’il amène toujours sur la bonne page.
-
-
Getting Started | Select2 - The jQuery replacement for select boxes
▻https://select2.orgune alternative jQuery à Chosen pour le remplacement des <select> et select multiples
#chosen #select #formulaire #jquery
-
GitHub - alsacreations/pepin : Structure par défaut de plugin jQuery et plugins variés
▻https://github.com/alsacreations/pepinPepin est un modèle (parmi tant d’autres) de plugin jQuery modulaire, accompagné de plugins pratiques (voir liste ci-dessous), propres et respectant la plupart des bonnes pratiques d’accessibilité, avec l’usage d’ARIA.
Pour les plugins proposés : ▻https://github.com/alsacreations/pepin#plugins
#jquery #plugin #modulaire #javascript #tabs #modalbox #slider #scroll #sticky #accordeon #toggle #autocomplete
-
Creating a Carousel Using Only Jade(Pug), #javascript, #jquery and #css
▻https://hackernoon.com/creating-a-carousel-using-only-jade-pug-javascript-jquery-and-css-b69576STEP 1: Create divs inside of your page that will contain the carousel elements.gallery .gallery-main .gallery-main-image img(src=”/images/gallery3.jpg”) .gallery-filmstrip a(href=””) img(src=”/images/gallery1.jpg”) a(href=””) img(src=”/images/gallery2.jpg”) a(href=””) img(src=”/images/gallery3.jpg”) a(href=””) img(src=”/images/gallery4.jpg”) a(href=””) img(src=”/images/gallery5.jpg”)STEP 2: Set the styles for all of the elements inside of your carousel:The Displayed Image Gallery:The div around the display for the selected image/set styles for the wrapper around the image that will be displayed on click/.gallery background-color: black;.gallery > .gallery-main position: relative; height: 400px; overflow: hidden;The div that contains the div that (...)
-
Lodash
►https://lodash.comUne bibliothèque JavaScript pour manipuler des données en ajoutant des instructions natives :
- pour des tableaux, objets, chaînes de texte
- pour tester et manipuler des valeurs
- pour créer des fonctions composites
Au contraire de jQuery elle n’est pas prévue pour manipuler le DOM HTML mais de se concentrer sur les structures du langage.Voir aussi :
- une présentation rapide en français : ▻https://www.alsacreations.com/outils/lire/1746-Lodash.html- la doc officielle : ▻https://lodash.com/docs
-
Très très bien.
On peut aussi n’en utiliser que des morceaux selon ses besoins, sans charger tout le core.
Permet aussi de faire de la #programmation_fonctionnelle avec map, filter etc.
-
-
Featherlight – The ultra slim #jquery #lightbox.
▻http://noelboss.github.io/featherlightFeatherlight is very, very lightweight. 400 lines of JavaScript, 100 of #css, less than 6kB combined.
Une extension pour gérer les galeries : ▻http://noelboss.github.io/featherlight/gallery.html
-
How to implement scrollytelling with six different libraries
▻https://pudding.cool/process/how-to-implement-scrollytellinghow to tackle a simple scroll-driven chart using six different libraries and share my thoughts on each implementation.
(...)
For highly customized stories you will want ScrollMagic or Waypoints.
For the beginner you might want to check out ScrollStory, especially if you lean on #jQuery.
For the #d3.js lover you should explore graph-scroll.js, but be ready to accept the defaults or be ready to tinker.
-
Reframe.js
▻https://dollarshaveclub.github.io/reframe.js
Reframe.js removes a specified element’s height & width attributes & then wraps that element in #responsive div that is an intrinsic ratio of the original element. This plugin is meant for embedded content like #iframes or #videos .
-
X-editable :: In-place editing with Twitter Bootstrap, #jQuery UI or pure jQuery
▻https://vitalets.github.io/x-editableX-editable
In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
This library allows you to create editable elements on your page. It can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes. Please try out demo to see how it works.
#formulaires #javascript (via .Gilles)
-
Snapper: A CSS Snap Points Carousel
▻https://www.filamentgroup.com/lab/introducing-snapper.htmlSnapper is a lightweight script that’ll apply CSS and JS carefully to create a broadly-functional snap-points carousel. This script builds on a simple overflow container and native CSS snap points to make it better
-
Et hop, une petite extension #seenthis_search pour #firefox :)
▻https://github.com/seenthis/firefox-seenthis-search
C’est une adaptation rapide de l’extension pour del.icio.us que je pointais ici :
►http://seenthis.net/messages/253700#message362734
En résumé, ça permet de rechercher rapidement dans une copie locale de vos posts seenthis.
Pour l’instant on peut l’utiliser directement depuis les sources en suivant les explications du dépôt, reste à publier le bouzin sur addons.mozilla.org.
https://framapic.org/GahtF5xnuvZX/aqRLB91gfGJK.png 
https://framapic.org/JRJZOLXioro2/W3jwo6KuRxv9.png /me super content
-
C’est fini !
Votre module a été envoyé dans la file des revues préliminaires.
You’ll receive an email once it has been reviewed by an editor and signed. Once it has been signed you will be able to install it:
►https://addons.mozilla.org/fr/firefox/addon/seenthis-search
-
-
Pour paraphraser ce que fait l’extension : une fois installée, et que vous êtes connectés à seenthis ça va charger tous vos posts ( ceux que vous avez écrit et ceux que vous avez étoilés) ... et ensuite cela permet de rechercher RAPIDEMENT un truc (recherche dans le texte du seen ET dans les mots-clés )
-
-
-
Bon mince je l’ai lancé, ça charge… Ça va charger plusieurs mégas, plusieurs dizaines de mégas, plusieurs centaines de mégas ? Je ne me rends pas trop compte de la taille. Je vais devoir laisser tourner…
Et si on éteint pendant que ça tourne, ça fait quoi ? Ça va recharger depuis zéro ensuite ? Et ça met à jour en rechargeant tout régulièrement ou juste en ajoutant les trucs nouveaux ? Et si des posts ont été modifiés ? Et ça charge les textes des commentaires aussi ou bien ça ne recherche que dans le texte du seen principal uniquement ? (parce que sur le site, le moteur cherche partout et notamment quand des tags ont été ajouté par des coms, ce qui arrive très très souvent)
-
error : 500 : Internal Server Error : ►http://seenthis.net/?page=xml_export
-
Et si on éteint pendant que ça tourne, ça fait quoi ?
Aucune idée :p
Ça va recharger depuis zéro ensuite ?
Oui je pense, et ça reprendra l’update de la base locale là on ça en était.
Et ça met à jour en rechargeant tout régulièrement ou juste en ajoutant les trucs nouveaux ? Et si des posts ont été modifiés ?
Ça recharge tout le xml à la demande, en cliquant sur sync, et ça maj la base locale. C’est améliorable, une mise à jour automatique pourrait être intéressante.
Et ça charge les textes des commentaires aussi ou bien ça ne recherche que dans le texte du seen principal uniquement ? (parce que sur le site, le moteur cherche partout et notamment quand des tags ont été ajouté par des coms, ce qui arrive très très souvent)
Ça charge que le premier
messagede chaquethreaddu dump xml, donc uniquement le « seen principal ». -
-
Comme dit dans mon message d’après, moi j’ai toujours erreur 500. Essayé 4 fois hier soir et 5 fois ce matin, toujours la même erreur. Je dois avoir trop de choses dans le même énorme flux et il arrive pas à le générer… :(
-
Pour info, la version 0.0.4 ne nécessite plus de redémarrage pour l’installation. Avec de la chance elle devrait être enfin validée (et signée) par l’équipe des personnes en charge de la relecture sur AMO, donc installable directement sans avoir à jouer avec
about:config.Prochaine étape, basculer le code vers la nouvelle norme #webextensions ►https://developer.mozilla.org/en-US/Add-ons/WebExtensions qui permettrait de faire fonctionner le module sur d’autres navigateurs (chromium et opera par exemple).
-
\o/
Your add-on, seenthis search, 0.0.4, has been preliminarily reviewed and is now available for download in our gallery at ▻https://addons.mozilla.org/addon/seenthis-search
-
et donc ça fait quoi ?
“Finish !! loaded 0 bookmarks
OK”EDIT : ah j’étais point connecté…
là ça synchronise… et pomme- : lance l’interfaceEDIT2 : tout comme @rastapopoulos j’ai une erreur
error : 500 : Internal Server Error :
seenthis.net/ ?page=xml_export -
@fil le serveur doit pas être capable de générer votre dump...
Si vous tentez d’accéder à l’url depuis votre nav, vous avez la même erreur ?
-
Quand on regarde
plugins/seenthis_squelettes/noisettes/afficher_me_xml.htmlon voit que pour chaque message on fait 4 appels SQL. Pas étonnant que pour une collection importante de messages ce soit pas gérable.
L’export est à réécrire ou repenser entièrement.
▻https://github.com/seenthis/seenthis_squelettes/issues/160 -
-
Et hop, la version 0.1.0 est disponible, les nouveautés sont les suivantes :
– ré-écriture complète du code, le module utilise la nouvelle norme #webextension (et devrait donc fonctionner sour chromium et opera) cf ▻https://github.com/seenthis/firefox-seenthis-search/commit/0304b325f02659bd13b7eaead14d6aaf10611e06
– le module utilise maintenant les librairies #listjs (cf ▻https://seenthis.net/messages/472006) #localForage et #jQuery
– plus de requête en POST pour @fil ;)Quelques remarques :
– on perd la possibilité d’utiliser les opérateurs AND, OR et NOT dans la recherche, mais ça devrait pouvoir être rétabli si ça semble nécessaire.
– le raccourci clavier pour accéder à la page du module est maintenant « CTRL+SHIFT+B » (pas moyen d’utiliser l’ancien dans une webextension).
– j’ai hésité à utiliser ▻http://dexie.org et ►http://lunrjs.com mais je garde l’idée dans un coin, cf mes prises de notes sur le wiki du projet ▻https://github.com/seenthis/firefox-seenthis-search/wiki
– j’aurais plein de choses à dire sur les webextensions, mais je crois que ça fera l’objet d’un billet spécifique :p -
Ça peut marcher avec les très grosses collections ou pas ?
-
@monolecte pas de limitation du côté du module, par contre, comme l’ont déjà remarqué plusieurs personnes dans ce fil, l’export xml qui alimente le module semble demander trop de travail au serveur pour les gens qui postent/favorisent beaucoup. À tester donc :)
-
@rastapopoulos est-ce que l’export fonctionne mieux pour toi avec cette url ?
▻https://seenthis.net/spip.php?page=xml_export&reponses=non
Je viens d’ajouter cette option à seenthis cf ▻https://github.com/seenthis/seenthis_squelettes/pull/170 et l’extension firefox seenthis search l’utilisera à partir de la version 0.2.1 qui sera bientôt disponible sur ►https://addons.mozilla.org/fr/firefox/addon/seenthis-search
-
@b_b ça a demandé 2 à 3min complètes et ça a fait rendre le navigateur tout gris, mais ça a fini par générer et afficher le XML. Bon après ça ramait à mort et j’ai eu beaucoup de mal à fermer l’onglet, mais ça l’a bien généré.
-
@rastapopoulos ferpecto tu devrais pouvoir tester la prochaine version du module firefox.
-
-
Two Thousand Years of Urban Growth
▻https://github.com/richiecarmichael/Esri-Urban-GrowthInspiration and data for this app was derived from Tertius Chandler’s 1987 book entitled Four Thousand Years of Urban Growth: An Historical Census. Chandler’s work was merged and updated with data from Esri and Wikipedia.
Special thanks to Witold Frączek and Carol Sousa for geolocating, verifying and updating the city database.
This application makes use of the following libraries:#ArcGIS API for JavaScript (beta) by Esri
Esri’s JavaScript library for mapping and analysis.
#D3.js by Mike Bostock
D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS.
#jQuery by jQuery Foundataion Inc
A JavaScript framework for DOM manipulation and a foundation for many other frameworks. -
What’s New in #jquery 3 - Telerik Developer Network
▻http://developer.telerik.com/featured/whats-new-in-jquery-3Les nouveautés de jQuery #version 3
-
Contournement du blocage du #Journal_Le_Monde
▻http://www.dsfc.net/developpement/javascript/contournement-du-blocage-du-journal-le-mondeSi, vraiment, vous voulez accéder aux contenus du journal Le Monde, installez #Greasemonkey sur Mozilla Firefox.
#Javascript #Bloqueur_publicitaire #Bloqueurs_publicitaires #JQuery
-
Boiling React Down to a Few Lines in jQuery - Hackflow
▻http://hackflow.com/blog/2015/03/08/boiling-react-down-to-few-lines-in-jquery -
Literally #canvas — Literally Canvas v0.4.11 docs - HTML5 drawing board - MS Paint in your web browser
▻http://literallycanvas.com/index.htmlLiterally Canvas is an extensible, open source (BSD-licensed), HTML5 drawing widget. Its only dependency is React.js. You can use it to embed drawing boards in web pages. It’s kind of like an extensible MS Paint in JavaScript. Users can sketch drawings and you can do what you like with the results. It comes with an easy-to-use #jQuery plugin.
-
GitHub - VPenkov/okayNav: The world’s okayest #responsive navigation
▻https://github.com/VPenkov/okayNavThis navigation aims at progressively collapsing navigation links into an off-screen navigation instead of doing it for all the links at the same time.
-
COOL.
Mais ça ne gère pas les sous-menus par contre. Ça sera pas mal d’arriver à coupler ça à un autre plugin (ou CSS) qui gérerait les sous-menus de manière accessibles (avec nav par clavier aussi) et responsive.
#intégration #web #HTML #CSS #javascript cc @fil
-
Ah bah ya même un ticket d’amélioration pour ça déjà :
▻https://github.com/VPenkov/okayNav/issues/4
-
-
FlexNav - A jQuery Plugin for Responsive Menus
▻http://jasonweaver.name/lab/flexiblenavigationUn menu responsive est pas trop mal accessible (en tout cas bien au clavier), qui s’adapte à l’écran, et qui marche aussi en tactile. Il est aussi sobre, sans styles envahissants, donc facile à personnaliser.
via @fil#intégration #web #HTML #CSS #javascript #jquery #menu #navigation #responsive
-
-
par contre dans les options on peut pas désactiver complètement le hover, qui est une mauvaise pratique : rien ne doit s’ouvrir sans clics explicites, car bouger la souris c’est pas un choix
bon après il sait utiliser hoverIntent, un autre plugin jquery, qui est moins pire, parce que ça attend avant de lancer l’action, histoire d’être sûr que la personne a vraiment mis la souris à tel endroit sans bouger exprès
mais ça serait quand même mieux de pouvoir désactiver complètement, et qu’à la souris ça soit exactement comme en tactile : cliquer sur la flèche explicitement
-
-
Ah tiens en voilà un super
▻http://www.cssscript.com/pure-css-mobile-compatible-responsive-dropdown-menu -
Non,il est uniquement en CSS apparemment, et donc entre autre, il ne fonctionne pas au clavier. Que ce soit avec tabulation, ou avec Entrée+flèches, ya aucun moyen d’atteindre les sous-menus en clavier.
-
Ah peut-être qu’il y en a au moins un correct là @fil :
▻http://seenthis.net/messages/395433
-
-
#SPIP 3.1 dispo.
Nous avons le plaisir de commencer l’année 2016 en lançant officiellement SPIP 3.1
SPIP 3.1 est une version améliorée de SPIP 3.0, qui comprend une mise-à-jour des bibliothèques #JavaScript embarquées, un nouvel habillage graphique pour l’espace privé et les pages publiques et de nombreuses autres améliorations.
SPIP 3.1 en bref
– Ajout d’une fonction plein écran, vous permettant d’écrire et voir le résultat simultanément.
– Mise à jour les librairies javascript dont #jQuery (passage à la version 1.11.3) et Jquery UI.
– Mise à jour graphique du thème par défaut qui intègre la base minimale #CSS #TinyTypo (►http://tinytypo.tetue.net).
– Mise à jour du thème graphique de l’espace privé.
– Ajout du lecteur multimédia ►http://mediaelementjs.com par défaut pour la lecture des sons et vidéos.
– Des statistiques améliorées.
– Coté PHP, travail de normalisation, suppression de nombreux warnings et compatibilité accrue avec les dernières versions de #PHP, en particulier #PHP7.Lire le descriptif détaillé sur spip.net :
▻http://www.spip.net/fr_article5713.htmlLire l’annonce complète sur le blog :
▻http://blog.spip.net/785
-
#slicknav - #responsive Mobile #menu Plugin for #jquery
▻http://slicknav.comun menu «hamburger» responsive en jquery simple et configurable
-
goker / canvasResize
▻http://gokercebeci.com/dev/canvasresizejQuery canvasResize: is a plugin for client side #image resizing. Github: ▻https://github.com/gokercebeci/canvasResize
-
Le format #json, #ajax et #jquery - Alsacreations
▻http://www.alsacreations.com/article/lire/1161-json-ajax-jquery-jsonp-getjson.htmlExemple (de base) d’utilisation de JSON avec #javascript et/ou jQuery
