Puppetmaster3's Blog

I write code.

DOM centric data binding, 3 examples

Posted by puppetmaster3 on September 22, 2013

Some front end architects work well with HTML5 designers by allowing designers to experiment and create great looking data ‘tables’ and data grids with CSS. This can only be accomplished by using DOM centric data binding as opposed to having .js emit the DOM. This way an HTML5 designer can use any CSS framework they like to build great UI.
I wrote an example for each of the 2 popular DOM centric data binding grids, ‘list js’ and ‘transparency js’.Both accomplishes that goal. Let me know if you like other DOM centric data binding libraries for data grids tables and just general data binding.

But before you run it, lets get back to designer. A designer may inject CSS using dreamweaver, or more likely a browser plugin, like ‘CSS inject’.
They can then experiment with css till they get something they like. Here is the home page of ‘CSS inject’, it lets you change style at runtime (and there are plenty of other tools).

Screen Shot 2013-09-21 at 6.26.54 PM

You can view 3 examples at runtime here -view source:

The alternative to DOM centric data binding is .js centric emits as done by MV* frameworks. Those are based on server side programing approaches, such as GWT and result in poor UI. If front end arcitects include designers in their ‘pipeline’ we can avoid web apps being ugly like Java applets.

Posted in Uncategorized | 2 Comments »

Elements Hello World

Posted by puppetmaster3 on August 21, 2011

Gamina is a composition architecture for intermediate developers. This article is for new Flex Developers who want to grow past Flex. (There will be update to talk about DOM vs .js later).
If you are happy with Flex and MVC, then this may not be for you. Some developers find it hard to write a scrolling chat list in Flex, as item render is limited. Flex also produces large and slow SWF and this appears to make Flash look slow on some devices.
(Flex may also limit your career: ceo-friday-why-we-dont-hire-net-programmers )
Here is an example (npm install gamina) that shows elements(Components) without FlashCS/Flex mouse based development:dropbox.com/u/2127757/helloEl.png. And here is the screen code:

