Triptych

Dav Glass is someone who you should make it a point to meet someday. Down-to-earth, smiling, and brilliant. One of the things I really find impressive is his ability to take your assumptions about tech and toss them out the door and show you how much cooler things could be.

One of his recent projects is something called YUI-REPL. Essentially this is a command-line instance of YUI that you can use to test code, debug issues, and try out lots of interesting features of YUI without having to deal with a browser or having a page hosted somewhere. In order to try this out, you need to get node.js working as well as npm. Node.js is essentially a “server side” version of a javascript runtime that can load documents, do complex tasks, and lots of things outside the scope of this post. Suffice to say, if you have not been reading about Node.js you need to spend the weekend getting up to speed. NPM is a package manager that allows you to load cool utilities and features that Node.js uses and can take care of all the dependancies each of those utilities may need in order to run.

YUI-REPL is very similar to the REPL in node.js. You launch it via calling “yui3″ and you now have an interactive command line that lets you load in websites, load in YUI javascript code, call other YUI modules into your code via “use” statements, and all kinds of other interesting things. For instance here is a call to YQL that I created in my previous post — it works flawlessly here and actually represtents another use case for this REPL — debugging your web services. Mind blown yet?

Here is a snippet from @davglass that highlights the load feature of YUI-REPL:

Which loads this script:

And here is a screencast of YUI-REPL in action.

In terms of what sort of future YUI-REPL will have, I have heard that there may be plans to fold it back into the core YUI library somehow – so that you’ll be able to use it anytime as well as having more developers taking a look at the code and adding new features. One in particular may be to allow you to pipe info into and out of the app like any other UNIX command – so you could imagine writing some interesting shell scripts or QA testing of your site via a single command line.

I encourage you to go grab a copy yourself and check it out!

In a previous article I talked about making your own “web services” using javascript, data tables and YQL. Just a few minutes ago someone shared with me another bit of information that I realized could allow anyone to create a webservice with “NO” server of your own at all! Using github’s Gist service, you could create an XML file just via typing into a textbox (or copy-pasting from some other code – or even forking the one I have below!).

Here’s the YQL console command:

For your copy/paste ease:
http://developer.yahoo.com/yql/console/?q=use%20%22https%3A%2F%2Fgist.github.com%2Fraw%2F908359%2F3809546edb9241be39cb7cb10b9c2534e4ef4efc%2Fxplevel.xml%22%20as%20xpl%3B%20select%20*%20from%20xpl%20where%20basexp%3D%22100%22%20and%20numlevels%3D%2210%22%20%3B

Please see my previous article about the details of that service, and how to create your own. The crux of what I want to mention is this:

Which is part of this gist.
Do you get how amazing this is? With literally no server of your own, and with a few carefully set up YQL statements, you can build a complex web service that you could share with anyone to do literally “anything” with other services, pages, data, etc.

I hope you go from “whatever” to “WTF!” as fast as I did.

If you want to imagine some more mind-blowing things — check out the API docs for the javascript you can execute in your open data table.

http://developer.yahoo.com/yql/guide/yql-javascript-objects.html

Why are not more minds being totally blown by this?

Part of the stated goal of this blog is to allow you to explore web technologies in creating games. Often I get off in the weeds with various web techniques, or some game news, so I’m hoping to narrow the focus a bit on helping you build web-based games using HTML, CSS, JS, and other technologies like Node.js.

For the attention impaired amongst you, here’s the code up front:

So, to try things out, click to the Result tab, move your mouse into the tan area (the little green box should turn blue) and use your arrow keys to move the little box around. What do you think? No big deal right? Well, actually it was surprisingly involved .

First off I would like to thank Luke Smith for his work on the YUI Gallery item: Arrow Event. Without it, this would have been much more involved, and to be honest I built some keyboard controls for a canvas based rpg I created, and as soon as you have to deal with different browsers, things get complicated quickly.

The purpose of this code is to show you how you might create a movable element in a web game using the browser’s arrow keys. YUI has this amazing feature that allows you to create your own “events” – called synthetic events. I encourage you to check out that example as the example is not only very useful for games, but learning how to create your own events will be a handy tool for wiring up your game logic.

If you look at the modules I included, you’ll see node, transition, event-mouseenter, and gallery-event-arrow. Let’s run through these quickly. I use node, obviously, because I want to access elements on the page. I often wonder why node just doesnt come “for free”, and I remember there’s SimpleYUI which does that for you (it includes most of the very common modules you’d need for most of your javascript needs). I use transition because I want my little box to move around smoothly. If you look at the code, for every “move” event – we transition to a new location vs just setting the XY coordinates directly.

The two includes left are event-mouseenter and gallery-event-arrow. I use event-mouseenter to try to force “focus” on the outer view. Focus is something that is a problem with events that you’ll have to deal with when you create games. I try to force focus on page load, and whenever the mouse moves over my game area. I try to avoid having to click into the play area, because there may be other elements in that view that listen for a click event, and may interfere with the action of “getting focus”. Note, you could also have used “hover” which is a rollup of mouseenter and mouseleave.

