Seasonal emojis for your personal website

I change the emojis next to my website name in the top right corner of my website and on my home page during certain events. This December, I changed the coffee emoji to a snowflake. During the month of Halloween, I changed the emoji to a pumpkin. I enjoyed making these changes manually, but I would regularly forget to change the emoji back to a coffee mug after an event was over. That is why you may have noticed my website showed a pumpkin emoji until the end of November (!).

Before Christmas, I decided to work on a small project that would automatically change the emoji on my website. I am calling this project seasonal.js. Using seasonal.js, you can change all of the emojis on a web page that use a pre-defined CSS class. seasonal.js contains a default JSON object of various events that are relevant to me, from my birthday (assigned a party emoji) to Boxing Day (assigned a box emoji). You can change this object to include events that you want to celebrate on your website.

Here's an example of the project in action:

In the month of December, seasonal.js updates specified emoji to a snowflake every day, unless another emoji is specified for a specific day in December. I plan to make an amendment so that monthly changes are easier to apply to your website. Based on my experience forgetting to update my Halloween emoji until the end of November, it seems prudent to have a rule that applies the Halloween emoji to my website only in the month of October.

To install seasonal.js, download the script from Github and add the following JavaScript code to the bottom of the </head> tag on the web pages where you want to use the script:

Then, add the seasonal-emoji CSS class to any element whose emojis you want to replace. The script will replace all the text in the element, so make sure you wrap your emojis up in a span tag.

Finally, read the comments in the script and update your rules. If you don't want a snowflake in December, you can remove that rule; if you want to add your own birthday, add a rule!

Adding a rule to apply an emoji for a day is as simple as modifying the seasonalEmojiDict variable. The following rule applies a Christmas tree emoji on Christmas Day:

var seasonalEmojiDict = {
    '12-25': '🎄',
};

As always, the code for this project is open source and released into the public domain.

Also posted on IndieNews.

Tagged in seasons, indieweb.