Re-learning Javascript

Lately, I’ve been re-learning Javascript.

Back then in 2004, I used to use Javascript for doing some DHTML stuff (popups, DOM manipulation, …). Nowadays, people start using JavaScript in more structure way to avoid spaghetti code. So I learn how to use some MVC frameworks (like backbone.js or ember.js) and also make myself familiar with JQuery.

Here are some wip learning projects on my GitHub:

    • backbone-cellar: Forked from Coenraet’s Backbone tutorial. I implement Node.JS for the backend support.
    • Alaycator, a simple bookmarklet for converting any website into alay, some kind of Indonesian leetspeak which is popular among teenies 😀
    • todotodo-bootstrap: A simple todo list webapp using Backbone, Require.JS, and Twitter Bootstrap for the UI. Supports mobile and desktop, and stores the data on local database. Contains simple Node.JS script for testing on webserver. I plan to make the JQuery Mobile version of this, stay tuned!

I still think that ActionScript, as a language, is still much better than JavaScript. But the thing is, ever since HTML5 got its hype, JavaScript  has gained LOTS of momentum. People get really excited about it and build amazing things using JavaScript, even on server side.

There are lots of open source projects; people trying to contribute for making better tools or libraries, and all of these grow so fast. Even some Adobe Flex evangelists start promoting JavaScript and HTML5.

At certain point, unless Adobe do something, JavaScript will catchup and will be able to do anything that Flash can do. Hey, maybe that’s not a bad thing 😉

I believe Flash will not be dead soon and will focus more on what its best: High performance and rich multimedia web/mobile app, including games. I’m not saying that all of these things cannot be done by JavaScript but right now, I still think Flash performance is still the best.

If you want to learn JavaScript the ‘modern’ way, here are some suggestions:

  • Douglas Crockford’s JavaScript: The Good Parts. This is a must read! I find this book helps me to switch my mindset to JavaScript specific things like object/prototype, function closure, the bad parts, and also tips & tricks to avoid the bad parts which make your code more structured 😉
  • Addy Osmani’s Essential JavaScript Design Pattern. This book is available for free on his GitHub project. This book give some examples how to build more modular and structured JavaScript development.
  • Addy Osmani’s Backbone Fundamentals. Another free book from Addy Osmani, if you want to develop structured, large, and scalable webapp using Backbone.

Motion Capture Data from Perfume

Last week, I saw a cool website with Flash Stage3D visualization (http://perfume-global.com). It’s a website from Perfume, an electronic music group from Japan. I heard Perfume for the first time when I was study in Bremen in 2005 and I immediately like their music. Maybe it’s because the music is composed by Yasutaka Nakata, who’s also the composer from Capsule, another my favourite electronic group.

I am not a fond of Perfume’s dance movement but the good thing is that you can download their motion capture data for free from their website. They also include a Flash project which parse the motion data (BVH) and visualize its using traditional Flash Sprite.

You can download it from http://perfume-global.com/

I made some small changes and add Stage3D support (using Away3D). Currently, it only shows colorful dancing cubes 🙂

Perfume Stage3D Visualization. Click image above for demo

Source code available at https://github.com/abiyasa/perfume-stage3d

Pilot Cat: Game Teaser on Android

Teaser for my next game, this time it’s on my Samsung Galaxy S

Pilot Cat Teaser on Android

Pilot Cat Teaser on Android

It runs pretty well, around 30/30 FPS 🙂

I didn’t install the Adobe AIR 3.2 Release Candidate on my phone since the released version will be out soon. So I made the APK file with Air captive runtime, which means the package includes the AIR runtime inside your app.

I use the latest Away3D 4.0 but I had problem during compilation. I got a strange error message with depthAndStencil. Luckily, someone had the same problem with me and post the solution on Away3D forum.

Stay tune!

Hiding List Item

Note: This article is about programming tip for Adobe Flex 😉

ItemRenderer is a great feature to render List or DataGroup items. All items wil be rendered and if you want to remove an item from list, then you have to delete it. But what if you don’t want to remove the item from the list but you don’t want it to be displayed?

I couldn’t find any direct way to do this. I tried to Google this but found nothing related so I decided to make some experiments. After several times failing, I found out that you can ‘hide’ an item on DataGroup/List from being rendered by using ItemRendererFunction and an empty Item Renderer (renderer with height=0).

Click more if you want to read the details on how I did it. As usual, you can see the demo and download the source code below 😉

Continue reading