Show HN: FuncyTag JS/PY HTML generator

by brent_noorda • 13 years ago

3 2 13 years ago

knkella• 13 years ago

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

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.)

Show HN: FuncyTag JS/PY HTML generator

Related Stories