Différences

Ci-dessous, les différences entre deux révisions de la page.

--- informatique:javascript [10/07/2018 09:06] – [Popper.js] cyrille
+++ informatique:javascript [10/10/2023 19:39] (Version actuelle) – [Alpine.js] cyrille
@@ Ligne 2: / Ligne 2: @@
 Voir aussi;
-  * [[/informatique/javascript/jquery|/informatique/javascript/jquery]]
+  * [[:informatique:javascript:jquery|/informatique/javascript/jquery]]
   * [[https://hackernoon.com/a-map-to-modern-javascript-development-2017-16d9eb86309c|A Map To Modern JavaScript Development (2017)]]
 De la doc:
   * [[https://developer.mozilla.org/fr/JavaScript|Centre de documentation Mozilla]]
-  * [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript|Introduction to Object-Oriented JavaScript]], [[http://javascript.info/tutorial/oop|Javascript OOP patterns]] (POO)
+  *  [[https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS|Object-oriented JavaScript for beginners]]
-    * [[http://orizens.com/wp/topics/oop-javascript-jquery-binding-events-and-keep-the-contex/|OOP Javascript, Jquery, Binding events and keep the context (this)]] (POO)
+      * [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript|Introduction to Object-Oriented JavaScript]], [[http://javascript.info/tutorial/oop|Javascript OOP patterns]] (POO)
+  * [[http://orizens.com/wp/topics/oop-javascript-jquery-binding-events-and-keep-the-contex/|OOP Javascript, Jquery, Binding events and keep the context (this)]] (POO)
   * Callbacks vs Events
-    * [[http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/|Callbacks vs Events]] well presents the difference
+      * [[http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/|Callbacks vs Events]] well presents the difference
-    * [[https://jsperf.com/event-vs-callback|performance test]]
+      * [[https://jsperf.com/event-vs-callback|performance test]]
   * [[https://developers.google.com/web/fundamentals/primers/promises/?hl=en#promise-terminology|About Promise]] et sur la page [[https://cyrille.giquello.fr/informatique/javascript/jquery|jquery]] (promise, deferred)
+News, listes d'outils et librairies :
-Liste d'outils et librairies :
+  * [[https://codewithhugo.com/|Code with Hugo]], Node.js and JavaScript Guides
-  * http://www.hlrnet.com/frinprog.htm
+  * [[http://www.hlrnet.com/frinprog.htm|http://www.hlrnet.com/frinprog.htm]]
+[[http://jsperf.com/jsPerf|http://jsperf.com/jsPerf]]
+ - JavaScript performance playground: jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.
-[[http://jsperf.com/jsPerf]] - JavaScript performance playground: jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.
 ===== Tools =====
@@ Ligne 63: / Ligne 69: @@
 [[http://fr.slideshare.net/community_streamdataIO/2015-0622-parisjs-websocket-vs-sse-v2|Websocket vs SSE]] (//[[/glossaire/SSE|Server Sent events (SSE)]]//)
+==== FullPage ====
+Create Beautiful Fullscreen Scrolling Websites
+https://alvarotrigo.com/fullPage
+one page website
 ==== Flexigrid ====
@@ Ligne 108: / Ligne 122: @@
 ==== Popper.js ====
-{{:informatique:6f515cba0f81af6fb612d092632254e1.png}}{{:informatique:6f515cba0f81af6fb612d092632254e1.png}}
+{{  :informatique:6f515cba0f81af6fb612d092632254e1.png?140}}
 Easily position tooltips, popovers (popup) or anything with just a line of code. Used by Bootstrap 4.
-https://popper.js.org/
+[[https://popper.js.org/|https://popper.js.org/]]
-==== YUI TreeView Control ====
+==== Tree View ====
+=== FancyTree ===
+https://github.com/mar10/fancytree
+https://github.com/mar10/fancytree/wiki
+https://wwwendt.de/tech/fancytree/demo/#sample-ext-glyph-svg.html
+=== YUI TreeView Control ===
 [[http://developer.yahoo.com/yui/treeview/]]
@@ Ligne 122: / Ligne 145: @@
-==== Dojo Dijit Tree ====
+=== Dojo Dijit Tree ===
 http://dojotoolkit.org/reference-guide/dijit/Tree.html
@@ Ligne 265: / Ligne 288: @@
 http://www.jqplot.com
+==== Chart.js ====
+Simple yet flexible JavaScript charting for designers & developers
+https://www.chartjs.org/
 ==== plotly.js ====
@@ Ligne 306: / Ligne 335: @@
 Video.js is an open source library for working with video on the web, also known as an HTML video player.
+==== graph visualization ====
+=== Sigma.js ===
+[[/informatique/javascript/sigmajs|Sigma.js]]
+=== Dracula.js ===
+:!: depecrated https://www.graphdracula.net/
+=== d3js ===
+https://d3js.org/
+  * [[https://d3-graph-gallery.com/network.html|Network graph]]
+    * [[https://d3-graph-gallery.com/graph/network_basic.html|Most basic network chart in d3.js]]
 ===== 3D & Game engine =====
@@ Ligne 355: / Ligne 401: @@
   * [[http://blog.creonfx.com/javascript/mootools-vs-jquery-vs-prototype-vs-yui-vs-dojo-comparison-revised|MooTools vs jQuery vs Prototype vs YUI vs Dojo comparison revised]] (2009)
+==== Alpine.js ====
+https://github.com/alpinejs/alpine/
+AlpineJs permet de manipuler le DOM sans se lancer dans une SPA, très léger (<10ko gzippé et minifié) et n'utilise pas de DOM virtuel. Sa syntaxe est similaire à VueJS. C'est un bon outil entre jQuery et VueJs.
+Présentation des principes d'AlpineJs : https://codewithhugo.com/alpine-tips/
+  * [[https://www.weblogin.fr/blog/119-alpinejs-le-framework-js-entre-jquery-et-vuejs|AlpineJS le framework JS entre JQuery et VueJS]]
+  * [[https://laravel-news.com/alpine-js-intersect-persist-trap|New Alpine.js Plugins: Intersect, Persist, and Trap]]
+    * [[https://alpinejs.dev/plugins/intersect|Intersect plugin]] attribute to an element with a callback that should be ran whenever that element "intersects" with the user's viewport.
+    * [[https://alpinejs.dev/plugins/persist|Persist plugin]] provides a new magic method for integrating your Alpine dataset with localStorage.
+    * The [[https://alpinejs.dev/plugins/trap|Trap plugin]] provides a simple way to "trap" focus inside elements like modals and and other dialogue elements. Trapping focus is very beneficial for users using screen readers or navigating via keyboard in general.
+  * [[https://www.alpinetoolbox.com/|alpinetoolbox]] quick start, examples, tools are all open source and built using Alpine.js and mostly [[informatique/web/tailwind_css|Tailwind CSS]].
+  * [[https://github.com/alpine-collective/awesome|alpine-collective / awesome]] pour une curation de ressources sur AlpineJs
+  * Quelques composants https://js.hyperui.dev dont un datepicker
 ==== Vue.js ====
@@ Ligne 381: / Ligne 443: @@
   * [[https://yuche.github.io/vue-strap/|VueStrap.js]] is Bootstrap components built with Vue.js
   * [[https://github.com/surfbirdapp/surfbird|surfbird]] a Twitter client built on [[/informatique/mobile_app#electron|Electron]] and [[/informatique/javascript#Vue.js]]
+  * Wordpress
+    * [[https://www.sitepoint.com/building-a-wordpress-plugin-with-vue/|Building a WordPress Plugin with Vue]] 2018 - utilise un endpoint WP-API (ex: ''/wp-json/wp/v2/posts?filter[orderby]=date''
+    * [[https://github.com/bshiluk/vue-wordpress|vue-wordpress]] Starter Template for building WordPress themes as Vue.js SPAs
+    *
 ==== React.js ====
@@ Ligne 717: / Ligne 782: @@
 [[http://lunrjs.com|LUNR.js]] a simple full-text search in your browser.
+==== Webapp & Offline mode ====
+  * [[https://verekia.com/html5/tutoriel-application-web-offline-html5-cache-manifest/|Tutoriel : Une application web offline HTML5 avec le cache manifest]]
+  * [[https://developers.google.com/web/fundamentals/codelabs/offline/|Adding a Service Worker and Offline into your Web App]]
+  * [[https://www.sitepoint.com/offline-web-application-tutorial/|How To Create an Offline Web Application]] (02/2010)
 ===== Démos =====