Program The rantings of a lunatic Scientist

Archived Posts for August 2012

New Concept Site

L2Program Web Dev

It hardly would have been worth making a RESTful API for the site if I wasn’t going to build multiple interfaces now would it…

Over the last couple of days I have put together a new or alternative front end for L2Program for the purpose of showing additional site designs in my portfolio. Due to how well my RESTful API project turned out I was able to quickly and easily hook up the API to the new front end simply by implementing a new php and javascript interface which added the appropriate HTML to the API data.

This was also an opportunity to improve the API by adding JSONP functionality. JSONP or “Javascript Object Notation – Padding” is a technique used to get around the CrossDomain Resource issue that plagues current AJAX requests. Effectively, AJAX can only occur within the current domain / subdomain. So from my subdomain was not even able to AJAX to my api on the main

If you think of JSON as being an array of data then JSONP is simply an array of data as the sole parameter of a function.

{colour:”red”,width:100} is JSON

my_callback({colour:”red”,width:100}) is JSONP

One thing you may notice about JSONP is that rather than being some string based object notation JSONP is Javascript! Which is brilliant because as anyone that has included JQuery from the or any other CDN will know, Javascript files can be included Asynchronously from any domain! Internal or External!

So in my API I simply added a clause into all the unauthenticated GET methods saying, if a GET parameter ‘callback’ was sent along too, then compute the result as normal but pad it in parentheses and prepend the callback value.

Now in my JQuery I can make a Cross Domain GET request to my API on the main L2Program domain using code like this.

Colour Bar recreation in HTML

Javascript Web Dev

Last night whilst waiting for the NASA Curiosity landing, one of my friends was showing me his progress on his new CV / Portfolio Site, at the top of the page he had a banner of repeating coloured rectangles. It looked awesome, and he was even kind enough to link me the image.

It got me to thinking though, why use an image? It’s a simple enough effect, why not do it in HTML? And so at 5am I set to work on CSSDeck to see what I could do.

Before I show you the Code you can see running demos of project on CSSDeck

Here is what I came up with. Very simple HTML markup that allows you to either hard code a couple of elements or run the little JQuery function generate the markup for you for n elements.

It works very nicely and fills the whole width of the screen during resizes, but it is a little bulky for my liking. And essentially all we’re doing is drawing some simple colours… Surely this is a job for HTML Canvas? Right?

And so now, after another session of light development, here is a version using canvas. I couldn’t workout how to draw from the context of a 100% width canvas (I’m new to this technology), so I have split the function in two. A worker which initially calls the function and set up the resize event, and the function itself which does the drawing. The CSS has also been simplified and the colour HEX values moved into the Javascript array.