Stop SOPA site template | Hacker News Reader

Stop SOPA site template

zachstronaut.com

178 pointscjauvin37 comments

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.

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.

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.

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.

Needs timezone support.

I made an overlay version of the spotlight effect that still allows the site to function, if you like the effect but don't like the total blackout: https://github.com/nitrogenlogic/stop-sopa (there's also a nice dark version available in the dark branch).

Preview of an actual page with the overlay: http://www.nitrogenlogic.com/sopaindex.html

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...

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.

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.

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

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

Because when you hit an infected web site, the script loading from xyz.ru will not get loaded and you will be safe. NOSCRIPT FF & NOTSCRIPT Chrome FTW!

so you voluntarily have a shitty web experience on practically every website just to prevent that one possibly hacked website that you might visit by accident some day?

how many of these vulnerabilities would noscript fail to protect against?

https://www.mozilla.org/security/known-vulnerabilities/firef...

http://chromekb.com/vulnerabilities/

I guess it's a control thing.

Just whitelist clean scripts from sites you want to visit. It would be cool if noscript could whitelist by SHA hash. Sometimes technical people like having control of their browsing/operating system/whatever experience, even if that control results in having to do more work or accept a less-than-ideal user experience (from the mainstream perspective).

I've found NoScript tends to improve the UX on most sites I visit. No popups, much reduced spinning click me ads, just generally more pleasant. Some stuff doesn't work, but I whitelist clean sites like HN and I'm usually happier without the JS on a lot of sites.

1.) Speeds up websites

2.) Removes clutter

3.) Additional privacy

4.) Additional security

Not all sites are dysfunctional. And for the ones that are, you enable javascript from the relevant domains the first time you visit. You can choose to remember those preferences for the rest of the session, or permanently.

The small amount of additional work is worth it.

A valid criticism, and I apologize, as I'm very interested in progressive enhancement. It was an omission, and I believe you will find that the page is readable in its default state without JavaScript now. (Mind you, I threw this thing together in the middle of the night last night on a creative whim, and wasn't exactly expecting to end up on ycombinator.)

I was actually complimenting you for setting the spotlight to the centre of the page by default, not criticising you. :-) What did you change now? I revisited the page and it looks the same to me.

shit... I should have read your whole comment.

Well, it was broken earlier. I guess you saw it after I fixed it. =)

you're referencing a (completely static) webpage that was last updated 9 years ago. i think "graceful degradation" by today's standards would be using fallback fonts, avoiding cutting-edge html 5 stuff, and maybe some ie6 css hacks if you really want to support that extra single-digit percent of users. html, css, javascript, and browsers have evolved enough that if you want to remain in that tiny fraction of a percentage of users that want to use noscript, you're going to wear out your fingers complaining.

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.

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.

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.

It looks great on my iPhone

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.

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

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

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

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 :)

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"?

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

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.

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

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

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

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.

Awesome work, this is amazing.

Very genius work!

Reply on news.ycombinator.com