Snelle tip Gebruikersinteracties in duidelijke taal met uilang

Codeertalen zijn precies dat; talen. Bekwaam worden in een codeertaal, of het nu HTML, CSS, JavaScript of iets anders is, heeft alle uitdagingen om een ​​nieuwe gesproken taal te leren.

Net als bij gesproken talen heeft elke codeertaal een eigen 'grammatica'; strikte regels en idiosyncrasies die vaak moeilijk te leren zijn en pas na jaren van oefenen volledig worden geabsorbeerd.

uilang is een nieuwe, eenvoudige op JavaScript gebaseerde taal die is gemaakt door Benjamin De Cock en waarmee webontwerpers UI-klikinteracties kunnen maken met behulp van een reeks regels die rechtstreeks uit het Engels zijn overgenomen. Dit betekent een intuïtievere en zachtere leercurve voor beginners die zich willen toeleggen op JavaScript-gebruik, en een snellere methode voor UI-klik op interactie-implementatie voor oude handen.

Wat uilang doet

De kern van uilang is de mogelijkheid om klassenamen toe te voegen, te verwijderen of in te schakelen op een bepaald element. Dit kunnen slechts drie acties zijn, maar in combinatie met CSS vertalen ze zich naar de mogelijkheid om allerlei dingen te doen, zoals het verbergen van meldingen en modale vakken, animatieschakelaars, het tonen van vervolgkeuzemenu's op het menu en het bedienen van tabbladen en accordeonsystemen.

Stel dat u het volgende meldingsvak heeft:

De algehele box draagt ​​het ID #kennisgeving, en de knop heeft de klasse .verbergen. CSS is ook opgenomen op de pagina onder de klas .verborgen dat wanneer toegevoegd aan het vakje de dekking op nul wordt gezet, waardoor de melding wordt verborgen of verwijderd.

De code die is gebruikt om deze box te maken is:

 

Je hebt 3 ongelezen berichten.

De vanille JavaScript-weg

Rechtlijnig JavaScript gebruiken, als u de klas wilde toevoegen .verborgen naar het vak wanneer op de knop wordt geklikt, hebt u zoiets als dit nodig:

document.addEventListener ('DOMContentLoaded', function () [] .forEach.call (document.querySelectorAll ('. hide'), function (el) el.addEventListener ('klik', functie (e) if (e .target.nodeName.toLowerCase () == 'a') e.preventDefault (); document.getElementById ('notification'). classList.add ('hidden'););););

Als je geen ervaring hebt met JavaScript, kan dat aantal behoorlijk overweldigend zijn. Zelfs als je bekend bent, kan het nog steeds behoorlijk tijdrovend zijn om te produceren.

De uilang-weg

Door uilang te gebruiken in plaats van raw JavaScript, om hetzelfde doel te bereiken, schrijft u een instructie als deze uit:

 klikken op ".hide" voegt klasse "verborgen" toe aan "#notificatie" 

Zoals je kunt zien, is deze code veel leesbaarder, ongeacht het ervaringsniveau dat je hebt. De duidelijke taalbenadering maakt het zowel gemakkelijk te begrijpen als snel in gebruik te nemen.

Laten we eens kijken hoe uilang werkt.

Hoe uilang werkt

De eerste stap naar het gebruik van uilang is het downloaden van het kleine JS-bestand waarmee het wordt aangedreven. Je kunt het pakken via de Download link naar uilang.com.

Nadat u het bestand heeft gedownload, laadt u het in uw HTML-pagina met:

U bent nu meteen klaar om uilang te gaan gebruiken met elk element op uw pagina.

Kies eerst het doelelement, zoals een knop, dat u naar uilang wilt laten kijken en waarop u reageert wanneer mensen erop klikken. Vervolgens stel je een actie in die een klassenaam zal toevoegen, verwijderen of schakelen, en je bepaalt op welk element je die actie wilt toepassen.

1. Identificeer het doel om te kijken voor klikken:

Zorg ervoor dat je alle uilang-opdrachten inpakt -tags. Begin dan altijd met de woorden klikken op zoals zo:

 klikken op 

Voeg vervolgens de klasse of ID toe van het element dat u wilt targeten om te kijken naar klikken, ingepakt in spraaklabels:

 klikken op ".thisbutton" 

In dit stadium kunt u er ook voor kiezen om meer dan één doelelement bij te houden voor klikken door een komma en een tweede klasse of ID toe te voegen:

 klikken op ".thisbutton, #thatbutton" 

2. Kies een actie

U hebt nu de keuze uit drie acties om uit te kiezen; voegt klasse toe, verwijdert klasse of wisselt tussen klassen.

Voeg de actie toe die doet wat u wilt, gevolgd door de klassenaam die u wilt toevoegen / verwijderen / omschakelen:

 klikken op ".thisbutton, #thatbutton" voegt klasse "pop-up" toe 

3. Geef een element op dat moet worden gewijzigd

Voeg ten slotte het woord toe op gevolgd door de klasse of ID (binnen spraakmarkeringen) van het element dat u wilt wijzigen, dat wil zeggen het element waaraan u een klasse wilt toevoegen / verwijderen / schakelen:

 klikken op ".thisbutton, #thatbutton" voegt class "popsup" toe aan "#message" 

Extra trucs

Meerdere lijnen

U kunt ook meerdere regels gebruiken en meer dan één klikactie per keer definiëren:

 klikken op ".thisbutton, #thatbutton" voegt klasse "pop-up" toe aan "#message" klikken op ".otherbutton" voegt klasse "weggelaten" toe aan "#message" 

Trefwoord "doel"

Als het element waarop u klikken wilt bijhouden ook het element is dat u wilt toevoegen / verwijderen / schakelen, kunt u het trefwoord gebruiken doelwit in plaats van de ID een tweede keer uit te schrijven, zoals zo:

 klikken op ".animatie" schakelt klasse "play_anim" in "doel" 

Afsluiten

Dat zowat onze snelle demonstratie van uilang omhult! De beste manier om te zien waar het allemaal om draait is om naar uilang.com te gaan en te spelen met de live demo's daar.

Er is ook een transpiler meegeleverd die je kunt gebruiken om wat uilang-commando's aan te sluiten en te zien wat voor een rechte JavaScript-code als resultaat wordt geproduceerd: transpiler.uilang.com.

Benjamin, de ontwikkelaar, heeft ook een stuk over Medium gepubliceerd met de filosofie achter uilang en zijn doel om de overstap naar het leren van JavaScript gemakkelijker te maken voor anderen dan het voor hem was.

Als u JavaScript invoert en op zoek bent naar een intuïtievere manier om die eerste hindernissen te overwinnen, of als u alleen op zoek bent naar een gestroomlijnde methode voor het verwerken van klikinteracties, kunt u uilang uitproberen in uw volgende project.