Fermer

avril 5, 2021

Extraits de code JavaScript vanille


Dans une nouvelle série d'articles, nous mettons en évidence certains des outils et techniques utiles pour les développeurs et les concepteurs. Cette fois-ci, examinons des extraits de code JavaScript vanille – des ressources et des bibliothèques légères pour vous aider à résoudre un problème sans une surcharge importante ou des dépendances tierces. et les côtés étranges de la base de code, souvent avec une documentation vague, ambiguë et troublante – le cas échéant. Dans de tels cas, refactoriser le composant semble inévitable.

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 .

 30 Seconds Of Code
30 Seconds of Code avec un vaste référentiel d'extraits de code courts et de cheatsheets JavaScript.

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 +.

 HTML Dom
120 bulletproof , extraits de code JavaScript simples, sur HTML Dom .

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.

 Vanilla JavaScript Toolkit
Meet Vanilla Boîte à outils JavaScript une collection croissante de méthodes JavaScript vanille et de fonctions d'assistance.

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.

 Micro-bibliothèques sous 5K
Micro.js est un référentiel organisé de petites bibliothèques et utilitaires JavaScript.

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.

 Ligne de code unique
Ligne unique de code avec des utilitaires JavaScript pour les tâches de base et les manipulations DOM.

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.

 Vanilla JS Code Challenge
30 Days Vanilla Code Challenge un cours vidéo gratuit de Wes Bos .

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 « />

Cours Crash Vidéo Vanilla JavaScript un cours vidéo gratuit avec 43 sessions.

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.

 Formatage natif des dates et heures JavaScript
Formatage natif des dates et heures JavaScript, un approfondi guide .

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.

 this vs that
this vs. that [19659040] Le petit référentiel grandissant de Phuoc Nguyen explique les différences entre les propriétés et les fonctions pour JavaScript et TypeScript, ainsi que DOM, HTML et CSS. De plus, WTF.js est un référentiel grandissant de maux de tête courants, de pièges et de comportements inattendus liés à JavaScript.

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.

 Rédaction de code propre et réutilisable
Directives relatives au code propre avec de bons et de mauvais exemples

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 » .

 JavaScript The Right Way
JavaScript The Right Way, un guide complet .

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.

 Choisir le bon framework JavaScript
C'est une bonne idée d'étudier l'impact des frameworks JavaScript, avec Perf-Track . [19659040] Perf-Track pistes performances du cadre à l'échelle . Il suit essentiellement les performances en termes de Core Web Vitals pour Angular, React, Vue, Polymer, Preact, Ember, Svelte et AMP – sur mobile et sur ordinateur de bureau. L'ensemble de données date actuellement de 2020, mais il nous donne un aperçu de la performance des sites dotés de ces cadres dans la nature. Par exemple, React with Gatsby fonctionne mieux que ceux créés avec l'application Create React.

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