Share
Les langages de codage sont vraiment cela. langues. Devenir compétent dans un langage de programmation, qu'il s'agisse de HTML, CSS, JavaScript ou toute autre chose, présente tous les défis de l'apprentissage d'une nouvelle langue parlée.
Comme pour les langues parlées, chaque langue de codage a sa propre «grammaire»; des règles strictes et des idiosyncrasies qui sont souvent difficiles à apprendre et ne sont complètement absorbées que par des années de pratique.
uilang est un nouveau langage simple basé sur JavaScript créé par Benjamin De Cock. Il permet aux concepteurs Web de créer des interactions de clic dans l'interface utilisateur à l'aide d'un ensemble de règles extraites directement de la langue anglaise. Cela signifie une courbe d'apprentissage plus intuitive et plus douce pour les débutants souhaitant se familiariser avec l'utilisation de JavaScript, ainsi qu'une méthode plus rapide de déploiement d'interaction de clic d'interface utilisateur pour les anciens utilisateurs..
Le noyau d'uilang est la possibilité d'ajouter, de supprimer ou de changer les noms de classe sur un élément donné. Cela peut être juste trois actions, mais combinées avec CSS, elles se traduisent par la possibilité de faire toutes sortes de choses comme cacher des notifications et des boîtes modales, animer des commutateurs, afficher des menus déroulants, des menus de navigation et des systèmes accordéon..
Par exemple, supposons que vous ayez la boîte de notification suivante:
La boîte globale porte l'identifiant #notification, et le bouton a la classe .cacher. CSS est également inclus sur la page sous la classe .caché que, une fois ajouté à la boîte, son opacité sera mise à zéro, masquant ou rejetant la notification.
Le code utilisé pour créer cette boîte est:
Vous avez 3 messages non lus.
Utilisation de JavaScript droit, si vous vouliez ajouter la classe .caché dans la boîte lorsque vous cliquez sur le bouton, vous avez besoin de quelque chose comme ceci:
Accentsconagua
document.addEventListener ('DOMContentLoaded', function () [] .forEach.call (document.querySelectorAll ('. hide'), fonction (el) el.addEventListener ('click', fonction (e) if (e .target.nodeName.toLowerCase () == 'a') e.preventDefault (); document.getElementById ('notification'). classList.add ('hidden');););););Si vous n'avez pas l'habitude d'utiliser JavaScript, cette quantité de code peut s'avérer très lourde. Même si vous êtes familier, il peut encore prendre beaucoup de temps à produire.
En utilisant uilang au lieu de JavaScript brut, pour parvenir au même résultat, écrivez une instruction comme celle-ci:
en cliquant sur ".hide" ajoute la classe "hidden" sur "#notification" Comme vous pouvez le constater, ce code est beaucoup plus lisible, quel que soit votre niveau d’expérience. Son langage simple le rend facile à comprendre et rapide à déployer.
Voyons comment fonctionne uilang.
La première étape pour utiliser uilang consiste à télécharger le petit fichier JS qui l’alimente. Vous pouvez le saisir via le Télécharger lien sur uilang.com.
Une fois le fichier téléchargé, chargez-le dans votre page HTML avec:
Vous êtes maintenant immédiatement prêt à utiliser uilang avec n'importe quel élément de votre page..
Commencez par choisir l’élément cible, tel qu’un bouton, que vous souhaitez que Uilang surveille et auquel les gens cliquent dessus. Ensuite, vous définissez une action qui ajoutera, supprimera ou basculera un nom de classe et vous déterminerez à quel élément vous souhaitez que cette action s'applique.
Assurez-vous d’emballer toutes les commandes uilang dans en cliquant sur ainsi:
en cliquant sur Ensuite, ajoutez la classe ou l'ID de l'élément que vous souhaitez cibler pour surveiller les clics, entouré de marques de langage:
en cliquant sur ".thisbutton" À ce stade, vous pouvez également choisir de suivre plusieurs éléments cibles pour les clics en ajoutant une virgule et une deuxième classe ou identifiant:
en cliquant sur ".thisbutton, #thatbutton" Vous avez maintenant le choix entre trois actions. ajoute de la classe, supprime la classe ou bascule la classe.
Insérez l'action qui fait ce que vous voulez, suivie du nom de la classe que vous allez ajouter / supprimer / basculer:
en cliquant sur ".thisbutton, #thatbutton" ajoute la classe "popsup" Enfin, ajoutez le mot sur suivi de la classe ou de l'ID (entre les repères de parole) de l'élément que vous allez modifier, c'est-à-dire l'élément auquel vous souhaitez ajouter / supprimer / basculer une classe:
en cliquant sur ".thisbutton, #thatbutton" ajoute la classe "popsup" sur "#message" Vous pouvez également utiliser plusieurs lignes et définir plusieurs actions de clic à la fois:
en cliquant sur ".thisbutton, #thatbutton" ajoute la classe "popsup" sur "#message" en cliquant sur ".otherbutton" ajoute la classe "goesaway" sur "#message" Si l'élément sur lequel vous souhaitez suivre les clics est également l'élément sur lequel vous souhaitez ajouter / supprimer / basculer des classes, vous pouvez utiliser le mot clé cible au lieu d'écrire l'identifiant une seconde fois, comme ceci:
en cliquant sur ".animation", la classe "play_anim" bascule sur "cible" Cela met fin à notre rapide démonstration de uilang! La meilleure façon de voir de quoi il s'agit est de se rendre sur uilang.com et de jouer avec les démonstrations en direct..
Vous trouverez également un transpiler que vous pouvez utiliser pour brancher certaines commandes uilang et voir quel code JavaScript est généré en conséquence: transpiler.uilang.com.
Benjamin, le développeur, a également publié un article sur Medium détaillant la philosophie qui sous-tend uilang et son objectif de faciliter la transition vers l'apprentissage de JavaScript plus facilement pour les autres que pour lui..
Si vous commencez à utiliser JavaScript et cherchez un moyen plus intuitif de surmonter ces premiers obstacles, ou si vous cherchez simplement une méthode simplifiée de gestion des interactions de clic, essayez uilang dans votre prochain projet..
