Welcome to FuncyTown
I've been thinking...
- The four components of FuncyTown
- A simple example
- What's coming next to FuncyTown?
- Theme song
- More information
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:
For comparison, here is the generated HTML:
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:
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:
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.
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:
So what? Should I be impressed?
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...), or similarities between html tag attributes and properties
cssFontSize_px=14 because doing so has saved me a lot
of tedious string concatenation code.
- lots more documentation (tutorials and NOTE THATS) and many more examples (real-time stylesheet changing, FuncyStyle mixin and inheritence, my favorite img-tag onerror reoloader)
- get feedback to see if this project is worth pursuing
- compare/contrast with similar projects, determine if it's better to switch to or collaborate with them (e.g, jhtml, jaml, eSugar, js2dom, html-sourcery, Elephactory, RML, sugar_dom, and especially the new ojjs)
- explore new color() to decide if it's useful or just silly
- determine if the python version should catch up to the javasript version, or be abandoned
- demonstrate some PAJAX pages where entire pages are results of loading funcytag/funcystyle
- figure out how mediaqueries should tie into FuncyStyle
- add server-side tools to the github project, including node package for easy nodejs integration -- and then some nodejs examples
- release tool to convert existing HTML+JS+CSS files into single, readable JS file
- compare FuncyTag elements with HTML5 custom elements (including x-tag) and Web Components
- show how to tie into reactive MVC frameworks (e.g. AngularJS)
- provide helper function to populate global space with all standard tags
- in debug mode, validate against improper html use (e.g. including a <p> inside a <b>)
- complete the "big picture" by showing how server can be totally abandoned by relying on just a JS-delivery/storage DB (e.g. Firebase)