Adding an Easter Egg to Your App
A Zone Leader talks about how he added a simple "Easter Egg" to an application he built for a family member.
Join the DZone community and get the full member experience.Join For Free
Those growing up in North America likely have a memory of the Easter Bunny — a mythical creature that magically left baskets or eggs filled with prizes for children. The concept of an Easter Egg Hunt pairs a group of children with a large area filled with hidden eggs. In some cases, the child with the most eggs found wins a prize. In other cases, the child which finds the single "golden egg" wins a prize too.
As you might expect, this idea of putting undocumented features (Easter Eggs) into a software program was destined to happen. Over the years, I have found myself seeking out such hidden gems and finally decided to add one into my mother-in-law's application as noted in my "New Application Journey" series.
Determining the Egg
For me, determining the content of the Easter Egg was simple. I wanted to replace the link behind the logo of the application to return a modal filled with random content from a collection of Instagram accounts. Once found, end-users of the application (which is basically just my mother-in-law) could see a random photo from one of our family members just by clicking the top left corner of her application:
For the content retrieval of the Easter Egg, I decided I would use the Spring Boot RESTful API to create
EasterEggData to be used by the Angular client:
The Angular client would then call the
/easterEgg URI via a controller in the API project:
On the client-side, I introduced a simple
EasterEggData on the client-side:
Then, I wired the logo link to the following component:
With the basic wiring in place, I just needed to create the service-level work to populate the EasterEggData object. Without revealing the source of my personal data, the core processing logic is shown below:
In the example above, I am actually using
RandomGenerator as discussed in my "Building a Random Generator" series. In this case, there is a
List<InstagramData> that is being retrieved. The
randomize() method will return one item, at random, from this list and convert it to an
When my mother-in-law clicks the logo link of her application, she will now see something like this:
Clicking the logo again will show something like this:
Every time the modal is requested in Angular, the image, caption, and original post date are all from a random Instagram post from one of our family members' accounts. My mother-in-law doesn't get out to Instagram very often, so this gives her a quick way to check in to see what she may have missed.
Have a really great day!
Opinions expressed by DZone contributors are their own.