Extraits de code JavaScript vanille
Ou peut-être avez-vous besoin de gérer des dates et des tableaux, ou de manipuler DOM – il n'est tout simplement pas nécessaire d'ajouter une dépendance externe pour une tâche simple de ce genre , mais nous devons trouver la meilleure façon de le faire. C’est toujours une bonne idée d’explorer également les extraits de code JavaScript vanille légers de préférence ceux qui n’ont pas de dépendances tierces. Heureusement, les outils ne manquent pas pour faire exactement cela.
30 Seconds Of Code
30 Seconds of Code comporte un énorme référentiel d'extraits de code court pour JavaScript, y compris des aides pour traitant des primitives, des tableaux et des objets, ainsi que des algorithmes, des fonctions de manipulation DOM et des utilitaires Node.js. Vous pouvez également trouver de nombreux petits utilitaires pour Python, React Hooks, React Components et Node.js. Il comporte également des cheatsheets JavaScript utiles .

HTML Dom
] HTML Dom fournit plus de 120 extraits de code JavaScript simples et à l'épreuve des balles pour tout, de la visibilité des mots de passe à la création de vues fractionnées redimensionnables – le tout pris en charge pour les navigateurs modernes et IE11 +.

Vanilla JavaScript Toolkit
Vanilla JavaScript Toolkit fournit une collection croissante de méthodes JavaScript vanille, fonctions d'assistance plugins, passe-partout, polyfills et ressources d'apprentissage. De plus, Chris Ferdinandi dirige une Vanilla JS Academy avec de nombreux conseils de développeurs quotidiens sur Vanilla JS envoyés dans sa newsletter.

Micro-bibliothèques sous 5K
Micro.js est un référentiel organisé de petites bibliothèques JavaScript et utilitaires , collecté par Thomas Fuchs. Toutes les bibliothèques sont regroupées et mesurent moins de 5 Ko, ne faisant qu'une chose et une seule chose – et le font bien.

Single Line Of Code
Phuoc Nguyen a publié Single-Line-Of-Code un référentiel de utilitaires JavaScript pour tout ce qui concerne les tableaux, date et heure, manipulations DOM, fonctions, nombres et objets.

Vanilla JS Code Challenge
30 Days Vanilla JS Code Challenge est un cours vidéo gratuit de Wes Bos où vous apprendrez à construire 30 choses en 30 jours, avec 30 tutoriels – sans aucun framework , compilateurs, bibliothèques ou passe-partout. C'est un excellent moyen d'améliorer vos compétences JavaScript. Vous pouvez également obtenir tous les défis et solutions de 30 jours en tant que dépôt GitHub.

Cours accéléré vidéo JavaScript Vanilla est un autre cours vidéo gratuit avec 43 sessions, commençant par JavaScript DOM jusqu'à async JS, Babel et Webpack et un générateur de mot de passe JavaScript. [19659029] Cours Crash Vidéo Vanilla JavaScript « />
Migration de jQuery à Vanilla JavaScript
Si vous vous trouvez toujours au pays de systèmes hérités fonctionnant sur jQuery, il existe un certain nombre de ressources qui vous permettent de vous éloigner lentement de jQuery avec des options plus légères et standardisées:
- PlainJS You Might Not Need jQuery and ] Vous n'avez pas besoin de jQuery sont gr manger des références pour des extraits de code JavaScript vanille. Les sites proposent des référentiels d'extraits de code pour tout, de l'interface utilisateur et des entrées aux médias, en passant par la navigation et les effets visuels (avec des cas d'utilisation non seulement pour jQuery mais à peu près n'importe quel code hérité).
- Learn Vanilla JS propose des livres, des cours, ressources à feuilles persistantes des communautés, des podcasts tout autour de vanilla JS. Un référentiel fantastique qu'il vaut la peine de garder à portée de main.
- JavaScript Framework Diet est la série en cours de Sebastian De Deyne sur les tâches courantes, résolues sans framework JavaScript. Vous apprendrez à sélectionner des éléments, la délégation d'événements, la structure des fichiers, les listes déroulantes et à entrer et quitter les transitions.
Formatage natif des dates et heures JavaScript
Avons-nous encore besoin de bibliothèques comme Moment.js ou date-fns pour formater les dates JavaScript et les temps? Les capacités du navigateur natif étant plutôt bonnes de nos jours et la prise en charge du navigateur étant excellente aussi, pas nécessairement, comme le souligne Elijah Manor.

