pixelhandler

Pushin' & pullin' pixels on the net

Use Newer jQuery Features When Your App Is Stuck on Older Version

So, your app only uses a certain version of jQuery from last year sometime, e.g. v 1.4.2

Not a problem, you can add in the newer features you need by copying form the source and defining any dependencies used by the newer code, also copied from the source. Use the Source, Luke

This example shows how to add $.Deferred and the jQuery promise methods to your app which is still using version 1.4.2; perhaps some mission critical plugin or other code is preventing you from an upgrade to the lasted jQuery release.

Links on the topic of Deferreds / Promises

Short explanation

  • You really want to use jQuery methods : $.Deferred() .promise() .done() .fail() .isResolved() .isRejected() .then() .always() .pipe() .when()
  • You may be using a service to get some data e.g. via .ajax()
  • You need both ajax actions to complete (with success) then your code responds after both actions are done.
  • See Gists below … https://gist.github.com/1273143 | https://gist.github.com/1273133

See working example at : http://pixelhandler.com/downloads/code/deferred-promise/

HTML5 Video Package for CMS Using VideoJS

Screencast: Demo of HTML5 video used in a CMS block

videojs_player package as add-on for Concrete5.org CMS

The screencast below shows how to use the videojs_player package and also notes the tools used to prepare video for the block.

Screencast Demo

Notes: For info on HTML5 video see : http://diveintohtml5.org/video.html which has a tutorial for video conversion for web using the (free) Miro Video Converter. As HTML5 video implementations vary per web browser, to use this block you will need to prepare (4) files: .mp4, .ogv, .webm and have a preview or “poster” image. Also, if needed, Flowplayer (free) plays your .mp4 as flash media content.

CMS Block supports videos playback using the following supporting files

  1. Preview Image: Choose a ‘Poster’ image, file with a .png or .jpg extension; e.g. still frame from video.
  2. MPEG 4 (.mp4): Choose a file with a .mp4 extension as common HTML5 video format; also used for flash fallback
  3. Ogg video (.ogv): Choose a file with a .ogv extension; “Theora” file, HTML5 video format e.g. for FireFox
  4. WebM video (.webm): Choose a file with a .webm extension; HTML5 video format e.g. for MSIE 9+
  5. Maximum Dimensions: Input the maximum width and height in pixels

Links and References:

A Few Reasons I Decided to Switch to Octopress (From Wordress)

Over the weekend I noticed a few coding bloggers had switched to Octopress. I noticed the advantages for a developer who doesn’t need a content management system (CMS) using web forms to update a website. It may sound like I am reverting to the way people blogged 10 years ago with a static HTML website; but is not at all the case. With modern programming tools like…

  • Ruby gems like capistrano for deployment,
  • Git (SCM) to manage both the code to generate my site and generated code,
  • local development using Ruby to build my now Jekyll powered website,
  • and my favorite text editor, TextMate, to generate, edit and preview the content

Wireframing Templates for Magento Commerce With User Experience Notes

Building an ecommerce site and considering magento commerce as the code base? Well then, I have a treat for you. I’ve decided to share my magento commerce wireframes, click below to view the PDF and/or download the templates files:
  1. PDF of wireframe templates: magento-wireframes
  2. ZIP of Adobe Illustrator files: magento-wireframes
The following is a summary of the annotations that accompany the wireframe templates. These notes can be used to establish/inform your client of the user experience(s) that can be expected from an online store build with magento commerce.

Event Pooling Example Using jQuery

Example of using custom events in jQuery for event pooling. Elements broadcast (trigger) events and the document listens (binds) responding with calls to handlers based on. So, the methods to handle the events are loosely coupled with the UI elements and their behaviors. similar to other bind and trigger type of pub/sub (observer pattern).

searchText() jQuery Plugin to Add Helper Text in Search Input

This jQuery plugin script added text to an input field in a search form. The defaults are set to the IDs used in a WordPress search form. The behavior can be set to force clearing of text every time user causes focus event to fire in text input (clicks to type). The function tirggers the focus event to start off with the helper text in the input field. Demo and Qunit tests