Share
Le lingue di codifica sono proprio questo; le lingue. Diventare esperti in un linguaggio di programmazione, che si tratti di HTML, CSS, JavaScript o qualsiasi altra cosa ha tutte le difficoltà di imparare una nuova lingua parlata.
Proprio come con le lingue parlate, ogni lingua di programmazione ha la sua "grammatica"; regole severe e idiosincrasie che sono spesso difficili da apprendere e che vengono pienamente assorbite in anni di pratica.
uilang è un nuovo, semplice linguaggio basato su JavaScript creato da Benjamin De Cock, e consente ai web designer di creare interazioni di click dell'interfaccia utente usando una serie di regole prese direttamente dalla lingua inglese. Ciò significa una curva di apprendimento più intuitiva e delicata per i principianti che desiderano semplificare l'uso di JavaScript e un metodo più veloce di distribuzione dell'interazione dei clic dell'interfaccia utente per le vecchie mani.
Il nucleo di uilang è la capacità di aggiungere, rimuovere o commutare i nomi di classe su ogni dato elemento. Questo può essere solo tre azioni, ma combinato con i CSS si traducono nella capacità di fare ogni sorta di cose come nascondere le finestre di notifica e modali, animare gli interruttori, mostrare i menu a discesa del menu di navigazione e guidare i tab e i sistemi a fisarmonica.
Ad esempio, supponiamo di avere la seguente casella di notifica:
La scatola generale porta l'id #notifica, e il pulsante ha la classe .nascondere. Il CSS è anche incluso nella pagina sotto la classe .nascosto che quando aggiunto alla casella imposterà la sua opacità a zero, quindi nascondendo o respingendo la notifica.
Il codice utilizzato per creare questa casella è:
Hai 3 messaggi non letti.
Utilizzando il diritto JavaScript, se si desidera aggiungere la classe .nascosto alla casella quando viene cliccato il pulsante, avresti bisogno di qualcosa del genere:
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'););););Se non hai esperienza con JavaScript, la quantità di codice può essere piuttosto travolgente. Anche se sei familiare, può ancora richiedere molto tempo per produrre.
Usando uilang al posto di JavaScript non elaborato, per ottenere lo stesso risultato si scrive una istruzione come questa:
facendo clic su ".hide" si aggiunge la classe "hidden" su "#notification" Come puoi vedere, questo codice è molto più leggibile indipendentemente dal livello di esperienza che hai. Il suo semplice approccio linguistico lo rende facilmente comprensibile e rapido da implementare.
Diamo un'occhiata a come funziona uilang.
Il primo passo per usare uilang è scaricare il piccolo file JS che lo alimenta. Puoi afferrarlo tramite il Scaricare link su uilang.com.
Una volta scaricato il file, caricalo nella tua pagina HTML con:
Ora sei pronto per iniziare a usare uilang con qualsiasi elemento della tua pagina.
Innanzitutto, scegli l'elemento di destinazione, ad esempio un pulsante, che vuoi che l'uilang guardi e risponda quando le persone cliccano su di esso. Quindi imposti un'azione che aggiungerà, rimuoverà o cambierà il nome di una classe e determinerai a quale elemento applicare l'azione.
Assicurati di avvolgere tutti i comandi di uilang cliccando su così:
cliccando su Successivamente, aggiungi la classe o l'ID dell'elemento che desideri utilizzare come target per i clic, racchiuso tra segni vocali:
facendo clic su ".thisbutton" In questa fase, puoi anche scegliere di avere più di un elemento di destinazione tracciato per i clic aggiungendo una virgola e una seconda classe o ID:
facendo clic su ".thisbutton, #thatbutton" Ora hai la scelta tra tre azioni tra cui scegliere; aggiunge classe, rimuove la classe o attiva la classe.
Inserisci l'azione che fa ciò che vuoi, seguito dal nome della classe che aggiungerai / rimuovi / attiva / disattiva:
cliccando su ".thisbutton, #thatbutton" aggiunge la classe "popsup" Infine, aggiungi la parola sopra seguito dalla classe o dall'ID (all'interno dei segni vocali) dell'elemento che si sta modificando, ovvero l'elemento a cui si desidera aggiungere / rimuovere / attivare / disattivare una classe:
facendo clic su ".thisbutton, #thatbutton", aggiunge "popsup" di classe su "#message" Puoi anche utilizzare più righe e definire più di un'azione clic alla volta:
cliccando su ".thisbutton, #thatbutton" aggiunge la classe "popsup" su "#message" cliccando su ".otherbutton" aggiunge la classe "goesaway" su "#message" Se l'elemento su cui desideri tenere traccia dei clic è anche l'elemento che desideri aggiungere / rimuovere / attivare / disattivare le classi, puoi utilizzare la parola chiave bersaglio invece di scrivere l'identificatore una seconda volta, in questo modo:
facendo clic su ".animation" attiva / disattiva la classe "play_anim" su "target" Questo avvolge la nostra rapida dimostrazione di uilang! Il modo migliore per vedere di cosa si tratta è andare su uilang.com e giocare con le demo live lì.
È inoltre fornito un transpiler che è possibile utilizzare per inserire alcuni comandi di uilang e vedere quale diritto viene prodotto come risultato: transpiler.uilang.com.
Benjamin, lo sviluppatore, ha anche pubblicato un articolo su Medium che illustra dettagliatamente la filosofia alla base di uilang e il suo obiettivo di aiutare a rendere la transizione verso l'apprendimento di JavaScript più semplice per gli altri di quanto non fosse per lui.
Se ti stai avvicinando a JavaScript e cerchi un modo più intuitivo per superare quei primi ostacoli, o se stai solo cercando un metodo semplificato per gestire le interazioni tra i clic, prova a usare uilang nel tuo prossimo progetto.
