[RFC] Halloween easter egg!

[seshrs]

TLDR: This PR introduces a set of temporary "Halloween" easter eggs that are only enabled between Oct. 25 and Nov. 5. (The easter egg can be activated any time via a URL "hack".)

Context

I've been meaning to insert a couple of easter eggs in Primer Spec for a while now. While it's probably too late to do something for April 1, 2022, I thought I'd start by adding a few Halloween easter eggs (including a new limited-edition "Spooky" theme!)

My design goals:

• Easter eggs should not change the appearance of the page without user consent. (After all, Primer Spec is used to render project specs, which are typically a significant part of the course grade — that responsibility shouldn't be taken lightly.)
  • Exception: Only the icons in the Topbar (sidebar-toggle, settings-toggle) may be modified to improve the discoverability of the Easter egg.
  • Currently, I think the best way for users to opt-in to the Easter egg is by registering a new subtheme.
• The easter egg business logic (even determining whether the easter egg should be displayed) should not block the page load and should not complicate the logic of the core Primer Spec components.
  • Hence, easter eggs are lazily-loaded via a new "conditional plugins" framework that is downloaded and executed separately.
• It should be possible to enable the easter egg any time.
  • The new "conditional plugin" framework allows enabling the plugins via URL query params. For instance, the halloween plugin can be enabled by adding ?enable_halloween=1 to any Primer Spec page.
  • Just after Halloween, a message is displayed in the browser's dev console about the URL trick above. That way, curious students can discover the hack!

Validation

Check out the new Halloween Easter egg by adding ?enable_halloween=1 to any Primer Spec page in the preview website for this PR. For instance: https://preview.sesh.rs/previews/eecs485staff/primer-spec/157/?enable_halloween=1

Here are some screenshots:

• On page load, the Topbar icons are modified.

  

• New temporary subtheme in the Settings pane

  

• 'Spooky' theme (dark-only theme, and it includes some spooky fonts!)

  

• Double-clicking on the page causes a ghost to appear!

  Screen.Recording.2022-04-25.at.11.08.23.PM.mov

• Every few seconds, a ghostly emoji peaks from the left/right margin of the page. Clicking on it causes it to randomly fly across the page!

  Screen.Recording.2022-04-25.at.11.09.46.PM.mov

Feedback welcome

I'd welcome any feedback about the Halloween easter egg (or any easter egg idea really):

• Do you think the icon-changes are too distracting?
• Do you have ideas for other colors we could change in the 'Spooky' subtheme?
• ...any other ideas?

[github-actions]

The spec from this PR is available at https://preview.sesh.rs/previews/eecs485staff/primer-spec/157/.

^{(Available until Sat May 28 2022.)}

[awdeorio]

Super cool idea! What are your thoughts about making this opt-in vs. opt-out?

[seshrs]

Super cool idea! What are your thoughts about making this opt-in vs. opt-out?

Most of the Easter-eggs in this PR are opt-in (you have to choose the “Spooky” theme). The only auto-opt-in Easter egg is updating the icons at the top of the page. I personally think it’s not intrusive, but I’m open to hearing your thoughts on if it’s too distracting.

If those icon-changes are too distracting, I’m wondering how else the “Spooky” theme will be discovered. How would students know that the temporary theme is available?

[awdeorio]

I don't think this is too distracting at all. If you'd like, you could create issues in the relevant EECS 485 repos to opt-in to all easter eggs!

[seshrs]

I don't think this is too distracting at all. If you'd like, you could create issues in the relevant EECS 485 repos to opt-in to all easter eggs!

OH you meant that repos should opt-in to the Easter eggs?

I initially thought that I could automatically enable this entire Easter egg on all Primer Spec pages. Do you think that’s a bit heavy-handed, and that courses should opt-in to Easter eggs? (I’m beginning to subscribe to the opt-in idea too, but I need to give it more thought.)

[awdeorio]

I think that it's totally fine to enable easter eggs automatically!

[seshrs]

I changed the spooky body font to something more readable. It isn't really spooky any more, but I think that's okay. (Thanks for the suggestion for legibility @bellakiminsun!)

I also added a new easter egg animation with ghostly emoji peaking out of the margins. If you click it, it will randomly fly across the page!

[seshrs]

When testing on a Windows machine, it looks like the theme preview for the spooky theme looks wonky. I'll need to tinker around with this more.

[seshrs]

With 44328ae, the theme preview now looks correct (tested on Chrome 100 on Windows 11 via Browserstack):