Neilson® Dairy Oh®!

A51 is pleased to announce the launch of a new updated website for Saputo’s Neilson® Milk brand Dairy Oh!®. Dairy Oh!® contains DHA, an Omega-3 fatty acid, contributes to good health and normal growth and development. The focus of the campaign was to elaborate on the benefits of milk high in DHA. The overall campaign creative was developed by Clean Sheet Communications. A51 developed the “one page website” concept for the campaign, designed the creative and developed the website.

The website uses jQuery to scroll up and down a stack of books held by a young girl, displaying selected content in a callout window. Both English and French versions are available.

A big thanks goes out to Clean Sheet and their team for putting so much trust in us!

This is basically a Beta in terms of viewer response, so feedback is welcome. We’re planning on adding more goodies in the future.

http://www.a51integrated.com

Well the results are in and while I did not win I am certainly please with my results.  My entry was in the top half of the results and not far behind contest organizer Mike Chambers’ entry.

The contest taught me a lot about AS3 optimization, mainly that bit-wise operations can seriously increase your speed performance.  I definitley need to brush up on my 1’s and 0’s.

You can take a look at my entry here and all the other implementations here.

Big thanks for Ian Stewart for helping me with my class and Mike Chambers for organizing the contest.  I can’t wait until the next one comes along as I am sure I’ll be able to improve my performance.

