Blog: Archive for February, 2011

YUI: Open Hours Wed March 2nd

Implementation focus: Photo Pairs

Marco Egli is the lead developer for Elstr services in Switzerland. As a break from the daily grind, he decided to get his hands dirty with the latest technology, and created a simple memory game called Photo Pairs.

Photo Pairs memory game, powered by YUI 3

In his own words:

With the photo pairs project I wanted to get familiar with the latest and greatest in web technology. So I decided to create the backend with node.js and use on frontend HTML5 semantics and CSS3 styles. Because I am quite experienced in using the YUI2 library (for Elstr and the infinite crossword) the new site was ideal to experiment with YUI3. All the pairs games I found in the www were built with predefined images. But I wanted to give a wider variety of possibilities to the user. So it was an obvious decision to use Flickr as a photo source.

The site is using YQL, Tabview, Overlay, Anim, and DataType. Join us to look under the hood.

Time & Details

We’ll be online from 10am to 11am PST Wednesday. The connection details are the same as usual.

  1. Dial in to 1-888-371-8922 (Skype works great for non-US participants*)
  2. Enter the attendee code 47188953#
  3. Join the screen sharing session (this will prompt you to install the Adobe Connect plugin if this is your first time using it)

* – If Skype is not an option, email me for a local number.

By Luke SmithFebruary 28th, 2011

YUI: Open Hours Thurs Feb 24th

Implementation focus: bigbigtweet.appspot.com

#yui IRC channel regular, Mitchell Amihod (aka meeech) finished a single-sprint project recently using YUI, python, and Google App Engine. The result was Big Big Tweet.

bigbigtweet.com home page

His goal was to start and finish within a couple days, and he met his goal.

The site is using YUI 3 grids, IO, delegation, the valueChange synthetic event, and more. It’s a good example of rapid prototyping with YUI 3, so join us as we dive in with Mitchell.

Time & Details

We’ll be online from 10am to 11am PST Thursday. The connection details are the same as usual.

  1. Dial in to 1-888-371-8922 (Skype works great for non-US participants*)
  2. Enter the attendee code 47188953#
  3. Join the screen sharing session (this will prompt you to install the Adobe Connect plugin if this is your first time using it)

* – If Skype is not an option, email me for a local number.

By Luke SmithFebruary 22nd, 2011

YUI: Open Hours Thurs Feb 17th

The next YUI: Open Hours will be this Thursday, Feb 17th.

Implementation focus: fanity.com

You may be familiar with Yvo Schaap’s work from this “In the Wild” post from 2009. He’s been working with YUI for years now, and has made the switch to YUI 3 with his latest site fanity.com.

fanity.com home page

Give it a whirl with the guest account (email: guest@fanity.com password: fanity).

Eric F, Ryan Grove, and I will have Yvo on the call to talk about his experience building the site. Some topics we expect to cover:

  • Moving from YUI 2 to YUI 3
  • Choosing YUI
  • Modules, OOP, etc in the YUI environment
  • Linking the backend and frontend
  • The pitfalls he encountered
  • And of course, let’s look at the code!

One nice detail I’d like to have a look at is their implementation of YUI’s new AutoComplete widget.

fanity.com's autocomplete UI

Time & Details

We’ll be online from 10am to 11am PST Thursday. The connection details are the same as usual.

  1. Dial in to 1-888-371-8922 (Skype works great for non-US participants*)
  2. Enter the attendee code 47188953#
  3. Join the screen sharing session (this will prompt you to install the Adobe Connect plugin if this is your first time using it)

* – If Skype is not an option, email me for a local number.

By Luke SmithFebruary 14th, 2011

Announcing Atlanta Meetup: “YUI 3: An Introduction”, presented by YUI Contributor Anthony Pipkin

Come join Anthony Pipkin at the Portfolio Center with the Atlanta Web Design Group on February 24th at 7:00 PM as he gives an introduction to YUI 3. His talk is an adaptation of the Introduction to YUI 3 course given by Yahoo’s Luke Smith at YUIConf 2010 and online last month. Anthony will be covering DOM manipulation and the event system that YUI 3 offers. The talk will end with ways to get YUI 3 into your project based on your needs.

Check the AWDG web site for event details and registration information. Hope to see you there!

By Anthony PipkinFebruary 8th, 2011

YUI: Open Hours Thurs Feb 3rd

The next YUI: Open Hours will be next Thursday, Feb 3rd.

Last week we collected some ideas and feedback from you about the YUI project roadmap for 2011. The discussion is hardly over, and we want to keep hearing from you in the forums, but it’s time to get back into the code!

Main Topic: YUI 3 CSS Grids

YUI CSS Grids has been completely revamped in YUI 3, centering on a cross-browser display: inline-block; implementation. The new CSS Grids is more powerful while being simpler to use, and smaller in size. You should check out the YUI 3 CSS Grids examples.

Grids in the Wild

I recently setup a blog for TipTheWeb on Tumblr and wanted to create a custom theme for the blog. I used this opportunity to try out new YUI CSS Grids which I used it extensively for creating the theme’s layout; in fact, I did not use any floats!

In this week’s Open Hours I wanted to talk through my experiences using YUI 3′s CSS Grids for web page layout on TipTheWeb’s Blog, show some code, and talk through the more complex nested-grid structures. It would also be awesome to have other people to show off their projects that are using YUI 3 CSS Grids and talk through their experiences as well!

Annotating Pages That Use YUI 3 Grids

To make it easier to talk about pages using Grids I created a little tool: YUI 3 CSS Grids Annotations it’s a bookmarklet that annotates the grid structure of a web page using YUI 3 CSS Grids, also the source is on GitHub :-)

TipTheWeb Blog annotated showing YUI 3 CSS Grids

Open Hours Time & Details

We’ll be online from 10am to 11am PST Thursday. The connection details are the same as usual.

  1. Dial in to 1-888-371-8922 (Skype works great for non-US participants*)
  2. Enter the attendee code 47188953#
  3. Join the screen sharing session (this will prompt you to install the Adobe Connect plugin if this is your first time using it)

* – If Skype is not an option, email Luke for a local number.

By Eric FerraiuoloFebruary 1st, 2011