Need a card for a gender reveal party? Emoji Gender Reveal has you covered with the latest in emoji gender technology! Just click the card to randomly pick a new emoji gender!
Play with it live on Glitch π
Click on the title card to generate a new random emoji gender reveal.
Not all emoji are permitted on this app:
- Emoji that reference oppressive structures (such as POLICE OFFICER or CUSTOMS) are not allowed.
- Emoji that are too close to a real gender reveal (such as BOY or WOMAN) aren't funny and thus are not allowed.
These restrictions are defined in the emojiFilter()
function in src/emojifuncs.js
. If you find additional emoji that should not be used according to those criteria, submit an issue on GitHub with your reasoning, and it will be considered.
Root directory
The Express routing server, the origin of all the behavior of this app. Defines 3 routes:
- A main route
/
which returns the main app page. - An emoji route
/emoji
which returns a random emoji (saves the browser from having to download the whole list at the beginning). - A puppeteer route
/puppeteer
which returns a simplified app page suitable for automated retrieval. - A tweeting route, defined by the
tweetEndpoint
environment variable in.env
, which causes a tweet to be posted to the configured Twitter account.
Environment variable definition file. See Twitter bot usage for details.
This folder contains the code and assets that will get packaged by Rollup for delivery to the user's browser.
The client.*
files are files that are used to build the main page of the web app that users will see.
The puppeteer.*
files are files that are used to build the page of the web app that a headless puppeteer
instance of Chromium will use to retrieve the generated emoji image for the Twitter bot.
This file contains all the functions that draw an image onto a <canvas>
context
This file contains miscellaneous helper functions for other files to import when needed.
These Node.js scripts are where the Twitter bot operation lives. They are not inluded in Rollup.
This file contains the function twitterBotHandlerGenerator
which handles an Express request to the Twitter bot route (defined in server.js
).
This file contains the functions necessary to automatically extract the generated emoji gender reveal image and associated metadata from the puppeteer route for the Twitter bot.
This file contains the functions for uploading media and posting a Tweet.
Node.js and other scripts and files related to processing emoji.
This file contains helper functions focused on manipulating lists of emoji.
A Python script used for creating a JSON file of all fully-qualified emoji from the Unicode 13.0 emoji-test.txt file.
This file is a JSON array of all the fully-qualified emoji from Unicode 13.0 and is the source of the emoji code points and descriptions that this app uses.
[
[
"\ud83d\ude00",
{
"char": "\ud83d\ude00",
"descr": "grinning face"
}
],
...
]
It is an array of key-value pairs, with the key being the string of the emoji, and the value being an object with the properties char
(Unicode string of the emoji) and descr
(the emoji's official description in lower-case). This file is generated using the emoji_libs/emoji_test_extractor.py
script from Unicode's emoji-test.txt file.
git clone https://github.com/noelleleigh/emoji-gender-reveal.git
cd emoji-gender-reveal
Specify the port you want it to run on in an .env
file. Example:
PORT=8080
Then run
npm install
npm start
Once the build is complete and the server has started, open http://localhost:8080 (replace 8080
with whatever port you chose).
To use this as a Twitter bot, fill in the necessary information in a .env
file in the project root.
Here is a sample .env
template you can populate:
tweetEndpoint=
TWITTER_CONSUMER_KEY=
TWITTER_CONSUMER_SECRET=
TWITTER_ACCESS_TOKEN_KEY=
TWITTER_ACCESS_TOKEN_SECRET=
tweetEndpoint
is the route that when visited, will trigger a tweet to be posted. If you're hosting this on a publicly accessible server, you should use a hard-to-guess name to prevent abuse.- For
TWITTER_*
values, see the Authentication: Access Tokens guide on the Twitter developer documentation. Since this bot posts to an account, it needs a consumer to act on behalf of an account (the bot account).
Here's what that would look like filled out (with dummy values):
tweetEndpoint=k5jh32g5k2j
TWITTER_CONSUMER_KEY=weuyro234y2
TWITTER_CONSUMER_SECRET=sadGAS435DGAERgegsegASgAESg3
TWITTER_ACCESS_TOKEN_KEY=12342341235-sdgaEAFF3453DWF
TWITTER_ACCESS_TOKEN_SECRET=cxmnbvsljrdblmjhb43jhb452
Once these values are filled out, save the file and run npm start
to start the server. HTTP GET requests to the tweetEndpoint
you specified will post a tweet with an image and return a JSON object of the response from Twitter. If you want the bot to post automatically, you'll need to setup a cron job to hit your server on a regular interval.
If you want to generate a specific emoji, you can use the emoji
query parameter. If you want to test the tweet endpoint without actually posting a real tweet, you can use the noTweet=true
query parameter.
Example (pretend to tweet the robot emoji):
http://localhost:8080/k5jh32g5k2j?emoji=π€&noTweet=true
- Add support for HTTP authentication on the bot endpoint.
- Extract out the disallowed emoji list to make it easily editable.
- Add loading indicators for slow connections.
- Improve experience on screen readers.
- twemoji - Emoji image library
- node-twitter - Node.js library for interacting with Twitter's API.
- Rollup - JavaScript module bundler