Convertir jQuery en vanilla JS
- You Don’t Need – People choose popular projects, often not because it applies to their problems.
- You might not need jQuery
- Cheat sheet for moving from jQuery to vanilla JavaScript, PDF
- Vanilla JS equivalent of common jQuery functions, PDF
Vanilla JS
- Web components
- Web Components the Right Way – A curated list of awesome Web Components resources.
Caisse à outils (bibliothèques de fonctions prêtes à l’emploi)
-
Lodash. A modern JavaScript utility library delivering modularity, performance & extras.
-
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
- Design Patterns in ES6 – A software design pattern is a general reusable solution to a commonly occurring problem within a given context.
EcmaScript
Les modules Javascript en 5 minutes
Understanding ES6 modules
Preprocessing, compilation
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…
- How to implement a « Load More » button in JavaScript – Retrieving a JSON response from a web request and loading a template OR building the HTML in JavaScript. Version PDF: thatsoftwaredude.com-How to implement a Load More button in JavaScript.
- Infinite Scroll is a JavaScript plugin that automatically adds the next page, saving users from a full page load. You’ve likely seen it in use all over the web. Demos + docs.
- vanilla-lazyload is a fast, lightweight and flexible script that speeds up your web application by loading images only as they enter the viewport. LazyLoad supports responsive images.
Serveur, jeu en ligne multijoueur en simultané ou au tour par tour
- Colyseus – Multiplayer Game Server for Node.js. Focus on the gameplay instead of networking.
- Actionhero – The reusable, scalable, and quick node.js API server for stateless and stateful applications.
- Lance GG – RealTime. Multiplayer. JavaScript. Lance is a node based game server. Created to enable game developers to build real time online javascript multiplayer games without worrying about implementing net synchronisation code. It strives to provide buttery smooth experience for both developer and player regardless of lag.
- nodeGame – Online Real-Time Synchronous Experiments. Fast, scalable JavaScript for large-scale, online, multiplayer, real-time games and experiments.
Outils en ligne
- https://regex101.com/, https://regexlib.com/
- MeasureThat.net – Find out how to improve the speed of your web application! Create a benchmark, measure performance of the JavaScript code and pick the fastest version. Click New benchmark to get started. Or checkout existing benchmarks that were added by the Community.
- JavaScript Tutor – Visualize JavaScript code execution to learn JavaScript online – copier/coller le code javascript à tester. Vous pourrez voir pas à pas l’évolution de ce qui se passe en mémoire.
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
- tap-producing test harness for node and browsers
- Mock Browser – A mock browser with window, document, location, navigation, local and session storage to use for client side code tests in a node environment.