Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header>
  <div class="wrap">
    <h1 class="site-heading">Bookmarklets</h1>
    <p class="description">Collecting useful bookmarklets around the web. Curated by <a href="https://twitter.com/RadLikeWhoa_" target="_blank">Sacha Schmid</a>.</p>
    <p class="links"><a href="#howto">Read the instructions</a><span class="separator">|</span><a href="https://twitter.com?status=@RadLikeWhoa_ I'd like to suggest a new bookmarklet: " target="_blank">Suggest a  bookmarklet</a></p>
  </div>
</header>
<section id="toolbar" class="toolbar" style="display: block;">
  <div class="column">
    <input id="search" class="search" type="search" placeholder="Search by name or by category">
  </div>
</section>
<section id="list">
  <ul class="networks">
    <li class="network amazon" data-category="ecommerce">
      <h2 class="network__name">Amazon</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function(){var w=window,l=w.location,d=w.document,s=d.createElement('script'),e=encodeURIComponent,o='object',n='AUWLBook',u='https://www.amazon.com/wishlist/add',r='readyState',T=setTimeout,a='setAttribute',g=function(){d[r]&&d[r]!='complete'?T(g,200):!w[n]?(s[a]('charset','UTF-8'),s[a]('src',u+'.js?ext=ipad&loc='+e(l)),d.body.appendChild(s),f()):f()},f=function(){!w[n]?T(f,200):w[n].showPopover()};typeof s!=o?l.href=u+'?ext=ipad&u='+e(l)+'&t='+e(d.title):g()}())
