Posts

Showing posts from December, 2011

Css animations with Emile

Emile is a great little js animation library created by Thomas Fuchs who created script.aculo.us and scripty2 and blogs here . We've used Emile on BenefitCosmetics for homepage animations and I've also used it on my personal homepage . Presentation here Tips: - layout the page, style it with css then plan on how to animate the images etc. on the page. - if you plan to animate a css value (e.g. left) then be sure to initialize it using css first; otherwise will get errors - animating "opacity" did not work for me in IE, which does opacity differently anyway. Instead I just changed display of items from none (hidden) to block (show). - if you have multiple main separate animations on the page (as BenefitCosmetics does) then stop the current before playing the next I'd like to try the other animation library scripty2, seems pretty cool.

State Pattern for Online Checkout

Image
The essence of a good checkout experience is that its easy for the customer to complete the sale and that it successfully hides all the work happening "under the covers". Because alot more is involved in checkout than the typical user realizes. As the user progresses through checkout, tasks such as data validation, ensuring cart consistency and reserving stock and price, address verification, add/remove promo codes, gift wrap and messaging, payment authorization, fraud controls, downstream order processing and persistence are all happening in a typical checkout. Note: I do not consider add/remove to/from cart manipulations as part of checkout. Checkout starts when the user decides to checkout with whats already been added to their cart. MVC is a standard pattern for building UIs but coding all that checkout logic and functionality into a controller/model of MVC is not a good fit for a number of reasons: - decoupling the checkout business logic from model/controller allows

Online Checkout usability best practices for developers

The following are a list of developer to-dos my teammate Dice and I have gleaned. There are lots of other ux best practices, you can find some good lists of those elsewhere such as here and here for example (simple, fast and clean is common). 1. Set autocomplete off for private information such as card holder name, card number, cvc code and dates to ensure information previously entered is not displayed to the wrong people. i.e. <input autocomplete="off" id="cardNumber"/> You can set it off at form level or individual input field level. I prefer input field level since you may want other fields such address on the form to autofill. FYI this is also a godo diea to use for passwords too. Mozilla post with more. 2. Don't store card information on your server to meet PCI Complicance. Many Checkout apis allow you to send card information in a javascript api (jsonp) which returns a token for your use thereafter. A simple trick to avoid submitting ca

Modify Headers FF plugin

Very handy little plugin to Add or Modify Http headers After you install you should start Modify headers (you can also Stop is and disable individual headers) Then you can choose to Add or Modify or Filter headers. I needed to send Accept-Language as en-gb only (and turn off en-us), so I - started modify headers - selected Modify action from drop down - added header Accept-Language and value en-gb - then hit Add btn - ensure the header is enabled (green btn) Then refresh your link Looking in Firebug Net panel I now see the following passed Accept-Language en-gb Help http://www.garethhunt.com/modifyheaders/help/?v=0.7.1.1 SoapUI is another tool for such effects but this is simpler.

Reebok portable configurator

I worked on the Reebok portable configurator in 2009. An actionscript app to be embedded on sites and blogs such as this. It's fully operational so feel free to select a shoe and play with it. Alternative Content

PHP passes array by value unless you declare function signature to take reference

yep, calling the function below will not have changed the array after the call public function addMore(array $names) {    $names[] = 'another';    return; } ..you have to declare the function signature to take a reference to the array, then the array will be changed after the call public function addMore(array &$names) {    $names[] = 'another';    return; } Objects passed can be modified without the need to declare as references in the signature as they are passed by reference by default;

Accessing symfony uri values

Some useful info: $request->getHost()   uk.ben.local $request->getUri()   http://uk.ben.local/frontend_dev.php/checkout/shipping sfContext::getInstance()->getRouting()->getCurrentInternalUri(false)   checkout/shipping sfContext::getInstance()->getRouting()->getCurrentInternalUri()   checkout/shipping url_for(sfContext::getInstance()->getRouting()->getCurrentInternalUri(false))   /frontend_dev.php/checkout/shipping sfContext::getInstance()->getRouting()->getCurrentRouteName()  default