I decided to use CentOS 5.4 (stable) for my testing and started with a clean install of the OS with just the base packages and no window manager. Pylot requires a couple dependencies for different actions you may want it to perform. First is Python, and since Pylot requires Python 2.5+ I needed to compile Python from source as CentOS repository only had 2.4.3. The next dependencies were NumPy (http://sourceforge.net/projects/numpy)  as well as MatPlotlib (http://sourceforge.net/projects/matplotlib) which are both used for generating graphs.

Now that my system was ready to run Pylot I needed to setup a test case (ie. a list of what and how I wanted a site to be tested). Pylot sets up tests cases with simple XML files. In it’s simplest form, a test case would look like this:

<testcases>
  <case>
    <url>http://www.foo.com/bar</url>
  </case>
</testcases>

To run the test we run the run.py script in the base directory of the Pylot source. Pylot will run a designated amount of clients for a designated amount of time on the URLs listed in the test case XML document and then generate a results directory with a nice HTML file to display the findings.

As great as the data that comes of out Pylot is, it wasn’t good enough to point out to us what exactly what slowing the site down, it would just tell you what pages where slower then others. What we needed was a way to generate MySQL performance data from Pylot and combine the two data collections together to see where the site was slow under n amount of users and what MySQL queries were causing that.

It finally dawned on me to just use the debug feature in CakePHP, which generates a query log  per page load. For Example,

Since Pylot downloads the page render to a log file all I needed to do was write a script to parse the log files right after the testing finished and log all the query times. I decided to write my script in PHP as it would allow me to easily build a web interface for future tests by co-workers. With some string manipulation we can parse out the time per query which allows us to find the fastest and slowest query per page load as well as the overall query time per page load. This information coupled with the fact that Pylot is gathering these tests results based of a defined user base over a set period of time means we can see if certain queries perform differently when experiencing a higher load.

Simple web interface for testing. Image shows a test running 100 agents concurrently over a 1 minute test.

Pylot Web Frontend Results. Displays the slowest and fastest results of the test. Log files are broken down into each agents tests.

Final MySQL query results showing total queries & query time on the server.

Our initial find was with regard to the DESCRIBE queries that were being run on page loads. For some reason our pages were spending more then half their query time on these DESCRIBE queries. After some research on the topic we found that we weren’t alone being a little confused about these queries. Many people simply said that turning the debug off was stopping the DESCRIBE queries but we seemed to prove otherwise with the use of MySQL slow query logging.

We found that the only way to actually get rid of the DESCRIBE queries was to have a cache setting.  Therefore the DESCRIBE queries are dependant on the cache setting. If the cache is disabled, we will get DESCRIBE queries which allow the CakePHP framework to understand the database layout. If cache is turned on, the DESCRIBE queries will fire once and cache the result, meaning the subsequent users will not trigger them.

NOTE: Global cache setting in app/config/core.php (Configure::write(‘Cache.disable’, true);)

The more I use this system the more I seem to like it. We now have free reign to test our applications in our office with as many concurrent users as our servers can handle. We have found some interesting issues so far – relating from MySQL configuration to networking configuration to  fan speed and temperature control.

It goes to show that production level testing in a development environment can really pay off.

Our goal was to make our tool tip class as easy to use as possible.  Because we use a very specific framework here at A51 our regular tool tip class is very much married to it.  So we decided to strip out any attachments to our framework and to provide it to the community.

Using the class is fairly straightforward, somewhere in your application you simply need to pass a reference of the stage to the class by calling ToolTip.init( stage );  You can then call ToolTip.show( ‘My tool tip message here’) at any point in your app.  Don’t forget to call ToolTip.hide() to make it disappear.

You can check out an example of the class in action here.   You can download this example and the class itself here.

Nettuts+:  This site that is part of the Envato network of pages has new tutorials every day.  From JavaScript, to CSS to PHP frameworks, this site runs the gamut when it comes to web development tutorials.  With many contributors  and topics, you are bound to find something you like.  Add contests and freebies to the mix and it makes Nettuts+ a can’t miss site.

Smashing Magazine:  Smashing is an online staple, offering tutorials, tips and compilations of some of the best examples of design from around the web.  With posts every day, I make sure to hit this site each morning.  Smashing Magazine also has a book coming out at the end of this month that I’ve already got it on preorder.  I can’t wait for it to be delivered as everything they do is top-notch.

Six Revisions: Another leader in web-development articles and tutorials, Six Revisions is another must-read site for Web Development professionals.  Like the other sites on this list, articles are published every day and cover a broad range of topics.  Check out their freebies sections for a ton of textures and icons that will make any developer/designer’s life a whole lot easier.

CSS-Tricks: CSS tricks is a site produced by experienced developer and designer Chris Coyler.  Don’t let the name fool you though because this site is not limited to posts on CSS, it included JavaScript, PHP and many other useful bits of information on web development.  Chris is also the author of many other great sites like Quotes on Design, Script & Style and HTML Ipsum.  While the posts are not as frequent as some of the other sites I’ve mentioned it is still worth checking out nearly every day.

Webmonkey: Another diverse site that has a broad range of useful items for all developer and designers.  With code libraries, cheat sheets, tutorials and much much more, Webmonkey is definitely worth keeping in your bookmarks as there is always something new and useful to discover buried in its pages.

Some other that we like to frequent here:

Tutorial 9, Snook.ca, Web Appers, Ajaxian, Web Designer Wall, Woork, ThinkVitamin

If you know of any sites that we should be checking out feel free to post them in your comments as we are always looking for new and valuable resources to check out.

We developed The Listener site using Papervision3D with a .NET C# / SQL Server backend. It’s been versioned in who knows how many languages – all text is live. Thanks to Steven Snell at DesignM.ag for including us.

GoToAndLearn: This is a great resource for both people starting out with ActionScript and experienced developers.  Run by Adobe evangelist Lee Brimelow, the site is filled with screencasts and example code on a wide range of subjects including flex, 3D, AMF, Pixel Bender and more.  The tutorials are both informative and entertaining as Lee is a great speaker who always brings something interesting to every screencast.  You should also check out Lee’s Blog which features lots of insight on the Flash/Adobe world.

Flashtuts+: Flashtuts+ is part of the Envato network which are sites that all developers (not just Flash coders) should be checking out.  The articles are very informative and cover a wide scope of skill levels.  Tutorials range from ActionScript 101 to more advanced topics like the PureMVC  framework.

Emanuele Feronato: Emanuele’s blog is filled with tons of tutorials and code snippets that include basic topics and more advanced subjects like the box 2d physics engine.  This is probably the best resource for anyone interested in developing Flash games as Emanuele is an experienced developer who generously shares a wealth of knowledge and experience in developing flash games and applications.

PV3d.org: This site is for anyone interested in the open source 3D engine – Papervision3D.  There are tons of code examples on how to implement a plethora of techniques when working with this highly popular 3D engine.

ActionsScript Classes: This site has a wealth of useful classes for both AS2 and AS3 developers.  Finding something specific may be a little difficult but with a little digging you are sure to find something valuable.

If you have a great resource to share, let us know. I’m certain there are some gems out there that we’ve never come across.

Listed on Design Charts

Look kids! More recognition! Our latest Papervision3D Flash project for Miele Gallery Caplan’s has made the list at DesignCharts. Thanks to everyone who contributed to the project and made it a huge success. Visit the site. Visit Design Charts.