">Add to Wishlist</a></li>
      </ul>
    </li>
    <li class="network appnet" data-category="social">
      <h2 class="network__name">app.net</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:void((function()%7BSADN_ROOT='https://del05f65do1od.cloudfront.net';var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src',SADN_ROOT + '/static/gen/bookmarklet.js?21ca9a86?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());">Share on app.net</a></li>
      </ul>
    </li>
    <li class="network blogger" data-category="social">
      <h2 class="network__name">Blogger</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:popw='';Q='';x=document;y=window;if(x.selection) {Q=x.selection.createRange().text;} else if (y.getSelection) {Q=y.getSelection();} else if (x.getSelection) {Q=x.getSelection();}popw = y.open('http://www.blogger.com/blog_this.pyra?t=' + escape(Q) + '&u=' + escape(location.href) + '&n=' + escape(document.title),'bloggerForm','scrollbars=no,width=475,height=300,top=175,left=75,status=yes,resizable=yes');if (!document.all) T = setTimeout('popw.focus()',50);void(0);">Blog This</a></li>
      </ul>
    </li>
    <li class="network bitly" data-category="social">
      <h2 class="network__name">bitly</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function()%20%7B%20var%20s%20=%20document.createElement(%22script%22);%20s.setAttribute(%22id%22,%20%22bitmark_js%22);%20s.setAttribute(%22type%22,%20%22text/javascript%22);%20s.setAttribute(%22src%22,%20%22//bitly.com/a/bitmarklet.js%22);%20(top.document.body%20%7C%7C%20top.document.getElementsByTagName(%22head%22)[0]).appendChild(s);%20%7D)();">Bitmark</a></li>
      </ul>
    </li>
    <li class="network boxee" data-category="productivity">
      <h2 class="network__name">Boxee</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:var b=document.body;if(b&&!document.xmlVersion){void(z=document.createElement('script'));void(z.src='http://bbx.boxee.tv/queue/watchlaterloader?'+(new Date()).getTime().toString());void(b.appendChild(z))}">Watch Later</a></li>
      </ul>
    </li>
    <li class="network buffer" data-category="productivity">
      <h2 class="network__name">Buffer</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function(){var a=document.getElementsByTagName('head')[0],b=document.createElement('script');b.type='text/javascript';b.src='http://bufferapp.com/js/bookmarklet.v1.js?'+Math.floor(Math.random()*99999);a.appendChild(b);})();void 0">Send to Buffer</a></li>
      </ul>
    </li>
    <li class="network codepen" data-category="productivity">
      <h2 class="network__name">CodePen</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:function __cp(){var d=document,z=d.createElement('script'),b=d.body;try{if(!b)throw(0);z.setAttribute('src','//assets.codepen.io/assets/bk/bk.js?t='+(new Date().getTime()));b.appendChild(z)}catch(e){alert('Try again when the page loads.')}}__cp();void(0);">Play on CodePen</a></li>
      </ul>
    </li>
    <li class="network delicious" data-category="social">
      <h2 class="network__name">Delicious</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function(){function%20f(i){if(i.origin!==e+%22%22+n&&i.origin!==t+%22%22+n){return}if(i.data===%22destroy_bookmarklet%22){var%20s=document.getElementById(r);if(s){document.body.removeChild(s);s=null}}}var%20e=%22http://%22,t=%22https://%22,n=%22delicious.com%22,r=%22DELI_bookmarklet_iframe%22,i=document.getElementById(r);if(i){return}var%20s=e+%22%22+n+%22/save?%22,o=document.createElement(%22iframe%22);o.id=r;o.src=s+%22url=%22+encodeURIComponent(window.location.href)+%22&title=%22+encodeURIComponent(document.title)+%22&note=%22+encodeURIComponent(%22%22+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text))+%22&v=1.1%22;o.style.position=%22fixed%22;o.style.top=%220%22;o.style.left=%220%22;o.style.height=%22100%25%22;o.style.width=%22100%25%22;o.style.backgroundColor=%22tranparent%22;o.style.zIndex=%229999999%22;o.style.border=%22none%22;o.style.visibility=%22hidden%22;o.onload=function(){this.style.visibility=%22visible%22};document.body.appendChild(o);var%20u=window.addEventListener?%22addEventListener%22:%22attachEvent%22;var%20a=u==%22attachEvent%22?%22onmessage%22:%22message%22;window[u](a,f,false)})()">Add to Delicious</a></li>
      </ul>
    </li>
    <li class="network digg" data-category="news">
      <h2 class="network__name">Digg</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function(){window.ndb=window.ndb||{};var%20a=%22https://digg.com/submit/?url=%22+document.location.href;W=800,d=600;Z=screen.height;Y=screen.width;X=Math.round((Y/2)-(W/2));c=0;if(Z>Y){c=Math.round((C/2)-(A/2))}window.ndb.shareWin=window.open(a,%22the_new_digg_button%22,%22left=%22+X+%22,top=%22+c+%22,width=%22+W+%22,height=%22+d+%22,personalbar=0,toolbar=0,scrollbars=1,resizable=1%22)}());">Share on Digg</a></li>
      </ul>
    </li>
    <li class="network evernote" data-category="productivity">
      <h2 class="network__name">Evernote</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function(){EN_CLIP_HOST='http://www.evernote.com';try{var%20x=document.createElement('SCRIPT');x.type='text/javascript';x.src=EN_CLIP_HOST+'/public/bookmarkClipper.js?'+(new%20Date().getTime()/100000);document.getElementsByTagName('head')[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);}})();">Clip to Evernote</a></li>
      </ul>
    </li>
    <li class="network facebook" data-category="social">
      <h2 class="network__name">Facebook</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:var%20d%3Ddocument,f%3D%27https://www.facebook.com/share%27,l%3Dd.location,e%3DencodeURIComponent,p%3D%27.php%3Fsrc%3Dbm%26v%3D4%26i%3D1349189003%26u%3D%27%2Be(l.href)%2B%27%26t%3D%27%2Be(d.title)%3B1%3Btry%7Bif%20(!/%5E(.*%5C.)%3Ffacebook%5C.%5B%5E.%5D*%24/.test(l.host))throw(0)%3Bshare_internal_bookmarklet(p)%7Dcatch(z)%20%7Ba%3Dfunction()%20%7Bif%20(!window.open(f%2B%27r%27%2Bp,%27sharer%27,%27toolbar%3D0,status%3D0,resizable%3D1,width%3D626,height%3D436%27))l.href%3Df%2Bp%7D%3Bif%20(/Firefox/.test(navigator.userAgent))setTimeout(a,0)%3Belse%7Ba()%7D%7Dvoid(0)">Share on Facebook</a></li>
      </ul>
    </li>
    <li class="network ffffound" data-category="social">
      <h2 class="network__name">FFFFOUND</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://ffffound.com/bookmarklet.js');document.body.appendChild(e)})());">Add to FFFFOUND</a></li>
      </ul>
    </li>
    <li class="network forrst" data-category="social">
      <h2 class="network__name">Forrst</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:var d=document,w=window,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),f='https://forrst.com/posts/new',l=d.location,e=encodeURIComponent,p='?b=1&v=5&u='+e(l.href) +'&t='+e(d.title) +'&s='+e(s),u=f+p;try{if(!/^(.*\.)?forrst[^.]*$/.test(l.host))throw(0);tstbklt();}catch(z){a =function(){if(!w.open(u,'t','toolbar=0,resizable=0,status=1,width=765,height=650,scrollbars=1'))l.href=u;};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else a();}void(0)">Share on Forrst</a></li>
      </ul>
    </li>
    <li class="network foursquare" data-category="social">
      <h2 class="network__name">foursquare</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function(){(window.___fourSq=window.___fourSq||{}).version='1358235720059';var a=document.createElement('script');a.type='text/javascript';a.src='https://platform-s.foursquare.com/js/modules/widgets.bookmarklet.js';(document.head||document.body).appendChild(a)})();void(0);">Save to foursquare</a></li>
      </ul>
    </li>
    <li class="network gimmebar" data-category="social">
      <h2 class="network__name">Gimme Bar</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:%28function%28%29%20%7Bvar%20a%3D%27setAttribute%27%3Bvar%20d%3Ddocument%3Bfunction%20o%28%29%20%7Bvar%20s2%3Bif%20%28this.readyState%20%3D%3D%3D%204%29%20%7Bs2%3Dd.createElement%28%27script%27%29%3Bs2%5Ba%5D%28%27type%27%2C%27text%2Fjavascript%27%29%3Bs2.appendChild%28d.createTextNode%28this.responseText%29%29%3Bd.body.appendChild%28s2%29%3B%7D%7Dvar%20s%3Dd.createElement%28%27script%27%29%3Bs%5Ba%5D%28%27type%27%2C%27text%2Fjavascript%27%29%3Bs%5Ba%5D%28%27src%27%2C%27https%3A%2F%2Fgimmebar.com%2Fbookmarklet%2F2%27%29%3Bd.body.appendChild%28s%29%3Bvar%20x%3Dnew%20XMLHttpRequest%28%29%3Bx.onreadystatechange%3Do%3Bx.open%28%27GET%27%2C%20%27https%3A%2F%2Fgimmebar.com%2Fbookmarklet%2Fstub%27%2C%20true%29%3Bx.send%28%27%27%29%3B%7D%29%28%29%3B">Add to Gimme Bar</a></li>
      </ul>
    </li>
    <li class="network gist" data-category="productivity">
      <h2 class="network__name">Gist</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function(){var a=window.location;'gist.github.com'===a.host?a.href='http://dabblet.com/gist/'+a.href.split('/').pop():alert('You are not on gist.github.com')}())">View dabblet</a></li>
        <li class="bookmarklet"><a href="javascript:(function(){var a=window.location;'gist.github.com'===a.host?a.href='http://sassmeister.com/gist'+a.pathname:alert('You are not on gist.github.com')}())">View SassMeister</a></li>
      </ul>
    </li>
    <li class="network github" data-category="productivity">
      <h2 class="network__name">GitHub</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:var%20query%20=%20prompt(%22Search%20GitHub.com%22);user_search_ary%20=%20/%5Eu:(.*)/g.exec(query);if%20(user_search_ary)%20%7Bwindow.location%20=%20%22https://github.com/%22%20+%20user_search_ary%5B1%5D;%7Delse%20if%20(query)%20%7Bwindow.location%20=%20%22https://github.com/search?q=%22%20+%20query;%7D">Search</a></li>
      </ul>
    </li>
    <li class="network googleplus" data-category="social">
      <h2 class="network__name">Google+</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:void(window.open(%22https://plus.google.com/share?ur\l=%22+encodeURIComponent(location),%20%22Share%20to%20Google+%22,%22width=600,height=460,menubar=no,location=no,status=no%22));">Share on Google+</a></li>
      </ul>
    </li>
    <li class="network googlereader" data-category="news">
      <h2 class="network__name">Google Reader</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:var b=document.body;var GR________bookmarklet_domain='https://www.google.com';if(b&&!document.xmlVersion){void(z=document.createElement('script'));void(z.src='https://www.google.com/reader/ui/subscribe-bookmarklet.js');void(b.appendChild(z));}else{location='https://www.google.com/reader/view/feed/'+encodeURIComponent(location.href)}">Subscribe</a></li>
      </ul>
    </li>
    <li class="network hackernews" data-category="news">
      <h2 class="network__name">Hacker News</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function(){window.location.href=%22http://news.ycombinator.com/submitlink?u=%22+encodeURIComponent(document.location)+%22&t=%22+encodeURIComponent(document.title)})()">Post to News.YC</a></li>
      </ul>
    </li>
    <li class="productivity html5" data-category="news">
      <h2 class="network__name">HTML</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function(){var a=prompt('Enter HTML');if(a){window.location='data:text/html,'+a}}())">Quick Sheet</a></li>
      </ul>
    </li>
    <li class="network huffduffer" data-category="social">
      <h2 class="network__name">Huffduffer</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:var%20w=window.open('http://huffduffer.com/add?popup=true&page='+encodeURIComponent(location.href),'huffduff','scrollbars=1,status=0,resizable=1,location=0,toolbar=0,width=360,height=480');">Huffduff it</a></li>
      </ul>
    </li>
    <li class="network icebergs" data-category="news">
      <h2 class="network__name">Icebergs</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript: (function () {var a = 'setAttribute';var d = document;var s = d.createElement('script');s[a]('type', 'text/javascript');s[a]('src', 'https://iceber.gs/bookmarklet/iceframe.js');d.body.appendChild(s);})();">Add Icedrop</a></li>
      </ul>
    </li>
    <li class="network instapaper" data-category="news">
      <h2 class="network__name">Instapaper</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:function iprl5(){var d=document,z=d.createElement('scr'+'ipt'),b=d.body,l=d.location;try{if(!b)throw(0);d.title='(Saving...) '+d.title;z.setAttribute('src',l.protocol+'//www.instapaper.com/j/LlqY8NxXEekD?u='+encodeURIComponent(l.href)+'&t='+(new Date().getTime()));b.appendChild(z);}catch(e){alert('Please wait until the page has loaded.');}}iprl5();void(0)">Send to Instapaper</a></li>
      </ul>
    </li>
    <li class="network linkedin" data-category="social">
      <h2 class="network__name">LinkedIn</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function(){var%20d=document,l=d.location,f='https://www.linkedin.com/shareArticle?mini=true&ro=false&trk=bookmarklet&title='+encodeURIComponent(d.title)+'&url='+encodeURIComponent(l.href),a=function(){if(!window.open(f,'News','width=520,height=570,toolbar=0,location=0,status=0,scrollbars=yes')){l.href=f;}};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0);}else{a();}})()">Share on LinkedIn</a></li>
      </ul>
    </li>
    <li class="network pinboard" data-category="news">
      <h2 class="network__name">Pinboard</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:q=location.href;if(document.getSelection){d=document.getSelection();}else{d='';};p=document.title;void(open('https://pinboard.in/add?url='+encodeURIComponent(q)+'&description='+encodeURIComponent(d)+'&title='+encodeURIComponent(p),'Pinboard','toolbar=no,width=700,height=350'));">Add Bookmark</a></li>
        <li class="bookmarklet"><a href="javascript:q=location.href;p=document.title;void(t=open('https://pinboard.in/add?later=yes&noui=yes&jump=close&url='+encodeURIComponent(q)+'&title='+encodeURIComponent(p),'Pinboard','toolbar=no,width=100,height=100'));t.blur();">Read Later</a></li>
      </ul>
    </li>
    <li class="network pinterest" data-category="social">
      <h2 class="network__name">Pinterest</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:void((function(d)%7Bvar e%3Dd.createElement(%27script%27)%3Be.setAttribute(%27type%27,%27text/javascript%27)%3Be.setAttribute(%27charset%27,%27UTF-8%27)%3Be.setAttribute(%27src%27,%27//assets.pinterest.com/js/pinmarklet.js%3Fr%3D%27%2BMath.random()*99999999)%3Bd.body.appendChild(e)%7D)(document))%3B">Pin Image</a></li>
      </ul>
    </li>
    <li class="network pocket" data-category="news">
      <h2 class="network__name">Pocket</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function(){ISRIL_H='8fc9';PKT_D='getpocket.com';ISRIL_SCRIPT=document.createElement('SCRIPT');ISRIL_SCRIPT.type='text/javascript';ISRIL_SCRIPT.src='http://'+PKT_D+'/b/r.js';document.getElementsByTagName('head')[0].appendChild(ISRIL_SCRIPT)})();">Send to Pocket</a></li>
      </ul>
    </li>
    <li class="network pulse" data-category="news">
      <h2 class="network__name">Pulse</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript: void(function () {                   var jsCode = document.createElement('script');                 var host = 'http://www.pulse.me';                 jsCode.setAttribute('src', host +'/bookmarklet/bookmarklet-v3.js');                 jsCode.setAttribute('id', 'pulse');                document.body.appendChild(jsCode);                document.getElementById('pulse').onload= function(){bookmarkPage('http://www.pulse.me')};             }());">Save to Pulse</a></li>
      </ul>
    </li>
    <li class="network quora" data-category="social">
      <h2 class="network__name">Quora</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:var%20d%3Ddocument,w%3Dwindow,e%3Dw.getSelection,k%3Dd.getSelection,x%3Dd.selection,s%3D(e%3Fe():(k)%3Fk():(x%3Fx.createRange().text:0)),f%3D%27http://www.quora.com/board/bookmarklet%27,l%3Dd.location,e%3DencodeURIComponent,p%3D%27%3Fv%3D1%26url%3D%27%2Be(l.href),u%3Df%2Bp%3Btry%7Bif(!/%5E(.*%5C.)%3Fquora%5B%5E.%5D*%24/.test(l.host))throw(0)%3B%7Dcatch(z)%7Ba%20%3Dfunction()%7Bif(!w.open(u,%27_blank%27,%27toolbar%3D0,scrollbars%3Dno,resizable%3D1,status%3D1,width%3D430,height%3D400%27))l.href%3Du%3B%7D%3Bif(/Firefox/.test(navigator.userAgent))setTimeout(a,0)%3Belse%20a()%3B%7Dvoid(0)">Share on Quora</a></li>
      </ul>
    </li>
    <li class="network quotefm" data-category="social">
      <h2 class="network__name">Quote.fm</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function(){var d=document;var s=d.createElement('scr'+'ipt');s.setAttribute('type','text/javascript');s.setAttribute('src','https://quote.fm/site/bookmarklet');d.body.appendChild(s);})();">Send to Quote.fm</a></li>
      </ul>
    </li>
    <li class="network readability" data-category="news">
      <h2 class="network__name">Readability</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(%28function%28%29%7Bwindow.baseUrl%3D%27http%3A//www.readability.com%27%3Bwindow.readabilityToken%3D%27%27%3Bvar%20s%3Ddocument.createElement%28%27script%27%29%3Bs.setAttribute%28%27type%27%2C%27text/javascript%27%29%3Bs.setAttribute%28%27charset%27%2C%27UTF-8%27%29%3Bs.setAttribute%28%27src%27%2CbaseUrl%2B%27/bookmarklet/read.js%27%29%3Bdocument.documentElement.appendChild%28s%29%3B%7D%29%28%29)">Read Now</a></li>
        <li class="bookmarklet"><a href="javascript:(%28function%28%29%7Bwindow.baseUrl%3D%27http%3A//www.readability.com%27%3Bwindow.readabilityToken%3D%276vWVgFu2FJDRFuFvHHsKMP3RQw7fP3WsXrpDFdAX%27%3Bvar%20s%3Ddocument.createElement%28%27script%27%29%3Bs.setAttribute%28%27type%27%2C%27text/javascript%27%29%3Bs.setAttribute%28%27charset%27%2C%27UTF-8%27%29%3Bs.setAttribute%28%27src%27%2CbaseUrl%2B%27/bookmarklet/save.js%27%29%3Bdocument.documentElement.appendChild%28s%29%3B%7D%29%28%29)">Read Later</a></li>
        <li class="bookmarklet"><a href="javascript:(%28function%28%29%7Bwindow.baseUrl%3D%27http%3A//www.readability.com%27%3Bwindow.readabilityToken%3D%27%27%3Bvar%20s%3Ddocument.createElement%28%27script%27%29%3Bs.setAttribute%28%27type%27%2C%27text/javascript%27%29%3Bs.setAttribute%28%27charset%27%2C%27UTF-8%27%29%3Bs.setAttribute%28%27src%27%2CbaseUrl%2B%27/bookmarklet/send-to-kindle.js%27%29%3Bdocument.documentElement.appendChild%28s%29%3B%7D%29%28%29)">Send to Kindle</a></li>
      </ul>
    </li>
    <li class="network reddit" data-category="social">
      <h2 class="network__name">Reddit</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:%20var%20h%20=%20window.location.href;%20h%20=%20'http://www.reddit.com/s/'%20+%20escape(h);%20window.location%20=%20h;">Toolbar</a></li>
        <li class="bookmarklet"><a href="javascript:location.href='http://www.reddit.com/submit?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)">Submit</a></li>
      </ul>
    </li>
    <li class="network rtm" data-category="productivity">
      <h2 class="network__name">Remember The Milk</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function(){h='www.rememberthemilk.com';p='/services/ext/addtask.rtm';if(window.getSelection){d=window.getSelection();}else if(document.getSelection){d=document.getSelection();}else if(document.selection){d=document.selection.createRange().text;};cp='http://'+h+p+'?d='+encodeURIComponent(d)+'&t='+encodeURIComponent(document.title);w=window.open(cp,'addwindow','status=no,toolbar=no,width=475,height=260,resizable=yes');setTimeout(function(){w.focus();}, 500);})();">Add to RTM</a></li>
      </ul>
    </li>
    <li class="network setlistfm" data-category="music">
      <h2 class="network__name">Setlist.fm</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function(){var a=window.location,b=a.pathname.split('/');'www.last.fm'===a.host&&'event'===b[1]?window.location='http://www.setlist.fm/redirect?lastfm='+b[2].split('+')[0]:alert('You are not on a last.fm event page')}())">Last.fm to Setlist.fm</a></li>
      </ul>
    </li>
    <li class="network storify" data-category="news">
      <h2 class="network__name">Storify</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function()%7Bvar%20p=window.location.protocol;p=(p[0]=='f')?'http:':p;var%20_my_script=document.createElement('SCRIPT');%20_my_script.type='text/javascript';%20_my_script.src=p+'//storify.com/public/js/bookmarklet.js?1.9.0';%20document.getElementsByTagName('head')%5B0%5D.appendChild(_my_script);%7D());">Storify this</a></li>
      </ul>
    </li>
    <li class="network stumbleupon" data-category="social">
      <h2 class="network__name">StumbleUpon</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:document.location.href='http://www.stumbleupon.com/submit?url='+document.URL+'&title='+document.title.replace(/%20/g,'+');">Stumble</a></li>
      </ul>
    </li>
    <li class="network subtlepatterns" data-category="productivity">
      <h2 class="network__name">SubtlePatterns</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function()%7Bvar newscript%3Ddocument.createElement(%27script%27)%3Bnewscript.type%3D%27text/javascript%27%3Bnewscript.async%3Dtrue%3Bnewscript.src%3D%27https://d2ueh8f0j2xol3.cloudfront.net/subtle-patterns-bookmarklet/static/js/all.js%3Fcb%3D%27 %2B Math.random()%3B(document.getElementsByTagName(%27head%27)%5B0%5D%7C%7Cdocument.getElementsByTagName(%27body%27)%5B0%5D).appendChild(newscript)%3B%7D)()%3B">Preview Background</a></li>
      </ul>
    </li>
    <li class="network telly" data-category="social">
      <h2 class="network__name">Telly</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:if(top[%22bookmarkletv2-telly.com%22])top[%22bookmarkletv2-telly.com%22];else{(function(){var server=%22telly.com%22;(function(){var f=%22http:%2F%2F%22+server+%22%2F?s=bookmarklet&url=%22+encodeURIComponent(window.location.href)+%22&title=%22+encodeURIComponent(document.title)+%22&notes=%22+encodeURIComponent(%22%22+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text))+%22&utm_source=%22+location.href.match(%2F([\w]-*[\w]+)*(\.([\w]-*[\w]+)*)+%2Fgi)+%22&utm_medium=bookmarkv2%22+%22&utm_campaign=bookmark%22+%22&v=2&%22;var a=function(){if(!window.open(f,%22telly-bookmarklet-v2%22,%22location=1,links=0,scrollbars=0,toolbar=0,status=0,resizable=1,width=710,height=660%22))location.href=f};if(%2FFirefox%2F.test(navigator.userAgent))setTimeout(a,0);else a()})()(function(){var e=document.createElement(%22script%22);var p=location.protocol==%22https:%22?%22https:%22:%22http:%22;e.setAttribute(%22type%22,%22text%2Fjavascript%22);e.setAttribute(%22charset%22,%22UTF-8%22);e.setAttribute(%22src%22,p+%22%2F%2F%22+server+%22%2Fv3%2Fjs%2Fbookmarklet.js?r=%22+(new Date).getTime());document.body.appendChild(e)}())})();void 0};">Post to Telly</a></li>
      </ul>
    </li>
    <li class="network tumblr" data-category="social">
      <h2 class="network__name">Tumblr</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:var d=document,w=window,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),f='https://www.tumblr.com/share',l=d.location,e=encodeURIComponent,p='?v=3&u='+e(l.href) +'&t='+e(d.title) +'&s='+e(s),u=f+p;try{if(!/^(.*\.)?tumblr[^.]*$/.test(l.host))throw(0);tstbklt();}catch(z){a =function(){if(!w.open(u,'t','toolbar=0,resizable=0,status=1,width=450,height=430'))l.href=u;};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else a();}void(0)">Share on Tumblr</a></li>
      </ul>
    </li>
    <li class="network twitter" data-category="social">
      <h2 class="network__name">Twitter</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function(){window.twttr=window.twttr||{};var D=550,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;if(C>A){G=Math.round((C/2)-(A/2))}window.twttr.shareWin=window.open('https://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');E=F.createElement('script');E.src='http://platform.twitter.com/bookmarklets/share.js?v=1';F.getElementsByTagName('head')[0].appendChild(E)}());">Share on Twitter</a></li>
      </ul>
    </li>
    <li class="network weheartit" data-category="social">
      <h2 class="network__name">We Heart It</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://weheartit.com/bookmarklet.js');document.body.appendChild(e)})());">Heart</a></li>
      </ul>
    </li>
    <li class="network zootool" data-category="productivity">
      <h2 class="network__name">Zootool</h2>
      <ul class="bookmarklets">
        <li class="bookmarklet"><a href="javascript:(function(){var u='http://zootool.com';var d=document;function l(){if(!d.body)return p();if(!d.getElementById('zt-script')){var s=d.createElement('script');s.src=u+'/js/lasso.js?v=1.3';s.id='zt-script';d.body.appendChild(s);}s=setInterval(function(){u=0;try{u=!!(typeof ztinit=='function');}catch(i){}if(u){clearInterval(s);ztinit('1.3');}},200);}function p(){var w=500;var h=465;var l=(screen.width?(screen.width-w)/2:0);var t=(screen.height?(screen.height-h)/4:0);var win=window.open(u+'/post/?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(d.title),'lasso','width='+w+',height='+h+',left='+l+',top='+t+',resizable=yes,scrollbars=yes');(!win)?alert('Please deactivate your Popup-Blocker!'):win.focus();}try{l();}catch(e){p();}})();">Lasso</a></li>
        <li class="bookmarklet"><a href="javascript:function ztrl(){var d=document,z=d.createElement('scr'+'ipt'),b=d.body,l=d.location; try { if(!b) throw(0); z.setAttribute('src','http://zootool.com/read-later/js/'); b.appendChild(z); } catch(e) { alert('Please wait until the page has loaded.'); }}ztrl();void(0)">♥</a></li>
        <li class="bookmarklet"><a href="javascript:void(function(){var w = 430; var h = 400; var t = (screen.height ? (screen.height - h) / 4 : 0); var l = (screen.width ? (screen.width - w) / 2 : 0); var win = window.open('http://zootool.com/aquarium/','zt-aquarium','width='+w+',height='+h+',top='+t+',left='+l+',location=no,personalbar=no,menubar=no,status=no,resizable=yes,scrollbars=yes'); if(w)setTimeout(function(){w.focus()},250);else{alert('Ups! You\'ve got an active popup blocker. Hold the CTRL-key and try again.')}})();">Aquarium</a></li>
      </ul>
    </li>
  </ul>
