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


click Melbourne Graffiti item above , drills down to this page :


Handy for nested Product Catalog style apps … or a scrapbook

To build this app in CollabAPI I just defined a Creative item as :

  • blurb text
  • photo
  • more [ a list of Creative items ]

so its like a set of folders … recursion : “its turtles all the way down”

Builders Invoice Mobile App

Lets say we want to create an app for a home Builder / Carpenter – they need to quickly make up an invoice on their mobile tablet, while onsite at a job.

The different things to keep track of are :

  • Customer
  • Job / Invoice
  • Invoice Line Item
  • Product


Step 1 : Define the ‘DataModel’

We define all the properties for each of these :

  • Customer : Name, Address, Phone
  • JobInvoice : Date, Description, link to a Customer, list of InvoiceLines
  • InvoiceLine : a Product, an Amount, a Cost Total
  • Product : Name, Description, CostPerUnit, Units, Photo

I’ve shown the relations in bold, where one item refers to another item.


Step 2 : Run the App

So you just click thru and define the ‘DataModel’ above, and then you can run the app and try it out immediately.

For this Builders Invoice datamodel, the app looks like this :


Screenshot from 2014-09-02 19:51:34


Screenshot from 2014-09-02 19:51:53

Screenshot from 2014-09-02 19:52:27


Quick and Iterative

The immediate feedback is really useful.  You can show a user, get them to try it and give feedback.  You can try out different models and see which fits their business better.

This iterative approach really helps to reduce risk and cost in developing an app.


Any Datamodel

We could have picked any domain and modeled it in the same way with CollabAPI.  Its not about Invoices .. its about making an app to fit your particular business : quickly and iteratively.

If your business finds it helpful to have a photo in each InvoiceLine, to give the customer more insight into the Job .. so be it.

When you business changes, you can change the datamodel to fit the new circumstance.

I hope you’ll agree, CollabAPI takes a pretty radical, and yet very practical approach. is great : you can create form apps for your business without programming.

Replacing paper with mobile touchscreen and having your data in the cloud is such a big win… BUT there are a couple of crucial missing pieces that are vital to business  :

  • more than one kind of thing !
  • relationships between things


The Problem

In real life and in business, there are a few different kinds of things, such as :

  • Customer
  • Address
  • Vehicle
  • Branch
  • Product
  • Invoice
  • Event
  • Group
  • Project
  • Property
  • Contract
  • Supplier
  • Shipment
  • Task

And these things have important relationships between them : A Customer may have several site Addresses.  A Job may have several different kinds of Checklist attached.  An Invoice will have several Products for each Job for a Customer .. and so it goes.



A good app [ mobile or otherwise ] will have a data-model that reflects the REALITY of your business, and it will be flexible enough to handle the relationships between the data items.


This is the old-school database stuff they figured out in 1940, which has been the staple of business IT for the past 60 years – they call them ‘Relational’ databases for a reason.

These days we want more flexible data, there is the whole NoSQL movement, key-value stores, XML and JSON.  To model reality and business we need natural tree and graph structures, not everything is a table.  Just dont throw away the baby with the bathwater : we need relations.

If you don’t have Relations you cant do the fun stuff :

  • one to many [ Comment Wall can have many Posts ]
  • trees and heirarchies [ Deep Product Catalog, Organization chart ]
  • graphs and social networks [ facebook, linkedin, crm, sales ]
  • people interacting [ messaging ]

This lack of relationships is killer for IT departments – they cant run a retail business or a supply chain or a sales organisation or a manufacturing plant without this flexibility.  Its also killer for startups exploring new business models who need an app to manage their operations or customer needs accurately and in a flexible way.


The Solution : Relations

The solution is to have a tool that is great for making forms… but is also great for handling relations between different kinds of things.

We need some deeper engineering that allows you to link things together,  so you can build these kinds of real apps for business :

  • Product Catalog
  • Topic Wall with Comments
  • Invoices where you can select existing products, or add a new one
  • Jobs that can be assigned to different stakeholders
  • Flexible forms with multiple sub-clauses [ Property report with any number of rooms ]
  • Social Network features …


Its early days, but this part we got right from the start – CollabAPI does support relations.

This means we can create apps for real business scenarios :

  • a custom CRM
  • sales business social network
  • a manufacturing process workflow
  • a real-estate property management system

 CollabAPI Beta

If you’d like to be on the beta list to try CollabAPI App Builder tool for your business mobile app… get in touch.

The more Things and Relations your app has, the better !


justgord at gmail dotcom

Some comments in response to a video TED talk that Conrad Wolfram gave called “Teaching Kids real math with computers”

I did enjoy Wolframs video, but I think its too tempting to take away computations.. in doing so we risk losing the math understanding behind them.  I just think we need more of both : more understanding and more facility with actual practical problem solving.

Technology can help to explain math better. I just found this video today, which contains a superb intro to Bezier curves, among other things.   I think this would be pretty engaging to high school students, be a motivation for them to learn calculus.

One of the things I wanted with GridMaths is to take some of the pressure off long working out but also have the student solve the problem for themselves. Its easier to line up numbers in long multiplication and you tend to make less typos. By design, GridMaths is _not_ a calculator, there are other apps that do that well.

I’m currently working on a hybrid approach where you can use ASCIIMathML to get good looking math expressions, which should open GridMaths up to wider use at high-school level. Maybe we can make worked problems less of a chore and more about understanding … but still keep the facility and practice with computations at a good level.

I can remember an awful lot of fiddling around with sharpening pencils and erasers at school..  push-pencils solved that, but I must have bought 15 different compasses :]  Once a person can write legibly, maybe the emphasis should segway from paper to electronic tools, but still keep the ability to do the constructions, structure the essay, think critically, type well, organise computations etc.

