Convertir jQuery en vanilla JS

Vanilla JS

Caisse à outils (bibliothèques de fonctions prêtes à l’emploi)

  • Lodash. A modern JavaScript utility library delivering modularity, performance & extras.

    lodash-es

  • JavaScript Algorithms and Data Structures.

    This repository contains JavaScript based examples of many popular algorithms and data structures.

    Each algorithm and data structure has its own separate README with related explanations and links for further reading (including ones to YouTube videos).

  • MOUT is a collection of modular JavaScript utilities that can be used in the browser as AMD modules or on node.js. – modules are converted into node.js format during npm publish using nodefy – It provides many helper methods similar to those found on other languages standard libraries (ie. Python, Ruby, PHP).

    The biggest difference between other existing solutions is that you can choose to load only the modules/functions that you need, no extra overhead or complex build systems required. It also provides a clean and consistent API and normalizes the behavior across multiple browsers/environments. All batteries included.

  • Voca – The Voca library offers helpful functions to make string manipulations comfortable: change case, trim, pad, slugify, latinise, sprintf’y, truncate, escape and much more. The modular design allows to load the entire library, or individual functions to minimize the application builds. The library is fully tested, well documented and long-term supported.

Bonnes pratiques

Javascript patterns

EcmaScript

Les modules Javascript en 5 minutes
Understanding ES6 modules

Preprocessing, compilation

Tree shaking avec Webpack

Projets divers, par thème

User interactions

  • Premonish – A library for predicting what element a user will interact with next.
  • jQuery Hover Intent – hoverIntent is a plug-in that attempts to determine the user’s intent… like a crystal ball, only with mouse movement! It is similar to jQuery’s hover method. However, instead of calling the handlerIn function immediately, hoverIntent waits until the user’s mouse slows down enough before making the call. Why? To delay or prevent the accidental firing of animations or ajax calls. Simple timeouts work for small areas, but if your target area is large it may execute regardless of intent. That’s where hoverIntent comes in…
  • Stimulus JS – Stimulus is a JavaScript framework with modest ambitions. It doesn’t seek to take over your entire front-end—in fact, it’s not concerned with rendering HTML at all. Instead, it’s designed to augment your HTML with just enough behavior to make it shine. Stimulus pairs beautifully with Turbolinks to provide a complete solution for fast, compelling applications with a minimal amount of effort.
  • Draggable – Draggable is a modern drag and drop JavaScript library. Lightweight, modular and accessible
  • Interact.js – JavaScript drag and drop, resizing, and multi-touch gestures for modern browsers (and also IE9+)

Formulaires

  • Parsley – the ultimate JavaScript form validation library.
  • Cleave.js – Format your <input/> content when you are typing.

Animation

  • Anime JS – Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Pagination, Scroll infini, Load more…

Serveur, jeu en ligne multijoueur en simultané ou au tour par tour

Outils en ligne

Frameworks

Bases de données

  • [IndexedDB] (base de données côté client) Dexie – Un wrapper pour manipuler des bases de données IndexedDB.

Tests unitaires