We made a JS utility for January 18th's SOPA blackout

by jjcm • 15 years ago

69 27 15 years ago

jjcm4• 15 years ago

I had a number of friends with small sites who weren't extremely literate when it came to html/js, but who wanted to join in with the January 18th site blackout. We ended up creating this. It's a small one line piece of JS that people can add for a simple blackout wall with information on SOPA/PIPA.

IanDrake• 15 years ago

Great job. You should add the following to the header:

"January 18th is Stop SOPA day"

jjcm4• 15 years ago

A better choice of words than what we had. Changed!

thegir• 15 years ago

Obligatory "you don't have friends".

Add a datetime check so I can set it and forget it.

jjcm4• 15 years ago

We may provide that in the setup options - we've had a few people who wanted to have it up outside of the 18th.

shuzchen7• 15 years ago

Author of the js side here. I'll definitely look into seeing how much extra bulk will be needed for this. We're trying to keep the file as small as possible and generally as cross-browser friendly as possible.

shuzchen7• 15 years ago

datetime check feature added!

Mizza• 15 years ago

Haha! I made the same thing last night!

https://github.com/Miserlou/Blaccupy

Great minds think alike, eh?..

dutchbrit• 15 years ago

Haha, I was working on the same idea today!

Flenser• 15 years ago

Ctrl+clicking on a link to open in a new page removes the blackout.

jjcm4• 15 years ago

Clicking anywhere will remove it. Many people didn't want to black out their site completely, so we provided a clickthrough mechanism.

shuzchen7• 15 years ago

With the new push there is now a secret undocumented sopablackout_srsbzns=true flag you can set if you want the blackout to never go away.

w33ble2• 15 years ago

Cool!

An option to have this activate only on the 18th would be great. I'd kinda like to include the code now but have it do nothing until the 18th. Also, is the "sopablackout_id = 'element-id'" option working? Didn't seem to do anything different for me.

shuzchen7• 15 years ago

In my testing it does. If you've set that option and it doesn't look any different, then perhaps the element you're attaching to is the full size of the page? The attach-to-element feature is for people who say, only wanted to cover the header of their site. There's some hack in there to figure out the position and height of that element and have the popover cover that (also, if the element is too small, the popover might be larger such that the message shows). Always open to bug reports.

w33ble2• 15 years ago

Yeah, the id thing could just be my theme's layout. I don't feel like debugging so I'll just let it run full page, no bigs.

shuzchen7• 15 years ago

Here we go. Ended up a commit where I fixed a typo related to that wasn't merged in yet. It should be all good! Thanks for the support!

ntharani• 15 years ago

Great idea. If this gets wide adoption, which I hope it does, you'll want to ensure that your Javascript code is on a fast CDN or hosted locally, otherwise the sites will stall loading it.

shuzchen7• 15 years ago

I've got a lot of faith in varnish, so I'm pretty sure things should hold up on this end. However, yes, if you are worried about relying on an external resource by all means curl/wget/whatever the js file and server it up yourself. You just won't get any fixes or features we push in the meantime.

davidcuddeback• 15 years ago

Great idea! I think it could be improved with a minor adjustment. The first thing I saw on that page was "(click here to continue)", which I did before I realized there was text at the top of the screen. You see, "(click here to continue)" is something I see on a lot of pop-over ads and splash-screens, so my brain has been trained to blindly click through to the next page. I think with some minor adjustments, the heading can be made more prominent.

tomelders• 15 years ago

Can I make a suggestion? Have the text fade in.

I think it would give it a bit more ooomph.

shuzchen7• 15 years ago

That's a great suggestion, but the js snippet does not rely on any external toolkit that would make cross-browser text fading easy to do. Everything it needs to work it provides for itself. It's not even minified but ends up 1.7KB gzipped. I kinda like it that way.

Also, the snippet is really meant for people who can't do this on their own - really, someone with beginner jQuery skills can probably create this on their own site in 10 minutes, so forgive it for being bare bones.

ak2012• 15 years ago

small sites wont make a difference. we need google/youtube to do this.

whileonebegin• 15 years ago

I like the idea, but the visuals could be improved. Maybe try a modal window, similar to the "Website Blocked" SOPA mock images, but changing the text and wording. Maybe include a link to the infographic http://americancensorship.org/infographic.html

brador• 15 years ago

I love that every site now submitted to HN uses twitter bootstrap. It's an awesome CSS framework, give it a try if you havn't already!

cbs• 15 years ago

The first time I run across a website using this on the 18th I'm going to drop the script it into adblock's blacklist and be done with it.

sgerrand• 15 years ago

Great work!

I've created a WordPress plugin for this - it contains the JavaScript file locally to reduce the potential load on the js.sopablackout.org domain. YMMV.

https://github.com/sgerrand/sopa-blackout-for-wordpress/

We made a JS utility for January 18th's SOPA blackout

Related Stories