How To Block Genius.com Annotations

Update, 2016.05.25: I’d recommend using Genius Blender, a simple JavaScript one-liner, over the methods described below. You can read more about the security issues surrounding Genius in my new article for the Verge.

Over the weekend I wrote a tool to break the annotation functionality of genius.com.

Slow down. You wrote a what to do what to who now?

Genius, formerly known as Rap Genius, is a web site that allows users to annotate blocks of text that appear on other sites. It’s very cool technology; you can just visit any page on the internet using a Genius redirect link, and it will show up with all sorts of additional information which has already been appended by other people. I wrote some code which lets site owners break the Genius annotations for their site, as well as a WordPress plugin which makes that code much easier to use.

If it’s cool, why do you want to break it?

There are two sides to that coin. The existence of the technology they’ve developed should be concerning to anybody who wants to put something on the internet. Not everything needs or deserves freeform annotation by users, and some things – some people – may be actively or disproportionately harmed by it. Genius has made special arrangements with some sites, such as the New York Times (which is also my employer), but hasn’t provided a way for smaller users to either opt in or opt out. This means they’re effectively forcing it on everyone.

I’m also firmly of the opinion that we’ll all be better off if functionality like this is handled by a standards body like the W3C, or a non-profit like the WikiMedia Foundation, or at least an open-source software project. Annotations are a pretty fundamental expression of the nonlinear ways we talk, write, and think, so I’m nervous about the possibility that the content and mechanisms could end up owned by a single for-profit tech startup.

Why did you do this now?

A few days ago Ella Dawson wrote a very upsetting blog post about how Genius was functionally equivalent to forcing crude, violent, or hateful user comments onto a web site she created as a safe space to write about the sensitive work she does. When she reached out to Genius for help, the solution they suggested was “don’t look at the annotations.” This bothered me, so I stayed up all night tinkering and figured out how to make a defensive tool.

more →

Have you seen my blog posts about CMJ? Y/N

New York’s annual CMJ music festival is happening again this week. I’ve written about it before via short reviews of the litany of concerts held across the city, but this time I wanted to focus on the awesome daytime programming hosted at NYU before the shows commence each evening. So, for the Village Voice, a series of mock flow charts which help* you pick the right discussion panels to attend (* = they do not actually help).

Update: these broke with the latest site relaunch :( Tuesday, October 16 Wednesday, October 17 Thursday, October 18 Friday, October 19

A few interesting footnotes here:

First, we considered putting the charts together as giant image files, which is how this sort of thing is usually done, but eventually I successfully pitched the idea of building the charts right on the web page. This makes for a much more pleasant user experience, since traversing the decision tree is just like scrolling through an article without any cropping or resizing weirdness, and the content can be highlighted and copied just like any other text. It also reconfigures itself much more cooperatively for viewing on mobile devices than a static image file would.

In a way, it’s pretty simple — essentially, we just created a whole bunch of divs and applied tons of inline CSS to them, most notably setting the background images and the padding to create the illusion of interconnected lines and arrows flowing between them. This is generally frowned upon as a web design practice, but for a single-use scenario like this it actually works quite nicely, because I didn’t have to add any external stylesheet files to the CMS and it’ll remain remarkably stable as the Voice’s site evolves in the future.

But man, that’s a lot of inline CSS! For example, generating single box to put a question in requires all these rules (many of which are duplicated because they get split across a parent and child div):

width: 500px; min-height: 150px; padding-top: 70px; background:url(“6.png”) no-repeat center top; background-color: #F9FFB2; padding: 20px; border: 1px solid #333399; text-align:center; margin: 0 50px 0 50px; font-style: italic;

Worse yet, since it’s all stored in an inline attribute, this would need to be repeated in full every time you want to generate a box of that type. And if you later need to change something — say, the images aren’t lining up quite right, or you need more vertical space for text — you’d have to go back and manually fix every instance. So in order to make this easier, I wrote a little set of scripts in PHP which dynamically applied the CSS while looping through the content I wrote for the boxes. I’ve done a fair amount of both writing and coding over the past few years, but it was really neat to finally have a project in which both were so tightly woven together.

Second, please also note the awesome visual design work by my friend John Bylander, who first brought the rough demo charts I sent him to life with subtle color and typography tweaks, and then cobbled together image files late into the night.

And finally, a nod to my sources of inspiration for this: former Village Voice music editor Rob Harvilla, who back in 2007 wrote about the rapper Mims using diagrams to thunderous acclaim, and then in 2010 covered the CMJ panels with a series of snarky comments not unlike my own Q&A content here. And then there’s also the extensive timeline of future events from sci-fi movies as compiled by the Awl, where a close examination of the markup helped me figure out how best to approach the CSS here.

See you next year, I hope.