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 .

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.