Part of our Dev Camp project this year involves being able to annotate a presentation slide using a mouse, finger or stylus. We instantly looked to the HTML5 Canvas element to provide a bitmap drawing surface. Sizing and scaling the Canvas When first trying to create a canvas that overlaid the screen I discovered that they had two height/width properties. canvas.style.height/width – CSS attributes canvas.height/width – DOM properties The CSS attributes can take percentage values (100% in our case), the[...]

As part of this year’s Dev Camp we’ll be using the ASP.NET SignalR real-time communication library to synchronise between multiple views/clients of an HTML-based presentation. Some of those clients will be Android and iOS apps and so really we want to be able to use the SignalR library within those apps, and whilst we’re thinking about it, it’d be nice to be able to write the bulk of the code for those apps using C#. Not that long ago this[...]

Right from the start, we wanted to make our application as usable on a tablet as it was on a laptop or desktop computer, which means offering top-notch support for touch as well as mouse-clicks. The only area where this presented a challenge was in allowing a user to use touch to drag and drop in our HTML5 Canvas controls. It was clear how to do this with mouse-clicks; you would bind your mousedown, mousemove and mouseup events to the[...]

Backbone comes with methods for fetching and saving data models to and from the server. However, we want an application that works offline and synchronizes with the server when online. Therefore we require to communicate models both with the server and with  the browser’s local storage. The good news is that a backbone extension “backbone.localstorage.js” provides the communication with local storage, and by simply dropping its .js file. The bad news is that you then cannot communicate between backbone and[...]

To summarise, I have to say it was a very productive week with many hours spent on development. More than in a normal work week. But I believe it was worth putting in the extra hours to see the final result. CoffeeScript was a very nice discovery and made writing JavaScript really nice. It was hard though to change my mind about some ways things get written but once past that, all was well. Almost. At some point the code[...]

The last day of Dev Camp is over and are trying to tie some loose ends, doing some last-minute polishing and fixes. The application is in pretty good shape, it allows us to open a questionnaire, fill it up, save and edit. In both offline and online modes on desktops as well as on smartphones or iPads. From our point of view it is a success. I didn’t expect that in 5 days we’d be able to do so much.[...]

For our web application we used a javascript framework called Backbone, which helped us to keep our application logically structured. We’ve been able to split JavaScript into nice seperate chunks working together. Backbone uses models to represent the data that can be created, validated, destroyed or saved. The models can be saved in local storage or on the server as simply as setting the apropriate url value (to a RESTful API) or local storage variable. Making it save in both places[...]

Our last full day of Dev Camp was very productive and we completed much of the app’s functionality – it’s pretty satisfying to see the various elements come together and begin functioning nicely across our various test devices. Tomasz and Neil worked together on completing the Questionnaire and Response views, with support for pagination, asynchronous saving to local and remote storage, and a few other nice touches. Mariusz worked on completing the data management for the slider and drag &[...]

With all of the app’s basics in place, day four was pretty much just hard slog working on the nitty gritty. Slowly through the day pieces began to fall into place: The Backbone router was added and the application broken up into separate “pages” when the user clicks through the various entities to complete their questionnaire. The first drafts of the drag and drop controls were added, allowing users to place items on a grid corresponding to some sort of[...]

Before we began the Dev Camp we had a few interesting discussions about what we thought would be interesting interfaces to display to an end user. When we settled on creating a questionnaire app we started to think what kind of controls we could use to ask the questions. It was obvious that we should use some standard controls like text boxes, check boxes or radio buttons but we also wanted to use some advanced controls. Our first choice was[...]

What is CoffeeScript? It’s a little language that compiles into JavaScript. And it’s so much simpler to write and look at than original Javascript. And the best part of it? Underneath it all it is still pure JavaScript! I have to admit I was a bit sceptical at first. After looking at the documentation the syntax looked funky, and I thought that I would have to install a compiler, then run it every time I want to have a working[...]

With the second day of our dev camp coming to an end it’s time to summarise our server side work.  I’ve been working with Neil on setting up the server side part of the application while Tomasz was working on the client side. We decided that we are going to use standard MVC controllers to implement a RESTful service and RavenDB for data storage. RavenDB is a nosql database server, which stores information as JSON “documents”. These documents can have[...]

Our day started at the OCC office with the five of us making a fantastic mess on one of the meeting-room whiteboards getting down our ideas for the domain model of the questionnaire app we are planning to build. After much discussion, especially around the issue of making the application robust vs. doing more interesting things, we settled on our model. Essentially a very simple pairing of Questionnaires as sets of Questions along with their types, and Responses as sets[...]

One of the most important elements of a modern web application is the JavaScript that powers the client-side interactions. It is what gives us AJAX for subtle server interaction; powerful manipulation of the web page’s structure; and attractive animations and effects that users come to expect from high-quality web sites. All that JavaScript can lead to a mess of script files, functions and variables, which becomes harder to manage as the application advances. To combat this a range of JavaScript[...]