Catégories
Astuces et Design

Les saveurs de la programmation orientée objet (en JavaScript)

Dans mes recherches, j'ai trouvé qu'il existe quatre approches de la programmation orientée objet en JavaScript: Quelles méthodes dois-je utiliser? Quelle est la «meilleure» façon? Ici, je vais présenter mes conclusions ainsi que des informations qui peuvent vous aider à décider ce qui vous convient. Pour prendre cette décision, nous n'allons pas seulement examiner les […]

Catégories
Astuces et Design

Architecture célèbre recréée avec CSS et JavaScript

L'architecture est l'une des formes d'art les plus immédiatement reconnaissables. Montrez une image d'une structure célèbre et il y a de fortes chances qu'une pluralité de personnes l'identifie immédiatement. C'est aussi une source de fierté et d'inspiration. Par exemple, des gens du monde entier rêvent de visiter la Tour Eiffel. Mais l'expérience ne consiste pas […]

Catégories
Astuces et Design

Learn date-fns: une bibliothèque de dates JavaScript légère

Travailler avec des dates en JavaScript est une douleur. Les méthodes de date natives sont souvent verbeuses et parfois incohérentes – ce qui les rend également sujettes aux erreurs. Mais de bonnes nouvelles sont à portée de main. Il existe plusieurs bibliothèques pour éliminer la douleur de la manipulation. Ces bibliothèques sont aux dates JavaScript, […]

Catégories
Astuces et Design

17 menus de navigation créés avec uniquement CSS (sans JavaScript)

Nous avons été sur un coup de pied ces derniers temps ici à 1WD, à la recherche de moyens de coder des choses en CSS pur sans utiliser JavaScript, non pas parce que nous n'aimons pas JavaScript, mais quand vous pouvez éviter de l'utiliser et quand même accomplir ce que vous avez décidé de faire […]

Catégories
Astuces et Design

Apprendre Deno: un environnement d'exécution JavaScript et TypeScript sécurisé

Mai 2020 a vu la sortie de Deno 1.0, et c'est un sujet de conversation assez populaire. Si vous vous demandez de quoi il s'agit, vous êtes au bon endroit! Dans cet article, j'espère vous donner un aperçu de ce qu'est Deno. Nous allons examiner ses principales fonctionnalités et vous demander pourquoi vous voudrez peut-être […]

Catégories
Astuces et Design

Utilisation des requêtes multimédias JavaScript

Quelle est la première chose qui vous vient à l'esprit lorsque vous pensez aux requêtes multimédias? Peut-être quelque chose dans un fichier CSS qui ressemble à ceci: body {   background-color: plum; } 
 @media (min-width: 768px) {   body {     background-color: tomato;   } } Les requêtes multimédias CSS sont un ingrédient […]

Catégories
Astuces et Design

Guide Deno: un environnement d'exécution JavaScript et TypeScript sécurisé

Mai 2020 a vu la sortie de Deno 1.0, et c'est un sujet de conversation assez populaire. Si vous vous demandez de quoi il s'agit, vous êtes au bon endroit! Dans cet article, j'espère vous donner un aperçu de ce qu'est Deno. Nous allons examiner ses principales fonctionnalités et vous demander pourquoi vous voudrez peut-être […]

Catégories
Astuces et Design

Détendez-vous avec ces extraits de code CSS et JavaScript apaisants

Nous pourrions tous utiliser un peu de calme dans nos vies. Et avec les pressions qui accompagnent la conception et le développement de sites Web, sans parler de l'état du monde. Il y a de nombreuses raisons de trouver une évasion. Et si sortir du bureau est un excellent moyen de se détendre, ce n’est […]

Catégories
Astuces et Design

Conception d'un système de plugins JavaScript

WordPress a des plugins. jQuery a des plugins. Gatsby, Eleventy et Vue le font aussi. Les plugins sont une caractéristique commune des bibliothèques et des frameworks, et pour une bonne raison: ils permettent aux développeurs d'ajouter des fonctionnalités, de manière sûre et évolutive. Cela rend le projet de base plus précieux et construit une communauté […]

Catégories
Astuces et Design

Cas d'utilisation pratiques de la méthode JavaScript la plus proche ()

Avez-vous déjà eu le problème de trouver le parent d'un nœud DOM en JavaScript, mais vous n'êtes pas sûr combien de niveaux vous devez traverser pour y accéder? Examinons ce code HTML par exemple:   Click me C’est assez simple, non? Dites que vous voulez obtenir la valeur de data-id après qu'un utilisateur clique sur […]

Catégories
Astuces et Design

Créer un carrousel à l'aide de CSS Scroll Snap et JavaScript

