The Powerpuff Girls

http://thepowerpuffgirls.cartoonnetwork.co.uk/

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.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

News & Articles

The Essential Guide to Getting Started on Freelance Writing

The Essential Guide to Getting Started on Freelance Writing

Explore the lucrative and fulfilling world of freelance writing with our essential guide. Learn about specialties like blogging, social media, article, and technical writing. Build a portfolio, find work, set up your business, and discover the potential earnings. Embrace the freedom of working from home and follow tips for success in your dream career.

Securing Your Website: A DevOps Security Checklist

Securing Your Website: A DevOps Security Checklist

Learn how to secure your website with a comprehensive DevOps checklist. Dive into SSL/TLS encryption, password practices, and more. Discover the power of Content Security Policy and safeguard your online presence effectively.