A big part of VVVV.js version 1.1 was narrowing the gap between visual and textual programming. And while our previous post covered textual programming in the visual programming environment, this time it's kind of the other way around: achieving classic webdev programming tasks with pure VVVV.js.
Using the Element node, you can create every kind of HTML element. Choose the tag name and the node content. Use the inspector to define attribute pins. Besides manually filling the Element node, there are various "shortcut" nodes, like Image or Link which come with preconfigured attribute pins.
The element nodes described above all have a Style In input pin, which can be connected to the respective nodes. There is again a generic node simply called Style which lets you set all kinds of CSS attributes. And again, there are some convenience nodes, which might help you if you don't know all CSS attributes by heart, and also make the patch more readable.
You can chain up the Style nodes similar to chaining up Render State nodes. It is like defining a render state, and assigning it to elements by connecting. Also note, that it works pretty well with spreads.
Each Element node has a Parent input pin, which can be connected to another Element node. You can use the Group node to preserve the order of the nested elements. Note, that this whole grouping thing does not work like we are used to from VVVV, but it's flipped right upside down. This is to avoid elements being nested into multiple other elements, which would be confusing. In general, this direction matches much more the tree-structure of an HTML DOM. When reading from upside down, instead of thinking "this element goes into that element", think "this element contains that element".
You can use the event nodes to catch user interaction events like mouse clicks, key presses, etc. from DOM elements. It's the same story here: a generic OnEvent node, and some predefined nodes like OnClick, OnMouseOver, etc. to make your life easier. All these nodes get an element as input, and as in classic VVVV manner, bang a 1 when the event occures.
In order to get hands on elements which are not created in VVVV, you can use the GetElement (HTML) node. It takes a DOM selector as input, and delivers the matching elements as output. You can use these elements just as you can use the ones created in VVVV.js: style them using ApplyStyle (HTML), nest other element into them, or catch events for these elements.
Of course this all won't ever be a complete replacement for classic web design craftmanship, and you are not supposed to build entire websites this way (although you can – hello 000.grapics!). But it allows you to tighter connect your canvas/webgl content with the HTML surrounding it, and helps you to make use of all browser capapilities (like typography, element flow, UI elements, etc.) in a patching-manner.