When the default audience is always you, it is hard to realize when there are others who are not included in that default, even when it can be so obvious. As a male, I come across articles written all the time assuming I am the reader: "He does...", "He listened...", "He showed...", etc. It is almost always a "he". The assumed reader is almost always a man.
Without going into all the ways that might adversely impact people who are not men, when they never see themselves reflected in the world around them, I thought it might be interesting to create a simple application to highlight exactly this problem.
I built out a Node.js application utilizing Next.js and React to dynamically highlight gendered pronouns in any given text as it is being typed into the text box.
The application consists of a single page, index.js, that has a few components that breakout the functionality into smaller parts. As the user is typing into the textarea the text is being saved in local state. That state is being passed to an EvalText component that presents it with some CSS styling in between <span></span> tags.
Within the EvalText component each word of the input is being evaluated against three separate arrays: male, female and gender neutral pronouns. A specific CSS styling is applied to the word if it is found in either the male or female pronouns array. Right now, nothing is being done with the gender neutral pronouns, but there is room there to do some other styling as well.
I have put up the code in a public Github repository and would love contributions.
The purpose of this project is to highlight in the texts we create and the texts we read the gender biases inherent within them. How often do we assume the default person is a he or a she? The project takes any text inputted into the text area and auto highlights every gendered pronoun with a stereotypical "gendered color". (Note: I do not believe there are such things as "gendered colors," but nonetheless, defaulting to pink for female pronouns and blue for male pronouns makes it visually easy for the user to see right away which ones they are using.)
A working example of this project can be found on online.
Installation
To get started with a local development build of this project simply clone it to your computer, install and run:
git clone https://github.com/benhayehudi/pronoun_highlighter.git
npm install
npm run dev
There are a few open issues already of items I identified, specifically:
Making the gender pronoun lists more comprehensive
Responsive styling
Adding counters to the page to increment/decrement # of each type of pronoun dynamically
Additionally, I welcome new features or other improvements. I wrote this during my lunch break so I am sure it could benefit from some love and attention!
Last week, I blogged about getting started with Next.js in 5 minutes and it was a great experience to build out an idea that I have had for a long time using the framework. In a world where I am just about always the default audience, it is meaningful to do something, albeit a small thing, but something all the same, to help bring attention to that issue.
Ben Greenberg