Ce didacticiel vous aidera à créer un carrousel réactif en utilisant la propriété CSS scroll-snap et très peu de JavaScript pour la navigation. Vous pouvez l'utiliser pour l'affichage de produits, ou comme galerie, ou pour vos témoignages – comme l'exemple de ce tutoriel. Voici donc ce que nous allons créer: Il ne s'agit en réalité […]

Catégories
Astuces et Design

8 extraits CSS et JavaScript alimentés par la caféine

Bien sûr, l'idée des développeurs Web de consommer des boissons contenant de la caféine au gallon est un stéréotype. Mais si vous naviguez suffisamment sur les réseaux sociaux, il semble que beaucoup d'entre nous participent au rituel. Vous voyez également divers hommages à cet éclair liquide sur CodePen. Grâce à une utilisation intelligente des dernières […]

Catégories
Astuces et Design

Trois alternatives CSS à la navigation JavaScript

Hé vite! Vous devez créer la navigation pour le site et vous commencez à travailler sur le comportement mobile. Quel modèle choisissez-vous? Si vous êtes comme la plupart des gens, c'est probablement le menu "hamburger" qui, lorsque vous cliquez dessus, utilise un peu de JavaScript pour développer une liste verticale de liens de navigation. Mais […]

Catégories
Astuces et Design

10 interfaces utilisateur gratuites intégrées avec CSS et JavaScript

L'objectif de l'intégration est de familiariser les nouveaux utilisateurs avec une interface. Cela vient dans de nombreux styles différents, et il n'y a pas de bonne façon de le faire. Mais si vous étudiez comment les sites et les applications intègrent, vous pouvez trouver des idées pour votre propre travail. Et avec ces interfaces utilisateur […]

Catégories
Astuces et Design

6 meilleurs cadres et bibliothèques d'interface utilisateur JavaScript pour 2020 – SitePoint

Cet article a été créé en partenariat avec Sencha. Merci de soutenir les partenaires qui rendent SitePoint possible. JavaScript est la technologie au cœur des applications Web rapides et rapides. Il existe d'innombrables infrastructures et bibliothèques d'interface utilisateur pour créer des applications réactives complexes qui évoluent bien. Certains vous aideront à écrire du code plus […]

Catégories
Astuces et Design

Exemples de fonctions JavaScript setTimeout () – SitePoint

setTimeout est une fonction JavaScript native (bien qu'elle puisse être utilisée avec une bibliothèque telle que jQuery, comme nous le verrons plus loin), qui appelle une fonction ou exécute un extrait de code après un délai spécifié (en millisecondes). Cela peut être utile si, par exemple, vous souhaitez afficher une fenêtre contextuelle après qu'un visiteur […]

Catégories
Astuces et Design

Un runtime JavaScript et TypeScript sécurisé – SitePoint

Mai 2020 a vu la sortie de Deno 1.0, et ce fut un sujet de conversation assez populaire. Si vous vous demandez de quoi il s'agit, vous êtes au bon endroit! Dans cet article, j'espère vous donner un aperçu de ce qu'est Deno. Nous allons examiner ses principales fonctionnalités et vous demander pourquoi vous voudrez […]

Catégories
Astuces et Design

8 extraits de code CSS et JavaScript animés qui célèbrent l'été

Il y a une raison pour laquelle tant d'entre nous attendent avec impatience l'été. Il donne l'occasion de sortir à l'extérieur et loin de nos bureaux. Ensuite, vous avez la possibilité de passer plus de temps avec vos amis et votre famille. Comme on dit, l'aventure est là-bas. Encore mieux, vous n’avez pas besoin de […]

Catégories
Astuces et Design

10 extraits de texte CSS et JavaScript étonnants et animés

Vous pouvez créer des effets de texte assez éblouissants avec CSS de base et quelques lignes de JavaScript. Ces effets vont des animations d'affichage de texte aux rotations 3D ou tout ce que vous pouvez imaginer. Et dans cet article, j'ai répertorié 10 des exemples les plus intéressants du Web présentant ce que vous pouvez […]

Catégories
Astuces et Design

Comment obtenir toutes les propriétés personnalisées d'une page en JavaScript

Nous pouvons utiliser JavaScript pour obtenir la valeur d'une propriété personnalisée CSS. Robin a rédigé une explication détaillée à ce sujet dans Obtenir une valeur de propriété personnalisée CSS avec JavaScript. Pour vérifier, disons que nous avons déclaré une seule propriété personnalisée sur l'élément HTML: html {   –color-accent: #00eb9b; } En JavaScript, nous pouvons […]