pixelhandler

Pushin' & pullin' pixels on the net

Bowling Game Kata Using Mocha (BDD) Test Framework and Yeoman

About this Tutorial…

This tutorial was created in an effort to learn more about using new tools like Yeoman and the Mocha test framework using Node.js that can be executed in a headless browser environment (phantomjs), and to assist other engineers in learning the practice of behavior driven development. Basically, this article is a result of following the ‘kata’ by Uncle Bob to author a simple program in JavaScript that scores a game of ten-pin bowling.

Covered in this tutorial:

  1. Using the Mocha test framework with behavior-driven development (BDD)
  2. Uncle Bob’s “Bowling Game” kata in JavaScript
  3. Quickly setting up your development environment with Vagrant, VirtualBox and Yeoman
  4. First, writing tests to describe the expected behaviors which fail
  5. Next, writing application code which passes the tests
  6. The result: a program that scores a game of bowling, and better BDD skills

Backbone.js Models, Views and Collections to Present API Data

This tutorial explores coding with Backbone.js using data stored in an API. The code developed will interact with an API as described in the earlier post : Develop a RESTful API Using Node.js With Express and Mongoose. This article is the second tutorial in a series on the topic building an online store using REST. Previously, I explored creating an API with Node.js, Express, MongoDB, and Mongoose. In this article I demonstrate an overview of coding a front-end interface for a data-driven application using Backbone.

Backbone organizes code objects for Models, Collections, Views, Routers and uses a sync object to interact with an API. I will use these constructors to build a list of projects from objects stored as documents in a database (MongoDB) . The API built in the previous tutorial facilitates development with an actual web service rather than mocking JSON data in a flat file.

For the purpose of getting to know Backbone, the use case that I will focus on is listing products consumed via JSON data from a web service. Each product in the list represents data found in a model. The product list represents a collection of (product) models. The HTML is generated using a view which renders data - blending the model’s JSON data with a template. Finally a route triggers the asynchronous process of fetching data and rendering the product list by listening for a hashchange or using pushState. These are the core components that Backbone provides.

Develop a RESTful API Using Node.js With Express and Mongoose

For the past couple months I’ve been developing with Backbone.js and mocking data for an application. I’ve worked in the ecommerce industry for a few years and thought it would be a good idea to create a serious of posts on the topic of developing with Backbone using an example with some complexity, perhaps more than a ’todos’ or ’blog’ application, so the example will utilize a familiar Web application, an online store. To program a data-driven asynchronous application using a language I already know, JavaScript, the best way to learn is to write some code. So, I researched a few example applications using Node.js with a MongoDB database. This article is intended to be the first in a series on the topic building an online store using REST and Backbone.js to structure the code. This tutorial is not intended for production code, but rather an exploration of developing interactions with a RESTful API. This first post lays down a foundation for developing with a local API, then I can get into using the application with Backbone; but let’s get into the server-side for a bit first.

API Design for Mock Ecommerce Application

Goals for the Web service:

  • Simple API design and pragmatic REST Web service, with only 2 base URLs per resource
  • Keep verbs out of your base URLs
  • Our HTTP verbs are POST, GET, PUT, and DELETE (Create, Read, Update, Delete)
  • Concrete names are better than abstract

Example : two (2) resources (/products and /products/XX) and the four (4) HTTP verbs

Resource POST
(create)		 GET
(read)		 PUT
(update)		 DELETE
(delete)
/products create a new product list products bulk update products delete all products
/products/1234 error show 1234 if exists update 1234, else error delete 1234

Developing a Modular JavaScript Application With RequireJS and Backbone.js

A few reasons I enjoy the JavaScript development community

Currently I am developing a JavaScript application using open source frameworks and libraries. Included the mix are… jQuery Mobile, Underscore.js, Backbone.js, RequireJS, mustache.js, Node.js, Jasmine, Sinon.JS, Jasmine-jQuery, and the Asynchronous Module Definition (AMD) specification. The web application is backed with a RESTful API. So, in researching on all the JavaScript based MVC type of frameworks, comparing Knockout, Ember.js (Sproutcore 2), JavaScript MVC, and Backbone.js I ended up selecting Backbone as my first choice. The community of developers using Backbone appears very active, there are plenty of blog posts, articles, tutorials, and videos on how to author code using Backbone.

I find it refreshing that many of these libraries have a fair amount of adoption within the development community. One of the primary objectives on this project is to build the application with modular code. Also to load modules when the specific components are needed for execution rather than the entire library which becomes the finish application. The AMD specification and the compatibility with RequireJS and other libraries is very attractive. RequireJS gives me the ability to author various modules and manage the code dependencies efficiently. Also with the build and optimization features of RequireJS I am able to organize the modules within packages. I broke down the file organization by having common directories for models, views, collections (objects defined using Backbone) and a few other directories, like syncs, utils to extend the functionality of Backbone. The modules in each directory are built into a single common package of modules and the package can be required by other modules which reside in other packages (groups of code for specific feature/component implementation, e.g. site chrome). I forked an open source book Backbone.js Fundamentals on these topics adding an explanation on how I am building and optimizing using packages of modules; see the section “Optimize and Build a Backbone JavaScript application with Require.JS using Packages”. I posted this section on the HauteLookTech.com blog as well.

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.info/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.