Implementation Focus: Fun and Games with Kris Cieslak

February 27, 2007 at 5:49 pm by Eric Miraglia | In YUI Implementations | 12 Comments

Periodically, we touch base with developers in the community who are implementing YUI for projects outside of Yahoo. Kris Cieslak caught our eye with some YUI-powered games that he posted to the Yahoo! Gallery. Kris is the author of the digitalinsane blog which focuses on web development and JavaScript programming. He writes Ajax and DHTML applications mostly powered by JavaScript libraries like YUI and supported by other web services.

What is your background in frontend engineering?

I started programming when I was 10, writing a few games in BASIC on my Commodore 64k. When I bought my first PC I started learning Pascal, C/C++ and assembly language. I was on the Polish demo scene, as a very newbie coder, and I learned a lot from the professional coders. In college I worked on Windows XP Registry and wrote an advanced Registry Manager in Delphi. Recently I started programming in JavaScript and started my blog.

When did you first learn about YUI? What was the first application you wrote with it?

About six months ago. I’ve really the Yahoo APIs; this is why I decided to spend more time working with them and with YUI. My first application based on Yahoo services was Image-Search! and the first project I created with YUI was Yetris!.

What games have you written using YUI?

I’ve written four games based on YUI. The first was Yetris! — a JavaScript version of the classic game which probably everyone knows. This was my first project based on YUI and I spent four days working on it. I spent most of that time reading the YUI’s documentation and trying to adjust my ideas to the YUI environment. I started writing Yetris on 31 December 2006 about four hours before midnight; many people spend that time at New Year’s parties but I was learning YUI.

The second and my favorite game is Puzzle. This application is based on YUI and the Flickr API. The hardest part was to figure out how to divide photos into small pieces using only JavaScript. If you have one or two images you can use graphics applications to do that, but what if you have to manipulate millions of photos? As you can see, I found a solution.

When I had finished the Puzzle, I remembered a version of Space Invaders written in assembly language which I found on programmersheaven.com, and that inspired me to write a JavaScript clone of that classic game. I had a real problem with performance in Firefox and I had to spend lot of time optimizing the code especially for that browser.

Solitaire is my most recent project. I spent one week, six hours per day working on it. I hadn’t used drag and drop techniques before, and there was a lot to learn. When you look
at the code you will see that it is complex but it is also very compact. Without YUI the problem would be very hard to resolve. I wrote four different versions of that game using four different techniques. And the last technique proved the best and works very well on three popular browsers.

In using YUI for these projects, what aspects of the library have been particularly pleasing to work with and powerful in solving problems?

YUI does a great job keeping balance between functionality, the size of the library and performance of the functions. Generally I’m using YUI because it’s solving the problems with cross-browser compatibility, because I can easy manipulate each element/layer, because I can get or change the position, color, transparency of each object, because I can use the Drag and Drop Utility, and of course because of the Animation Utility — very effective and simple in use.

For me, the most important parts of the YUI are Dom and Event. These libraries resolve most of my problems with browser compatibility.

What pain points have you noticed in using YUI? What would you like the YUI team to focus on next?

At the beginning, I had the problems with documentation. Each of the functions is clearly described. However, I didn’t know how to use them. I would like to see more simple examples; these are more important than any description, especially for complex functions.

As for what to add to the library, maybe advanced mathematical libraries (numbers conversion, vectors, complex, angles, statistics, calculator widget etc…) would be nice to see in YUI.

What’s next on your plate? Any exciting projects coming down the pike?

Doom3.js! I’m joking. However, creating 3d shooter in JavaScript is not impossible. I think it is possible to make a game similar to the early version of Wolfenstein 3d but without textures and animated sprites (enemies), with very, very simple levels.

Do you have a YUI implementation that would be of interest to the YUI community? If so, please share your link and post a message to the community forum at YDN-JavaScript, or leave us a message in the comments section below.

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

12 Comments

That Puzzle looks incredible, nice work on all of them.

Comment by BillyG — February 28, 2007 #
Kris Cieslak said:
> I would like to see more simple examples;
> these are more important than any
> description, especially for complex functions.

I couldn’t agree more. Excellent article and nice profile. Maybe hire Kris to do some small tutorials with examples? :)

Comment by Jack Reacher — February 28, 2007 #
@Jack — Tell me more about these small tutorials and examples you’d like to see. Can you give me a few examples of issues you’d like to see tutorials on? And can you point me to a model tutorial somewhere that you think hits exactly the right level of depth and elucidation? Regards, -Eric