</section>
<section id="howto" class="howto">
  <div class="wrap">
    <p class="description">Bookmarklets can be extremely useful, but often you don't take enough time to look for them properly. That's why I decided to list some of the most useful ones on one handy page for you to collect and use. Go ahead, browse through the list and <span class="show-touch">tap and hold on whatever bookmarklet you want to copy it</span><span class="hide-touch">drag whatever you want to the bookmark bar</span>.</p>
    <p class="show-touch">After adding this page as a bookmark, go to its edit screen, paste the copied URL and remove everything from the URL before 'javascript:'.</p>
    <p>A list of all the changes is available as a <a href="https://gist.github.com/4536800" target="_blank">GitHub Gist</a>.</p>
  </div>
</section>
              
            
!

CSS

              
                @import "compass/css3";

/* ---------------------------------------- *\

    VARIABLES

\* ---------------------------------------- */

$red: #a32c28;

$white: #fff;
$lightest-grey: #eee;
$light-grey: #ddd;
$grey: #ccc;
$dark-grey: #222;
$darkest-grey: #141414;
$black: #000;





/* ---------------------------------------- *\

    WEB FONTS

\* ---------------------------------------- */

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/toadOcfmlt9b38dHJxOBGFkQc6VGVFSmCnC_l7QZG60.woff) format('woff');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
}





