You are currently browsing the tag archive for the ‘web’ tag.
Just wanted to share a small ‘teaser’ from a project I’m really excited about, GridMaths.com
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 GridMaths.com 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 :
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!
- Architecture : [ server data store ] <–> [ JSON ] <–> [ Web / Mobile client ]
- AppStore revenue model
These are technologies to watch for :
- 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 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.
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.