The new Powerpuff Girls website, running alongside the global TV series launch, starts with your average day in the City of Townsville and ends with the girls battling their horrible, mean archenemy Mojo Jojo as he tries desperately to take over the site!

Submitted by: Daphne North
Twitter: @theredspace

I asked them to fill me in on the backstory on this website and here’s what they said:

When we took on the Powerpuff Girls project, we knew that in order to do the awesome series justice, it had to be unlike anything else. We created a custom JavaScript framework to help us execute our story-like desired experience, but also to help us keep our codebase as clean as possible. Our JavaScript was mostly custom, but we did leverage a handful of trusted, public libraries to help us with some tasks such as templating and routing, and made small tweaks to others to help us with our SVG animation. The menu system and page transitions are built using Canvas, and the development team used SASS and BEM to create our styles. With the app having so many visual assets, and the user experience always being of the utmost concern, we decided on using a pre-loader to ensure that the user would never see any images “pop”, nor would they experience the flash of unstyled content. We used webpack to bundle everything on the front end together. The entire experience was code reviewed in our internal company stash.

The app is hosted on an AWS EC2 instance running NodeJS to push out the translated versions to visitors. When users access the URL for their region (of 18 possible within Europe, Middle East, and Africa), we determine the language file that should be used to build the templates and then serve that version to the user. We used CloudFront edges in Frankfurt and Ireland to cache these templates for the fastest possible response times for users, who were located in the EMEA region.

The results? Not only has the site been featured on a ton of design and development websites, most recently being named Site of the Month on CSS Winner but most importantly, fans love it. Since launch, the site has Powerpuff Girls fans, both new and old, throughout Europe, Middle East, and Africa delighted and excited for the new show.