So I am taking a little time away from games development at the moment to explore a few other projects and ideas. I want to solve real problems that either I or others have had. I want the projects to be short so I don't get bored and frustrated and I want to also learn new techniques and technologies as I build them.



The first of these little projects is called [Trello Tasks](https://chrome.google.com/webstore/detail/trello-tasks/icedfgfhjcnidibolnnfbjnjbkbfgcic).

[![screenshot-01-640x400](https://www.mikecann.blog/wp-content/uploads/2015/11/screenshot-01-640x400.png)](https://www.mikecann.blog/wp-content/uploads/2015/11/screenshot-01-640x400.png)

The TL;DR of Trello Tasks is: it augments Trello by turning Cards into "completable" tasks.

I have [spoken about Trello before](https://www.mikecann.blog/misc/indie-game-project-management-with-trello/) but if you arent familiar with Trello its a super simple, popular and free [Kanban](https://en.wikipedia.org/wiki/Kanban) style app designed to organise any data. You can create any number of "Lists" which you then populate with "Cards". You can add images, links, comments etc to cards which allows you to organise just about any sort of project.

![](https://www.mikecann.blog/wp-content/uploads/2014/09/drag-drop-trello.gif)

One of the most common ways to use Trello is in the "ToDo" style. In this style you have three lists, ToDo, Doing and Done:

[![2015-11-25_08-28-57](https://www.mikecann.blog/wp-content/uploads/2015/11/2015-11-25_08-28-57.png)](https://www.mikecann.blog/wp-content/uploads/2015/11/2015-11-25_08-28-57.png)

In this style, when you start work on something, you move it from the "ToDo" List to "Doing" List then when its complete you move it to "Done" List.

This is all well and good but what if you use a different system of organisation such as arranging the items by category:

[![2015-11-25_08-31-45](https://www.mikecann.blog/wp-content/uploads/2015/11/2015-11-25_08-31-45.png)](https://www.mikecann.blog/wp-content/uploads/2015/11/2015-11-25_08-31-45.png)

Now if you want to indicate that you have read a book or watched a movie you would have to either drag it into the "Done" list (and loose the categorisation) or create a "Done" list for each category. One other option is to "Archive" the card but doing this removes it from the list altogether.

[![2015-11-25_08-36-50](https://www.mikecann.blog/wp-content/uploads/2015/11/2015-11-25_08-36-50.gif)](https://www.mikecann.blog/wp-content/uploads/2015/11/2015-11-25_08-36-50.gif)

So I decided to try and solve this very particular but annoying problem. My solution is to add a checkbox to each card. Now cards can be marked "complete" and "uncomplete" by simply checking the checkbox.

[![2015-11-25_08-41-18](https://www.mikecann.blog/wp-content/uploads/2015/11/2015-11-25_08-41-18.png)](https://www.mikecann.blog/wp-content/uploads/2015/11/2015-11-25_08-41-18.png)

The extension works by piggybacking on Trello's comments system. So each time you complete or uncomplete a task the extension adds a comment to the card.

[![2015-11-25_08-43-25](https://www.mikecann.blog/wp-content/uploads/2015/11/2015-11-25_08-43-25.png)](https://www.mikecann.blog/wp-content/uploads/2015/11/2015-11-25_08-43-25.png)

This means that in a multi-user board you can tell who completed or uncompleted a task and syncing "just works":

[![2015-11-25_08-47-32](https://www.mikecann.blog/wp-content/uploads/2015/11/2015-11-25_08-47-32.gif)](https://www.mikecann.blog/wp-content/uploads/2015/11/2015-11-25_08-47-32.gif)

So I think its a pretty neat solution to a problem that I personally have had while using Trello. You can grab the extension now and for free from the Chrome store:

[https://chrome.google.com/webstore/detail/trello-tasks/icedfgfhjcnidibolnnfbjnjbkbfgcic](https://chrome.google.com/webstore/detail/trello-tasks/icedfgfhjcnidibolnnfbjnjbkbfgcic)

I have a few more ideas like this I would love to explore and solve over the coming weeks so stay tuned!

[![](/wp-content/uploads/2011/10/2011-10-09_1257.png "2011-10-09_1257")](/wp-content/uploads/2011/10/2011-10-09_1257.png)

The second day of [try{harder}](/posts/try-harder-my-haxe-slides-and-code/) was dedicated to a single topic; test driven development (TDD).



The group was split into pairs and given the task of using TDD to write a solver for the game of life in AS3\. After an hour we then threw away everything we had done, swapped partners and repeated the process.

This was extremely valuable for me as I had never written a unit test before. Seeing how different people tackled the same problem was fascinating and informative.

After repeating the process three times Stray asked if I was interested in teaming up with another attendee of the conference [Alec McEachran](https://www.google.co.uk/url?sa=t&source=web&cd=1&sqi=2&ved=0CBsQFjAA&url=http%3A%2F%2Falecmce.com%2F&ei=jZyRTp-fEcmAhQeIwtn0Dw&usg=AFQjCNEKPdue-giHnTp0HZCJwVWz3QeVoQ) to investigate unit testing in haXe. It was a great idea as it meant we both could investigate how unit testing worked in haXe and it would give me another code example for my talk the following day.

After a brief search we decided on Mike Stead's [MassiveUnit](https://github.com/massiveinteractive/MassiveUnit) for testing as the testing syntax looked similar to FlexUnit and it contained a toolchain for running the tests on multiple platforms.

An example of a test we wrote is:

```haxe
package ;
import massive.munit.Assert;
import Grid;

/**
 * ...
 * @author MikeC &amp; Alec McEachran
 */

class GridTest
{
	public var grid : Grid;

	@Before
	public function before():Void
	{
		grid = new Grid(3, 3);
	}

	@After
	public function after():Void
	{
		grid = null;
	}

	@Test
	public function initiallyThereAreNoLiveNeighbors():Void
	{
		var liveNeighbors = grid.getLiveNeighbors(1, 1);
		Assert.isTrue(liveNeighbors == 0);
	}

	@Test
	public function liveNeighborCountIsAccurate():Void
	{
		grid.set(0, 0, true);
		grid.set(1, 0, true);
		grid.set(2, 1, true);

		var liveNeighbors = grid.getLiveNeighbors(1, 1);
		Assert.isTrue(liveNeighbors == 3);
	}

}

```

It should look fairly familiar to anyone who has used FlexUnit before. The metatags @Before @After and @Test perform in exactly the same way as they do in FlexUnit. Another benefit of using munit over the built in testing framework in haXe is that you are given a tool to run tests on all platforms simultaneously:

```haxe
haxelib run munit test test.hxml

```

When executed you get something that looks like the following:

[![](/wp-content/uploads/2011/10/ScreenHunter_01-Oct.-09-13.54.jpg "ScreenHunter_01 Oct. 09 13.54")](/wp-content/uploads/2011/10/ScreenHunter_01-Oct.-09-13.54.jpg)

Which presents a nice graphical representation of the tests run and which failed (if any).

Once built and tested we decided to give the code a simple visual representation. We wanted to show off the ability for haXe to target multiple platforms. To do this we decided to go with [NME ](https://www.haxenme.org/)which I had been experimenting around with recently.

[NME ](https://www.haxenme.org/)is a library and tool chain for haXe designed to allow the developer to use the flash API on multiple platforms. They achieve this by writing platform targeted version of the flash API. So what this means is code such as the following:

```haxe

package ;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.geom.Rectangle;

/**
 * ...
 * @author MikeC &amp; Alec McEachran
 */

class Render
{

	private var _cellSize : Int;
	private var _renderTarget : BitmapData;
	private var _rect:Rectangle;

	public function new(container:MovieClip, cols:Int, rows:Int, cellSize:Int)
	{
		_cellSize = cellSize;
		_renderTarget = new BitmapData(cols * cellSize, rows * cellSize, false);
		container.addChild(new Bitmap(_renderTarget));

		_rect = new Rectangle(0, 0, _cellSize, _cellSize);
	}

	public inline function lock():Void
	{
		_renderTarget.lock();
		_renderTarget.fillRect(_renderTarget.rect, 0xff0000);
	}

	public inline function renderCell(x:Int, y:Int, isLive:Bool):Void
	{
		if (isLive)
		{
			_rect.x = x * _cellSize;
			_rect.y = y * _cellSize;
			_renderTarget.fillRect(_rect, 0);
		}
	}

	public inline function unlock():Void
	{
		_renderTarget.unlock();
	}

}

```

Will compile down to flash, c++ and Javascript! NME also includes packaging abilities for webos, android and ios. So with a few scripted command lines you can target most app marketplaces:

```

haxelib run nme test YourProject.nmml flash
haxelib run nme update YourProject.nmml ios
haxelib run nme test YourProject.nmml webos
haxelib run nme test YourProject.nmml android
haxelib run nme test YourProject.nmml cpp
haxelib run nme test YourProject.nmml cpp -64

```

What it means for this project is we could very quickly get a view for our game of life running in flash, JS and native desktop.

To show just how easy it is I made the following video:

<iframe width="853" height="480" src="https://www.youtube.com/embed/VNF2gH5o9Zs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"  allowfullscreen></iframe>

You can see the HTML5 build here: [/projects/gameoflife/Export/html5/bin/](/projects/gameoflife/Export/html5/bin/)

And the flash build here: [/projects/gameoflife/Export/flash/bin/MyApplication.swf](/projects/gameoflife/Export/flash/bin/MyApplication.swf)

I have uploaded the source for the project here: [/projects/gameoflife/gameoflife.zip](/projects/gameoflife/gameoflife.zip)

[![](/wp-content/uploads/2011/07/header.png "header")](/wp-content/uploads/2011/07/header.png)

Ive spent a little more time this weekend looking at some more  HTML5 with HaXe. Following on from [my previous experiments with WebGL](/posts/chrome-crawler-haxe-three-js-webgl-and-2d-sprites/) I decided to give HTML5's Canvas a a look as it was supposed to be designed specifically for the purpose of doing 2D.



I had heard from the HaXe mailing list that the [Jeash project](https://haxe.org/com/libs/jeash) was a common way of interacting with the canvas in HaXe. Jeash is a remapping of the Flash API into JS so in effect I should beable to take any of my usual flash code, Sprite's,  BitmapData's, etc and it should run on the canvas no problems. Nice!

So I coded up a quick blitting example to see what sort of performance I would get:

[/projects/HTML5SpeedTests/HaXeJeash/bin/](/projects/HTML5SpeedTests/HaXeJeash/bin/)

The results were okay (I get about 11FPS with 5,000 crawlers) however I was interested to know what sort of cost HaXe adds. So I decided to code up a second example, this time using pure JS:

[/projects/HTML5SpeedTests/JSCanvas/](/projects/HTML5SpeedTests/JSCanvas/)

The results this time were better (14FPS with 5,000 crawlers) so I now wondered what happens if I do without Jeash and just code up the example using pure HaXe. I was expecting to see the same sort of performance hit as Jeash:

[/projects/HTML5SpeedTests/HaXeCanvas/bin/](/projects/HTML5SpeedTests/HaXeCanvas/bin/)

Surprisingly it actually runs faster (17FPS with 5,000 crawlers) ! This is quite a surprise and totally contradicts my notion that going from HaXe -> JS would incur a cost. I was expecting some cost, but a performance increase?! I can only speculate that behind the scenes the JS engine in the browser is able to JIT compile the HaXe JS much better than the hand-crafted JS and hence more speed.

If you are interested in the source then I have uploaded it here: [/projects/HTML5SpeedTests/HTML5SpeedTests_1.zip](/projects/HTML5SpeedTests/HTML5SpeedTests_1.zip)

P.S. All the test were run on Windows 7 x64 in Chrome 14 (dev)

[![](/wp-content/uploads/2010/03/mcimg.png "mcimg")](/wp-content/uploads/2010/03/mcimg.png)

Wow! Although this is doable in flash I must say im pretty impressed with this little HTML5 app by MrDoob called [Harmony](https://mrdoob.com/projects/harmony).



Basically its just a little drawing app. I bet there are some people out there that could do some amazing things with this! As it is, im a programmer and no artist, but there is definately a certain beauty to some of the doodles that can be easily made in this thing:

I call this one rainbow circles:

[![](/wp-content/uploads/2010/03/download-1.png "download (1)")](/wp-content/uploads/2010/03/download-1.png)

(click for full-size)

And this one maze:

[![](/wp-content/uploads/2010/03/download-2.png "download (2)")](/wp-content/uploads/2010/03/download-2.png)

(click for full-size)

Anyways, I would love to see some creations from proper artists. Make your own here -> [https://mrdoob.com/projects/harmony](https://mrdoob.com/projects/harmony) and drop me a comment with yours!