Archive for the ‘JavaScript’ Category

jQuery UI custom select widget

This is the first build of the jQuery UI custom select widget available on GitHub. There is a demo page and wiki page available outlining how the widget works. It is hoped that the widget will simplify custom select development.

The jQuery UI custom select widget is designed as a method for applying a custom design to a native HTML select element. Currently the only applicable method for doing this to replace the select element entirely, duplicate it’s functionality in a new element and replicate any changes to the new element back to the select element.

(more…)

JavaScript Performance: jQuery.each and .each versus alternatives

Iterating across an array is a significant feature of JavaScript development. There are multiple methods available to achieve this, the native for and while loops and if you are using the jQuery JavaScript library there is jQuery.each and .each.

jQuery.each is designed to iterate over arrays and array like objects. .each is designed to iterate over jQuery objects and execute a function for each.

(more…)

jQuery HTML5 video background 1.1.1

Release 1.1.1 is now available on GitHub. This release includes a number of performance enhancements and fixes but retains the existing settings from the first release. Additionally i’ve created a number of public methods for the plugin, this will allow access to some of the internal features of the plugin.

(more…)

Object Oriented JavaScript: Modular development

In my previous article i talked about the fundamental concepts of object oriented programming, abstraction, encapsulation, inheritance and polymorphism. These concepts are a part of developing object oriented code and if structured appropriately can be used to create highly modular reusable code.

Developing reusable code is a necessity of software development, it allows for a more efficient development cycle and continuous improvement of an existing development.

The alternative to code reuse is code salvage. Code salvage is an inefficient method of stripping the code down for it’s useful parts and discarding the rest. In creating modular code we hope to support code reuse by making all of the code module useful.

(more…)

America’s Cup site released

This week we at LBi London released the first phase of the new America’s Cup website. I had the opportunity to work with the hosts of the oldest active trophy in international sport as lead interface developer, with a team including Francesca Mancuso, Aaron Faber, Jamie Collins and Pia Gamon.

The site itself was built on EpiServer; which means .Net development and some of .Net’s more interesting aspects (web forms etc). What we produced is a HTML5 based site that is progressively enhanced using CSS and JavaScript. We couldn’t use all the elements HTML5 supports because we couldn’t be reliant on JavaScript for presentation in IE7 and 8. JavaScript development utilised jQuery and jQuery UI libraries.

This is only the first phase of ongoing development, with performance improvements including minification and new features for the site but an important first step in supporting one of the great yachting competitions.

jQuery HTML5 video background 1.0.0

I’ve recently been working on a jQuery plugin that uses a HTML5 video as the background for a page. An idea that perhaps owes far too much of it’s inception to splash pages, it was worth investigating; as a test for HTML5 video player development and because of it’s interesting use of the video element.

(more…)

Object oriented JavaScript: Fundamental concepts

JavaScript is a dynamic, highly expressive[1] multi-paradigm language[2]. JavaScript has had it’s problems, from a weak specification and poor initial implementation it has matured as the Web has and become a ubiquitous Web technology. Commonly used for Web client interactions it has also proven itself capable of powering Web servers and other devices.[3].

As JavaScript development has matured Object Oriented programming has become the main programming paradigm, it is a paradigm shared with Java, C++ and many other languages. JavaScript is an object based language, lacking some of the traditional features of an Object Oriented language, it is a highly expressive language with alternative methods for classes, information hiding and inheritance[1].

(more…)

Cargo cult science and web development

In 1974 Richard Feynman gave the commencement address at Caltech and coined the phrase cargo cult science. Cargo cult can be used to describe any process using a flawed model of causation.

The term cargo cult is used in anthropology to define the religious cults that spring up in the wake of a technologically advanced society interacting with a technologically primitive society. Most recently this happened during World War II in the Pacific South West when Allied and Japanese forces created military bases on islands with limited previous contact with the modern world. The military base would commonly use air fields to import war materials.

The technical details of why and how the air field is set up would be beyond the basic understanding of the local populace but they would be able to see the process and witness the outcome which would be bountiful supplies of cargo brought in from the sky.

(more…)

jQuery Equaliser plugin 1.0.0

After writing about the cross browser display inline-block i was reminded of a requirement from “The Sceptre of Rajim” project. Each item in a row of items would have the same height but also a number of designated elements would have an equal vertical position in that row.

The code written for the project targeted a specific list of items and was limited in scope. Requirements change over time and this sort of positioning seems to be a common feature, so after the project i resolved to make good on the promise i always make, to create reusable code.

The jQuery Equaliser plugin is a simple plugin that iterates across an array of elements with a declared parent element.

(more…)

jQuery UI Carousel 0.3.0

This is the first release of my jQuery UI Carousel.

At LBi Towers our JavaScript current library of choice is jQuery and where necessary we leverage the widgets of jQuery UI. Although there are a number of jQuery Carousel plugins there isn’t an official jQuery UI Carousel widget, which is an unfortunate omission as carousel’s tend to be a common requirement of site development.

To investigate jQuery UI widget development and fulfill this requirement i took some time to build this initial jQuery UI Carousel widget. Version 0.3.0 is the first release, it contains the basic functionality of a carousel and has been included in a current project i can only call “The Sceptre of Rajim” and yes at LBi Towers we have a fixation with M.A.S.K episode names.

(more…)