Service Wait – servicewait.com

 JavaScript, servicewait  1 Response »
Feb 072012
 

Over the break I made Service Wait , a simple smart phone timer application with a start and stop button that sets values you can tweak later to get the elapsed time. It’s useful to see how much time you have wasted waiting for something, or for working out times for time sheets. I made it for my mum for Christmas.

JavaScript Models

In other projects I have used knockout.js to create view models. This time I just worked with jQuery and jQuery mobile directly and for a simple problem I would recommend starting out by working this way. I prefer to add a framework or tool when it solves an issue.

jsHint

I used this project to experiment with jsHint, which does some static analysis of your JavaScript to help find problems. jsHint is a fork of jsLint that provides more flexibility around which rules should be enforced. I started off using it strictly but have since come up with my own set of options that I use on other projects to improve readability.

Hack

I built the site using jQuery mobile which has great support for most smart phones. However I was primarily concerned with optimising for use on iPhones/iOS. I found that on iOS you could show a time keyboard by specifying the type as a time like so.

<input type="time" name="timestart" id="starttime" title="" />

This will show the time input keyboard in iOS. However there seems to be an issue in iOS 5.1 where the value of a html input time field will not display when it is set via JavaScript. To get around this issue I wrote a hack where I float a span over the top of the field when I want to show a value and then hide it if the user enters something via the time keyboard.


TODO

One idea I had that may come in the future is a tweet button, which basically allows you to whinge on twitter about how long you had to wait with a great deal of precision.

 Posted by Keiran McDonald at 7:00 am

Debug JavaScript in MVC

 ASP.net MVC, JavaScript  4 Responses »
Nov 252011
 

Most JavaScript libraries come with a minified version that is quick to load, and a debug version that lets you debug issues. In ASP.net MVC you really want to be using the debug JavaScript while developing, and the minified Javascript when your site goes into production. I thought up this handy tip that gives a good return, for little investment.

Step 1: Change your layout pages to reference your JavaScript files via a UrlHelperExtensions class.

Step 2: In the UrlHelperExtensions class write some code like this:

public static string Scripts(this UrlHelper helper, string fileName)
{
    return helper.Content("~/Content/Scripts/" + fileName);
}
public static string knockout(this UrlHelper helper)
{
    if (System.Diagnostics.Debugger.IsAttached)
        return Scripts(helper, "knockout-1.2.1.debug.js");
    return Scripts(helper, "knockout-1.2.1.js");
}
public static string CDNjquery(this UrlHelper helper)
{
    if (System.Diagnostics.Debugger.IsAttached)
       return "//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js";
    else
        return "//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js";
}

The jQuery example here is using a CDN in the hopes that the visitor already has it in their browser cache.

Now your JavaScript will load quickly and you can still debug during development.

 Posted by Keiran McDonald at 3:57 pm  Tagged with: ,

Game of Life in NodeJS

 Code, JavaScript, Web  1 Response »
Sep 072011
 

Last weekend I went to Brisbane coding event called code smash. It coincided with node knockout. The event was provided us with a space to work, people to work with and pizza. What we did at the event was up to us. In the spirit of node knockout I was keen to do some serious team coding and get results. Luckily I managed to team up with Andrew who had similar goals. Andrew works with ruby on rails full time and I work on asp.net mvc full time. So clearly the sensible thing to do was to write a Game of Life in NodeJS. Just to keep us on our toes.

We had slightly less than 5 hours. So we decided to take a client side javascript version of the game of life that was already written and make it shared from the server side. We got it running on the server first. That was pretty straightforward as the client side javascript was well-written. Then we got the game displaying as quickly as possible by having clients poll the server. Then we added the ability for formations of cells to be added to the game, so it would be more interesting. Andrew seemed to know a bit about the Game of Life, and was aware of interesting formations that would travel. So we added some of these as possible formations that could be added to the game. We got it working and had something to show; we were happy with the day.

This weekend I was still energetic about the project. So I

  • Changed the polling to push based sockets using socket.io;
  • Made the packets a smaller;
  • Made the field size as big as I could;
  • Switched out the heavy duty game library and did the painting with jCanvas; and
  • Gave our Game of Life a home.

I’m not usually a big fan of games like I used to be back in the day. This is probably because I lack the time. This game is a set-and-forget sort of game, there’s no big time investment required. I’m still thinking about how to make it more interesting by adding to the multi-player aspect of the game.

The game suffers from entropy over time and relies on people visiting to add cells to make the result dynamic and interesting.

I have though of a few other interesting possibilities, that could still be explored:

  • Calculate a big field and be able to zoom and scroll around parts of it.
  • Be able generate a still image of a big field frame of the game. Maybe keep some cell history and heat map the image if it’s sparse.
  • Introduce colours to the cells that mix as cells reproduce.
  • Introduce a multi-player aspect where each player can add spawn points that emit predetermined cell formations.
  • Make the server send only the unpredictable state updates, and get the clients to do the other predictable calculations related to display.
  • Be able to have an infinite sized field that scales as servers are added to calculate more of the field.

The code is on github.

 Posted by Keiran McDonald at 10:42 pm  Tagged with: , , , , ,

PDFRender on github

 JavaScript, PDFRender  No Responses »
Aug 232010
 

A webpage that can render itself in PDF?

During a recent blog reading session, I stumbled upon some information about jsPDF. It’s basically a nifty JavaScript API that can generate PDF documents. It works by manually creating a base64 encoded datauri. What this means is that modern web browsers like Chrome, Firefox and Safari can create PDF documents on the client side.

I had a cool idea for a useful project that I don’t believe yet exists. I thought it would be awesome to progressively enhance (in a browser that supports datauri) an html page to show a link that would render the text in the current page in PDF, ready for efficient paper saving printing. I can see such a project being useful for resumés, shopping lists, bills and receipts.

So I created a prototype and started up a new github project http://github.com/kezakez/PDFRender

If you haven’t heard about github, it is free source control in the cloud with the killer feature of being able to reference code to the line number via URL. Exciting stuff!

 Posted by Keiran McDonald at 10:41 pm  Tagged with: , , , ,
© 2011 keza.net Suffusion theme by Sayontan Sinha