Elijah a résumé trois méthodes différentes pour traiter l'heure et les dates . La méthode toLocaleDateString
est pratique lorsque vous voulez une date qui ne contient que des chiffres, une longue date verbeuse ou une date qui sort dans une autre langue. Si vous avez seulement besoin de sortir la partie heure d'un objet de date JavaScript, il y a toLocaleTimeString
.
Enfin, la méthode générique toLocaleString
vous permet de passer une ou toutes les options du les anciens en une seule méthode. Elijah a construit un terrain de jeu CodeSandbox où vous pouvez expérimenter les différentes approches.
ceci
vs que
La connaissance profonde d'un sujet réside vraiment dans la compréhension subtile différences entre les différentes manières de résoudre le même problème. En quoi nodeName
est-il différent de tagName
? En quoi les deux opérateurs d'incrémentation sont-ils différents, par exemple ++ valeur
et valeur ++
? this
vs. that
est un site de référence convivial pour trier ce genre de questions.

Ecrire du code propre et réutilisable
Personne n'aime gérer du code mal écrit, mais en réalité Cela arrive trop souvent. Pour nous aider à faire mieux, Ryan McDermott a adapté les principes du génie logiciel du livre de Robert C. Martin Clean Code pour JavaScript. Le résultat est un guide pratique pour produire des logiciels lisibles, réutilisables et refactorisables en JavaScript.

De rendre les variables significatives et explicatives à la limitation du nombre de fonctions et à la gestion des erreurs, le guide compare les bons et les mauvais exemples de code . Bien sûr, tous les principes ne doivent pas être strictement suivis, mais les directives vous aident à évaluer la qualité du code JavaScript que vous et votre équipe produisez.
JavaScript The Right Way
Apprendre un nouveau langage peut être un défi, surtout quand il y a tellement d'outils et de frameworks là-bas pour en tirer le meilleur parti comme il y en a dans le cas de JavaScript. Pour vous éviter de vous perdre dans toutes les possibilités et vous aider à apprendre les bonnes pratiques à partir de zéro à la place, William Oliveira et Allan Esquina ont élaboré le guide « JavaScript The Right Way » .

Destiné à la fois aux développeurs débutants et expérimentés qui souhaitent approfondir au mieux JavaScript pratiques, le guide rassemble des articles, des conseils et des astuces des meilleurs développeurs, couvrant tout, des bases au style de code, aux outils, aux frameworks, aux moteurs de jeu, aux ressources de lecture, aux captures d'écran et bien plus encore pour faciliter la vie d'un développeur. Le guide est disponible en huit langues. Une mine d'or pleine de sagesse JavaScript.
Et si vous avez besoin d'une autre plongée approfondie dans JavaScript, Kyle Simpson You Don't Know JS est toujours un bon point de départ (Kyle travaille sur la deuxième édition à le moment, et a aussi beaucoup de livres et de cours vidéo à explorer).
Choisir le bon framework JavaScript
Il existe de nombreuses options pour choisir un nouveau framework JavaScript. Mais en avez-vous besoin? Et si oui, comment choisir le bon? La 12-Points-Checklist de Sacha Greif met en évidence 12 choses à garder à l'esprit lors de l'évaluation d'une nouvelle bibliothèque JavaScript. Plus particulièrement, les fonctionnalités, les performances, la courbe d'apprentissage, la compatibilité et les antécédents.

