eScapegoat — “Scraping off the sins… while you’re on the go”

Цель: собрать самые потаённые грехи человечества через дружелюбное и забавное социальное приложение

Задачи:

  • Адаптивный дизайн для разрешений 1280×800 и выше с автоподстройкой под размер окна
  • Работа на ПК, Mac и iPhone 4+
  • Легковесный AJAX-движок
  • Продуманное клиент-серверное взаимодействие
  • Фоновый сбор данных и управление сессией

Technologies:

Time to atone

Everyone has his own hidden secrets. Buried inside, they poison the mind and soul. The ancients had a way to deal with this trouble. They celebrated a special day — called Yom Kippur — that is essentially dedicated to the sins of everyone. And once celebrated they would disappear (the sins — not everyone) along with two lonesome goats who are now called “scapegoats” — one was sent to desert and another — off the cliff (poor creatures).

G-dcast, a vibrant USA media company, has a high goal of promoting Jewish culture by creating original educative videos and sharing them with the world. They create movies, comics and other learning materials to familarize the society with this ancient culture in a non-obtrusive way.

However, movies and such are only one-way ticket. What if we could “mix-in” the reader, let him participate in the ancient ritual? For example, let everyone confess their sins, then pick the most funny and gloomy and say: “Guys, you have no real troubles — see?” This would certainly bring a much higher impact.

And so eScapegoat was born.

The Board of Sins

It’s unusual for me to skip the description of backend but in eScapegoat it is fairly simple and was developed in 2 days. It’s just a collection of quotes and users, sometimes linked together, sometimes not (for anonymous sinners). Each session consists of a quote-user pair and is assigned a random ID on every page load. Empty sessions are automatically cleaned with 25% chance to prevent database clutter.

Frontend, on the other hand, is the main part of the puzzle. Design was presented to me in form of PSDs and assets were in separate ready-to-use files. However, as simple as it looks on the surface incorporating all of it into the real markup was everything but trivial.

Spritesheet
Each character you see either blinks, talks, jumps or walks.

Let’s begin with the fact that characters you see are not part of background — each is a separate picture, and not a static image either but an animated GIF. This was a brilliant idea — although not mine — to have a “HTML5 movie”. Jumping and blinking characters make the experience instantly alive and you can’t get off until you’ve confessed at least once (and many people did more!).

Background scales according to your browser window’s size. Character sprites adjust their sizes and positions too so the picture looks beautiful on your MacBook with 1280×800, PC with 1920×1200, iPhone and most of big-sized Androids.

However, rare project goes as smooth as expected. eScapegoat wasn’t an exception. Miscommunication about target devices in the beginning and tight deadline with later crunch made it impossible to launch the project with perfect scaling algorithm. The picture looked great on most popular resolutions, on iPhone 4/5 and on many Androids but there was room for improvement on non-standard window sizes and smaller devices. Luckily, according to the producer this mistake is understood and the company is eager to bring this project onto tier two for the next celebration of Yom Kippur.

Which means eScapegoat will roam the Internet once again collecting your even darkest sins!

Mobile Call

As mentioned above the biggest challenge was ensuring that the site adapts to various window sizes. But in today’s world “device” is no more limited to just computer — which means that every real social application has to be mobile-friendly. And the more the better.

In case of eScapegoat this meant a completely different look. My task was to find a way to separate frontend presentation from frontend programming (done in jQuery) so that the latter could be reused for both desktop and mobile versions.

What I did was creating a special notation using CSS class names. For example, a-XXX would indicate character (like boy or goat), e-XXX — page element such as quotation bubble, -XXX — certain element trait like emphasis and so on. JavaScript would then attach to these elements and make the best use of jQuery’s document-delegated events ($(document).on(’click’, '.e-quote’)) as this is a single-page application and its contents is replaced directly ithout reloading the browser tab.

Speeding Frames

As if the above challenges were not enough I couldn’t help but invent another one. I’m fond of my skills and try to do the best job from every angle. eScapegoat uses lots of graphics — and most are heavy GIF animations which would take 2-5 seconds to load — if not more given we might have low-speed mobile visitors.

Blinking goat

The task turned out to be easier than page scaling. First of all I have merged all static assets (logos, buttons, switches, etc.) into a single PNG spritesheet which was large but saved a dozen of server requests. That’s the usual procedure and the courtesy of HTML5 Stitches.

Next came animations.

The reason why GIFs were selected over APNGs in the first place was exactly that: thanks to 1-bit alpha channel and other features GIFs are great deal more lightweight than animated PNGs. Ragged edges were dealt by first filling background with neutral color (close to the one used on real page canvas) and finally clipping without antialiasing. This made animations fairly lightweight (most below 20 KiB).

Finally, there were backgrounds. Here JPEG has shown its magic: one background (1920×1200) was just half the size of spritesheet! This eliminated the need to have different backgrounds for different screen dimensions — and using background preloading I managed to get the entire site loaded in under a few seconds with no delays down the road since all assets would load during the first dozen of seconds while user was examining the front page.

I dug into the code for the first time to start changing around some of the copy and I'm blown away. It's a work of art.