You are currently browsing the tag archive for the ‘web’ tag.


Tagninju is an ergonomic tag-centric Time and Cost tracking tool.

Its very simple to use and extremely flexible :

  • use keyword tags to organise and group entries
  • rather than type a long description, keep it terse, with tags
  • tags suggest : topic, person, subject, code, urgency, project, specifics
  • inbuilt auto clock timer with pause and continue
  • set todos into the future quickly
  • provides rapid insight into costs and time


TagNinju app is handy for :

  • gain real insight into your time usage [ procrastination or productivity ]
  • keep yourself motivated with objective progress notes
  • track progress towards a goal like weight loss, fitness, savings
  • budgeting : shopping list and track expenses quickly
  • track hours worked on jobs for freelancers and contractors
  • HTML5 local storage means works on mobile tablet or web


I noticed a lot of time dissapeared on unimportant things, and my productivity and motivation was inconsistent. Some days I would feel motivated and get a lot done, other days Id languish and could not really recall what I spent time on or what goals had been achieved.

I looked for a good app, but the note takers were too general, and a spreadsheet was not easy to use on mobile, many time tracker systems were slow or overkill. Eventually I started working on a simple web app to do this. I added an automated timer clock, and this at least allowed me to note down tasks. I started off writing readable sentence notes, but migrated to a terse form with just keywords. I added a simple filter search and found that worked well : I could zoom into areas of interest by keyword, such as shopping or weight or fee or run or billable.

I gradually noticed a useful psychological side-effect of tracking my time : I wanted to get stuff done just so that I could note it down! Id catch myself thinking.. Hmm I havent put in any entries for exercise the last 2 days, I better do some situps or a run so I can put that in.
So actually noting things down had the effect of pushing me to get more good things done.
Theres a kind of objectivity, and also the effect of your motivated self observing your unmotivated self and kind of comparing the two.

I recently heard a talk by memory expert Josh Foer, about autopilot subconscious plateaus. This is where your activity matches your expectation set point at the OK level and so your conscious mind doesnt need to be engaged. We do this everyday for routine tasks, we perform them uncounsciously or rather subconsciously, on auto-pilot.

Autopilot is great for things we dont want to improve : washing dishes, shaving, driving to work.
For things we do want to improve, we need some way of making the activity stand out to our conscious minds so we can evaluate performance and goals and try a different strategy. Time tracking seems to help with this, it makes you review what youve just been doing.

Im not recommending tracking everything, in fact I think its good to decide to not track some areas, maybe the weekends or reading time in the evening. But it can give real insight and motivation for those areas we want to improve : lose weight, gain fitness, reduce cigarettes, study more effectively etc.


You might find these tips handy :

  • tap timer to pause the clock and restart it
  • tap and drag out from timer box to select a time period
  • use meaningful tags, use multiple tags
  • use quick filter search to zoom into that topic or area

Coming soon

These are some future features which might make Tagninju more useful :

  • sync between versions [ entries shared across devices : mobile, web and tablet ]
  • dropbox integration
  • csv import / export [ to and from spreadsheet ]
  • bar charts to show time and cost spent by tag
  • shared groups

Some of these features will be more useful to professionals, small business founders and freelancers and will be released as part of the upcoming paid version : TagNinju Pro.


Im interested to see how people use TagNinju for tracking time and cost, for achieving goals and personal growth.

Please do email me with your suggestions and feedback at

Just wanted to share a small ‘teaser’ from a project I’m really excited about,

I’ve just finished adding support for the buttons keyboard which lets you make cool counting lessons for younger kids, so here’s a screenshot teaser to enjoy before we go live with the beta site in a few days :


If you haven’t guessed already from the above pic, the idea of is to have an interactive quad grid paper environment in your browser or tablet, where you can work out math problems like long division, multiplication and so on.

My 9yo son has been doing lots of KhanAcademy exercises, working his way up to multiplying decimals..[ which Im pretty chuffed with ].   You really need grid paper to do those as you have lots of adding up in columns.. so anyway we spent ages getting quad ruled grid paper in Bangkok, as this is less common, or at least not easily found in the otherwise excellent stationary shops in the main shopping malls.

Some of these problems take a fair bit of working, so its easy to make typo mistakes .. it seemed to me if you could type in a grid that would really help.  When I thought about how much time Id spent hunting down stationary and that Id spent about $50 in the last year on grid paper… something kind of clicked and I decided to make a prototype and see if it would help.  thus was born GridMaths.

Heres a worked example, of a  ‘long multiplication with decimals’  problem done on a GridMaths sheet :


This would have been a tweet but has snowballed beyond its 140 char limits into a definite POST.

Twitter has been offline for the last 40minutes, and I really wanted to blip / tweet / ping the world that I had been enjoying some things…


Have been enjoying the following without any guilt whatsoever :

– ‘religulous‘ doco last nite, very irreverend, very entertaining

– ‘Rereading Darwin‘ – still radical & relevant if we can grok eon sized time-spans

– web based interactive graphing calculator :

These are all awesome things, relying as they do on the advances that can be made when young people have freedom to think, to learn, have access to books and mentors and dont need to spend all their time either at war or gathering food or preparing shelter.


