

Show HN: FuncyTag JS/PY HTML generator - brent_noorda
https://github.com/BrentNoorda/FuncyTag

======
brent_noorda
jQuery does provide great ways to generate dynamic HTML. In fact, the FuncyTag
quick example from <https://github.com/BrentNoorda/FuncyTag#quick-example>

    
    
        t = div( { id:'animal-'+id, class:genus },
              p( { cssColor: endangered?'red':'green', cssFontSize_pct: endangered?120:undefined },
                'The', b('species'), 'is a', genus, 'and looks like this:',
                img( { width:imgSize, height:imgSize, src:'/pix/' + id + '.jpg' } )
              )
            );
    

can be written in pure jQuery in a very similar fashion:

    
    
        t = $('<div/>',{ id:'animal-'+id, class:genus }).append(
              $('<p/>').css({ color:endangered?'red':'green', fontSize:endangered?'120%':'' }).append(
                'The ', $('<b/>').text(species), ' is a ', genus, ' and looks like this:',
                $('<img/>',{ width:imgSize, height:imgSize, src:'/pix' + id + '.jpg' } )
              )
            );
    

So I don't claim any tremendous FuncyTag breakthrough if you're accustomed to
the jQuery style.

There's a few differences in FuncyTag that I've found work better for me: 1)
treating tags fully as functions means I can read it and write it easier 2)
set css/Styles the same as setting attributes (through cssCamelStyle), instead
of using css() versus attr() 3) setting the css units as part of the name
(e.g. cssMarginLeft_em:2) 4) creating html strings with indentation, so
alert(t) helps me see the HTML when I'm debugging

I just find one of the above approaches easier to read than the other, and
keep going back to it so thought I'd finally document and share. (Maybe the
FuncyTag approach is easier, or maybe I'm just so familiar with it since
that's how I've most enjoyed creating HTML from javascript since about the mid
90's.)

------
knkella
Can you please elaborate on its use cases? Personally I think jquery gives a
great way to generate dynamic HTML.

