Easter Eggs

I love easter eggs. I don’t mean the colorful ones. I mean hidden surprises in apps. Here’s a few of my favorites that I’ve made throughout the years.

Skittles

During the company summit the CTO made an analogy comparing the size of our “big data” to a bag of skittles. It became a running joke. His office even got pranked with every square inch covered with skittles. I added an easter egg to our UI that would show raining skittles whenever the user typed the word “skittles”.

 

Christmas Lights

Once a year on December 25th, a string of lights show up on the top of publisher.spotxchange.com. I made sure that it wouldn’t interfere with navigation. (Make sure fun doesn’t cause a high or critical ticket. ha.)

 

lights.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
// Inspired by https://github.com/iamshaunjp/CSS-Tips-and-Tricks/blob/01-christmas-lights
class Lights {

    private bulbWidth: number = 8;
    private bulbHeight: number  = 15;
    private bulbSpacing: number = 20;
    private bulbSpread: number = 3;
    private oddRGB: string = [255, 65, 65].join(',');
    private evenRGB: string = [190, 255, 42].join(',');

    
    constructor() {
        this.addStyles();
        this.addLights();
    }

    private addStyles(): void {
        const styleID : string = "christmasLightsStyles";
        if (!document.getElementById(styleID)) {
            let css : string = `
#lights-wire {
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    z-index: 9999;
    margin: -15px 0 0 0;
    padding: 0;
    pointer-events: none;
    width: 100%;
    top: 8px;
}
#lights-wire li {
    position: relative;
    animation-fill-mode: both; 
    animation-iteration-count:infinite;
    list-style: none;
    padding: 0;
    width: ${this.bulbWidth}px;
    height: ${this.bulbHeight}px;
    border-radius: 50%;
    margin: ${this.bulbSpacing / 2}px;
    display: inline-block;
    box-shadow: 0px ${this.bulbHeight / 6}px ${this.bulbWidth * 2}px ${this.bulbSpread}px rgba(0,247,165,1);
    animation-name: even-flash;
    animation-duration: 2s;
}
#lights-wire li:nth-child(odd){
    animation-name: odd-flash;
}
#lights-wire li:after {
    content: "";
    top: -2px;
    left: 2px;
    position: absolute;
    width: 32px;
    height: 10px;
    border-top: solid #222 2px;
    border-radius: 50%;
}
#lights-wire li:before {
    content: "";
    position: absolute;
    background: #222;
    width: 6px;
    height: 7px;
    border-radius: 2px;
    top: -4px;
    left: 1px;
}
#lights-wire li:last-child:after {
    content: none;
}
    
@keyframes even-flash {
    0%, 100% {
        background: rgba(${this.evenRGB},1);
        box-shadow: 0px 2px 20px 4px rgba(${this.evenRGB},1);
    }
    50% {
        background: rgba(${this.evenRGB},0.5);
        box-shadow: 0px 2px 20px 4px rgba(${this.evenRGB},0.3);
    }
}

@keyframes odd-flash {
    50% {
        background: rgba(${this.oddRGB},1);
        box-shadow: 0px 2px 20px 4px rgba(${this.oddRGB},1);
    }
    0%,100% {
        background: rgba(${this.oddRGB},0.5);
        box-shadow: 0px 2px 20px 4px rgba(${this.oddRGB},0.3);
    }
}`;

            let elStyle : HTMLStyleElement = document.createElement('style') as HTMLStyleElement;
            elStyle.id = styleID;

            elStyle.innerHTML = css;
            document.getElementsByTagName('head')[0].appendChild(elStyle);
        }
    }

    private addLights(): void {
        let bulbs: number = Math.floor(window.innerWidth / this.bulbWidth * 1.5);

        let $lights : JQuery = jQuery(
`<ul id="lights-wire">
${Array(bulbs).join('<li></li>')}
</ul>`) as JQuery;

        $lights.appendTo('body');
    }
}

/* istanbul ignore next */
const now: Date = new Date();
/* istanbul ignore next */
if (now.getDate() === 25 && now.getMonth() === 12 - 1) {
    // delaying 1 sec to give the spinner time to show.
    setTimeout(() => {
        // tslint:disable-next-line:no-unused-expression
        new Lights();
    }, 1000);
}

Breakout Game

This is a throwback to Atari days when there was a block breaking game called Breakout. For about a year, we had a UI that had a group of large checkboxes for configurations. I called it the “wall of checkboxes”, which gave me the idea… Why not make it a game to break the boxes? This one was a little hard to trigger. To activate, the user had to triple click on a disabled checkbox.

Play for yourself and checkout the source code.