Fork me on GitHub

No.js

Tweet

No.js is an extremely lightweight javascript library that makes you do DOM manipulations without writing any javascript at all. All you'll need to add are html attributes instead and No.js does the magic for you.

No.js takes away the burden of repeatedly writing trivial UI related javascript code. You'd simply not write any javascript at all! Hence the name "No.js"

(Please note that even though No.js allows you write no javascript, No.js itself is written in Javascript.)

USE CASE

Imagine you are building an interactive page that does simple DOM manipulations in response to user interactions.

You want to add a css class to some tag when a user hovers on some other tag. Here are the ways you may do it:

With jQuery

With vanilla javascript

With No.js

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

WHAT No.js DOESN'T DO

No.js only helps with simple DOM manipulations like changing attribute, removing a DOM, etc. It doesn't help with features like number calculations, making ajax calls etc. In this case you may need to add a different library to help with it, or resort to vanilla javascript.

INSTALLATION

npm install nojs
or download here

Then link it to the bottom of your web page like so:



Or you can link directly to the remote distribution like so:

FULL REFERENCE

Every html tag that includes No.js tag attributes must also include the attribute no-js

All tag attributes take the form:

on-[eventType]-[action]-[propertyType]="[target] [propertyName(optional)] [propertyValue(optional)]"

Where:

1. eventType is any of these javascript events

2. action can either be add, remove, set, reset, toggle or switch

3. propertyType can be attribute, class, id, text, value or dom


Here is a list of all possible tag instructions:

Remove/Set attributes
on-[eventType]-set-attribute="[target] [attributeName] [attributeValue]"
on-[eventType]-remove-attribute="[target] [attributeName]"

Example:




Remove/Add/Set/Toggle/Switch classes
on-[eventType]-add-class="[target] [className]"
on-[eventType]-set-class="[target] [className]"
on-[eventType]-remove-class="[target] [className]"
on-[eventType]-toggle-class="[target] [className]"

Example:



on-[eventType]-switch-class="[target] [className]"

Example:




Remove/Set id
on-[eventType]-set-id="[target] [idValue]"
on-[eventType]-remove-id="[target]"

Example:




Remove DOM
on-[eventType]-remove-dom="[target]"

Example:




Set/Reset value
on-[eventType]-set-value="[form input target] [value]"
on-[eventType]-reset-value="[form input target]"

Example:




Set text
on-[eventType]-set-text="[target] [textValue]"

Example:




Target the current tag In the situation where the target element is the same as the origination element, you simply add the -self suffix to the attribute and exclude the target from the arguments like so.
on-[eventType]-add-class-self="[className]"

Example:




This is a new library and has plenty room for improvement. Please report issues here.

Also feel free to send in Pull Requests. :)




Is this project something you like? Feel free to STAR it on GITHUB or share it on twitter. It would mean a ton! :)