inline js and css blocks?

[Jim Robert]

Hey,

sometimes you have a few lines of javascript or a few lines of css you just want to inline on the page. Unfortunately shpaml tries to make html out of your code (especially css). What is the best way? is there a "Do not process this area" method? backticks?

or maybe we could just include a special case for style and script tags (don't process their "children").

I know if you don't indent, you're usually safe, but that's pretty ugly, even for only a few lines of js.

Thanks,

Jim

[Steve Howell]

Have you tried using single-pipes in front of the JS or CSS?  Details here:

http://shpaml.webfactional.com/tutorial/3

[Jim Robert]

that does have one unfortunate side effect of making it difficult to copy/paste the code into it's own file in the future when it's grown larger. Also a bit of a formatting headache.

I guess I need to make some pipe adding/removing macros for my editor ;)

[Steve Howell]

It's a pain for sure.  Some of it's good pain to the extent that it encourages you to avoid inline-ing code, but there are very legitimate reasons to inline code in the right circumstances.

The editing pain can be mostly addressed with macros, as you suggest, and hopefully you will share them on the list. :)

My main goal for shpaml is readability, not writability, so I really judge the pipes by how they look.  On the one hand, they make it nice and explicit that you have code that is not going to be interpreted by the preprocessor.  So I like that.  But they also throw off the indentation of Javascript, etc.

I hate to special-case tags, but I am starting to think "script" and "style" really do merit special treatment.  I'm a bit afraid of the slippery slope here, though, as you also have p, blockquote, and friends to consider.

[Jim Robert]

I think there is a pretty wide gap between style/script and any other tags. The contents of script and style tags are a different language from the rest of the document and the contents are treated as a special case by the browser as well. Not so for blockquote, or p.

I think only special casing things that are a special case in the browser is a reasonable place to draw the line.

[Steve Howell]

I'm considering the patch below.  It allows you to explicitly call out when you want to ESCAPE the upcoming indented text.  It does not require any special casing for script and style, which makes it a little easier to preserve backward (and forward) compatibility. 

