View on GitHub

FuncyTag & FuncyStyle
(aka “FuncyTown”)

Generate HTML, JS, & CSS from single-source-file nested Javascript functions.

Download this project as a .zip file Download this project as a tar.gz file

Welcome to FuncyTown

I've been thinking...
To generate one web page or one web component, why must I use (at least) three distinct files (HTML, CSS, & JAVASCRIPT) and use (at least) three distinct languages (HTML, CSS, & JAVASCRIPT)? That's too much context switching for my simple little mind!

FuncyTag & FuncyStyle allow all components of a web page (HTML, CSS, and Javascript) to be generated from one purely functional Javascript source. HTML and CSS are mapped clearly to Javascript, but without losing their flavor. The result is easy to read, easy to write, easy to bundle, easy to reuse, and (hopefully) kind of boring.


The four components of FuncyTown

The four components of FuncyTown (leaving out a lot of details) are:

1) HTML source code as Function calls (think “functions instead of tags” or “rounded brackets, not angle brackets”)

Assuming that you have defined FuncyTags "p" and "span" to represent their plain HTML equivalents (more on that later), this sentence:

could be defined by this FuncyTag-using javascript:

For comparison, here is the generated HTML:

2) Creating Custom “funcy” tags

New FuncyTags can be defined by inheriting and extending the charateristics of other tags.

The following creates new tags “red” and “big” to generate exactly the same HTML output as the previous example:

3) Inline event handlers (e.g. onclick, onblur, etc… and adding oninit and onterm)

Event handlers can be coded directly within the FuncyTag definition. This applies to all of the standard DOM element methods beginning with “on” (for example, onblur, onclick, onfocus, etc...) and adds the extra options “oninit” and “onterm”.

In the following example, the “big” tag is replaced by a “fluffy” tag that reacts to “onclick”, and also initializes animation at “oninit” time.

resulting in the following:

4) CSS stylesheets defined as Javascript function (i.e. “FuncyStyles”).

The previous examples embedded the CSS information within the attributes of a FuncyTag. For CSS information shared across multiple elements it is much more common to use stylesheets. FuncyStyle allows these stylesheets to be defined directly in Javascript, so stylesheets fit right in with the other JavaScript and and FuncyTag code.

For example, the old “peeps” line could be generated with this source code that uses FuncyStyle:

resulting in the old familiar, colorful statement:

because the “funcyStyle” call generated and injected this CSS stylesheet:

and the “p”, “span”, and “i” FuncyTag methods generated this HTML:

Disclaimer: FuncyStyle is in a state of flux. Originally it was more SASS-like, then I thought “why not just let people use LESS directly, since it's already JS” but then I realized LESS is easy enough to reproduce so it works better with FuncyStyle, and then I thought a little bit of SASSiness I liked should be added, and now I'm not sure what to think. So the current documentation and samples really peter out for FuncyStyle because I'm far from done with those.

A simple example

Suppose you're building a web page that will dynamically create html for a collection of animals retrieved via AJAX. You want each animal to be represented by HTML such as this:

Just to get a feel for how Javascript “funcy tags” map to a HTML tags, here is how to render the same output from server-side FuncyTag:

A traditional client-side Javascript function to create his HTML, based on some parameters that probably came from AJAX, would look something like this:

A FuncyTag implementation to create the same HTML from within client-side Javascript could look something like this:

So what? Should I be impressed?

Not really. This is pretty simple stuff, and that's kind of the point: making stuff as simple and boring for the javascript writer as possible.

There's nothing super novel about noticing the similarities between begin/end tags and the open/end parenthesis on a function call (i.e. <div>...stuff...</div> versus div(...stuff...), or similarities between html tag attributes and properties of a javascript object. That's been done a lot of times. Although I think it's kind of keen to represent style="font-size:14px" as cssFontSize_px=14 because doing so has saved me a lot of tedious string concatenation code.

What's coming next to FuncyTown?

Theme Song

More Information