Page MenuHomePhabricator

Rewrite Wikimini's iconic top swiffy animation - to fix JavaScript and be responsive
Open, HighPublic

Description

This task is about rewriting the "Wikimini Swiffy Animation Menu", visible from https://fr.wikimini.org/ and with a preview here:

(The video contains lovely audio 🔊)

Context

That menu was originally created with Google Swiffy (when? by who?) and the tool is no longer available since ~8 years.

See https://killedbygoogle.com/
2011 - 2016
Killed over 8 years ago, Google Swiffy was a web-based tool that converted SWF files to HTML5. It was about 5 years old )

Unfortunately the result is an obscure JavaScript spaghetti mess, so every fix in that menu is more than a pain :O :O

That is why it's probably better to rewrite it.

Specifications

  • SHOULD be fun for you :)
  • SHOULD be cute/Kawaii :D https://it.wikipedia.org/wiki/Kawaii
  • MUST be JavaScript / HTML / CSS, no other weird dependency (e.g. NO Flash Player lol)
  • MUST be Free Software (source code released under Free License)
  • MUST be lightweight (current JS is 588K + 420K so we expect lower - so please don't include 10 million lines of JavaScript just to create this cute menu lol)
  • MUST work on "somehow medium" screen width - let's say at least greater than 760px
  • MUST NOT pollute basic JavaScript's globals like Function.prototype.toString
  • MUST NOT have hardcoded strings in the JavaScript library (SHOULD have an array of strings somewhere - easy to be translated)
  • MAY use jQuery version 3.7.1 (MediaWiki requires jQuery so you have it for free) - https://www.mediawiki.org/wiki/JQuery
  • MAY uses sounds :D :D (we know that browser webs do not activate sounds if you don't interact - don't worry)
  • BONUS POINT: work on smaller screens

Expected Outcome

  • A very minimal static HTML page as a proof-of-concept with your colored menu, so
  • a basic HTML container for this menu, like <div id="swiffy-menu"></div> or similar minimal container (can be discussed)
  • a JavaScript very short "activator" that activates the rendering on that HTML id like MyAmazingSwiffyRendererById('swiffy-menu') (can be discussed)
  • your business logic in JavaScript in a single file (can be discussed)
  • in short, ideally, the tabs and the contents you can see in https://fr.wikimini.org/ (if you are lucky, since not always it renders it) but with your very personal kawaii touch, just few tabs like menu items "Accueil", "Enfants", "Adultes", "Profs"
  • eventually jQuery 3.7.1 included if you need it

If you could make something like this and if you are a freelancer with a VAT number, please contact Wikimedia CH to reach Ilario Valdelli and activate you!

Or just write here a comment down :D :D Thanks

Event Timeline

ValerioBoz-WMCH updated the task description. (Show Details)

Hello,

Here is some information regarding this animation. It was originally a Flash animation. I had adapted it myself from a Flash animation purchased online (I can’t remember which website). In 2015 or 2016, Olivier and Cédric from Nixit Informatique converted it to Javascript, probably using that old Google tool mentioned by Valerio.

If the effort required to adapt this animation is too significant, maybe we could also consider a different solution, with a good designer proposing a mockup for a new header/design, preferably with the same colors, and perhaps more compatible with the new MediaWiki skins?

The current Wikimini skin dates back to 2008! So, I’m not absolutely convinced that maintaining this header is necessary if it requires too much effort. However, maintaining a skin with the same structure, the same color palette, and a reduced width (which make reading easier and better highlights the sometimes short texts written by children) seems more important to me.

Just my two cents.