jQuery HTML5 video background 1.0.0

by George Paterson.

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.

Object oriented JavaScript: Fundamental concepts

by George Paterson.

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].

CSS sticky footer

by George Paterson.

A number of web site designs require the page footer to stick to the bottom of a page, no matter the content. There are other solutions but after using a min-height solution for a number of years i have found it to be the most robust.

The increasing maturity of the browser market means the CSS has simplified to using min-height only. There are alternative solutions for min-height support using JavaScript, alternatively should the CSS fail it should not cause a significant issue to site usability.

Cargo cult CSS resets

by George Paterson.

In my previous article cargo cult science and web development, i talked about Richard Feynman’s excellent announcement address on cargo cult science, referencing the cargo cults and how web development can suffer from cargo cult development.

I didn’t give a specific example at the time because the one i offer now is rather contentious and i didn’t want it to draw away from the understanding of cargo cult development.

CSS resets, as investigated by Eric Meyer and others, is a style sheet used by a developer to set a cross browser baseline style. It removes any styling that may be applied by the browser rendering the elements in to a controlled initial state. The principle is that the developer is now in full control of styling for all elements on the site.

Cargo cult science and web development

by George Paterson.

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.

jQuery Equaliser plugin 1.0.0

by George Paterson.

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.

Cross browser display inline-block

by George Paterson.

While drinking stout at @pubstandards on Thursday, we did broach the subject of code. While talking about equal height list items which have traditionally been difficult to work with, I raised an interesting technique that doesn’t seemed to have got much traction.

Instead of using floats to line up your items in rows, where varying heights that can tangle the floats, use display: inline-block.

jQuery UI Carousel 0.3.0

by George Paterson.

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.

Google TV, the web made for TV?

by George Paterson.

At LBi London we’ve had the good fortune to get a Logitech Revue with Google TV. It’s an interesting piece of technology and i fully support the web enhanced TV experience.

As a web developer what interests me is the web experience designed for the TV, what Google calls spotlight. At first glance it is a rich experience that should do well in the consumer market. The problem i see is how that experience was created.

When first using spotlight you could be mistaken in believing you are visiting the existing web site enhanced for Google TV, promoting the One Web experience.

You’re not.

Google TV user agent strings

by George Paterson.

For the new Google TV there are currently two user agent strings. Both are based on WebKit/Chrome but specify GoogleTV in the user agent string

Since Google TV’s spotlight is a web based experience both strings could prove useful in testing sites targeting spotlight.

Sony Bravia

Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.127 Large Screen Safari/533.4 GoogleTV/ 162671

Logitech Revue

Mozilla/5.0 (X11; U: Linux i686; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.127 Large Screen Safari/533.4 GoogleTV/b39389