Cyrille Giquello

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Javascript ======

Voir aussi;

  * [[: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/Learn/JavaScript/Objects/Object-oriented_JS|Object-oriented JavaScript for beginners]]
      * [[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
      * [[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 :

  * [[https://codewithhugo.com/|Code with Hugo]], Node.js and JavaScript Guides
  * [[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.

===== Syntaxe =====

Il y a plein d'évolutions de la syntaxe ...

  * https://dev.to/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa


**Template Literals**:

<code javascript>
const name = "Alice";
const greeting = `Hello, ${name}!
Welcome to JavaScript tips!`;

console.log(greeting);
</code>

**The Spread Operator**:

<code javascript>
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]

const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 26 }; // { name: "Alice", age: 26 }
</code>

**Short-Circuit Evaluation**:

<code javascript>
const isLoggedIn = true;
const welcomeMessage = isLoggedIn && "Welcome back!";
console.log(welcomeMessage); // Output: Welcome back!

const username = null;
const displayName = username || "Guest";
console.log(displayName); // Output: Guest
</code>

or **Use ||= Operator for Default Assignment**

<code javascript>
let count;
count ||= 10;
console.log(count); // 10
</code>

**Destructuring**:

<code javascript>
// Before destructuring
const user = { name: "Alice", age: 25 };
const name = user.name;
const age = user.age;

// Using destructuring
const { name, age } = user;
console.log(name, age); // Output: Alice 25
</code>

**Optional Chaining for Safer Access**: 

<code javascript>
const user = { profile: { email: "user@example.com" } };

console.log(user?.profile?.email); // Output: user@example.com
console.log(user?.settings?.theme); // Output: undefined (no error)
</code>

**Default Parameters**:

<code javascript>
function greet(name = "Guest") {
  return `Hello, ${name}!`;
}

console.log(greet()); // Output: Hello, Guest!
console.log(greet("Alice")); // Output: Hello, Alice!
</code>

**Array Methods: Map, Filter, and Reduce**:

<code javascript>
const numbers = [1, 2, 3, 4];

// Transform each element with map
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8]

// Filter elements based on a condition
const evens = numbers.filter(num => num % 2 === 0); // [2, 4]

// Aggregate values with reduce
const sum = numbers.reduce((acc, num) => acc + num, 0); // 10
</code>

More tips:
  * https://dev.to/hmpljs/10-javascript-tips-and-tricks-that-will-be-useful-47fa
  * https://dev.to/jagroop2001/20-javascript-tricks-every-developer-must-know-4pcj

===== Tools =====

[[/informatique/javascript/tests de compatibilité]]

==== Online Compress/Minify Javascript ====

  * [[http://jscompress.com/]]
  * [[http://javascriptcompressor.com/]]
  * [[http://dean.edwards.name/packer/]]

===== Text editor / Wysiwyg =====

  * [[http://www.sitepoint.com/10-best-html-wysiwyg-plugins/|10 Best jQuery and HTML5 WYSIWYG Plugins]] //(2016-01-20)//

==== ContentTools ====

ContentTools is a beautiful & small content editor 

http://getcontenttools.com/

==== markItUp! ====

Not a wysiwyg editor.

[[http://markitup.jaysalvat.com/]]

markItUp! universal markup jQuery editor, is a JavaScript plugin built on the jQuery library. It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.

  * image upload: [[http://stfalcon.com/en/blog/post/markitup--plugin-for-image-upload|A plug-in for fast image loading in MarkItUp]]
==== TinyMCE ====

[[:informatique:TinyMCE]]

==== CKeditor (FCKeditor) ====

[[:informatique:FCKeditor]]


=====Divers=====


==== FullPage ====

Create Beautiful Fullscreen Scrolling Websites

https://alvarotrigo.com/fullPage

one page website
==== Flexigrid ====

http://code.google.com/p/flexigrid/

Lightweight but rich data grid with re-sizable columns and a scrolling data to match the headers, plus an ability to connect to an XML or JSON data source using Ajax to load the content.

Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

Features
  * Resizable columns, Resizable height and width, Resizable Width, Table Toggle Button
  * Sortable column headers, Paging
  * Search, Quick Search
  * Show/Hide Columns control have been move to the column headers (try it by mouseovering a header and clicking a black triangle on the right)
  * Cool theme, Show/hide columns, Toolbar
  * Can convert an ordinary table
  * Ability to connect to an ajax data source (XML and JSON)
  * JSON Support, Accessible API 
  * Mootools and Prototype noConflict()
  * New onError event on ajax interaction
  * New $().flexAddData method, allows you to directly add new data to the grid using your own data source.
  * New preProcess API, allows you to modify or process data sent by server before passing it to Flexigrid, allowing you to use your own JSON format for example.
  * Single Rows Select just use { singleSelect: true } in the options

==== modernizr ====

http://www.modernizr.com

Taking advantage of the new capabilities of HTML5 and CSS3 can mean sacrificing control over the experience in older browsers. Modernizr 2 is your starting point for making the best websites and applications that work exactly right no matter what browser or device your visitors use.


==== SlickGrid ====

Quite simply, SlickGrid is a JavaScript grid/spreadsheet component.\\
It is an advanced component and is going to be a bit more difficult to learn and configure, but once you realize its full potential, it will blow your mind!

https://github.com/mleibman/SlickGrid/wiki

==== jsProgressBarHandler ====

Nice options and Ajax Call.

[[http://www.bram.us/projects/js_bramus/jsprogressbarhandler|http://www.bram.us/projects/js_bramus/jsprogressbarhandler]]

==== Popper.js ====

{{  :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/]]


==== 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/]]
  * [[http://developer.yahoo.com/yui/examples/treeview/tv_edit.html|Inline Editing of TreeView Node Labels]]
  * [[http://developer.yahoo.com/yui/examples/treeview/tv_highlight.html|Treeview Node Selection and Checkbox Example]]


=== Dojo Dijit Tree ===

http://dojotoolkit.org/reference-guide/dijit/Tree.html

The trees we see in User Interfaces help sort out long, hierarchical lists. A file system is the classic example, with Windows using it in Explorer. The Dijit tree widget is like that. Dojo makes easy trees easy, and hard trees possible.
==== Windows ====

http://prototype-window.xilinus.com/index.html

A prototype based windows framework. Fourni le moyen de faire des fenêtres, modal ou non.

==== Magnific-Popup ====

Light and responsive lightbox (popup) script.

https://github.com/dimsemenov/Magnific-Popup

==== Lightbox ====

Automatic image gallery from images in popup on html page.

http://lokeshdhakar.com/projects/lightbox2/

Fonctionne avec attribut'' data-lightbox="image-1"'' sur un lien ''a''.
==== Lity ====

Lightweight, accessible and responsive lightbox (html popup).

http://sorgalla.com/lity/

==== jcarousel ====

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order.
It provides a full-featured and flexible toolset for navigating any HTML based content in a carousel-like fashion.

http://sorgalla.com/jcarousel/

==== Slick ====

the last carousel you'll ever need.

https://kenwheeler.github.io/slick/

==== PDF.js ====

Mozilla PDF.js is a Portable Document Format (PDF) viewer that is built with HTML5.

https://github.com/mozilla/pdf.js

==== Gordon ====

An open source Flash™ runtime written in pure JavaScript with SVG.

Comment: ça déchire !! Par contre, comme d'hab ça ne fonctionne pas avec IE 8 ...

===== Geomatics libraries =====

==== Crosslet ====

http://sztanko.github.io/crosslet/

Crosslet is a free small (22k without dependencies) JavaScript widget for interactive visualisation and analysis of geostatistical datasets. You can also use it for visualizing and comparing multivariate datasets.

It is a combination of three very powerful JavaScript libraries:
  * [[/informatique/leaflet|Leaflet]], an elegant and beautiful mapping solution, and
  * [[http://square.github.com/crossfilter/|Crossfilter]], a library for exploring large multivariate datasets in the browser.
  * [[http://d3js.org/|D3]], a data driven way of manipulating objects.

Crosslet also supports [[/glossaire/TopoJSON|TopoJSON]], a [[/glossaire/GeoJSON|GeoJSON]] extension that allows to present geometry in a highly compact way.

Crosslet is written in [[http://coffeescript.org/|CoffeeScript]] and uses [[http://lesscss.org/|less]] for styling.

===== Graphics libraries =====


==== GreenSock ====

SVG animation

http://greensock.com/

==== d3.js ====

http://mbostock.github.com/d3/

Data-Driven Documents

D3.js is a small, free JavaScript library for manipulating documents based on data.

  * https://github.com/mbostock/d3/wiki/Gallery
  * http://windhistory.com/station.html?CYTL
  * elastic collision http://bl.ocks.org/1706523

  * [[http://blockbuilder.org/denisemauldin/ceb7065687c125223339a26a47d58a28|d3 v4 realtime line chart]]
  * [[https://bl.ocks.org/mbostock/3883245|Line Chart]]

==== JSXGraph ====

http://jsxgraph.uni-bayreuth.de/

Interactive Geometry, plotting, visualization

JSXGraph is a cross-browser library for interactive geometry, function plotting, graphs, and data visualization in a web browser. It is implemented completely in JavaScript and uses SVG and VML.
JSXGraph is easy to embed and has a small footprint: only about 55 KB if embedded in a web page. No plug-ins are required! JSXGraph uses the JavaScript libraries/frameworks Prototype or jQuery.

==== svg-edit ====

SVG-edit is a fast, web-based, Javascript-driven SVG editor that works in any modern browser. SVG-Edit does not work with IE7, must add [[http://code.google.com/intl/fr/chrome/chromeframe|Google Chrome Frame]].

http://code.google.com/p/svg-edit

[[http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html|démo]]

==== Raphael ====

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web.
Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. 

http://raphaeljs.com/

  * [[http://g.raphaeljs.com/|gRaphael]]: gRaphaël’s goal is to help you create stunning charts on your website. It is based on Raphaël graphics library.
  * [[http://code.google.com/p/jsvectoreditor/|JSVectorEditor]]: A vector graphics editor in JavaScript using Raphael for rendering to SVG/VML.
  * [[http://code.google.com/p/raphael-toys/|raphael-toys]]: Raphael toys aims to extend Raphael JavaScript library with graphs and charts. 

==== Highcharts ====

http://www.highcharts.com/

[[http://creativecommons.org/licenses/by-nc/3.0/|CC BY-NC 3.0]] or [[http://shop.highsoft.com/highcharts.html|Commercial and government licenses]].

exemples:
  * http://observatoire.data-publica.com/#noise
==== JavaScript InfoVis Toolkit (jit) ====

The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web. 

http://thejit.org

==== jqPlot ====

A Versatile and Expandable jQuery Plotting Plugin!

http://www.jqplot.com

==== Chart.js ====

Simple yet flexible JavaScript charting for designers & developers

https://www.chartjs.org/

==== plotly.js ====

The open source JavaScript graphing library that powers [[https://plot.ly/|plotly]].

https://plot.ly/javascript/

  * excellent !
  * navigation dans les données intuitive
  * **mais volumineux (2,3 Mo)**
    * Le module "basic" fait 700 Ko, voir [[https://github.com/plotly/plotly.js/blob/master/dist/README.md#partial-bundles|partial-bundles]]

==== Frappé Charts ====

https://frappe.github.io/charts/

  * 52 Ko
  * excellent

==== morris.js ====

https://morrisjs.github.io/morris.js/

==== flot charts ====

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.

http://www.flotcharts.org

==== some Gantt ====

  * [[https://github.com/thegrubbsian/jquery.ganttView|jquery.ganttView]], [[http://www.thegrubbsian.com/2010/06/11/jquery-ganttview-a-lightweight-gantt-chart-for-jquery|Présentation]]
  * [[http://www.maro-z.com/examples/jquery.gantt/|jquery.gantt]]
  * [[http://www.jsgantt.com/|JSGantt]], [[http://code.google.com/p/jsgantt/|at google code]]

==== Video JS ====

[[http://videojs.com/]]

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 =====

[[http://threejs.org|Three.JS]]


===== Cryptographie =====

==== Clipperz ====

http://www.clipperz.com/open_source/javascript_crypto_library

Javascript Crypto Library

  * the fastest AES-256;
  * the only available Javascript implementation of:
    * Fortuna, a strong pseudo-random number generator;
    * SRP, the verifier-based authentication protocol;
  * a robust and efficient SHA-2 hash function.

http://sourceforge.net/projects/clipperzlib/

==== Stanford Javascript Crypto Library ====

http://crypto.stanford.edu/sjcl/

SJCL is small but powerful. The minified version of the library is under 6.4KB compressed, and yet it posts impressive speed results.

SJCL is secure. It uses the industry-standard AES algorithm at 128, 192 or 256 bits; the SHA256 hash function; the HMAC authentication code; the PBKDF2 password strengthener; and the CCM and OCB authenticated-encryption modes. Just as importantly, the default parameters are sensible: SJCL strengthens your passwords by a factor of 1000 and salts them to protect against rainbow tables, and it authenticates every message it sends to prevent it from being modified. We believe that SJCL provides the best security which is practically available in Javascript. (Unfortunately, this is not as great as in desktop applications because it is not feasible to completely protect against code injection, malicious servers and side-channel attacks.)

===== Mobile Frameworks =====

==== Sencha Touch ====

==== JQuery Mobile ====

==== Mobile Angular UI ====

Angular JS and Twitter Bootstrap

http://mobileangularui.com/

===== Web Client-Side Frameworks =====

  * [[https://versus.com/en/react-vs-angularjs|React vs Angular]] //(MV* framework sur Versus.com)//
  * [[https://www.airpair.com/js/javascript-framework-comparison|AngularJS vs. Backbone.js vs. Ember.js]] (2015)
  * <del>[[http://stackoverflow.com/questions/394601/which-javascript-framework-jquery-vs-dojo-vs|Which JavaScript framework (jQuery vs Dojo vs …) ?]]</del>
  * [[http://tech.yes-co.nl/2009/08/25/jquery-versus-dojo-versus-yui/|JQuery versus Dojo versus YUI]] (2009)
  * [[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 ====

AlpineJs permet de créer/gérer des composants falicement avec Javascript 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 pour remplacer jQuery et moins complexe que VueJs / React / Angular.

[[/informatique/javascript/alpinejs|AlpineJS]]
==== Vue.js ====

  * http://vuejs.org

Vue.js implémente le modèle [[/glossaire/MVVM|Modèle-Vue-VueModèle (MVVM)]], des directives pour agir sur le DOM, la syntaxe mustache et des filtres pour la mise en forme.

Tutos FR:
  * [[http://laravel.sillo.org/vue-js-on-se-lance/]]
  * [[http://maurice-chavelli.developpez.com/tutoriels/javascript/les-bases-vue-js-2/|apprendre à utiliser le framework Vue.js version 2]]

Tuto EN:
  * [[http://vegibit.com/vue-js-tutorial/|Vue.js Tutorial]]
  * [[https://coligo.io/vuejs-components/|Practical Intro to Components in VueJs]]
  * [[http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/|Vue.js: a (re)introduction]]
  * [[https://medium.com/laravel-news/advanced-front-end-setup-with-vue-js-laravel-e9fbd7e89fe2#.aznnssvgp|Laravel and Vue JS: Advanced Frontend Webapp Architecture]]
  * [[https://adamwathan.me/2016/01/04/composing-reusable-modal-dialogs-with-vuejs/|Composing Reusable Modal Dialogs with Vue.js]]

Tips:
  * [[https://forum-archive.vuejs.org/topic/544/using-jquery-plugins-on-dynamically-loaded-vue-component-content/2|Using jQuery Plugins on dynamically loaded Vue component content]]

Voir aussi:
  * UI Suite for Vue.js https://primevue.org compliant with [[/glossaire/WCAG|WCAG 2.0]], 80+ components
  * [[/informatique/php/laravel#vuejs|Laravel & Vue.js]]
  * collection de scripts et plugins : http://www.vuescript.com
  * [[https://vuetifyjs.com/|vuetify.js]] is a semantic component framework for Vue.js 2. It aims to provide clean, semantic and reusable components that make building your application a breeze. Vuetify.js uses Google's Material Design design pattern, taking cues from other popular frameworks such as Materialize.css, Material Design Lite, Semantic UI and Bootstrap 4.
  * [[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 ====

A Facebook & Instagram collaboration.

  * http://facebook.github.io/react/

==== Angular.js ====

Super-powered by Google. Code licensed under the The MIT License.

  * https://angularjs.org/

About html form:
  * [[https://docs.angularjs.org/guide/forms|Forms guide]]
  * [[https://scotch.io/tutorials/angularjs-form-validation|form validation tuturial]]

Accessibility:
  * [[https://docs.angularjs.org/guide/accessibility|Accessibility with ngAria guide]]

Mobile:
  * [[http://coenraets.org/blog/2013/11/sample-mobile-application-with-angularjs/|Sample Mobile Application with AngularJS]]
  * [[http://www.htmlcenter.com/blog/how-to-build-angularjs-based-native-mobile-application/|Building AngularJS based native mobile application]]
==== Ember.js ====

http://emberjs.com/

==== knockout.js ====

Simplify dynamic JavaScript UIs with the Model-View-View Model (MVVM) pattern.

http://knockoutjs.com

  * Declarative Bindings
    * Easily associate DOM elements with model data using a concise, readable syntax
  * Automatic UI Refresh
    * When your data model's state changes, your UI updates automatically
  * Dependency Tracking
    * Implicitly set up chains of relationships between model data, to transform and combine it
  * Templating
    * Quickly generate sophisticated, nested UIs as a function of your model data

==== Backbone.JS ====

http://backbonejs.org/

  * [[http://www.codemag.com/article/1312061|Structuring jQuery with Backbone.js]]
  * [[https://backbonetutorials.com/|Backbone Tutorials]] is a collection of tutorials written by Thomas Davis. 
  * [[https://www.codeschool.com/courses/anatomy-of-backbone-js]] (payant)

==== YUI Library ====

[[http://developer.yahoo.com/yui/]]

The Yahoo User Interface (YUI) Library is a set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses.
YUI is proven, scalable, fast, and robust. Built by frontend engineers at Yahoo! and contributors from around the world, it's an industrial-strength JavaScript library for professionals who love JavaScript.

[[http://developer.yahoo.com/yui/articles/gbs/|Browser Support]]

==== Dojo Toolkit ====

[[http://dojotoolkit.org/]]

  * **Dijit** is Dojo’s UI Library, and lives as a separate namespace dijit. Dijit requires Dojo Core. Each of the widgets and functionality provided by Dijit is describe in the following sections, though the aforementioned quickstart guides cover some basics.
  * **DojoX** stands for Dojo eXtensions and contains many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. All DojoX projects contain README files that outline their maturity and authorship, so be sure to check those along with the documentation pages to get the full picture of where a module is headed.
  * ...

==== MooTools ====

[[http://mootools.net/]]

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.


==== JQuery ====

http://jquery.com

[[/informatique/javascript/jquery|/informatique/javascript/jquery]]

  * [[http://viralpatel.net/blogs/2009/08/20-top-jquery-tips-tricks-for-jquery-programmers.html|20 Top jQuery tips & tricks for jQuery programmers]]
  * [[http://javascript.developpez.com/faq/jquery/|FAQ JQuery sur developpez.com]]

==== Bootstrap ====

http://getbootstrap.com

[[/informatique/web/Bootstrap]]

==== jslib ====

http://jslib.sourceforge.net/index_fr.html

==== Gimme ====

http://gimme.stchur.com/about.html

What is Gimme?\\
Gimme is a light-weight, speed-focused, ECMAScript (or Javascript if you prefer) Library, designed to make your life simple!

Gimme's prominent features:
    * CSS Querying capabilities.
    * Cross browser .addEvent(..) function that makes IE adhere to most W3C recommendations (including proper use of the 'this' keyword, one element/event/function combination, event names without the prefix 'on').
    * Firefox event enhancements: mouseenter and mouseleave support.
    * Robust .addClass(..), .removeClass(..), swapClass(..) capabilities.
    * Extensibility model so you can add to the Gimme Library as you see fit!

==== Prototype ====

http://www.prototypejs.org/

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

==== Script.aculo.us ====

http://script.aculo.us/

script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.\\
What's inside? animation framework, drag and drop, Ajax controls DOM utilities, and unit testing.\\
It's an add-on to the fantastic Prototype framework. 

==== ExtJS ====

==== Midori ====

==== Peppy ====

==== XUI ====

===== Web Client-Side templating =====

<note>Attention a laisser de l'information pour les moteurs de recherche ...</note>

Une façon simple d'avoir du code propre sans ajouter un nouveau moteur de template (no "black box", quick, and simple) :

<code javascript>
templates = {
 contact_details : function( data ){
  return "<p>" +
   "Name:  " + data.name + "<br>" +
   "Phone: " + data.phone + "<br>" +
   "email: " + data.email " +
   "</p>";
}
</code>
Que l'on utilise avec jQuery:
<code javascript>
 $(this).append( templates.contact_details(p) );
</code>
ou pour des instances multiples:
<code javascript>
var output = '';
$.each( persons, function(p){
 output+= templates.contact_details(p);
});
</code>

==== JavaScriptCodeBehind ====

http://javascriptcodebehind.codeplex.com/

Séparation du Javascript et du HTML sur le principe de CodeBehind d'ASP.

"//The aim of this paper is to present a technique for separating the JavaScript code of a HTML page. The result is a .js file that contains all the logic of programming of the page. It's the same idea of code-behind files in ASP.NET, defining the concepts: the server code-behind file (.cs, for example) and client code-behind file (.js).//"

====Cappuccino====

Cappuccino is an open source framework that makes it easy to build desktop-caliber applications that run in a web browser.

http://cappuccino.org

==== JavaScript Client Pages ====

http://jsclientpages.codeplex.com/

"//JavaScriptClientPages is a cross-browser, cross-platform tool, which makes dynamic client-side content generation as easy as it is on the server side with technologies like ASP.net, PHP, Ruby on Rails, etc.. Each JavaScritpt Client Page is a complete XHTML page with embedded JavaScript code, as well as custom output tags that make it possible to create clean XHTML templates with advanced presentation logic while eliminating the drudgery of writing custom DOM manipulation code or innerHTML construction.//"

JSCP Code Sample :
<code html>
<table>
  <thead>
     <tr>
        <th>Code</th>
        <th>Name</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
     <!-- 
         XML-based presentation logic tags. Similar to: ASP.net, JSP with taglibs, JSF
      -->
     <js:forEach collection="items" item="item">
          <tr>
              <td  class="code">Item #<js:Text value="item.code" /></td>
              <td><js:output value="items.name" /></td>
              <td><js:output value="MyLib.formatCurrency(text(item.price));" /></td>
           </tr>
     </js:forEach>
    </tbody>
</table>
</code>

==== Knockout ====

==== mustache ====

Logic-less templates with JavaScript.

[[http://mustache.github.com/]], [[https://github.com/janl/mustache.js/]]

<code javascript>
var view = {
  title: "Joe",
  calc: function() {
    return 2 + 4;
  }
}

var template = "{{title}} spends {{calc}}";

var html = Mustache.to_html(template, view);
</code>

==== JavaScript Micro-Templating ====

Quelques lignes de Javascript pour un simple moteur de template côté client, c'est fun ;-)

[[http://ejohn.org/blog/javascript-micro-templating/]]

==== Pure ====

Simple and ultra-fast templating tool to generate HTML from JSON data.

[[http://beebole.com/pure/]]

==== jQote ====

jQote2 is the second major release of jQuery’s most powerful and versatile client-side templating engine. Version 2 now incorporates a faster and more accurate parsing/conversion part that does away with its predecessor’s shortcomings in escaping quotes and multiline support.

jQote (pronounced like Star Trek’s Chakotey) is basically a rewrite of John Resig’s awesome JavaScript Micro-Templating utility. I took his code and ported it to jQuery, overhauled the parsing / conversion part and extended it’s functionality to minimize everyone’s coding efforts.

[[http://aefxx.com/jquery-plugins/jqote/]] => [[http://aefxx.com/jquery-plugins/jqote2/|jQote2]]

<code xml>
<script type="text/html" id="template">
<![CDATA[
    <p class="greetings">
        Hello <%= this.name %>, how are you doing?
        May I offer you
        <% this.is_starving() ? %>
            some tasty peasant?
        <% : %>
            a refreshing Singha?
        <% ; %>
    </p>
]]>
</script>
</code>

==== trimpath ====

For web application developers, the '''JavaScript Templates''' engine from TrimPath is a lightweight APL / GPL open-source component that lets you have template-based programming (like PHP/ASP/JSP) while running in a web browser.
  * The '''JST''' engine is written entirely in standard JavaScript.
  * It supports a productive template markup syntax very much like FreeMarker, Velocity, Smarty.
  * JST is a readable alternative to manually coded massive String concatenations and major DOM/DHTML manipulations.
Build your own modern, brilliantly rich web applications (like GMail/OddPost/Bloglines) with JavaScript Templates.

http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

==== Jaml: JavaScript Haml ====

Jaml is a small but delightful way of rendering HTML using JavaScript. It uses a simple DSL-like syntax to DRY up your code.
There are only 2 steps - registering a template and rendering it. Let's look at something simple first. On the left of each example is the source code, and on the right the rendered output.

http://edspencer.github.com/jaml/

==== EJS: Embedded JavaScript ====

EJS cleans the HTML out of your JavaScript with client side templates. After EJS gets its rubber gloves on dirty code, you'll feel organized and uncluttered.

[[http://embeddedjs.com/]]

==== microtemplate ====

MicroTemplate is a javascript template engine based on the john resig's microtemplate engine.

Template syntax is very easy, usefull and powerfull because you can use normal javascript. 
  * It's lightweight and simple. 1.4 kb of uncompressed code.
  * It's the fastest engine.
  * Supports manuplating with jquery when code generating.

https://github.com/ismail-codar/microtemplate

==== GWT App ====

GWT App is a HTML templating for GWT based on JSP and similar to use like UiBinder. HTML templates don't need to be compiled together with GWT application and can be changed by web designer at any time without GWT application recompilation.

GWT App provides several features and benefits like:
  * Declarative HTML templating at runtime without application recompiling and templates content generated dynamically by JSP and JSTL.
  * Holds GWT's primarily as a reliable business logic framework by moving out a view decorations into HTML templates.
  * SEO support by means of HTML templates embeddable into the main page.
  * MetaField to simulate Java annotation and for RPC data auto binding.
  * Strong typing in MVC including Java generics.
  * Passing serialized RPC data into HTML main page for no delay access to the initial data.
  * Like-tree hierarchical MVC structure (PAC/HMVC).
  * Pipe channels to skip over the model flow between units in the like-tree MVC hierarchy.
  * Modular acyclic structure in Maven.

http://gwtapp.org/


===== Web Client-Side Database & localStorage =====

http://www.html5rocks.com/fr/features/storage

  * Le **stockage Web** permet le mappage de paires valeurs-clés, par exemple localStorage["name"] = username;. Malheureusement, les mises en œuvre actuelles ne sont compatibles qu'avec le mappage de type "chaîne à chaîne". Cela vous oblige donc à sérialiser et désérialiser d'autres structures de données. Pour cela, vous pouvez utiliser JSON.stringify() et JSON.parse().
  * La **base de données Web SQL** vous offre toute la puissance d'une base de données relationnelle SQL structurée.
  * La **base de données indexée** est à mi-chemin entre Web Storage et Web SQL Database. Tout comme le stockage Web, elle propose un mappage de paires valeurs-clés simple, mais offre en plus une compatibilité avec les index du même type que ceux utilisés par les bases de données relationnelles. Par conséquent, la recherche d'objets correspondant à un champ particulier est rapide, puisque vous n'avez pas à itérer manuellement chaque objet du magasin.
  * **File Access** est une API permettant de lire le contenu de fichiers JavaScript. À l'aide d'un ensemble de fichiers ajoutés par l'utilisateur à un élément d'entrée de type "file", vous pouvez lire le contenu d'un fichier ou bien le référencer en tant qu'URL (par exemple, si l'utilisateur a spécifié un fichier d'image, vous pouvez afficher cette image). Des propositions de fonctionnalités d'écriture de fichier sont actuellement à l'étude.

==== sql.js, a SQLite Javascript port ====

SQLite compiled to javascript.

sql.js is a port of SQLite to JavaScript, by compiling the SQLite C code with Emscripten. no C bindings or node-gyp compilation here.

SQLite is public domain, sql.js is MIT licensed.

https://github.com/kripken/sql.js

==== full-text search engine, moteur de recherche texte ====

[[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 =====

4k
  * https://www.youtube.com/watch?v=5lbAMLrl3xI
  * http://www.youtube.com/watch?v=mQFjReMd2us [[http://ylilammi.com/webgl/highway4k/Making%20of%20Highway%204k.pdf|making of]]
  * http://www.youtube.com/watch?v=bPYWIAu24XQ

256b
  * http://www.p01.org/releases/MINI_DISTRICT/

===== Tips =====

==== Stop running this script ? ====

[[http://www.nczonline.net/blog/2009/01/05/what-determines-that-a-script-is-long-running/|What determines that a script is long-running ?]]

Note that the IE limit of 5M instructions was first put in place back in 1997 as part of IE3 and, I believe, has not been changed in that time.

The slow script error does not seem to be limited to a single script. Run a script once with a button click and there is no error. Run it again by clicking the button a second time and you get the error. So the counter seems to be cumulative in some cases, not limited to a single script. The script in question is a simple for-loop intended to trigger the slow script error, so the instructions per click should be identical.

A way to asynchronously process JavaScript arrays to avoid locking up the browser (and further, to avoid displaying the long-running script dialog) : [[http://www.nczonline.net/blog/2009/08/11/timed-array-processing-in-javascript/|Timed array processing in JavaScript]]

==== Promise ====

  * [[https://dev.to/kishan45/callbacks-vs-promises-vs-asyncawait-detailed-comparison-42np|Callbacks vs. Promises vs. Async/Await: Detailed Comparison]]
  * [[https://dev.to/afifsohaili/dealing-with-promises-in-an-array-with-async-await-5d7g|Dealing with Promises In an Array with async/await]]

==== WebSockets ====

[[http://www.html5rocks.com/en/tutorials/websockets/basics/|Introducing WebSockets: Bringing Sockets to the Web]] (2012)

[[http://fr.slideshare.net/community_streamdataIO/2015-0622-parisjs-websocket-vs-sse-v2|Websocket vs SSE]] (//[[/glossaire/SSE|Server Sent events (SSE)]]//) (2015)


==== Browser Detection and Cross Browser Support ====

Ne pas utiliser des méthodes du genre is_ie, is_opera, is_win,is_nav2, is_nav3... Mais plutôt tester chaque fonctionnalité:

<code javascript>
  if (document.body && typeof(document.body.offsetHeight) == 'number')
  {
    height = document.body.offsetHeight;
  }
  else if (typeof(window.innerHeight) == 'number')
  {
    height = window.innerHeight;
  }
  else
  {
    height = 0;
  }
</code>

Voir <del>[[https://developer.mozilla.org/En/Browser_Detection_and_Cross_Browser_Support|Browser Detection and Cross Browser Support]]</del> MDN Search results for [[https://developer.mozilla.org/en-US/search?q=Browser%20Detection%20and%20Cross%20Browser%20Support|Browser Detection and Cross Browser Support]]

Et sur la page [[http://www-archive.mozilla.org/docs/web-developer/sniffer/browser_type.html|The Ultimate JavaScript Client Sniffer, Version 3.03]] il est bien écrit que cette **méthode est obsolète**.

=== Détection de la version de javascript ===

La méthode suivante n'est pas fiable après depuis le HTML 3.2 et encore moins après le HTML4+ car les dernières génération se basent sur l'attribut "type" et non pas language.
<code html>
  <script type="text/javascript">
   var jsver = 1.0;
  </script>
  <script language="Javascript1.1">
   jsver = 1.1;
  </script>
  <script language="Javascript1.2">
   jsver = 1.2;
  ...
  <script type="text/javascript">
   document.write('<p><b>Javascript version ' + jsver + ' supported<\/b><\/p>');
  </script> 
</code>

Donc encore une fois il faut se baser sur les fonctionnalités, et donc voir les changelogs et "What's new" des spécifications de Javascript.

=== image preview ===

http://jsfiddle.net/Fractaliste/LvsYc/1669/

<code html>
    <form id="form1" runat="server">
        <input type='file' id="imgInp" />
        <img id="target" src="#" alt="your image" />
    </form>
</code>
<code javascript>
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();            
            reader.onload = function (e) {
                $('#target').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }
    
    $("#imgInp").change(function(){
        readURL(this);
    });
</code>

=== shallow copy deep copy ===

Shallow Copy ne copie pas les valeurs références, alors qu'une Deep Coopy créée de nouveaux objets pour les valeurs (autres que scalaires).

Shallow copy:
<code javascript>
// Using the Spread Operator (...):
const shallowCopy = { ...originalObject };
// Using Object.assign():
const shallowCopy = Object.assign({}, originalObject);
</code>
Deep copy:
<code javascript>
const deepCopy = JSON.parse(JSON.stringify(original));
</code>

  * https://dev.to/hkp22/javascript-shallow-copy-vs-deep-copy-examples-and-best-practices-3k0a