Request Animation Frame Loops Demystified - How to get started

Today I'm going to start with using snowblower to make some request animation frame loops.


In whatever context you want, make a SnowBlower factory for a stage. Your runtime should create one instance of a stage for every canvas you need.


Here it is folks. I did not write specific code for your rendering engine. You need to expose whatever stage to the objects your are creating so they can call this code:


Piece of cake. Now all you have to do is pick a rendering engine, render the view in the request animation loop, and create your game.

I suggest using PIXI.js or phaser.js because it's a really great API for canvas rendering. Make sure you do all the work before adding the item to the stage. Remove as many variable declarations outside of the draw function as possible to prevent as much resource allocation and memory leaking as possible. Keep it simple. If you want to pass the draw function a parameter or use "this" as the stage, you can modify your request animation loop like this:


In the end, everything is logical and fun.

Have any suggestions? Feel free to comment/post on Google Plus.

Thanks!

~function(){'use awesome';console.log('josh')}();

SnowBlower and Object Composition

I'm going to talk about this "library" and why it's very useful. It takes a lot of the compositional techniques of objects and makes it really fun.

Here's an example of how to use SnowBlower.


It takes all the functions and objects that you pass to it, and either executes it in the context of your new object, or mixes it into your new object. If you need polyfills for your environment, just define Array.prototype.reduce, Object.create, and replace the Object.prototype.hasOwnProperty function to reflect your environment.

It's designed to be small and SnowBlower assumes you have all the pieces and closures that define your object up front. If you need to compose factories, you can just create a function that does it for you.


This is a DRY method of reusing functions you have already defined to compose objects. The sky is the limit! Just thought I would share this compositional technique with you.

~function(){console.log('josh')}();

Your Instatouch Library is Cute

I love the JS community. In fact, I think it's the best community to be in programming wise. There is so much support when you need help, especially if you have no idea what you are talking about.

I just want to point out a few things that have taken steps backwards in the past few years when it comes to mobile web experience.

There are at least a dozen different libraries like this: https://github.com/ftlabs/fastclick where the goal is to make the web more responsive. As a mobile phone user, these packages make my experience WORSE. There, I said it.

The reason why it's worse, I've found, is because I like to scroll and read content on the page. If my finger happens to press a link while I am swiping on the page, it fires the click event! This is definitely not good if that link happens to do something very permanent. At best, I found myself pressing the back button so much I gave up completely frustrated with my experience.

My recent experience on cheezburger was rather frustrating because the links take up the whole screen! Maybe I'm just too slow, or JS wasn't designed to do this. I'm willing to accept either, but I'm definitely used to the way browsers work on my phone.

Your Instatouch library is cute, but it makes my user experience more difficult in some cases, and only marginally faster in others. Thanks but no thanks guys, I'll take the DOM as it is.

-Josh

Installing Node.js on my Android Phone

I have the LG Optimus G on Sprint (LS970) and had to do a couple of things to my phone before I could start using node from the command line. I had to root, install TWRP, and then install DebianKit (the biggest offender on being a Pain In my Rear.)

Anyway, here is the steps I took to get everything working.

Some notes I had:

1. I could not install anything useful on my phone using apt-get until I resized the debian.img file on the sdcard.
   
2. I had to do a lot of trial and error before I could finally get the debian image resized correctly
   
3. Installing nvm was easy once I had space
   
4. I had fun
   

In functional health:
~function(){console.log('Josh')}()