Project PitBull: Sprints 3 & 4 - the key milestone

Coding
My original estimate of 7 days for SelectSizesHopup proved accurate, especially since we uncovered a significant missed requirement. The good news is the view and underlying behavior can be reused on PDP as planned, so reuse goal attained.
Here's the UML for the design and what was built. Whats reuseable is basically all but SelectSizesHopupView


I created a SelectSizeRowModel for a ui row. It has all the data for the ui and as changes happen on the ui it is updated and in turn triggers change events to which the SelectSizeViewRow controller listens to. Driving behavior through the model.

I tried to use Backbones validate() method but ended up writing a custom validate instead. I found that with custom sizes the user can choose to enter a custom size in which case I set a default invalid value, but that would fail in the validate() method and the old value would be retained, which I did not want to happen.
In addition, size and height are 1 attribute but with custom entry are 2 separate input fields. Setting a partial value in the model would fail in the validate() method. I could refactor the model to have separate fields for size but that would not match the api data and require parsing and concatenation logic. So I went the customValidate mehod route and call it only when I need to.

Note: Backbone encourages you to code validate in models. validate is called every time you set any attribute (or save) which means it can be called frequently (for initialize of defaults as well as set model attribute). If a validation fails then the attribute is not set, the previous value remains and an error event/callback triggered.

Overall client side devs are making great progress, everyone is basically on track for 7/16.

Client side code walk-throughs planned daily this week of 7/9


Creating product grid rollover hover which plays animation
The design calls for a rollover effect when user rolls over product images int he product grid results page. When rollover image show a button, when rollover button show an animation; when rolloff btn or anim hide the anim; when rolloff product img hide the btn.
Here's my approach.
1. Get button to show when user rollover product grid image. The most simple and effective way was to have a hidden div with a link styled as button in it using absolute positioning relative to overall container. Then just use simple css hover rule to hide show the hidden div (and its button). Works on IE7 and up. A fix for IE was to put the absolute positioned div at top, not bottom as was originally.

2. When user hover or click button, show animation span and image which expands up above the button. I used jQuery css animation to do this and set a class as flag for later
 $animationToPlay.css('margin-top', '-85px').addClass('animSpanOpened').show();

3. Play animation. This was already done on main site so I reused sprite image and frame animation code.

4. Play animation until roll off hidden div
I had a div which contained a link and span with img anim. The anim should play while mose is within the div. I added a mouseleave handler to the div but it was not returning the div in event.target as I expected. Instead event.target was the a link or span (depending on which was rolled off). Ward pointed out that event.currentTarget is what I needed. Event.target contains the dom element acted against but event.currentTarget is the object I tied the mouse leave handler to. So I referenced event.currentTarget and all works as expected.




Jasmine testing (crave the green)

B. one of the "new guys" :-) setup Jasmine and I've been adding tests. Better late than never for me but I plan to follow tdd when enhancing CartCollection for add of productModels: if productModel of same features (option and size) then increment the line item count else add as new line item

B. knows his Jasmine and I mentioned to him that:

"writing Jasmine tests is hard...yet strangely addictive... "

"I keep saying to myself...ok this is the last test, then I get green and want to write a few more...

then I see red and want to stop, but can't until I get green again

then repeat!"

Jasmine: "try it, you'll like it"



Planning
July 16 is a key milestone for the client. We must have a minimal demonstrable set of functionality or the project may be stopped.
So at end June the PM and I reviewed plans and created a game plan for each client side dev to get to July 16 which we then all reviewed and validated. No good if one crosses the line and others do not since then we all fail.
Each dev knows from end June to July 16 what they're working on when a task starts and is supposed to finish. This was sent in a simple email and reviewed a week later, by then there was some slippage but acceptable (PM also updated plans)
At the time the PM and I also reviewed the expected 7/16 functionality list and identified a missed a key requirement which belonged to me to implement.


Issues/Risks

• Video - client wants video but there was confusion about what hosting and player to use. Its unclear if we can use youtube or not. This was raised internally as an issue at the start of the project but dropped because imo we all internally accepted a half hearted answer and now it has to be escalated (client less than pleased about that).
• Tracking - again raised early on and then lost. Client has to provide spec on what to track as well as a tracking file (not using GA). Again, didn't have to be so late.
• Apis - we are getting 1st working api but it is really cutting things too tight for (my) comfort.