/* ---------------------------------------- *\

    GENERIC ELEMENTS

\* ---------------------------------------- */

* {
  @include box-sizing(border-box);
}

body {
  margin: 0;
  font: #{100%}/#{1.5} "Source Sans Pro", sans-serif;
  color: $dark-grey;
  background-color: $lightest-grey;
}

p {
  margin-top: 0;
  margin-bottom: 1.5em;
}

a {
  color: $red;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid;
  @include transition(color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out);

  &:hover {
    color: lighten($red, 10%);
  }

  &:active {
    color: darken($red, 10%);
  }
}

small,
.small {
  font-size: 0.75em;
  line-height: 2;
}

.wrap {
  max-width: 35em;
  margin: 0 auto;
}

.separator {
  padding: 0 0.5em;
}





/* ---------------------------------------- *\

    TOUCH SPECIFIC STYLES

\* ---------------------------------------- */

.show-touch {
  font: 0/0 a;
}

.touch {
  .hide-touch {
    font: 0/0 a;
  }
  
  .show-touch {
    font: inherit;
  }
}





/* ---------------------------------------- *\

    HEADER

\* ---------------------------------------- */

header {
  padding: 3em 1.5em 1.5em;
  text-align: center;
}

.site-heading {
  margin-top: 0;
}

.site-heading {
  margin-bottom: 0.6em;
  font-size: 2.5em;
  line-height: 1.2;
  text-align: center;
}





