Share
Kodningsspråk är väldigt mycket just det; språk. Att bli skicklig på ett kodningsspråk, vare sig det är HTML, CSS, JavaScript eller något annat har alla utmaningar att lära sig ett nytt talat språk.
Precis som med talade språk har varje kodningsspråk sin egen "grammatik"; strikta regler och idiosyncrasies som ofta är svåra att lära sig och bara får absorberas fullt ut under många års praktik.
uilang är ett nytt, enkelt JavaScript-baserat språk skapat av Benjamin De Cock, och det gör det möjligt för webbdesigners att skapa UI-klickinteraktioner med hjälp av en uppsättning regler som tagits direkt från det engelska språket. Detta innebär en mer intuitiv och mild inlärningskurva för nybörjare som vill underlätta användningen av JavaScript, och en snabbare metod för UI-klick interaktionsutplacering för gamla händer.
Kärnan i uilang är möjligheten att lägga till, ta bort eller byta klassnamn på ett visst element. Det kan bara vara tre handlingar, men i kombination med CSS översätter de till förmågan att göra alla möjliga saker som att dölja anmälan och modalboxar, animera omkopplare, visa navmeny dropdowns och körflik och dragspelssystem.
Låt oss till exempel säga att du har följande meddelandefält:
Den övergripande rutan har id #underrättelse, och knappen har klassen .Dölj. CSS ingår också på sidan under klassen .dold att när den läggs till rutan ställer den opaciteten till noll, vilket döljer eller avvisar anmälan.
Koden som används för att skapa den här rutan är:
Du har 3 olästa meddelanden.
Använda rakt JavaScript om du vill lägga till klassen .dold till rutan när knappen klickas, skulle du behöva något så här:
Accentsconagua
document.addEventListener ('DOMContentLoaded', funktion () [] .forEach.call (document.querySelectorAll ('. hide'), funktion (el) el.addEventListener ('klick', funktion .target.nodeName.toLowerCase () == 'a') e.preventDefault (); document.getElementById ('notification'). classList.add ('hidden'););););Om du inte har erfarenhet av JavaScript kan denna mängd kod vara ganska överväldigande. Även om du är bekant kan det fortfarande vara ganska tidskrävande att producera.
Genom att använda uilang istället för rå JavaScript, för att uppnå samma ända skriver du ett instruktionsutlåtande som följande:
klicka på ".hide" lägger till klass "dold" på "#notification" Som du kan se är den här koden mycket mer läsbar oavsett vilken erfarenhet du har. Dess vanliga språkinriktning gör det både lätt att förstå och snabbt att distribuera.
Låt oss ta en titt på hur uilang fungerar.
Det första steget att använda uilang är att ladda ner den lilla JS-filen som driver den. Du kan ta tag i det via Ladda ner länka över på uilang.com.
När du har laddat ner filen laddar du den in på din HTML-sida med:
Du är nu omedelbart redo att börja använda uilang med något element på din sida.
Välj först måldelen, till exempel en knapp, som du vill att uilang ska titta på och svara på när folk klickar på det. Då ställer du in en åtgärd som lägger till, tar bort eller byter ett klassnamn och du bestämmer vilket element du vill att åtgärden ska tillämpas på.
Se till att du sätter ihop alla kommandon uilang i klicka på såhär:
klicka på Lägg sedan till klass eller ID för det element du vill rikta in för att titta på klick, inslagna i talmärken:
klicka på ".this-knappen" I detta skede kan du också välja att ha mer än ett målelement som spåras för klick genom att lägga till ett komma och en andra klass eller ett ID:
klicka på ".this, #thatbutton" Du har nu valet av tre åtgärder att välja mellan; lägger till klass, tar bort klassen eller växlar klass.
Sätt in åtgärden som gör vad du vill, följt av klassnamnet du lägger till / tar bort / växlar:
klicka på ".this, #that", lägger till klass "popup" Slutligen lägg till ordet på följt av klassen eller ID-numret (inom talmärken) för det element du kommer att ändra, det vill säga det element som du vill lägga till / ta bort / byta till en klass:
klicka på ".this, #that", lägger till klass "popup" på "#message" Du kan också använda flera rader och definiera mer än ett klick åt gången i taget:
Klicka på ".this, #that", lägger till klass "popup" på "#message" på ".otherbutton" lägger till klass "goesaway" på "#message" Om det element du vill spåra klick på är också det element du vill lägga till / ta bort / växla klasser på du kan använda sökordet mål istället för att skriva ut identifieraren en andra gång, som så:
klicka på ".animation" växlar klassen "play_anim" på "target" Det handlar om att omsluta vår snabba demonstration av uilang! Det bästa sättet att se vad det handlar om är att gå över till uilang.com och leka med de levande demon där.
Det finns också en transpiler som du kan använda för att plugga in några uilang-kommandon och se vilken rak JavaScript som produceras som ett resultat: transpiler.uilang.com.
Benjamin, utvecklaren, har också publicerat en bit på Medium som beskriver filosofin bakom uilang och hans mål att hjälpa till att göra övergången till att lära JavaScript enklare för andra än vad det var för honom.
Om du bara kommer in i JavaScript och letar efter ett mer intuitivt sätt att övervinna de första hindren, eller om du bara letar efter en strömlinjeformad metod att hantera klick interaktioner, prova uilang i ditt nästa projekt.
