Josh Sherman
No, this post is not some rant about non-binary genders. I’m actually referring to the trials and tribulations that I went through to implement a third gender option on my social network. The title is an homage to the CSS-Tricks post titled Features Are Complicated. This isn’t some dramatization, it’s about that time that I added, removed and eventually re-added a non-binary gender option from my social networking platform.
The story starts out in April of 2011 when I was originally planning the site out. “How cool would it be to add a third gender option for people that are transitioning?” Great idea, I’ll just include “In Between” on the sign up and user edit forms. OH! I’ll make the user text color green since boys were already blue and girls were pink.
The option was actually well received, even if at this point I wonder if the term “in between” may actually be offensive. In the database the option was “O” for “Other”, also offensive :/ Keep in mind, this was during a time before Facebook was giving out infinity-options for gender and obviously before my understanding of these things as a Cisgender.
To make the username green, I was simply including some logic along with the link to set the CSS class as the gender:
<a href="/' . $username . '" class="' . $gender . '">$username</a>
NO BIG DEAL! This site is small and I had no idea that I would still be around 4 years later. This was fine under the circumstances, but as the site grew and expanded, I found myself just copying and pasting that logic into all of the other page templates. This later expanded into having user avatar’s colored the same way. Don’t be that @joshtronic.
Somewhere along the line I felt like it was better to stop hardcoding the gender value for the class name and move to using the names of the colors. I couldn’t tell you why that seemed like a great idea at the time, but that switch statement almost made it’s rounds into my templates:
switch ($gender) {
case 'M': $class = 'blue'; break;
case 'F': $class = 'pink'; break;
case 'O': $class = 'green'; break;
}
Aside from the fact that I was duplicating code like it was a design pattern, I was driving the failboat for sure. From the fact that I put “M” first instead of simply alphabetizing, to the way I lined those cases. Ugh, I really wish I could figure out what I was thinking. In my defense, the original site was built while drinking quite a bit of Absinthe ;)
So that gets us to June 2011, shortly after that last great decision, I had built a chat system. Remember how I said the usernames were gender-colored? The usernames in chat had the same logic. The observation that I started to make once chat was up was that users were changing their gender to be “in between” so their username would show up as green in chat.
It just seemed like people were exploiting the option that I felt was progressive at the time. I let this go for about a month before I made the drastic decision to simply drop the third gender. This on July 3rd, 2011 I authored this commit:
The change pissed some people off, but the loud minority were the people that had their green username stripped from chat, not necessarily any non-binary users. I didn’t necessarily like taking the option down, but I felt it was the best choice as I felt it was more offensive for binary folks to be exploiting gender for a username color.
“Why not just get rid of the username color entirely? You do realize you’re perpetuating stereotypical gender roles?” Why not? Because I didn’t want to. I liked having gender-specific colors. I felt that it made the site / platform unique in a world of blue and white. I still stand by these feels.
Let’s fast forward to 2015. Facebook has added something like 70+ gender (multi-select) options if you set your gender as “custom”. My site is still doing it’s thing while living in the dark ages without a mobile app or a non-binary gender option.
The thing is, I wanted to add a new option, maybe even go all out like Facebook with a bunch of flexibility. Side note, I think it should just be free-form as to not offend people by not having some new gender option that just happened. So why not just do it? Because of all of those shitty decisions and duplicated code that I had laying around.
Let’s back it back up to 2012 or 2013. I was working on reverse engineering a daily deal platform after an acquisition at CrowdSavings. I’m browsing the database and what did I see? A table named “gender”, of course. I laughed so fucking hard because it just seemed like overkill. A whole table for just 2 rows? Over-engineer much?
I realize now how smart of an idea that was, or at least keeping all of your gender options and logic in a single file so they can be recalled easier. Just because something has a finite set of options today, doesn’t mean it won’t change in the future. It’s a bit early in the story, but that’s the moral of the story!
Here we are in the present. For the last few years I’ve gotten the semi-regular support request asking for a non-binary gender option. I added to the FAQ that it’s not that simple of a change for us and we will address it eventually. I even went as far as to rename “gender” to “sex” on the site as well as dropping any pronouns. Not sure how it happened, but there was only one “he/she” in the entire codebase!
Last January I had decided that adding a non-binary gender option was a must-have update to the platform based on how regularly we were receiving the request. I set out to “do it right” this time which effectively meant that I would need to consolidate any place where the username and user avatar were included on the templates.
The number of places where username links and avatar links existed seemed about 3x the number of gender options that Facebook has. The process took nearly 3 weeks to complete. Gotta remember, I have an awesome job so this was just night and weekend effort. ALL OF MY NIGHT AND WEEKEND TIME.
There was something like 200 touch points that needed addressing. Fortunately some of the leg work was already done when I started to consolidate the media objects into one central place. The work was mind-numbingly painful. It’s 50 or so hours of my life that I will never get back. But it was worth it, as we could finally add a non-binary gender option!
On March 15th, 2015 I finished up the new search page and deployed the code that included the “Genderqueer” option. “Wait, WUT, you called it that?” Yes, for a minute at least. After some searching and reading up on Wikipedia, I had come to the conclusion that if I was going to include a single option, it would be “genderqueer” because it is defined as the catch-all for non-binary genders.
It wasn’t meant to be offensive, it seemed like the most correct choice, more so than “gender-fluid”, which redirected to “genderqueer” on Wikipedia. Instead of green, the new gender color was to be purple. It’s a blend of the pink and blue colors that we already use.
The initial feedback started to roll in, in 3 distinct varieties:
- Praise for finally adding the option
- Bitching about the shade of purple
- People claiming it was offensive because they do not want to be classified as “queer”
My wife actually warned me about the negative connotation. I was stubborn about it initially but figured may as well change it while it’s still early. The option is now officially “non-binary” but it will remain as “GQ” in the database for now. Profiles simply omit a gender when you select that option. Lesson learned.
Since the long awaited re-addition of a non-binary gender option I have been flooded with feedback. Sadly, most of the feedback is from people bitching because “it’s already hard enough to tell the boys and girls apart”. Yet somehow I’m the offensive one, amirite? The kicker is the people barking and they have their age set to 100+. HOW DARE YOU!
Features really are complicated. Non-binary gender options carry even more weight as it’s social issue that has a lot more to do with equality then it does with text color. I still think the decision to include the new option was the right one. I’ve even future proofed a bit in case we need to go full Facebook on it.