/* ---------------------------------------- *\

    TOOLBAR

\* ---------------------------------------- */

.toolbar {
  position: relative;
  min-height: 2.5em;
  border-top: 1px solid $grey;
  border-bottom: 1px solid $grey;
  overflow: hidden;
  z-index: 100;
}

.search {
  top: 0;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  padding: 0.5em;
  margin: 0;
  font: inherit;
  border: 0;
  @include appearance(none);
  @include transition(box-shadow 0.25s ease-in-out);
  outline: none;
  
  &:focus {
    box-shadow: 0 1px 2px rgba($darkest-grey, 0.15) inset;
  }
}

.search.fixed {
  position: fixed;
  box-shadow: 0 2px 4px rgba($darkest-grey, 0.35);
}





/* ---------------------------------------- *\

    NETWORKS

\* ---------------------------------------- */

.networks {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.network {
  padding: 3em;
  @include background-image(radial-gradient(50% 50%, circle, rgba($white, 0.25), rgba($white, 0)));
}

.network__name {
  margin-top: 0;
  margin-bottom: 0.75em;
  font-size: 2em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba($darkest-grey, 0.25);
  color: $white;
}





/* ---------------------------------------- *\

    BOOKMARKLETS

\* ---------------------------------------- */

.bookmarklets {
  padding-left: 0;
  text-align: center;
  list-style-type: none;
}

.bookmarklet {
  margin: 1em 0;
  -webkit-transition: opacity 0.25s ease-in-out;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  @media (min-width: 37.5em) {
    max-width: 18em;
    margin-left: auto;
    margin-right: auto;
  }
  
  a {
    position: relative;
    display: block;
    padding: 0.5em 1.5em;
    background-color: $light-grey;
    @include background-image(linear-gradient(top, rgba($lightest-grey, 0.5), rgba($grey, 0.5)));
    color: inherit;
    text-decoration: none;
    border: 0;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba($darkest-grey, 0.25);
    cursor: move;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    @include transition(background-color 0.25s ease-in-out);
    
    &:hover {
      background-color: $lightest-grey;
    }
    
    &:active {
      @include transition(none);
      background-color: $grey;
    }
  }
}





/* ---------------------------------------- *\

    INSTRUCTIONS

\* ---------------------------------------- */

.howto {
  padding: 3em 1.5em 1.5em;
}





/* ---------------------------------------- *\

    BRAND COLOURS

\* ---------------------------------------- */

$brand-colors: pinboard       #0000e6,
               pinterest      #c8232c,
               googlereader   #396bc6,
               instapaper     #000,
               tumblr         #34526f,
               twitter        #00a0d1,
               pocket         #ee4056,
               facebook       #3b5998,
               readability    #9c0000,
               storify        #009cce,
               quotefm        #66ceff,
               evernote       #5ba525,
               forrst         #5b9a68,
               delicious      #205cc0,
               setlistfm      #a5c64a,
               linkedin       #0e76a8,
               stumbleupon    #f74425,
               digg           #000008,
               hackernews     #ff6600,
               github         #4183c4,
               blogger        #ffa552,
               foursquare     #25a0ca,
               gimmebar       #f70078,
               googleplus     #db4a39,
               zootool        #5e8b1d,
               buffer         #529c31,
               appnet         #737373,
               codepen        #383839,
               subtlepatterns #4abd63,
               weheartit      #ff8cad,
               quora          #ad2100,
               huffduffer     #336699,
               telly          #638c9c,
               boxee          #84b542,
               rtm            #005abd,
               bitly          #ef6321,
               pulse          #63ceff,
               amazon         #e47911,
               reddit         #ff4200,
               ffffound       #ff009c,
               icebergs       #00c6f9,
               gist           #ffa54a,
               html5          #e74a21;

@each $brand in $brand-colors {
  .#{nth($brand, 1)} {
    background-color: #{nth($brand, 2)};
  }
}
              
            
!

