HTML() Construction Kit

[ca_redwards]

Many of you have already seen how I can dynamically create large HTML constructs using very tight JavaScript code. For example, I've implemented a fully-navigable calendar component (http://www.freewebs.com/ca_redwards/calendar.html) for intuitively selecting date values.

However, for the longest time, I was frustrated that some of the "clientlets" (JavaScript expressions) with which I build these complicated constructs have become typographic nightmares, endlessly nested inside of parentheses.

So I finally created a compact, easy-to-use HTML() Construction Kit (http://www.freewebs.com/ca_redwards/html.html) that allows me to iteratively build up complicated clientlets while viewing the intermediary results.

The HTML() Bookmarklet Library (http://www.freewebs.com/ca_redwards/html.js) itself is rather complicated in how it uses regular expressions to rewrite factory functions for implementation of particular HTML tags, attributes and CSS properties. In order to load quickly, all these new functions are written into a single eval(..) statement. For ease-of-use, all these functions are named after the tags, attributes and properties that they implement. If the existing library doesn't support what I need, I can simply invoke it again with new tokens to define additional functions.

I modeled the specific function invocations after the builtin .bold() function which encloses a string inside of a <B> container. I extended this concept to include arrays, so that every element of an array is surrounded with the same container. With a few embedded assignment expressions, this paves the way to some very compact clientlets.

Try HR() for starters, then make it into HR(STYLE(color('red'))) and see how it changes it.

Let me know what you think.

PS (10/28): While the HTML() Bookmarklet Library (http://www.freewebs.com/ca_redwards/html.js) itself is cross-browser, apparently my HTML() Construction Kit (http://www.freewebs.com/ca_redwards/html.html) is IE-specific. I welcome any help to make it cross-browser too.

[fci]

error in firefox at this link.. http://www.freewebs.com/ca_redwards/html.html

[ca_redwards]

error in firefox at this link.. http://www.freewebs.com/ca_redwards/html.html
Does Firefox support inner/outer Text/HTML properties? I don't have that browser...

[mpjbrennan]

HTML construction kit just sticks a load of tags on the page.

patrick

[fci]

Does Firefox support inner/outer Text/HTML properties? I don't have that browser...

you can download it here to debug it yourself:
http://www.mozilla.org/products/firefox/

To access the JS console.. Tools > JavaScript Console
JS errors will output there.

Error: HREF is not defined
Source File: http://www.freewebs.com/ca_redwards/html.html
Line: 22

Error: missing name after . operator
Source File: http://www.freewebs.com/ca_redwards/html.js
Line: 960, Column: 9
Source Code:
;HTML[0].float=

[Willy Duitt]

I don't know if it is my proxy or not...
But your links no worky for me....

[ca_redwards]

HTML construction kit just sticks a load of tags on the page.
That's what it is supposed to do. Below the title, it shows the JavaScript that generates the HTML code above my sig line. The actual construct is rendered in the middle.

[ca_redwards]

you can download it here to debug it yourself:
http://www.mozilla.org/products/firefox/

When I have resolved the basic cross-browser issues, I will download it and test accordingly.

To access the JS console.. Tools > JavaScript Console
JS errors will output there.

Error: HREF is not defined
Source File: http://www.freewebs.com/ca_redwards/html.html
Line: 22

Error: missing name after . operator
Source File: http://www.freewebs.com/ca_redwards/html.js
Line: 960, Column: 9
Source Code:
;HTML[0].float=
I have Netscape and have observed these same two errors in the console.

The second error indicates that "float" cannot be used as a custom property of the window object (aliased as HTML[0]), since it is a reserved word for that particular browser's version of JavaScript. Consequently, I've dropped CSS support for an explicit "float" property. Similarly, I've dealiased HTML[0], HTML[1] and HTML[2] back into window, String.prototype and Array.prototype respectively. This seems to have cleaned up the HREF definition problem, but apparently I am still using a read/write .innerHTML property on an IE-specific <DIV> element that needs to be cross-browser.

Once I get this all back into cross-browser compliance, I doubt it'll be under 5k...

[liorean]

'float' is a reserved word in JavaScript and ECMAScript and SHOULD cause a syntax error if present as a token.

Note that the CSS property 'float' is named cssFloat by [DOM2CSS] (http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties).

[ca_redwards]

Many of you have already seen how I can dynamically create large HTML constructs using very tight JavaScript code. For example, I've implemented a fully-navigable calendar component (http://www.freewebs.com/ca_redwards/calendar.html) for intuitively selecting date values.

However, for the longest time, I was frustrated that some of the "clientlets" (JavaScript expressions) with which I build these complicated constructs have become typographic nightmares, endlessly nested inside of parentheses.

So I finally created a compact, easy-to-use HTML() Construction Kit (http://www.freewebs.com/ca_redwards/html.html) that allows me to iteratively build up complicated clientlets while viewing the intermediary results.

The HTML() Bookmarklet Library (http://www.freewebs.com/ca_redwards/html.js) itself is rather complicated in how it uses regular expressions to rewrite factory functions for implementation of particular HTML tags, attributes and CSS properties. In order to load quickly, all these new functions are written into a single eval(..) statement. For ease-of-use, all these functions are named after the tags, attributes and properties that they implement. If the existing library doesn't support what I need, I can simply invoke it again with new tokens to define additional functions.

I modeled the specific function invocations after the builtin .bold() function which encloses a string inside of a <B> container. I extended this concept to include arrays, so that every element of an array is surrounded with the same container. With a few embedded assignment expressions, this paves the way to some very compact clientlets.

Try HR() for starters, then make it into HR(STYLE(color('red'))) and see how it changes it.

Let me know what you think.

PS (10/28): While the HTML() Bookmarklet Library (http://www.freewebs.com/ca_redwards/html.js) itself is cross-browser, apparently my HTML() Construction Kit (http://www.freewebs.com/ca_redwards/html.html) is IE-specific. I welcome any help to make it cross-browser too.
PS (10/30): I have reworked this script, and it is now cross-browser. Instead of using an array of DIV containers, I just use a textfield for the JavaScript code, a textarea for the resulting HTML code, and a DIV to render it.

[ca_redwards]

PS (10/30): I have reworked this script, and it is now cross-browser. Instead of using an array of DIV containers, I just use a textfield for the JavaScript code, a textarea for the resulting HTML code, and a DIV to render it.

Here are my answers to some recent questions about the HTML() Bookmarklet Library (http://www.freewebs.com/ca_redwards/html.js) and the new HTML() Construction Kit (http://www.freewebs.com/ca_redwards/html.html)...

What are HTML() Bookmarklet Library clientlets?

The HTML() Bookmarklet Library, an external JavaScript, defines variables and functions necessary to implement the HTML entities/tags/containers/attributes and CSS properties for client-side generation of virtually any HTML construct. "Clientlets" are the compact JavaScript expressions that evoke these client-side HTML generations.

Why use the HTML() Bookmarklet Library?

Clientlets are significantly smaller than the HTML content they produce. Even without the benefit of transmitting smaller pages, the HTML coding is error-free. And clientlets are small enough for easy storage as cookies and bookmarklets.

Where can clientlets be deployed?

Clientlets can be deployed to any JavaScript-enabled web browser from any web server. Because the HTML() Bookmarklet Library is cross-browser, clientlets can render content consistently for all viewers.

When is the HTML generated?

Once the HTML() Bookmarklet Library loads (it is often cached by the browser), clientlets can render content very quickly. And JavaScript variables can hold intermediary constructs for immediate duplication, without need for rebuilding.

Who can use the HTML() Construction Kit?

Anyone with a DOM-compliant web browser can use the HTML() Construction Kit to build and test clientlets. Web designers without access to server-side scripting can now create highly interactive, dynamic JavaScript-generated content.

How does the HTML() Construction Kit help create clientlets?

The HTML() Construction Kit allows web designers to iteratively build and test clientlets, viewing the live construct, including its generated HTML source code.

Feel free to email (richard.renfrow@juno.com) me any questions.