package ex.helloEl {
public class HelloElMain extends Sprite implements IWidget {

	private var _butA:AButton;
	private var _stageRef:Stage;

	public function init(stage_:Stage):void {
		_stageRef = stage_;

		_butA = new AButton();

	public function elementAdds(el:IWidgetElement):IWidgetElement { this.addChild(DisplayObject(el)); return el;}

	// this is hello world for elements, not on composition so we ignore IWidget and IWidgetBus
	public function initWidget(screen_: Object, quality:int=-1):IWidget { return null;}
	public function addTrait(trait : IBasicTrait ) : void {}


We just added a button element github.com/puppetMaster3/Gamina-Core/tree/master/asSrc/org/gamina/elements
The button is drawn using graphics.draw. You can see how to use low level graphics here musprite.sourceforge.net/assets/muSprite.htm and then do Scene/Script to paste to your IDE. Maybe then add tweens to it.

Doing scrolling chat widget is easy if you write your own elements. Relative to Flex, you’ll find it much more productive. Gamina can be used w/ Flex/FlashCS/DOM/Pure .js or pure .as, it is primarily interfaces that set up the composition pattern as explained elsewhere.

This article was only an introduction to pure .as programming.

Posted in Uncategorized | Leave a Comment »

Socket Service

Posted by puppetmaster3 on August 21, 2011

One of the features of the Gamina is cross platform sockets, ex: WebSockets.

This video:

(view via VLC) shows IOS Safari, IOS App and Android talking via a service remotely. Gamina supports almost all browsers and devices via sockets.

WebSockets are an alternative to Ajax/REST.

Posted in Uncategorized | Leave a Comment »

Node context sensitive IDE editing

Posted by puppetmaster3 on August 21, 2011

Download and view in VLC: ide.mp4

It shows how to do context sensitive editing in node w/mongo. Also it happens to be yet another example of node/mogo.

The trick is:
var MediaModel = require(‘./srvCode/MediaMod’);
var mediaMod = new MediaModel();
//var mediaMod = new MediaMod();//IDE hack, comment out at run time

Posted in Uncategorized | Leave a Comment »

Better code without anonymous functions in ECMAScript/JavaScript

Posted by puppetmaster3 on August 18, 2011

Anyone can write code, ex: there’s kids in grade school and high school writing .js/EcmaScript mostly object-disoriented. Commercial coders (ie, you get a paycheck for writing code) presumably are more productive and write better/defensive code.

By better, I’ll mean easier to maintain and test, and specifically don’t write anon functions. When you write anon functions, your stack trace might confuses you. In .js, someone called it programing where your code moves to the right (when using anon functions).
You can learn from other ecmas script implementations ( http://blog.millermedeiros.com/2010/11/why-the-html5js-community-should-respect-the-flash-community ). This blog post is that… *when an .as3 developer writes .js code, they don’t use anon functions*. Let me show you a testable example that will produce a much better trace( in the next version of node) and in general better code by avoiding anon.

var Trait1 =Base.extend({

,val:"some data"

,doFrame:function() {// non - anon function, a good practice.
   // console.log('hi '+this.val);
   this.wig.mesh.rotation.x += 0.01;
   this.wig.mesh.rotation.y += 0.02;

,initTrait:function (wig_,onFrameSignal_) {
   this.wig.mesh.rotation.x += 0.01;

  this.onFrameSignal.add( function(){// anon, hard to maintain and object disoriented, so remove
     // wig_.mesh.rotation.x += 0.01;
    // wig_.mesh.rotation.y += 0.02;


It shows 2 approaches, one is easier to test and debug. You can see the commented out code, using anon function. And the way to write it better by using a named function, doFrame. You can also do so w/ a simple built in ‘prototype’ (and not use Base js ).
You can get the entire working example from github: https://github.com/puppetMaster3/Gamina-Core/tree/master/jsSrc/anonBad

What do you think, is there a way to make it better?

This approach is similar to approach used by MaxRacer (alternativaplatform.com) in .as3.

To use this in node, you need to: npm install signals – or in browser load http://millermedeiros.github.com/js-signals

Side benefit is that you get IDE’s that are context sensitive. With WebStorm for example, if you type myClassInstance”.” it tells you the functions the class has. Other basics of defensive coding include throwing Exceptions and asserting(ex asserting instance type).

I also learned an advanced approach at a node meet up, where user ‘requests’ are assigned a guid in an associative array and expected duration. If the function calls return in time, the error is aborted. If the ‘request’ times out for any reason, the error is thrown. Nice! I’ll try it with Chain of Responsibility pattern.

I plan to do more of an architecture, like state machine and mongo at gamina.org site, the only way you can track updates is if you join “gamina” google group – linked at gamina.org . It is targeting intermediate developers and above doing ECmaScript.

In summary, don’t use anon functions.

Posted in Uncategorized | 1 Comment »


Posted by puppetmaster3 on September 27, 2010

Adobe docs

here is a sample build:

The resulting swf can only run on certain domains.

Posted in Uncategorized | Leave a Comment »

FITC “trip” report:

Posted by puppetmaster3 on August 20, 2010

Went to OSMF session… basic, like when to use imports. (he plans to update presentation for Max).

Went to A-listers, mostly on performance. Trying to get FP to go over 1K polygons as 24FPS is tricky, requires fast sorts:

  • Joa E. of Aparat, using static functions in byte code for speed, promised Obfuscator soon. Lots of people are using Aparat to make SWF 40% smaller.
  • Ralph H. of Aviery showed optimized .as code and promised interactivity demo soon.
  • Eugene Z. of SURF showed optimized alchemy code, and optimized fast edge finder.
  • Robert of Away3D talked about optimized .as in Haxe and fast WebGL. Also events are slow.
  • Nicolas of Haxe showed more Haxe and ObjectiveC support.
  • Unity(alternative to flash) showed speed, will add “google supported” video in Q4 in v3.
  • 2 sessions: Brandon of Hype and the Mike C. from CasaLib said not to use events, and use pools.
  • Bruno: FDT (and FlashDevelop) will support Haxe.
  • Jim Corbett talked about .as speed, reducing # of Sprites and asked for input for FP11 features (which I plan to give him). I did have lunch w/ him and talked about issue filed by my boss on optimizing crypto.
    Jim said bytearay in FP11 will be as fast as Haxe and Alchemy.
    He said before FP11 video will go from 40% cpu in 10.1 to 1% CPU utilization before FP11.
    Tibo and Tinic where there + 6 more FP from Adobe that I did not know.
    I did have a class loading issue w/ remote SWF and have to connect w/ Andre of the FP team, the guy that works on class loader. (plan to give him example).

How many A-listers do you recognize?

I talked to some A-listers… they assume FP11 will have parity w/ Unity and WebGL, but I am not sure it will.

Posted in Uncategorized | Leave a Comment »

RFE Flash runtime/player 11:

Posted by puppetmaster3 on August 18, 2010

Here is some low-lying fruit for FP11:

1. Native crypto:
Like Silverlight.

2. GPU info:
This might be hard, but do some browsers know GPU info?
Work w/ browser team.

3. Document in live docs alternatives to Events for performance.
Popular FW/libs (Hype, CasaLib) don’t use events, they use closures and callbacks.
Adobe Performance paper says don’t use events. RobotLegs/Signals, most popular FW, uses QT like signals.

4. Haxe(mtasc)/Alchemy have great compiler.
mxmlc should also.

5. Apparat compression of swf.
Add as ant step.
Also Joa’s “static functions” language can be leverage for those cases.

6. Native “fast corner detection” and “very fast sorting” for 3d/AR apps. Look at AsSURF, Away3D.

7. Parity w/ WebGL/Unity

8. Native JSON parser built in.
XML is 10x larger.

9. Compile to .js, like Haxe and Laszlo. This allows me to write in .as and support iCrap devices: write once, run aywhere.

10. When marketing Flex (big/slow) give some room to native .as. (ex: muSprite/MinimalComponents) in LiveDocs.

11. Embed tag is bad.
Give some props to loading, like you would in .js. It makes Flash look bad relative.

12. In livedocs of timer.. explain about onFrame might be a plus.

13. Air… native GPU.
It does not use browser.

14. Bring key projects in for demo day of FP11: MinimalComponents, AsSURF(/FLAR), Away3D. (CasaLib, Hype, Aether, as3Corelib, BetweenAS3, etc.), Joa/Apparat, etc.

15. When marketing heavy MVC(Cairngorm/OSMF), explain 2 tier is ok, ex: loading SWF w/ functionality.

16. When marketing designer+developer, have live docs mention Ant, CI and: Hudson.

17. When marketing FlexUnit, in livedocs mention AsUnit.

18. When positioning Flash in browser… it’s ok for Flash to be 100%!

19. Are any consoles supported (like Unity): XBox, PS3, Wii, GoogleTV

20. No 3d Collada from Adobe. Acquire http://www.erain.com/products/swift3d/Papervision3D/Default.asp

21. Don’t work “long” process that bypasses onFrame. Flash is like OpenGL.

22. Consensus from FITC was… if Adobe does not get WebGL and Unity parity by Q1 ’11/FP 11… they are done.

23. “Deprecate” av1. Some (ads) are nudged to work on FP8. When player detects as2… display an alpha message for 2 seconds saying it needs to be upgraded. In FP11.

27. Classloader loads only SWF. Support SWC, much easier.

28. Talk up static function and http://drawlogic.com/2010/08/21/interesting-jitb-flash-player/

29. Have real A listers demo FP11 (Joa, Robert, Ralh, Eugine. And build in some AR helper class, like fast edge detector).

Posted in Uncategorized | Leave a Comment »

SF Recommendation/ Bike over GG:

Posted by puppetmaster3 on July 30, 2010

Here is a way to see a lot of Bay Area in a few hours, what I do when friends visit. Bike over GG, (print this) , but they give you the map also:

Get to Pier 39, AM is best. You can take the cable car to it from “downtown”/Market St. else you’ll have issues getting in/out. Rent a bike @39 next to #1 on the map. Instead of meeting at Pier 39, consider meeting in Union Sq, where cable car starts, have a Crepe breakfast there, then “jump” on cable car to @39.

Bike(work out mode) along the coast(bearing right) to #3@ Map. Luca’s Arts there has statue of Yoda. It’s fun looking for it.

Bike to #4, rest a lot, a short uphill is coming(some walk it) and it’s also a half way point. Rest some more.

Bike over GG(you should have a “windbreaker” type of a jacket), to enjoy GG take your time, take pics, go to #8 on map. A little trick, after crossing GG, carry the bike all the way to the right @ 20 yards (and rest there, some great views). Then follow trail to the right and single file go downhill all the way.

This is basically the end of the bike ride at #8. Find out when the ferry is going back to Pier 39. Lock bikes good (or someone watch them) and shop a little, enjoy. Eat. I like http://www.yelp.com/biz/hamburgers-sausalito (print it).

The ferry goes by Alcatraz on the way back.

If you want more, cab to http://www.betelnutrestaurant.com after.

(I can be talked into joining you)

Posted in Uncategorized | Leave a Comment »

Java IDE performance

Posted by puppetmaster3 on July 25, 2010

If you use Eclipse, FlashBuilder, FDT and even InteliJ, you can speed it up a lot by editing equivalent of eclipse.ini similar to:


In Mac, you have to cd Eclipse.app(or whatever ide you have) to get the ini.

Also when you can (Mac can) use 64 bit version of the Java IDE. If using FlashBuilder, use it as plugin, so you can have ant, etc.

In Windows, you need to optimize registry w/ settings from blackviper.com and use the Yamisoft manager.

Also sometimes the IDE loads a lot of plugins you don’t need, just go to preferences and turn them of.

Posted in Uncategorized | Leave a Comment »