Share
Los lenguajes de codificación son mucho más que eso; idiomas Convertirse en un experto en un lenguaje de codificación, ya sea HTML, CSS, JavaScript o cualquier otra cosa, tiene todos los desafíos de aprender un nuevo idioma hablado..
Al igual que con los idiomas hablados, cada idioma de codificación tiene su propia "gramática"; Reglas estrictas e idiosincrasias que a menudo son difíciles de aprender y solo se absorben completamente durante años de práctica..
uilang es un lenguaje nuevo y simple basado en JavaScript creado por Benjamin De Cock, y permite a los diseñadores web crear interacciones de clics en la interfaz de usuario utilizando un conjunto de reglas tomadas directamente del idioma inglés. Esto significa una curva de aprendizaje más intuitiva y suave para los principiantes que desean utilizar el JavaScript fácilmente, y un método más rápido de implementación de interacción de clic en la interfaz de usuario para manos viejas..
El núcleo de uilang es la capacidad de agregar, eliminar o alternar nombres de clase en cualquier elemento dado. Esto puede ser solo tres acciones, pero combinadas con CSS, se traducen en la capacidad de hacer todo tipo de cosas como ocultar las cajas de notificación y modales, animar interruptores, mostrar los menús desplegables del menú de navegación y manejar la pestaña y los sistemas de acordeón..
Por ejemplo, digamos que tiene el siguiente cuadro de notificación:
La caja general lleva la identificación #notificación, y el botón tiene la clase .esconder. CSS también se incluye en la página bajo la clase .oculto que cuando se agrega a la caja establecerá su opacidad en cero, por lo tanto, ocultará o rechazará la notificación.
El código utilizado para crear este cuadro es:
Tienes 3 mensajes sin leer.
Usando JavaScript directo, si quieres agregar la clase .oculto en la casilla cuando se hace clic en el botón, necesitarás algo como esto:
Accentsconagua
document.addEventListener ('DOMContentLoaded', function () [] .forEach.call (document.querySelectorAll ('. hide'), function (el) el.addEventListener ('click', function (e) if (e .target.nodeName.toLowerCase () == 'a') e.preventDefault (); document.getElementById ('notification'). classList.add ('hidden'););););Si no tienes experiencia con JavaScript, esa cantidad de código puede ser bastante abrumadora. Incluso si está familiarizado, puede llevar bastante tiempo producir.
Al usar uilang en lugar de JavaScript en bruto, para lograr el mismo fin, escribe una declaración instructiva como esta:
al hacer clic en ".hide" se agrega la clase "oculta" en "# notification" Como puede ver, este código es mucho más legible sin importar el nivel de experiencia que tenga. Su enfoque de lenguaje sencillo hace que sea fácil de entender y de implementar..
Echemos un vistazo a cómo funciona uilang.
El primer paso para usar uilang es descargar el pequeño archivo JS que lo potencia. Puedes agarrarlo a través del Descargar enlace a través de uilang.com.
Una vez que hayas descargado el archivo, cárgalo en tu página HTML con:
Ahora ya está listo para comenzar a utilizar uilang con cualquier elemento de su página..
Primero, elija el elemento objetivo, como un botón, que desea que uilang vea y responda cuando la gente haga clic en él. Luego establece una acción que agregará, eliminará o alternará un nombre de clase y determinará a qué elemento desea que se aplique esa acción..
Asegúrate de envolver cualquier comando de uilang en haciendo clic en al igual que:
haciendo clic en A continuación, agregue la clase o el ID del elemento que desea orientar para ver los clics, envuelto en marcas de voz:
haciendo clic en ".thisbutton" En esta etapa, también puede elegir tener más de un elemento de destino para los clics agregando una coma y una segunda clase o ID:
haciendo clic en ".thisbutton, #thatbutton" Ahora tiene la opción de tres acciones para elegir; agrega clase, elimina clase o alterna clase.
Inserte la acción que hace lo que quiere, seguido del nombre de la clase que agregará / eliminará / alternará:
al hacer clic en ".thisbutton, #thatbutton" agrega la clase "popsup" Finalmente, agrega la palabra en seguido de la clase o ID (dentro de las marcas de voz) del elemento que va a modificar, es decir, el elemento al que desea agregar / eliminar / alternar una clase:
al hacer clic en ".thisbutton, #thatbutton" agrega la clase "popsup" en "#message" También puede utilizar varias líneas y definir más de una acción de clic a la vez:
haciendo clic en ".thisbutton, #thatbutton" agrega la clase "popsup" en "#message" haciendo clic en ".otherbutton" agrega la clase "goesaway" en "#message" Si el elemento sobre el que desea realizar un seguimiento de los clics es también el elemento sobre el que desea agregar / eliminar / alternar clases, puede utilizar la palabra clave objetivo En lugar de escribir el identificador por segunda vez, así:
al hacer clic en ".animation" se alterna la clase "play_anim" en "target" ¡Eso casi concluye nuestra rápida demostración de uilang! La mejor manera de ver de qué se trata es dirigirse a uilang.com y jugar con las demostraciones en vivo allí..
También se proporciona un transpiler que puede usar para conectar algunos comandos uilang y ver qué JavaScript directo se produce como resultado: transpiler.uilang.com.
Benjamin, el desarrollador, también ha publicado un artículo en Medium que detalla la filosofía detrás de uilang y su objetivo de ayudar a que la transición hacia el aprendizaje de JavaScript sea más fácil para los demás que para él..
Si solo está accediendo a JavaScript y está buscando una manera más intuitiva de superar esos primeros obstáculos, o si está buscando un método simplificado para manejar las interacciones de clics, pruebe uilang en su próximo proyecto.
