This is a guest post by Elizabeth Yalkut and Betsy Haibel. Elizabeth is a front-end developer and writer in New York City; she is a A Very Uncommon Cook. Betsy is a Rubyist who wishes that anarchist punks and open-source geeks talked to each other more. She can be found on the internet at a usually-silly tumblr and a usually-less-silly github account. Together, they are the Irregular Gentlewomen.

This post originally appeared on Elizabeth’s tumblr.

The Irregular Gentlewomen are proud to release version 1.0 of the Interactive Feminist Bingo Card! An open-source project (CC BY-NC-SA), the Interactive Feminist Bingo Card is meant to be an easy way for commenters in online feminist venues to identify sexist and misogynistic trolls, provide validation of a commenter’s judgement that a troll is genuinely trolling and not just clueless, and suggest responses to some of the remarks the troll has made.

Bingo cards are common in the geek feminist community; there are several existing ones linked in the Geek Feminism wiki, and Betsy & I relied on them heavily while creating the bingo card. We’ve both used those existing cards when participating in or reading passionate exchanges in feminist spaces, and felt the need for a card which collated the contents of many of the existing cards and made the game aspect of the card more true to life. (We’re not aware of any other interactive bingo cards in the social justice blogosphere; the cards we have encountered have all been either table-based or images, many of the latter very pretty.)

There are dozens of different squares in the many existing cards, which sometimes made it frustrating to play using one card — “That comment should get me bingo, but it’s not on the card!”

The color scheme is the “girly girl” palette from earlgrey at colorlovers, and the fonts are Emily’s Candy and Miss Fajardose; the names were a part of our decision-making process. We rejected at least one font because the name included a masculine reference. This bingo card is, in part, about embracing the female and the feminine and the feminist and not being ashamed of those things — so we looked for color schemes tagged “girly,” with lots of pink in them, we filtered through the display fonts at Google Fonts to find ones with girls’ names and curlicues and hearts over the i’s. But pink and swirly and all of those quote-unquote traditionally feminine qualities aren’t the only way of being feminine, much less being female, and certainly not the only way of being feminist (in fact, it can be argued that embracing the girly and feminine is a very specific kind of feminism, very third-wave feminism, which isn’t always accepted as feminism). We wanted to make sure to include some iconic feminist references, which is why, upon clicking a square, the text transforms into white-on-red with a black-and-white background — it’s meant to evoke the Barbara Kruger (your body is a battleground) photograph, which was designed as a poster for the massive pro-choice march that took place on April 9, 1989 in Washington, D.C. I would have loved to make that reference more explicit by using the actual face in the Kruger, or treating a stock image similarly, but we were concerned about copyright issues. Hence, the classic “female” symbol is the background of the “used” squares. (Yeah, we probably could have gotten away with a fair use argument, but that was just not the hill we wanted to die on.)

The animation is there for a few reasons: one, because this project was partially a lab space for us to push the boundaries of our code knowledge, and I haven’t gotten a chance to mess around with CSS animations and transitions and whatnot at work much; two, because animation on a web site, unless very discreet, is the kind of stuff that gets disparaged as the realm of amateurs*, the kind of thing you would have seen on a Geocities site, the sort of visual flourish which would only appeal to (and imagine this said in a tone of deep contempt) girls. Obviously, we regard this as bullshit. Animation is a key part of a lot of things that are not seen as girly — where, for example, would video games be without animation? So we wanted to juxtapose the very femininely-styled text, in a feminist context, against the kind of powerful effects which are either sneered at as unsubtle when it’s in a context coded as female or lauded as creative and daring when in a context coded as male. How well we succeeded, well, that’s for the audience to decide. The code is available on github, after all, and if you hate the animations, you can fork it and strip the CSS.

(Also, I really like the zoomy effect. VROOM VROOM FEMINISM.)

In general, we strongly encourage people to fork the project! One of our design goals was ensuring that the content-source files, particularly, would be easy to edit — hopefully, even easy to edit for the less technical. We hope that other people will add to our list of trollish comments & rebuttals, and perhaps even that our code can provide an engine for other anti-oppression bingo cards. (While we’d love to see, for example, anti-racist or anti-cissexist bingo cards, we felt that as white cis women from privileged economic backgrounds we would not be the right people to make them.)

Good luck never getting bingo, and if you have to, we hope the kitten video (oh, did we mention that if you win, you get a kitten video? Thanks to Skud and Emily for that idea.) helps balm your soul.

* See, for example, Vitaly Friedman’s article, in which he remarks, “designers of CSS-based websites tend to avoid extreme interactivity and instead use subtle, refined effects sparingly”. And yet Anthony Calzadilla‘s Spiderman animation, later linked in Friedman’s Smashing Magazine as an example of CSS3 animation, is about as in-your-face as it can get.