Building TipTheWeb with YUI 3

By Eric FerraiuoloOctober 5th, 2010

About the Author: Eric Ferraiuolo is a Director of TipTheWeb and Co-Founder of Oddnut Software. He writes on his blog: 925 HTML, and can be found on Twitter: @ericf. Eric was a featured presenter at YUIConf 2009.

TipTheWeb is a new service that lets people directly support their favorite web content by tipping it. For instance, if you find a great blog post, you could tip it 25 cents.

TipTheWeb is a non-profit organization promoting freely-accessible, high-quality web content by awarding publishers that receive tips. If you publish online, you can use your TipTheWeb account to claim the places you publish to receive tips and be eligible to receive awards from TipTheWeb.

Screenshot showing the Landing page of tiptheweb.org

TipTheWeb’s Use of YUI 3

The user interface of TipTheWeb is completely built on top of YUI 3 (we drank the Kool-Aid.) The approach we took was to use YUI 3 as the foundation and structure for our JavaScript code. We’ve built 33 custom YUI 3 modules (56 if you include submodules, plugins, and roll-ups), several of which we contributed the YUI 3 Gallery: Component Manager, Markout, Overlay Extras, and REST Resource.

Page-Level Classes

The core features of TipTheWeb are implemented on a few highly-functional web pages which communicate with the server over Ajax. For each of these pages we created a custom YUI 3 module that exposes a page-level class used to coordinate actions between the functional parts of the page.

In one of our application’s main pages, the Tips page, you can see how this approach is applied with the page-level class TipsWindow. The main functional parts of the page are the widgets: CreateTip used for creating tips, and the TipList widgets for editing, canceling, and funding existing tips.

Annotated diagram labeling the main Widgets and Components that make up the Tips page of TipTheWeb

A Lot of Overlays

We use Y.Overlays extensively throughout our application’s UI to implement user-interactions; this allows us to keep the interface clutter-free while still having the functionality for advanced features available on the page. We needed features that were not built into Y.Overlay, so we developed Overlay Extras, which is in the YUI 3 Gallery and being used by a lot of other YUI 3 powered sites. Here are some place where we use Overlays on TipTheWeb:

Screenshot showing the confirmation overlay that appears when canceling a tip

Screenshot showing the overlay which contains a slider to allow a custom amount to be set when donating to TipTheWeb

Screenshot showing the menu which lists the various places a user can claim and accept tips at

Current State of TipTheWeb

We’d love for you to try out TipTheWeb; right now we are in invite-only beta, so request an invite on our site and we’ll send you an invite code.

Be sure to catch our talk at YUIConf 2010 where we will be presenting (more in depth) on how we use YUI 3 and YQL at TipTheWeb.

Comments are closed.