Code Pen, auto-submission Bookmarklet

Question

CodePen is a new site like our beloved jsFiddle.

I like it for two reasons.

1. Zen Coding
2. It has an API

So, with the latter I created a bookmarklet. It guestimates what each block of code is (HTML, CSS, JavaScript), on a Stack Exchange page. It sends that code to CodePen and then redirects you there.

Features:

• SO Question -> CodePen Title
• Question's last sentence -> CodePen description
• Recognizes these tags: jquery, mootools, prototype, less, sass, scss, slim, haml, and coffeescript
• For each tag it loads/pre-processes automatically
• And, of course, it tries to put your code in the right sections (based on punctuation)

Install:

Copy this code to your clipboard. Create a new bookmark. Right click it, and choose Edit. Paste in the URL's spot. Give it a witty name, and save :-)

javascript:var css=[],js=[],html=[],jq=false;$(".postcell pre").each(function(e,t){
var n=t.innerText,r=n.length,i=function(e){var t=0;for(var i=0;i<r;i++)
{e===n[i]&&t++}return t},s=i(":"),o=i(";"),u=i("<");u>o?html.push(n):s/o>.9?
css.push(n):js.push(n)});var tags=$(".post-taglist").text().trim().split
(" "),tag=function(e){return tags.indexOf(e)!==-1?e:""},f=$("<form>",
{action:"http://codepen.io/pen/define",method:"POST"});i=
$("<input type=hidden name=data value=''>").attr({value:JSON.stringify
({title:$("#question-header").text().trim(),description:
$(".postcell p").last().text(),html_pre_processor:
tag("slim")||tag("haml")||"none",css_pre_processor:tag("less")
||tag("scss")||tag("sass")||"none",js_pre_processor:tag("coffeescript")
||"none",js_library:tag("jquery")||tag("mootools")||tag("prototype")
||"none",html:html.join("\n\n"),js:js.join("\n\n"),css:css.join("\n\n")})});
f.append(i);f.appendTo("body");f.submit();void 0;

Demos:

Here are some example pages to try it out with,

• jQuery get specific option tag text

(I'll find more when I find time.)