Comment by Eric Miraglia — February 28, 2007 #
If you like those games you should check out http://greenfelt.net. It doesn’t use yui (everything was written from scratch) but the results are similar and there are only 2 people working on it part time.

Comment by David Caldwell — February 28, 2007 #
Good stuff, fun and creative! Who said you couldn’t do entertaining things with YUI as well. ;)

Dustin Diaz also did an implementation of YUI Tetris a little while back.

Comment by Scott Schiller — February 28, 2007 #
Eric Miraglia said:
> Tell me more about these small tutorials
> and examples you’d like to see.
Eric, thanks for the response.
I think the format for the “Getting Started” section of each component is great. However when I go here:
http://developer.yahoo.com/yui/examples/
There are lots of good functional examples but the tutorials are limited in number and IMHO, when I do see one it doesn’t have the feel of the Getting Started sections. I was referring to Kris’s use of the word “more” rather than simple. The Getting started sections are simple enough I believe. ;)

Maybe I’ve missed it but a “best practices” doc would be good as well. Maybe offering suggestions on many of the things [with reverance] Douglas Crockford [/with reverance] covered in his videos.

I can’t say enough how pumped I am about YUI and the hard work you guys do. Thanks!!!

Comment by Jack Reacher — March 1, 2007 #
@Jack,

Understood. I agree that we have a preponderance of functional examples and a dearth of tutorials. That we will rectify over time — no quick fix to that, but we understand that utterly.

Do keep in mind this thread when you see a tutorial that’s particularly helpful or well done that you’d like to suggest as a model for these. We have ideas about these, obviously, but it would be interesting to know what you find most helpful.

Regards,
Eric

Comment by Eric Miraglia — March 1, 2007 #
Implementation focus: YUI implemented in the frontend of community content management software go®-community.The internet agency Blackbit interactive could be regarded as a „Web 2.0 dinosaur“: Years before the term „Web 2.0“ was launched the German company was already creating online communities on the basis of their software „go®-community“ and coined the term „Community Content Management“. Blackbit designs, implements and hosts ambitious websites mainly for the purposes of web-marketing, external presentation and communication.
The main idea is the community thought: Turning the recipient as quickly as possible into a dialogue partner and personalize follow-up communication.
Go®-community was designed from the very first as social software and was extended in 14 man-years of development work to a multipurpose web-platform: Community, chat, blog, ecommerce, asset/product management. The clue about the software: The appearance as a blog or a product management system is not a question of modules, but of configuring one and the same underlying system.

This customization is often highly specific and was carrying each programmer’s handwriting. To standardize this work, the YUI toolkit was chosen recently. Blackbit collects libraries for setting up go®-community on the basis of YUI. The aim is to create a YUI-based construction kit for template building which shall not implicate any restrictions for the screen design. So far, grids, menus, buttons and tree have been implemented. More YUI features will come.

Several possible solutions were discusses: There was no long debate about Microsoft framework as it implicates too many technological dependencies. Google web toolkit was regarded as easy to handle through its wysiwyg-editor but too difficult to integrate precisely. RTFM ruined DOM API: The licence model was too complicated for us. The dojo toolkit works fine, their grid tables were released earlier than YUI but it has a deficiency in the documentation.
The crucial factors in Blackbits decision for YUI were the quality of the APIs and the simplicity. Coders can get go with the projects instead of spending ages on studying YUI. This standardization upvalues the software: go®-community is also licensed to other agencies to implement projects with. By the implementation of YUI the demand for training on administration will become less.
Have a look at: http://www.go-community.de

Comment by Andre Ress — March 13, 2007 #
P.S: Here is a link showing a website with the Yui-implementation:
http://www.go-community.de/geschaeftspartner/

Comment by Andre Ress — March 13, 2007 #
That’s pretty awesome stuff. I recently created a memory matching game that doesn’t use YUI, but I may incorporate it soon.

http://www.wegoall.com/michael_dowling/memory/memory_match.htm

Comment by Michael Dowling — March 21, 2007 #
[...] Fun and Games with the Yahoo! User Interface Yetris, Puzzle, Space Invaders, Solitaire [...]

Pingback by All in a days work… — July 22, 2007 #
This is a pretty impressive example of how YUI can be used. I’m trying out some stuff myself. They aren’t exactly games but seeing these examples have just given me inspiration to try creating a simple game using YUI. Way to go!

Comment by EcommerceGuy — September 25, 2007 #

Sorry, the comment form is closed at this time.

Yahoo! User Interface Blog (YUIBlog)