The real meat of this article is related to gallery-event-arrow. Luke has abstracted out the work needed to accept arrow key presses, as well as listening across browsers for holding the key down vs just tapping the arrow key. There are some gotchas that I ran into that I want to mention here. First off, I had to add a tabindex to the little box (of ID=”a”). This allows things that normally would not get “focus” and therefore events to actually get sent to the right element. Secondly once that element has focus, it has this convenient little focus box around it. I don’t know about you, but I don’t really want to have a little focus box around my game elements, unless there’s a specific reason, so in my CSS I added an #a:focus which does two things. It changes the box color to blue, so you know your box is movable, and I also suppressed the “outline” attribute. Thirdly, I ran into a bug where things would not work at all in Chrome. Initially I did not set the top: and left: attributes in CSS to the #a element. This resulted in Chrome trying to get the left and top attributes from getStyle() and getting “NaN”. You could probably find another way to get around this limitation in Chrome – and I encourage you to do so. As a matter of fact, I encourage you to go fork this “fiddle”, find some cool way to use this code, and let me know what you come up with!

If you have any questions or comments please let me know! I wrote this while also attending a conference, so if something is goofy or my sentences seem to kinda run into nowhere, please feel free to ding me and I’ll fix em right up.

You already know jsFiddle is awesome. And you hopefully entertain the idea that YUI is also awesome. (Trust, me. It is!) Today I decided to dig a bit further into jsFiddle’s features and look at some of the more obscure ones. jsFiddle has a few “server side” features that allow you to test out your javascript communication code. Basically it has something that will echo back to you the parameters you send it, so you can make sure that the right params are getting sent – which helps you debug issues, or try out an api before you play with live data. This feature is documented here: http://doc.jsfiddle.net/use/echo.html

You can use this for AJAX, JSONP, even javascript. The javascript one is particularly interesting because you can set a timeout before the js is fetched, which could allow you to create or emulate some event like a click or display something on the screen after a few seconds.

The second thing I wanted to dig into in my wanderings was YUI GET and it’s little brother YUI JSONP. YUI Get allows you to fetch resources off the net – such as scripts and stylesheets – and attaches them via SCRIPT or STYLE tags to your document. This is great when you want to load some content from another domain, and yet also be notified when that content has finished loading.

JSONP is a specialized form of this script fetching ability which allows you to have a “callback function”. This callback function basically waits around for your javascript or other JSON data to be loaded, then the contents of that response is fed as an argument into that function. From there you can do all kinds of things like append the data to the DOM, or control some UI feature. The reason why we have this “callback function” is that it automatically parses our response JS without us having to have some extra library to do it. Let’s look at some code:

Basically what we do here is load up YUI, fetch the correct libraries such as “jsonp”, then transform our data set into a query string (see http://andrewwooldridge.com/blog/2010/12/02/yui-hidden-gems-part-1/ for information about “querystring” ). From there we pass it via the Y.jsonp statement which is a shorthand for “construct a jsonp request and send it”.

The response comes from jsFiddle which dutifully parses the arguments we sent to it, repackages them into some json data block, and passes that to our callback function (via some Sekret YUI passthrough FOO magic function in order to get around the fact that we were running this all from a closure).

We take that response and convert it back into a string and display it in a textarea in our little demo. Sure, this example is not that interesting, but it DOES show you all the parts working together, and so often I see these examples that do 100 things at once and try to teach you how to use an API. It’s like having 5 people talk to you at once when you are asking directions across the street. Too much noise!

Anyway – you could easily extend this out to do other fun things like test some twitter api, or teach yourself how to use YUI GET and JSONP
I hope you got something out of this mini tutorial, and please send me feedback if you are inclined or follow me on Twitter!

JsFiddle is an amazing tool that is accessible anywhere via a browser. It allows you to rapidly create demos, examples, bugs, and many other web-based applications and sites. I would imagine that many amazing new ways to use the web will have their start inside a “fiddle”. There are many other sites which have discussed jsFiddle, so I’ll let you explore those first if you like:

• http://cavica.com/using-jsfiddle-to-write-better-javascript/
• http://doc.jsfiddle.net/
• http://ajaxian.com/archives/jsfiddle

And we’re back. I hope you know now after reading a bit about this tool just how amazing it is. I will often fire up jsFiddle just to play around with some idea I have for YUI, or test out aspects of CSS3 animations. Many other amazing developers have also come up with some insanely great examples of using jsFiddle. Let’s go through a few:

Lindsay S. Kay: (webgl)

Anthony Pipkin: (bubble animation)

fauxparse: (web based tower defense!)

sidonaldson (flaming text)

mootools (all their demos)

http://mootools.net/demos/

Sebastien P. (rotating christmas tree)

MrNibbles (amazing canvas animations)

loleg (traffic game using canvas)

GameQuery demos are hosted via jsFiddle:

http://gamequery.onaluf.org/tutorials/1/step1.php

HighCharts examples are used via jsFiddle:

http://www.highcharts.com/

js1k demo (3D Christmas tree cloned from original)

CSS3 – rotate text:

Google Maps:

I heard lots of feedback when I sent out the word to find some great examples of using jsFiddle. Many developers use it to play with ideas, try out some new technique, or to post examples for browser bugs in forums. One of the most empowering features of jsFiddle for me is that little “fork” button. Its like collecting baseball cards, only both you and I get a copy! You can dig into an example and figure out how it works on your own time, and even branch off of your own work to try out variations or enhancements. Myself I use it at least once a day to try out some idea or something. How do YOU use it? Do you have some amazing example of using jsFiddle that I’ve missed here? Please let me know in the comments so I can make this article better, and also highlight your hard work!