Catégories
Astuces et Design

Fondu dans une page lors du chargement avec CSS et JavaScript

Lorsque je visite une page, je suis ennuyé lorsque j'essaie d'interagir avec des éléments pendant que le site Web est toujours en cours de chargement. Souvent, les choses bougent, les polices ne sont pas tout à fait chargées et cela semble cassé. Je sais qu’aujourd’hui, nous sommes obsédés dans ce secteur par le fait de […]

Catégories
Astuces et Design

Créez un nuage de tags avec du CSS simple et même du JavaScript plus simple

J'ai toujours aimé les nuages ​​de tags. J'aime l'expérience UX de voir quelles balises sont les plus populaires sur un site Web en voyant la taille de police relative des balises, les balises populaires étant plus grandes. Ils semblent ne plus être à la mode, bien que vous en voyiez souvent des versions utilisées dans […]

Catégories
Astuces et Design

8 façons d'apporter de la créativité aux hyperliens avec CSS et JavaScript

Depuis le début du World Wide Web, le vénérable lien hypertexte a été une caractéristique cruciale. Vous vous souvenez de la stupéfaction lorsque vous avez découvert qu'un simple clic pouvait vous emmener partout dans le monde? OK, peut-être que ce moment de gee-whiz est passé. Mais les liens sont toujours aussi importants que jamais. Et […]

Catégories
Astuces et Design

Créons un bus d'événements natif léger en JavaScript

Un bus événementiel est un modèle de conception (et même si nous parlerons de JavaScript ici, il s'agit d'un modèle de conception dans n'importe quel langage) qui peut être utilisé pour simplifier les communications entre différents composants. Il peut également être considéré comme publier / souscrire ou pub. L'idée est que les composants peuvent écouter […]

Catégories
Astuces et Design

De nombreuses façons d'utiliser Math.random () dans JavaScript

Math.random() est une API en JavaScript. C'est une fonction qui vous donne un nombre aléatoire. Le nombre renvoyé sera compris entre 0 (inclus, comme dans, il est possible qu'un 0 réel soit renvoyé) et 1 (exclusif, comme dans, il n'est pas possible qu'un 1 réel soit renvoyé). Math.random(); // returns a random number lower than […]

Catégories
Astuces et Design

Utilisation de JavaScript pour régler la saturation et la luminosité des couleurs RVB

Dernièrement, je me suis penché sur la conception avec la couleur (ou «couleur» comme nous l’épelons d’où je viens en Nouvelle-Zélande). En regardant les conseils d'Adam Wathan et Steve Schroger sur le sujet, nous constatons que nous allons avoir besoin de plus de cinq jolis codes hexadécimaux provenant d'un générateur de palette de couleurs lors […]

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 […]