

Stop SOPA site template - cjauvin
http://www.zachstronaut.com/lab/text-shadow-box/stop-sopa.html

======
petenixey
This is a really nice design but it's missing an important opportunity to
convert what will initially be shock and irritation into sympathy and action.

When sites go dark, what remains will be the difference between the country
getting behind the internet companies and hating them for causing disruption.

The blackout page needs to do three things:

1) making people understand the SOPA proponents made the site go dark (and not
Reddit etc.)

2) make people understand just one thing about why SOPA is dangerous

3) make people take some form of action to help prevent SOPA (sign a petition
etc.)

It's tough but it also has to do all of this in about 20s while people landing
on it reel from the shock that Reddit / Twitter / Tumblr etc. have gone.

~~~
jjcm
We tried to do that with <http://sopablackout.org>. Granted, this drop shadow
implementation will get people's attention more, but we wanted to focus on
allowing people to learn why the site is blocked.

~~~
jbhelms
I think this is the method I plan on using and offering to my customers. It
will get the point across and still allow them to function.

~~~
micro-ram
So I don't have to change the sites manually I check the date. Here is a
snippet of php code to check the date and only include your .js on Jan 18,
2012:

<? if(date("Ymd")=="20120118") echo '<script type="text/javascript"
src="hxxp//js.sopablackout.org/sopablackout.js"></script>'; ?>

Note: replace hxxp with http.

~~~
nodata
Needs timezone support.

------
rufibarbatus
As user of NoScript [1] (and its Chromium sidekick, ScriptNo), I'm often let
down by pages posted to hacker news that have poor or no graceful degradation
[2], and that often makes me feel like writing a comment complaining about it
(which I haven't, _won't_ , at least as long as I don't start offering quick
fixes along with the complaint).

It's really refreshing to see a page of such a design complexity having given
thought to scenarios where javascript might not be available. Kudos! (I
actually have a hunch this default state was crafted with mobile browsers in
mind — but it was nonetheless a thoughtful thing.)

[1] <http://noscript.net/>

[2]
[http://www.rdrop.com/~half/Creations/Writings/Web.patterns/g...](http://www.rdrop.com/~half/Creations/Writings/Web.patterns/graceful.failure.html)

~~~
TomGullen
Why do you use noscript to block JS? I've never understood.

The inconvenience of dysfunctional sites surely outweighs the one in a million
chance you will have your login to HackerNews stolen, or something else that's
more of a nuisance than an actual danger.

~~~
rufibarbatus
I'm not a security guy. I don't know what reasons other people might have. I
actually started it as an experiment, and grew fond of it for no specific
laid-out reason.

Actually _seeing_ what trackers and other such spyware are embedded in most
pages these days is interesting, but I could live without the granular
control. I think what I'm most interested in is just really seeing how
different pages will break (or degrade gracefully) confronted with the missing
functionality of javascript.

If you haven't yet, I suggest you give these add-ons a ride for, say, a week,
if anything for the sake of learning.

~~~
there
i think you may be better suited with an add-on like ghostery which
specifically blocks tracking scripts, rather than cutting off javascript
completely.

------
54mf
It's nifty, but difficult to use, to read the actual "meat" of the page.
Perhaps the spotlight should be a bit larger?

And this is a total picked nit, but the kerning of SOP A is killing me. Wrap
that P in a <span> and letter-spacing it, pleeeease.

------
insickness
It's cool but I feel like the gymnastics takes away a bit from the message. I
prefer something plain, simple and not entertaining. Give them the message and
tell them to call their legislator. The point to me is that the site is down,
not that the site is interesting.

------
Freaky
Slow and barely usable in stock Android Gingerbread and Honeycomb browsers, as
well as Firefox mobile. Massive clipping errors in stock ICS browser render it
unusable. Opera Mobile manages about the best, ignoring the lighting outright.

Hover effects really don't translate well to touchscreens.

~~~
joejohnson
It looks great on my iPhone

------
jiggy2011
Very clever, but that was horribly slow for me and as soon as I moved the
mouse on the screen the spotlight moved so I was no longer able to read the
text.

Let's just keep this simple, do away with the mousemove following spotlight
altogether, if you want to make the page more interesting then embed a youtube
video explaining the issue.

The text is kind of hard to read too. Personally I would just do a white
background with dark text and possibly an amusing cartoon image or something
to visually illustrate the concept of a blackout.

------
mcantelon
Nicely done... I just updated my Drupal blackout module to use it.

<https://github.com/mcantelon/drupal-sopa-blackout>

------
tlrobinson
Neat effect, but please make the spotlight slightly bigger so I don't have to
move my mouse around as I read the text.

------
mrsebastian
I think you should probably shy away from wording like 'vast majority of
Americans' -- that might be consensus on the interwebs, but it's still a bit
hyperbolic for something this serious.

Very nice bit of code, though; especially the thrown shadow :)

------
kazoolist
FWIW, this page does not render at all on my Galaxy Nexus. Comes up as a black
box in a grey box in the corner of the screen.

Does it look OK on other mobile browsers? Seems like mobile browser support
would be important for this "template"?

------
kittxkat
Wow, the effect is AMAZING, especially the dynamic shadow on "STOP SOPA". Nice
work!

------
someone13
Absolutely stunning effect - nicely done. Just a small report - using Chrome
16.0.912.75 on Windows 7, waving the mouse around absolutely kills my CPU -
the browser process uses 75% of one core.

~~~
54mf
Seconded, running it in Chrome on my 2011 Macbook Air is laggy.

~~~
Cushman
To dissent, Chrome 16.0.912.75 on my 2011 MBA is perfectly smooth, CPU under
30%.

------
john-n
Nice effect, may want to use your no-script version in IE, as it appears quite
broken in IE 9.

------
hazelnut
don't get me wrong. the idea is great, the effect is awesome.

but we have to reach as many people as possible. i think a plain site with the
message would be more effective.

------
clone1018
Awesome work, this is amazing.

------
nazar
Very genius work!