JS

              
                class Bookmarklets

  constructor: ->
    bindUIActions()
    optimiseForTouch()

  touch = document['ontouchstart'] isnt undefined
  links = document.querySelectorAll('.bookmarklet a')
  networks = document.querySelectorAll('.network')
  searchBox = document.getElementById('search')

  bindUIActions = ->
    for link in links
      if touch
        link.href = "#{window.location}/////#{link}.href"
          
      link.addEventListener('click', (e) ->
        if touch
          alert 'Please tap and hold the bookmarklet to add it to your bookmarks.'
        else
          alert 'Please drag the bookmarklet to the bookmarks bar.'

        e.preventDefault()
        return
      , false)

    searchBox.addEventListener('input', search, false)
    window.addEventListener('scroll', stickySearch, false)
    return
      
  optimiseForTouch = ->
    if touch
      document.body.classList.add 'touch'

  search = ->
    query = new RegExp(searchBox.value, 'i')

    for network in networks
      network.style.display = if query.test(network.firstElementChild.textContent) or query.test(network.getAttribute('data-category')) then 'block' else 'none'
    return

  stickySearch = ->
    top = if window.pageYOffset then pageYOffset else document.documentElement.scrollTop or document.body.scrollTop
    elementTop = searchBox.parentNode.parentNode.offsetTop
    hasClass = searchBox.classList.contains 'fixed'

    if top > elementTop and not hasClass
      searchBox.classList.add 'fixed'
    else if top < elementTop and hasClass
      searchBox.classList.remove 'fixed'

Bookmarklets()
              
            
!
999px

Console