XML to JSON API Proxy for Quick Mash-ups

While building our company dashboard, which was mentioned in our previous blog post on SVG with Raphael, I came across a problem with the project management tool we use, Pivotal Tracker. 

The Pivotal Tracker API is only in XML, which means you can't do cross-domain requests and access the API via javascript. This meant that, if I wanted to extract data about the status of our user stories, I would have to do it on the server side. As everything so far had been done with javascript on the client side, I was reluctant to start making things more complicated.

I contacted Pivotal, who said they might think about adding JSON at some point, but I didn't want to wait for them to sort it out. Instead, I built a quick API proxy that allows you to make a request to a XML API and get back JSON. So, now, I can do this in my javascript:

It will proxy the GET request to the API and convert the XML response into JSON, via http://xml2json.heroku.com (supports JSONP). I've put the code on GitHub http://github.com/bitzesty/xml2jsonp in case anyone else needs to do the same thing.

Filed under  //  API   javascript   open source   xml  
Comments (0)
Posted
by Matthew Ford 

SVG Images and Animations on the Web with Raphaël

Last week I gave a talk at Google OSJam on Raphaël (a javascript SVG library), the library that makes it easy to draw and animate vector graphics on a browser.

SVG is one of the many methods of drawing images on the web. Some of the other technologies include Flash, Canvas and now WebGL.

The reason we used Raphael in some of our projects is that we needed to bind events to the shapes we drew. For example, we had to create an interactive gantt chart that displayed a form via Ajax when you clicked on a task. This functionality in Raphael is made possible by the fact that SVG paths are DOM elements, although it does mean you don't get the performance of pixel manipulation as you would with canvas. Raphael also renders VML when on IE, so in theory your graphics should be cross-browser compatible.

I gave a demo of an animated clock that I'd made a few hours beforehand with Raphael and the jquery.jclock library. The clock will eventually be apart of a Panic inspired dashboard we are building to increase visibility across all of our projects.

The clock itself is quite simple: I modified the jclock library to trigger a 'tick' event, which we later used to animate the SVG clock for the hand rotation. Since the talk, I have also developed an alternate style for the clock, but the original code and examples can be found here (the library is creatively called jquery.svgclock.js):

http://github.com/bitzesty/hud


Brought to you by Bit Zesty - a 'crack' team of Ruby on Rails web developers

Filed under  //  development   javascript   open source   presentation   svg  
Comments (0)
Posted
by Matthew Ford 

How to Get the Most Value out of Web Development

Increasingly, clients wanting an application built on a tight budget are drawing up extravagant feature lists which are incompatible with the amount they are prepared to pay. This tension between the client's budget and needs can lead to dissatisfaction with the end product or conflict with the development team. However, it doesn't always have to end in deadlock.

One way to overcome the issue is by building and releasing the application in stages. This method suits clients with a limited cash flow and has the additional advantage of allowing you to get user feedback quickly. This information can then be used to help you decide which features you need to build next.

Yet sometimes there's simply no need to shell out for a fully bespoke system, particularly when there are viable off-the-shelf solutions available at a fraction of the cost. But what do you do if an off-the-shelf system doesn't quite fit your needs and a fully bespoke one is out of budget? I see three options:

Open Source
Customizing an existing open source application (if one is available) will cost considerably less than a bespoke system, as you only need to pay for the new features.

API Extensions / Plug-ins / Widgets

It is possible to build bespoke applications which use third party APIs, a good compromise which not only saves on development time but also provides the client with a more feature-complete solution. For example, MailChimp can be added for email marketing, Intense Debate or Disqus for commenting, and Get Satisfaction or Zendesk for support and help-desk functionality.

Application Platforms
If you use an existing paid application platform, it may sometimes be possible to extend it with existing plug-ins or develop your own one to suit your needs. For example, Shopify allows users to customize their e-commerce sites with a range of additional apps, as well as giving option for developers to build custom features.

People beginning online business ventures rarely have money to spare, so there is no point in pushing the boat out on bespoke applications when the same results can be achieved for much less. The existence of open source applications, plug-ins and API extensions on the internet is a gift to clients on a tight budget, and it should be exploited accordingly.

 

Bit Zesty - Ruby on Rails app development London

Filed under  //  API   open source   project management   SaaS  
Comments (0)
Posted
by Matthew Ford