I recently saw a report from one school where they moved to 1-to-1 tablets, where they saw savings of ~20k/month in stationary costs.. maybe exaggerated and an affluent school, but paper is kind of expensive at volume.

Its certainly a lot quicker to make a GeoGebra construction on a tablet, than to do it with ruler, compass, dividers, protractor and pencil … you can concentrate on the concepts and specifics, rather than paper-management. Then the diagram you construct is malleable, you can drag and interact… that’s a big innovation, and helps understanding.

I wonder what ways software can help take the load off teachers, so the mechanics are easier for them, and they can spend more time teaching face to face.

I’m working on adding nicer text and math symbol support in GridMaths, so formulas will look like they should.



LaTex is the ‘gold standard’ but I’m thinking of using a simpler alternative which gives most of the benefit, namely ASCIIMathML.   I think its quite a nice format, something that covers most of the things a highschool Maths student will encounter, with a reasonably predictable and short syntax.

I’m experimenting with the best way for GridMath UI to enter math expressions, so it may be that you don’t normally see the text representation, but it may be exposed when you need to edit.  I’ll use MathJax to render this, so it may be that you can edit and enter LaTex directly if you are a power user and know it well.


In my googling, I happened upon this video ahowing how to do long-multiplication of polynomials..  and thought I’d try the same problem using the Grid or Box method :



For some students it might bridge the gap and give them a helpful intermediate step so they see it as the same kind of thing as multiplying integers.  I would also try out the box approach to introduce multiplying mixed numbers with fraction parts, and numbers with decimals, and so on – as it relates back to the earlier understanding of multiplication as area of a rectangle.

So is in open beta, now works reasonably well on iPad and recent desktop browsers.  Android browser support coming sometime soon.

Heres a pic my 9yo created while testing things out on the iPad.. with the obligatory battle scene [ dad vs browser quirks ? ] :


Here’s a couple of sheets on how I like to present long multiplication…

Firstly a concrete rectangle where you can actually count the squares to satisfy yourself its right…


Then move to a more compact form, which still shows the rectangle grid, but not to scale..


This shows that lots of digits should not induce panic.. the same systematic approach works [ which is why computers can do multiplication so well ].

I think having the box grid is a nice way to remember where all the pieces come from [ single digit products ].  Also I think it really helps to use the blank grid spaces, rather than fill in every 0.

The lattice method is slightly more compact, but I think this box approach reminds students of whats really going on.

Thanks for all the emails and encouragement so far as I build this.

Enjoy, and let me know how your using GridMaths.

My son is working on some LCM word problems on Khanacademy.  LCM is short for “Least Common Multiple”, this KA vid explains it pretty well.

Basically the idea is to take two different measuring rods of two different lengths, start at the same place and keep measuring out lengths of each until the ends match up exactly : the first time this happens is at the LCM.

Easier to see than explain, especially if you get kids to experiment by putting rulers end to end, its kind of a nice little discovery, and the kind of open exploration that gives you the cool math-buzz when you discover something yourself.

I had fun doing a couple of these in GridMaths…


One nice thing is you can go step by step and see the rulers being added as they chase each other, with the ends not matching.. each team trying to win the race, each one getting ahead for a while..until the grand finale when…  ahh, its a dead heat !  :]

I guess the potential with a software tool, rather than paper, is that you could potentially have Cuisenaire measuring rods of any length [ a set of the first 50 primes would be a nice grab bag of tricks ] … and you could get LCM for larger numbers by just laying down more grid and scrolling to the right.  Its early days, so GridMaths doesn’t have this feature yet.. but I really like the fact that its open to doing things like this.

Prime Cuisenaire Rods anyone ?

When I was a kid there was this class where each student prepared their very own ice-cream container full of counting items – marbles, colored buttons, hexagonal Meccano nuts, etc. Somehow the teacher sold us on ‘owning’ and preparing our own stash, and I was very proud of sneaking in two tiny model mini cars and a couple of cool shells I picked up from the beach.

I also remember those lengths of wood in various colors used for counting/measuring things. These “Cuisenaire Rods” are magic, you can pick up a set on eBay from $10 to $15, or improvise with flat Lego units of different lengths and colors if you have those.

It would be unconscionable of me to not include this staple of Western math diet, so I give you a peak at Cuisinaire Rods in GridMaths.  I hope you like the spicy Mexican color scheme :


Simple things, but these can be a very tactile way of developing a feel for fractions and division.   They lead into strange discoveries, like the fact that some numbers can’t be made exactly from repeats of smaller lengths… prime numbers !


A special note to those of you who have taken time to read my experiments, and egg me on with your comments and feedback – your support is so important to me and my son, we heart you !

I did a couple of worksheets on Multiplication, to test out the GridMaths tools.

My feeling is that multiplication should be taught with Rectangles.  So once students are familiar with counting in groups, they can play around with something like this interactive demo to get a basic feel for the distributive rule.


[ The above animation is a custom interactive widget created in javascript, using Raphael and HTML5 divs for the draggable UI.  You drag the red dots and the diagram resizes and recalculates in realtime.  Other screenshots in this post are all done using MathsGrid itself ]

The distributive rule says we can divide up A and divide up B any way we like, and the product is just all the pieces of A times all the pieces of B, summed up together.

For humans with 10 fingers, its easy to break A and B up by 1s,10s,100s, which means we need to multiply each digit of A by each digit of B, then sum them up.


So long multiplication kind of falls into place, as a way of keeping the pieces straight :


Then the Lattice method can be seen as just another convenient system for keeping all the pieces organised and lining up the 1s,10s,100s etc :


The first time I saw this Lattice method on Hacker News it looked like Magic.. but after you do one you realize it really is the same thing, just a cool way of keeping track of the pieces.

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 :