icon sc-linkedin logo of codepen-icon logo of github-icon youtube play button

notes by Adam Sullovey

web & mobile application developer
practicing in Toronto, ON

Unboxing the Wagon – peeking at code

A media buy on the Weather Channel website caught my eye. I want to see what makes http://www.thewagonunboxed.com/ tick.

Meta Tags

Nice to see Open Graph tags. I’m curious about how the html tag’s data attributes are used. Also good to see most of the JS isn’t loaded up here.




  
  
  
  
  
    THE WAGON. ÜNBOXED.
  
    
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

Old browser? Nope!

Good call! Send users with weak browsers to another site. Beats building a fallback that barely delivers a good experience.

 if ( ! Modernizr.canvas || ! Modernizr.backgroundsize) {
    capable = false;
    window.location.replace(‘http://www.volvocars.com/en-ca/Pages/default.aspx');
  }

Google Analytics Data attributes?

I did not know this was a thing. Cool jquery plugin @ https://github.com/JimBobSquarePants/jQuery-Google-Analytics

Enter Now

Pixi.js

Here’s another library I didn’t know about. It is for making fast 2D WebGL things with JS. Nice demos! https://github.com/GoodBoyDigital/pixi.js/

The Meat

Good on the team for minifying their JS in http://volvo.cachefly.net/js/v60.min.js. Running it through JS Beautify reveals about 1000 lines of JS which follows some good practices like not putting everything into the global scope and using requestFrame for animation.

File Sizes

Chrome’s Network inspector tells me the site downloads about 8.9mb when viewed in desktop sizes window, and 5.1mb when viewed in a phone-sized window. Most of that is images. Lots of transparent .pngs.

Here’s an interesting sprite sheet for vehicle colors: http://www.thewagonunboxed.com/img/vignette/chalet/car-colours.png

Car rotation images are biiiig: http://volvo.cachefly.net/img/features/exterior/red/1920/26.png

comments powered by Disqus