Developer log

Attended my first @media conference this week, all really good talks that left me with lots to try and research.

Fridays keynote was excellent, Andy Clarke spoke about hard-boiled web design. The idea was that by designing and developing to include the weaker browsers we're putting limits on what we can achieve. Andy's approach is to design to the strengths of the browser, the experience then in a webkit browser can be much richer than that of even Firefox. The key is that the while the experiences aren't identical we need to stop seeing that as a problem or limitation.

As an approach hard-boiled design sat well with the other development talks at @media, it often isn't feasible to use the updated capabilities in CSS3 and HTML5 because of the range of support, but Andy's method would avoid that issue.

Highlights

The title highlights is a little misleading, I'm just going to list the bits that the conference really left me wanting to try out.

• Putting external scripts in closures, for example ad and tracking code provided by third parties
• Geolocation functions and how they take us closer to ubiquitous and context aware computing
• Testing sites on some mobile browsers... if only I had Snow Leopard on this machine
• PhoneGap to look into some app development
• Node.js
• HTML5: Validation markup and how we can use this in our JS
• HTML5: Local storage and manifest files
• CSS3: animations, even though they're only webkit at the moment
• Non-blocking JS includes

Things I've tried already

• Webkit animation with a drop shadow
• Webkit animation with :target to hold state
• Using the geolocation of the user and getting more information about their location using a YQL to access API data

Circles are prettier than than straight lines, that's basically fact. This quick script places and rotates items around a central point. This was going to be the basis of a contextual menu, I've gone off the idea but since I'd already wrote the basic code!

Circular animation script

I've been re-writing a lot of JavaScript recently, as part of a move from Prototype to jQuery, and it's given me a great chance to concentrate on how it's written rather than what's written.

Carousel implementation

Plugins are a major plus in jQuery, but they're not suited to everything. A plugin is called to act on items in a collection, in the case of a carousel it would be the carousel container. A carousel is a perfect example of where a plugin is an appropriate solution, they're also ripe to be created as objects, keeping all variables and functions contained and aligned to the element in question.

Tooltip implementation

Again these are suited to being plugins, but not as objects. When the plugin is initialised we can do a single pass to bind all the actions, we don't need to store information about the state of the tool tip as we do with a carousel.

Lazy-loader implementation

My implementation of a lazy-loader is called as part of the init methods of a page, it's classic functional programming and aims to be unintrusive when writing or executing code. I've implemented it using a closure (actually, using loose augmentation in the article below) where all methods but the initial call are private methods. Since it has no elements to modify it is unsuited to being a plugin.

Sources/Reading

• jQuery Plugin Design Patterns
• JavaScript Module Pattern In Depth