Tim Kadlec a également mené des recherches à ce sujet, comparant jQuery, Vue.js, Angular et React ]. Le résultat final: la récolte actuelle de frameworks ne fait pas assez pour donner la priorité aux appareils moins puissants et aider à combler le fossé entre le bureau et le mobile. Ces figures pourraient vous donner au moins un certain contexte pour prendre une décision plus éclairée.
Bibliothèques autonomes Vanilla JS
Les bibliothèques ci-dessous sont de minuscules bibliothèques JavaScript vanille sans aucune dépendance. Tout comme ils sont légers, vous devrez parfois faire quelques ajustements, par exemple pour fournir des annonces aux lecteurs d'écran ou prendre en charge les anciens navigateurs. Vous pouvez également consulter un Guide complet des composants frontaux accessibles .
- Vue à 360 degrés
ThreeSixty.js est un outil pour transformer une image-objet en 360 degrés image. - Animation
Anime.js est une bibliothèque d'animation légère qui fonctionne avec les propriétés CSS, SVG, les attributs Dom et les objets JavaScript. De plus, Sal.js est une bibliothèque d'animation de défilement légère. - Data Visualization
Clusterize.js est une petite bibliothèque JavaScript permettant d'afficher de grands ensembles de données. - Filtrage
MixItUp 3 fournit un filtrage, un tri, une insertion et une suppression animés. - Forms
Choices.js est un plug-in d'entrée configurable.
- Image plein écran aperçu
Intense Image Viewer une bibliothèque pour afficher des images en plein écran. - Galerie d'images
PhotoSwipe prend en charge les gestes tactiles et l'API de l'historique du navigateur. - Maçonnerie Layout
Colonnes .js et Waterfall.js sont des options pour la mise en page Masonry écrite en JavaScript vanille. - Media Player
Media Player un multi-navigateur, un lecteur multimédia accessible et personnalisable écrit en JavaScript brut. - Modals
accessible_modal_window par Scott O 'Hara. - Parallax
Rellax.js est une bibliothèque de parallaxe JavaScript vanille légère (si vous en avez absolument besoin). - Reactive states
Reef une bibliothèque légère pour créer des réactifs , interface utilisateur basée sur l'état. - Recherche
InstantSearch.js est une bibliothèque d'interface utilisateur open source qui vous permet de créer une interface de recherche dans votre application frontale. - Curseurs et carrousels
Siema Glide Splide.js et Swipe.js . - Slideout navigation
Slideout.js is a touch menu de navigation coulissant pour les vues mobiles. - Spinners
Spin.js crée dynamiquement des indicateurs d'activité tournante, aucune image ou dépendance nécessaire, distribués sous forme de module ES natif. - Éléments collants
HC-Sticky rend tout élément de la page visible pendant le défilement d'une personnalisation. (Pensez également à utiliserposition = "sticky"
dans CSS à la place). - Sticky navigation
MenuSpy un petit code JavaScript pour les barres de navigation collantes qui changent au fur et à mesure que l'utilisateur fait défiler les parties de la page. - Filtres et listes de tableaux
List.js ajoute la recherche, le tri et les filtres aux listes et tableaux HTML simples. - Tri des tableaux
Tablesort est un composant de tri simple tables. - Transitions
Barba.js est une excellente alternative à la parallaxe, avec des transitions fluides et fluides entre les pages. - Tilting
Tilt-Vanilla.js est une inclinaison 3D fluide Bibliothèque JavaScript. - Typewriter Text Effect
Typewriter JS génère un effet de machine à écrire. - Visual sparkles
Speckle.js est un module JavaScript qui ajoute des taches stylisées et réactives à n'importe quel élément. - Éditeurs de texte WYSIWIG
Froala Etherpad et SunEditor sont des éditeurs de texte JavaScript WYSIWIG vanille. Et si vous voulez créer le vôtre, ContentTools est une bibliothèque pour créer des éditeurs WYSIWIG pour le contenu HTML.

Source link