So that was going to be the basis of my tweet, but that has been subverted into a rant on why Twitter, and Facebook, and Foursquare and LinkedIn and… are fundamentally wrong, whereas the Internet is fundamentally right.

Twitter and Facebook etc. [or the social networking needs they serve] should really be implemented as a distributed system. Each person or a cluster of people would have a local server ‘node’, and it would route messages to other nodes and so on.

For popular tweets or status updates, or checkins or wall postings there would be thousands of copies of that tweet sitting on servers all over the globe. This redundancy is a good thing, there would be less chance that a single Denial of Service attack or plain old human error or of a hardware failure or a mass event taking down the whole system. It could also mean we have more control of our own data – we should ‘own’ the posts we make, and the company we pay [ in advertising or in cash ] would provide the plumbing for the routing of messages and content.

This kind of distributed agent approach requires us to grow psychologically beyond the need for a ‘Central Authority’.. in fact I think that the technology will eventually take us forward to better forms of government, security and privacy, in that they are less centralised, more efficiently optimised to the local and the global environment – fundamentally they will offer more freedom and may require more responsibility.

Lately I seem to be busy mainly with consulting to Internet and Mobile startups, and one of the things I get asked a lot is which technologies I recommend for a given project.

It seems to work best when I give two approaches to serving data, one based on newer tools such as Node.js and CouchDB along with a more conservative alternative using Ruby on Rails or traditional LAMP stack as underlying technology.

As a prelude to the detailed project plan and data design, I usually give an overview of current trends.. I get asked that a lot, so I thought Id put my observations online here as a few bullet points :

Technology Trends :

  • Web and Mobile projects are converging [one usually implies the other]
  • Most data is social data [for the user and the people they interact with]
  • Most data naturally fits a tree or graph structure [tabular, not so much]
  • JSON has replaced XML [hand-in-glove with web, iPhone, Android ]
  • Scalability is a feature [can be deferred, but no easy migration path]
  • The days of generating HTML from PHP are gone [use JSON feed + jQuery]
  • People still use PHP and MySQL [it works, you can find developers]
  • Code using MVC frameworks tends to be overly verbose [Zend, Rails, Django]
  • Node.js and CouchDB are cool [but the newness of NoSQL is risky]

These are universally accepted as a good thing :

  • iPhone vs Android : both are good, competition is great!
  • JSON
  • jQuery
  • Architecture :  [ server data store ] <–> [ JSON ] <–> [ Web / Mobile client ]
  • AppStore revenue model

These are technologies to watch for :

  • Node.js [ultra high performance app servers can be written in Javascript ]
  • CouchDB [scalable NoSQL with sane REST api, map/reduce in Javascript ]
  • SVG [allows new kinds of User Interface on web & mobile ]

The above observations and predictions raise some interesting questions.. but Ill save that as juice for another post.

I’ve added a secondary ‘slave’ circle, which I think introduces the idea of Fourier series in a natural way.

The animation starts as before with a sine curve,  then you can add in the second circle by clicking ‘toggle’.

Click this picture to see the Javascript web animation :

I wanted to explain the math-magic of the circle generating the sine wave with a simple animation of a point rotating on the edge and the height matching the sine wave.

I had a look around but most of the math animations are Java applets which I find a bit top heavy, and this should be doable in Javascript.

This is what I came up with, [click to view animation] –

I tried several approaches to get this working, not perfectly happy with any of them, although I did get a basic demo up and running as you see above.

First approach was using SVG, but for some reason I had problems getting svg to appear at all in an html5 page… go figure, this should be simple.   In the process I was impressed by SVGEdit which is an early stage, usable if not polished, in browser SVG editor. cool.. I just couldnt get any of my pages to show svg.  Ill have another go when the frustration has been forgotten, its possibly some syntax glitch I missed.

I then tried RaphaelJS library which did work reasonably well.  Its a nice api.  Some things like animating along a path you get out of the box, which is nice.  After some basic success I did find myself scratching my head on how to rotate a path – and I’m not sure how to apply a rotate transformation to an item generally [which is a cool feature of SVG ].

Partial demo of sine wave animation implemented in Raphael here.  Animates quickly in Safari on mac, Chrome on mac, slightly choppy on Firefox on mac, and quite slow but functional on Safari iPod/webkit.

Wanting a bit more control over exact placement, I decided to try pure HTML5 Canvas rendering.  This worked well, was simpler to understand exact x,y pixel placement.  I haven’t solved a side issue which is that for some reason if I have the preferred HTML5 “<DOCTYPE html>” tag it ignores exact placement of div elements.. finding this side effect drove me nuts!   Im wondering if this is in the spec, it seems it would break a lot of code.

Anyway, layout of the animation was easy in HTML5 canvas.  See sine animation demo here.

It does seem to be busy drawing, and Id like to eliminate back flicker [which you’d normally do by drawing to back buffer, or having dirty regions].  Performs ok on desktop safari, firefox and chrome [which seems fastest of all the browsers].  Comes up on iPhone but animates slowly as you’d expect.

A faster approach might be to render the background into a separate layer and draw the dots and lines per frame, as its probably touching only 1 in 1000 of the total pixels.

Anyway, seems to be a promising way to get Math animations up and running, which fine tuning will improve.  See page source for Javascript, BSD licence, feel free to reuse.