eScapegoat — “Scraping off the sins… while you’re on the go”
Цель: собрать самые потаённые грехи человечества через дружелюбное и забавное социальное приложение
- Адаптивный дизайн для разрешений 1280×800 и выше с автоподстройкой под размер окна
- Работа на ПК, Mac и iPhone 4+
- Легковесный AJAX-движок
- Продуманное клиент-серверное взаимодействие
- Фоновый сбор данных и управление сессией
Павел сделал невозможное, создав сайт с возможностями, превосходящими все мои ожидания.
Он работал крайне быстро и в конце очень быстро подстраивался под изменения, которые моя компания захотела внести перед выпуском. На каждом этапе он сверялся со мной, чтобы убедиться, что мы находимся на одной волне.
Когда я отправил ему то, что я думал было очень подробным описанием проекта, он ответил списком из 20 вопросов в одном сообщении — и каждый был крайне важен. Это позволило ему закончить проект без того, чтобы пересматривать какие-либо моменты в процессе работы.
Я искренне надеюсь, что буду работать с ним снова.
- Связаться с владельцем для подтверждения
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.
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!
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.
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.
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.