People responded quite positively to “Hey designers, if you only know one thing about JavaScript, this is what I would recommend.” Even the YouTube comments were positive.
Hey designers, if you only know one thing about JavaScript, this is what I would recommendhttps://t.co/X4DKhGzze3
(Video + Article)
— Chris Coyier (@chriscoyier) November 23, 2016
Benjamin De Cock mentioned that not only does he agree changing classes is the most important thing a web design can know how to do in JavaScript, he built a mini library around that idea:
@chriscoyier 100% agree — this is exactly why I made https://t.co/txfQnMfpbx, it does exclusively that.
— Benjamin De Cock (@bdc) November 23, 2016
It has a really unusual way of configuring it. You use plain language, within a <code> tag, to tell it what classes to change on click, like:
clicking on "h1" removes class "open" on "h1.open"
clicking on "h1" adds class "open" on "target"
Here’s a fork of the “level up” demo from that video, done with uilang instead:
See the Pen Change Classes on Stuff by Chris Coyier (@chriscoyier) on CodePen.
Pretty cool.
Jeremy Keith had a good way of putting it too:
It reminds me of the old jQuery philosophy: find something and do stuff to it.
I’d stick to my sentiment as well though. If you’re looking to baby step yourself into JavaScript, learning to select things and changes classes without any library help at all is a great way to do that.
Yea, this is what I teach beginners when I want to explain the difference between the three technologies (HTML, CSS, JS). Sometimes I make a red box with a div that when clicked turns green similar to what you did with toggling. Then I’ll make the green box a circle. So far the audience is yawning. Then I had one more property and it makes everyone’s eye’s light up and I get an audible gasp.
I think that’s when the see the power
Sorry, I was mostly replying to the first half the article about teaching. The tool seems neat too :)
insane, so we can actually write shit like this, really!
`
“clicking on "#main-nav a" removes class "active" on "#main-nav a.active"
clicking on "#main-nav a" adds class "active" on "target"
Can you tell me where i can get documentation on these code commands?, Awesome Chris!, you nailed it!
Pretty cool idea, but why written English in a <code> tag? At least put it in a <script type=”uilang”> tag.
Or, better yet, teach the very basics of JS objects by having the designer write something like:
No parsing necessary, better error messages out of the box, and forces designers to get into the basics (writing script tags, opening the console, etc.).
I love the concept of simplifying down to plain English. I might have use this to start introducing my kids to coding.
Of course it won’t really teach JavaScript or jQuery but at least it starts conveying the concepts of manipulation of elements via code.
Its so cool