This came about because it began to feel embarrassing that I couldn't get away with implementing simple interactive feedback on a page without runnning to a javascript file to either "hide" this or "show" that.
Also it began to feel repetitive. Basically having recurring code with similar patterns. And even though they act on different html elements it still feels quite detestable.
HOW ABOUT REFACTORING THE CODE?
Of course this can be solved by making the code more dynamic but the problem with dynamic is that it becomes less readable and a bit harder to understand.
No.js
For these reasons, I decided to abstract this dynamic solution into a library that allows you to do these trivial DOM manipulations by using simple and intuitive attributes on your html instead.No.js is lightweight and can be very convenient. By using No.js (Depending on how simple your site is) you might get away with doing all DOM manipulations without having to write any javascript at all.
So now I want to go through a few DOM manipulation examples we can easily achieve with no.js.
To have these examples work for you, be sure to add the nojs script to your html file like so:
you can also install it from npm or download the zip file. See.
1. Simple Tabs
Using No.js' on-click-switch-class attribute, you can easily switch an active class from a set of similar elements. See.
We also makes use of the attribute on-click-set-text to set the text content of the tab. See.
2. Side menu toggle
With the attribute on-click-toggle-class, we toggle the class "active" of a target element with the css selection ".sidemenu". See.
3. Dynamically set form inptut values on action
With the attribute on-click-set-value we set the value of the target input element with the css selection "[name=number] ". See.
Why use No.js?:
1. It saves the stress of writing any javascript at all. You may only need to write javascript code when you need to do things like number calculations, make ajax calls etc.
2. You don't have to load a heavy libraries to do little DOM manipulations. No.js is very lightweight (1KB), this is probably as light as the vanilla javascript code you might have otherwise written.
3. It is very intuitive and easy to understand. With a near english syntax.
4. It encourages writing less Javascript and more CSS. With the ease of triggering class/attribute changes, it becomes easier to add interactive feedbacks to css classes, than writing javascript animations
5. It does not require prior Javascript knowledge. You basically don't need any javascript knowledge to do DOM manipulations easily
Isn't inline javascript a bad idea?
Well a good number of reasons for which "inline javascript is such a bad idea" aren't inherited by using No.js.
While you might find other reasons that frown upon the No.js pattern, it eventually boils down to tradeoffs, perks and picking your poison in accordance to how you'd prefer to die 😄.
The full documentaion for nojs can be found on nojs.io
