Examples


Wednesday, February 25th, 2009

3D Canvas Demos in 2D Canvas

Category: Canvas, Examples

Paul Baukus pointed us to an English translation of some of the amazing stuff he saw in his recent trip to Japan. In this case, it’s an emulation of 3D rendering in canvas’ 2D context: This stuff is CPU intensive, but is a pretty nice example of what’s possible.

Posted by Ben Galbraith at 4:00 am
6 Comments

++++-
4 rating from 33 votes

Monday, February 23rd, 2009

HTML5 Canvas Cheat Sheet

Category: Canvas, Examples, Tip

Jacob is back, and this time he has a cheat sheet with him. It is nice to see the Canvas API fitting on one sheet here, and I really like the images showing how things look like and work.

Posted by Dion Almaer at 12:56 am
1 Comment

++++-
4 rating from 21 votes

Sunday, February 22nd, 2009

Cross-Browser Inline-Block

Category: Articles, Examples, Showcase

Ryan Doherty has one of those really nice articles that walk you through how to do something that should be easy in CSS but isn’t, until you know how: Cross Browser Inline Block. By the end of it all you will have this: < View plain text > HTML <style>     li {   Read the rest…

Posted by Dion Almaer at 5:04 am
11 Comments

++++-
4.1 rating from 50 votes

Thursday, February 19th, 2009

Box2D Ported to JavaScript Using Canvas

Category: Canvas, Examples

Robert Kieffer recently told us about Box2DJS, an automated port of the popular Box2D physics library to JavaScript using <canvas> for the rendering. Using Box2DJS, you can create a flatland-esque 2D world that obeys Newtonian physics: < View plain text > js var worldAABB = new b2AABB(); worldAABB.minVertex.Set(-1000, -1000); worldAABB.maxVertex.Set(1000, 1000); var gravity = new Read the rest…

Posted by Ben Galbraith at 7:00 am
6 Comments

++++-
4.6 rating from 34 votes

Wednesday, February 11th, 2009

eCalc: Cross-platform Calculator with Ajax

Category: Examples

For a while, we’ve been giving a lot of thought to how Ajax developers can leverage their skills to play in the ISV marketplace. This conversation has gained a bit of heat over the past few months with the launch of Apple’s iPhone Marketplace–the fastest-growing ISV marketplace in software history. We’ve talked about platforms like Read the rest…

Posted by Ben Galbraith at 4:48 pm
12 Comments

+++--
3 rating from 31 votes

Monday, February 2nd, 2009

Writing a JavaScript Tetris; Lessons learned from a Ruby chap

Category: Examples, Games, JavaScript, Tutorial

We often get games sent our way, and try to keep those posts for Fridays. This one is different though. Thomas Kjeldahl Nilsson didn’t just write another Tetris clone in JavaScript, he documented his experience. He posted a series of articles on the various steps, and not only do you learn how to build a Read the rest…

Posted by Dion Almaer at 8:18 am
Comment here

+++--
3.8 rating from 34 votes

Wednesday, January 28th, 2009

Sitepoint relaunches reference site

Category: CSS, Examples, HTML, JavaScript

The Sitepoint reference guide has been relaunched. It looks very clean indeed. Here is an example of docs for the getElementById method. You will see that it has basic info, compatibility charts (although they are minimal… saying things like “buggy” instead of why), and hints. For example: The behavior of this method when more than Read the rest…

Posted by Dion Almaer at 5:26 am
3 Comments

++++-
4.1 rating from 32 votes

Thursday, January 22nd, 2009

Platform Optimization Strategies for Ajax Toolkits

Category: Ajax, Editorial, Examples, Library

Dylan Schiemann has posted on Platform Optimization Strategies for Ajax Toolkits which covers techniques for having code run on multiple platforms effectively. He talks about how some frameworks have code paths for specific browsers to shorten the if (foo) type overhead. Having a compile step like GWT does makes this easy. TIBCO GI “builds an Read the rest…

Posted by Dion Almaer at 2:14 am
1 Comment

+++--
3.4 rating from 34 votes

Friday, January 9th, 2009

defaultValueActsAsHint

Category: Examples, Prototype

Thomas Fuchs has created defaultValueActsAsHint, an implementation of the Input Prompt pattern: An often occuring UI pattern is “use the value of a textfield as hint what to input”. These fields all auto-clear when the user first focuses it (by clicking or tabbing it), and if nothing it entered, the hint will be shown once Read the rest…

Posted by Dion Almaer at 5:03 am
11 Comments

+++--
3.1 rating from 34 votes

Thursday, January 8th, 2009

jQuery pageSlide: throwing content around

Category: Component, Examples, jQuery

Scott Robbin (Songza co-founder) has created a very cool jQuery plugin for pageSlide, an interaction based off of Aza’s prototypes for Firefox Mobile and Ubiquity mouse gestures. The plugin wraps body content into a container and shifts it off of the page whenever a click event is fired, revealing a secondary interaction pane. This plugin Read the rest…

Posted by Dion Almaer at 9:10 am
7 Comments

+++--
3.7 rating from 70 votes

Wednesday, January 7th, 2009

Detecting twitter users with JavaScript – handy or evil?

Category: Examples, Security

Earlier this week I blogged about a proof of concept that you can detect if a user is logged in to twitter and display their data with a few lines of JavaScript. This could be used to show for example “tweet this” buttons in a blog application. The trick is easy: use the user_timeline to Read the rest…

Posted by Chris Heilmann at 5:06 am
3 Comments

+++--
3.6 rating from 23 votes

Wednesday, December 17th, 2008

Ajax as Flash: Achmea

Category: Examples

Remon de Boer sent us a link to Achmea.nl, a Dutch website that brought back memories of Thomas Fuch’s Ajax makeover of Gucci’s website some time ago. Ironically, Achmea.nl starts out by displaying a Flash-powered “Loading” graphic: But once the site loads, it’s all Ajax. Powered by YUI, the site sports animated roll-overs, smooth transitions, Read the rest…

Posted by Ben Galbraith at 11:09 am
15 Comments

+++--
3.7 rating from 44 votes

Monday, December 15th, 2008

The Cloud Player: Web-based iTunes using jQuery

Category: Examples, jQuery, Sound

Eric Wahlforss, the founder of SoundCloud, wrote in to tell us about “The Cloud Player“, a iTunes / Songbird clone written entirely in Ajax: we just released an open-source itunes-clone built in jquery (and app engine, soundmanager 2, soundcloud api), complete with smart playlists, drag’n’drop, keyboard shortcuts, load-as-you-scroll playlists, playlist sharing, waveform display of tracks, Read the rest…

Posted by Ben Galbraith at 1:11 pm
11 Comments

+++--
3.5 rating from 45 votes

Friday, December 12th, 2008

More JavaScript Inheritance; Prototypes vs. Closures

Category: Examples, JavaScript

Steffen Rusitschka has a nice detailed post on inheritance with JavaScript, different ways you can go, and side effects of the decision. From, < View plain text > javascript var A = function(){}; // This is the constructor of "A" A.prototype.value = 1; A.prototype.test = function() { alert(this.value); } var a = new A(); // Read the rest…

Posted by Dion Almaer at 4:05 am
10 Comments

++---
2.4 rating from 27 votes

Friday, December 5th, 2008

Mozilla, Zazzle, and UIZE

Category: Examples, Framework, Mozilla

Mozilla is big on tinkering–making things your own. They recently released a marketplace for their community to upload its own shirt designs. But because they based it on the Ajax-heavy Zazzle platform, consumers can customize the shirts in a variety of ways. We thought this made for a good opportunity to take a closer look Read the rest…

Posted by Ben Galbraith at 1:01 pm
5 Comments

++++-
4.1 rating from 18 votes

Friday, November 28th, 2008

JavaScript Bra Size Calculator

Category: Examples, JavaScript, Showcase

Now this could only fly on a Friday ;) Ed Spencer has coded up a bra size calculator in JavaScript: One of the more mesmerizing websites I’ve worked on recently was for a lingerie boutique in the UK. Aside from the unenviable task of having to look at pictures of women in lingerie all day, Read the rest…

Posted by Dion Almaer at 1:33 pm
11 Comments

+++--
3.3 rating from 41 votes