Script & Style Revamp with Submission Favelet

By  on  

It's been six months and some change since the launch of Script & Style and the website is doing extremely well. Traffic continues to rise, our RSS feed subscriber count is close to 4,000, the submissions continue to be quality, and we're slowly adding new features to the site. We've recently taken some time to revamp the website to continue its growth.

Click here to read Chris Coyier's article with regard to the site redesign.

The newest code snippet we've added to enhance your S&S experience is a submission favelet/bookmarklet. This new favelet allows you to quickly submit the article you're reading, no matter what the source, to Script & Style. All you need to do is select/highlight the text you'd like to act as the article description and click the favelet. A new window will appear with the submission screen already filled out for you!

The Favelet Code

//favelet modified from:  http://cubicle17.com/post/32941821/bookmarklet-search-netflix
(function()%7Bvar%20d=document,w=window,ds=d.getSelection,ws=w.getSelection,ss=d.selection,e=encodeURIComponent;t=(ws)%3Fws():(ds)%3Fds():(ss)%3Fss.createRange().text:'';t=(t.toString().length)%3Ft:prompt('Please select article description text.','');if(t)%7Ba='http://www.scriptandstyle.com/submit%3Ftitle=' + e(document.title) + '%26url=' + e(window.location) + '%26content=';u=a+e(t);f=function()%7Bx=w.open(u,'nfx','scrollbars=1,toolbar=0,resizable=1,status=1,width=600,height=600');if(!x)w.location.href=u;%7D;if(/Firefox/.test(navigator.userAgent))setTimeout(f,0);else%20f();%7D%7D)();

Don't worry about the mess of code. All you need to do is drag the link to your "favorites" toolbar and it will work on any site you visit!

Jump on over to Script & Style to check out the new look and be sure to grab the Script & Style favelet!

Recent Features

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • By
    Multiple Backgrounds with CSS

    Anyone that's been in the web development industry for 5+ years knows that there are certain features that we should have had several years ago. One of those features is the HTML5 placeholder; we used JavaScript shims for a decade before placeholder came...

  • By
    Web Notifications API

    Every UI framework has the same set of widgets which have become almost essential to modern sites: modals, tooltips, button varieties, and notifications.  One problem I find is each site having their own widget colors, styles, and more -- users don't get a consistent experience.  Apparently the...

Discussion

  1. I like the change to the layout. Not that I disliked the previous, but the new one lends itself to the content well. Cool favelet, nice job man!

  2. talv

    nice redesign but your footer still says 2008!

  3. Hey David, just wanted to let you know that I’ve turned the “Social Bookmarking Menu” into a WordPress plugin and submitted it to the plugins directory on WordPress.org…

    Until they add it though, it’s available for download on my site here: http://eight7teen.com/sexy-bookmarks

    Script & Style is still the default #1 link in the menu! I figured that was the least I could do for you and Chris getting a buzz going about the menu on Script & Style!

    You know, in the one day that it was on the front page over there, the original menu was downloaded over 4,000 times!! Anyway, thanks again and I’m still working on those questions… I’ll email them to you when I finish.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!