New YUI Communication Layer Demo Code

Most recently I’ve been going over Gallery components. They are so awesome that I’ve decided to try to beef up the examples by creating ones that are a bit more verbose and are updatable by myself and others. In that spirit here’s my first one with Communication Layer.

It’s not perfect, but it shows off a bit of what you can do with it. I hope to add more and more of these as I dig through the Gallery.

I’ve also included it via an embed below:

Playful Buttons featured on

I have realized that I output a lot of code and other demo type things but I fail to mention them on my own blog! Kinda wonky, so here’s a recent snippet. I took a few of my css3 snippets and posted them on CSSDECK, and one got featured. I created a few more (basically ported the article to CSSDECK’s format)

I hope you try them out and let me know what you think of them.

Dusting off the blog

It’s been a long time since I blogged here. As you can rightly see. I’ve been struggling with the whole idea of starting fresh at a new site, or trying to continue things here since there’s probably one or two folks who still visit this site every once in a while. What do you think? Perhaps getting a bit of discipline back and writing here will do me some good.

A simple swap page app using YUI’s Y.App()

Simple examples are always difficult to create because while you want to demo some feature, you also want something that seems to make sense. I wanted to try to distill down some of the complexity of creating a Y.App application by building a bare bones two panel app. Here’s the sourcecode:

All I did was create a model, which has three attributes, a view which will render this model, and then built the skeleton of the “app”. We have two pages, both of which use the same view and model structure, and I also used the built-in system for wiring up events. In this case on the “button” tag.

Of course, all this code does is let you switch between to views, but all the work going on behind the scenes to wire up the events, utilize the models, etc is very powerful. This example really just scratches the barest surface of what you are capable with this new framework, and I encourage you to check out a more complex example on the YUI staging site here.

Simple YUI App Framework example

I learn best by digging through code – especially short examples that address the feature or technique I’m trying to learn.
I’m by no means any expert in some of the new features of YUI 3.5.x but I’ve had some time to play around with it a bit and perhaps you might glean something from the sharing as well.

Here’s the jsfiddle:

Basically, via YUI.add I add an “actor” model and view. In the main code I instantiate a new actor which exists inside the black bordered div. I’ve added some methods for moving the div around – which do so indirectly by modifying the actor model. Try clicking anywhere inside the outer div and watch the green box move to your current location.

It’s not much as far as apps go, but it shows off how you can decouple the model of an element with it’s presentation, and add events etc without having to hard code the behavior into the model.

Bring up your javascript console and watch the events pass around to get a better idea of what’s going on.

Update: I was correctly reminded that this is not a true Y.App example, but instead is one that shows off Model and View as App Framework components. I’ll be writing a new example that shows off the new Y.App component in a future post!