Free/Open SOPA Blackout Protest Template
- published:
- 2012.01.17
- topics:
- css
- javascript
- tools
CISPA Blackout? https://github.com/zachstronaut/cispa-blackout
SOPA and PIPA are terrible bills in the US Congress, and on January 18 the web is going went dark to protest.
Copyright theft is already illegal. Why is Congress wasting our time with this? If passed into law, these bills will lead to censorship without due process of law. They protect the rights of multi-billion-dollar corporations, but they don't protect the rights of the average web publisher. Join the fight!
Why Did I Make This Template?
When I heard about how the web was going dark (including sites like Reddit and Wikipedia!), I felt inspired to make an interactive blackout template that played off the theme of "going dark." It was a way for me to channel my frustration with these bills creatively. Some artists paint. I guess I write code. (I actually repurposed one of my old demos for this.)
I made the code public domain and put it up on Github so people could fork it and improve it. You are welcome to use it, and I require no attribution. [Technical note: Check out this post about 503 HTTP headers.]
And Then What Happened? (Going Viral)
I submitted my template to BoingBoing in the middle of the night on Sat, Jan 14 right after putting it together, and Corey Doctorow wrote me back with some good ideas for adding more information to the design so that people would be better informed about the issue. He posted my template on Sunday. It then got picked up by YCombinator News, showing up in their Twitter feed and front page. It started to pick up some buzz on Twitter. On Tuesday, I talked on the phone with a really kind writer for Fast Company. Mashable wrote about it, too.
I thought the response to my template was totally crazy and unbelievable at this point. I had over 50,000 people come to view it from Sunday to Tuesday. And there is nothing quite like that many people coming to see your downloadable template to make you second guess your code! Sorry if you had any problems! I thought there would be quite a few sites using my template during the black out on Wednesday, but I really had no idea just how much my template would resonate with people...
What Has Been the Impact? (Holy Crap!)
At midnight Tuesday night/Wednesday morning I suddenly realized that PostSecret had forwarded ALL of their traffic to my site (rather than put my template on their site). My traffic spiked. I tried tweeting to them about it. No luck. I went to bed.
Wednesday morning when I got up, I awoke to dozens of emails and tweets. My STOP SOPA template was on greenpeace.org in multiple languages! It was being used on michaelmoore.com! The EFF worked my spotlight into their background! There was coverage in the Washington Post and on ZDNet! Several web development shops in Minneapolis where I live had used my template to black out. (Thanks Clockwork, Azul7, Sevnthsin for supporting the cause!)
I think the craziest moment for me was when I tried to go to caniuse.com because I actually needed to look up a CSS property, and I ran into my own blackout template! Hoist by my own petard.
I thought 50,000 visitors was insane on Tuesday night. By the end of the day Wednesday, this had skyrocketed to a shocking number over 200,000 (a good half of them were coming from PostSecret!) Between Greenpeace and Michael Moore's sites this number is easily doubled, meaning there's at least 500,000 people that saw my template during the blackout. And that's just the ones I know about.
Google identified about 4,500 sites that used my template. This is just the sites that Google crawled on Wednesday while they were blacked out, and this also excludes sites that blocked search engines or served up a 503 error. My template was forked by different people into over 50 different versions on GitHub!
I had no idea that my template would resonate so much with people. I'm really happy to think that I may have helped raise awareness or increase action. Does open-source hacktivism work?
There's been tremendous coverage of SOPA/PIPA in the news because of the blackout, so the protest has been a tremendous PR success for we who oppose these bad bills. Twitter saw millions and millions of tweets on the topic on Wednesday. By 10pm on Wednesday, 18 Senators dropped support for PIPA.
How Did You Code it? (Warning: Nerd Talk)
Hey, you are still reading?! You are my kind of peeps! Let me tell you a bit about the HTML/CSS/JavaScript used to create the template and the realtime lighting/shadows effect.
The page is just a simple HTML page. I positioned a big div on top of the content with a CSS3 radial gradient to create the spotlight (black around the edges, and transparent in the middle). One key was using pointer-events: none; on that spotlight so that it didn't block all the mouse events for the content below it (the links). The shadows aren't really being cast by some light source. It is just a CSS box-shadow and text-shadow I've applied to the HTML elements in the page. I used JavaScript to capture the mouse and move the spotlight in one direction while moving the position of these CSS shadows in opposition. The final bit of magic is calculating the blur on the CSS shadows based on the distance of the "spot light" from the content that is "casting" shadows.
If you view source you will see it is not very many lines of code.
Conclusion
Articles need a conclusion, right? Thanks to all of you who joined the fight against SOPA on January 18. I think we have been heard. There's still a fight ahead of us, and this isn't over. Changing our websites and tweeting won't be enough. We need to call and write our representatives to tell them that we oppose these bills. We need to speak with our votes. We need to fund the fight against these bills. (See also: WeTheLobby) Remember that the people who want to make SOPA/PIPA law are spending a TON of money to try to make it happen.