Thoughts?

    diff -r b36e5e715464 test.suite
    --- a/test.suite    Wed Sep 22 08:33:19 2010 -0700
    +++ b/test.suite    Wed Sep 29 21:25:39 2010 -0700
    @@ -377,3 +377,34 @@
     %foo
     ---
     %foo
    +=== shpaml
    +script
    +  | let this pass
    +  |  through unmolested
    +---
    +<script>
    +  let this pass
    +   through unmolested
    +</script>
    +=== shpaml
    +script ESCAPE
    +  function () {
    +    var i;
    +  }
    +---
    +<script>
    +  function () {
    +    var i;
    +  }
    +</script>
    +=== shpaml
    +style type=text/css ESCAPE
    +  foo {
    +    background-color: red
    +  }
    +---
    +<style type="text/css">
    +  foo {
    +    background-color: red
    +  }
    +</style>
    diff -r b36e5e715464 shpaml.py
    --- a/shpaml.py    Wed Sep 22 08:33:19 2010 -0700
    +++ b/shpaml.py    Wed Sep 29 21:25:44 2010 -0700
    @@ -16,6 +16,7 @@
     TAG_AND_REST = re.compile(r'((?:[^ \t\.#]|\.\.)+)(.*)')
     CLASS_OR_ID = re.compile(r'([.#])((?:[^ \t\.#]|\.\.)+)')
     COMMENT_SYNTAX = re.compile(r'^::comment$')
    +PASSTHRU_SYNTAX = re.compile('(.+) ESCAPE$')
    
     DIV_SHORTCUT = re.compile(r'^(?:#|(?:\.(?!\.)))')
    
    @@ -114,12 +115,26 @@
             recurse(block[1:])
         elif COMMENT_SYNTAX.match(tag):
             pass
    +    elif PASSTHRU_SYNTAX.match(tag):
    +        m = PASSTHRU_SYNTAX.match(tag)
    +        tag = m.group(1).rstrip()
    +        start_tag, end_tag = apply_jquery_sugar(tag)
    +        append(prefix + start_tag)
    +        stream(append, block[1:])
    +        append(prefix + end_tag)
         else:
             start_tag, end_tag = apply_jquery_sugar(tag)
             append(prefix + start_tag)
             recurse(block[1:])
             append(prefix + end_tag)
    
    +def stream(append, prefix_lines):
    +    for prefix, line in prefix_lines:
    +        if line == '':
    +            append('')
    +        else:
    +            append(prefix + line)
    +
     def convert_line(line):
         prefix, line = find_indentation(line.strip())
         for method in LINE_METHODS:
    @@ -201,7 +216,7 @@
         ----------
    
           prefix_lines : list of basestring pairs
    -        Each pair corresponds to a line fo SHPAML source code. The
    +        Each pair corresponds to a line of SHPAML source code. The
             first element of each pair is indentation. The second is the
             remaining part of the line, except for trailing newline.
         """

[Jim Robert]

That patch looks good to me, I'm only concerned about using the word escape since it is also used to mean "escape the contents" and since it will not provide any security I wouldn't want anyone to get the wrong idea.

Maybe PASSTHROUGH or NOSHPAML would be better?

If you think escape is appropriate then I'm happy to accept your decision. I'm much more interested in the functionality :)

Thanks,
Jim

[Steve Howell]

I am not wedded to ESCAPE.  Other ideas:

 VERBATIM

 QUOTE

 INLINE

 HERE

 INCLUDE

 TAKE

 :::

I am a bit wary of introducing new punctuation.

[Jim Robert]

I like verbatim

[Steve Howell]

VERBATIM it is.  You can download the new copy of shpaml.py from here:

https://bitbucket.org/showell/shpaml_website/src/tip/shpaml.py

Except for a small mako-related change that shouldn't impact other users, it should be 100% backward compatible.

Let's treat this as provisional syntax for the next couple weeks or so.  I'd like feedback that folks are using it before I make it permanent.

I've let the documentation fall a little behind, but here are some recent features that have been incorporated into the main line:

  1) Mako support -- any line starting with a % gets passed thru
  2) VERBATIM support -- see below
  3) Terse attributes -- no need to quote attributes that are single words
  4) ::comment syntax -- allow block comments
  5) Daniel Wong added docstrings to the code

External:
  1) taz wrote a pygments lexer
 
If I can get some testimonials from folks, I'd like to do another round of publicity soon.  Just a simple line or two would be great--just describe how you've used it, and what you like/dislike about it.  I would particularly like to hear from folks that are using shpaml in a way that folks might not predict.  Most of the publicity to date has focused on django, but I am not targetting django in any specific way.

Another way to help is to blog about it, and if you do blog about it, please drop me a line either directly or through the list.

Thanks,

Steve

[Jim Robert]

Hey steve,

I'm using shpaml with django (as you know from my bitbucket project) and it's just great. I've been telling everyone I can about the glory of significant whitespace, and not having to worry about closing tags. Thanks!

You can use this tesitmonial wherever :)

Jim

PS - I'm updating the version of shpaml included with the django template loader.

PPS - Since upgrading to django 1.2 and turning on template caching I've seen up to 200ms speed up on individual page loads. on many of the pages that's more than a 20% speed up! awesome. I guess all that shpaml processing and disk IO really did slow things down.

[Steve Howell]

Thanks, Jim!

I took the liberty of changing the subject line to help me find this later.

Can you send out a link to your project?

[Jim Robert]

I've used it on a few already. One of the sites is a forum generator (which is not live yet) but will be available at http://rootbuzz.com - one of the test bed sites that is powered by that platform is http://otakupride.com which is public already.

I also used it when I was building http://esploded.com - a very simple file sharing site (mostly as a response to the aweful user experience on megaupload)

I also used it at my previous employer when I was building http://shoutomatic.com

I'm looking forward to using the javascript version with coffeescript and node.js :)

Jim

[Eric Gustavson]

Hey Steve,

I wanted to let you know that I was able to get the VERBATIM keyword to work, but it took me some time and hunting to figure it out.

I think it would help other users if you provided an example like the following on your documentation:

html
    head
        script type=text/javascript VERBATIM
                (function() {
                    if (typeof window.janrain !== 'object') window.janrain = {};
                    window.janrain.settings = {};
                    ...

By the way, SHPAML rocks!

--Eric
      

[Steve Howell]

Hi Eric,

I am not actively maintaining shpaml for now, but I'll keep this in mind if I do a future release.  Glad you were able to track this down, and thanks for the kind words.

If anybody wants to fork the docs, all the code to build out the website is on bitbucket.  There are a couple features like VERBATIM that are under-documented.

---

From: Eric Gustavson <gustavs...@gmail.com>
To: shp...@googlegroups.com
Sent: Sunday, September 25, 2011 8:47 AM

Subject: Re: inline js and css blocks?

[James Robert]

Steve, Eric, I'm actually working on better docs at the moment :)

I just set up the domain and the gh-pages so it only has the django-shpaml documentation right now, but it'll be at shpaml.com when I get it done...

Planning to have lots of code samples to show off all the use cases :)

James