Thursday 29 May 2014

API joiner

APIs are getting on for becoming the lifeblood of the internet but they can be a pain. If I need to get into the nitty-gritty of the API calls so that I can tweak the data they return to me I end up using Boxer to split the URI on question-marks and ampersands and then having to remember to join them before testing in the browser. Take this for example: http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap &markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318 &markers=color:red%7Clabel:C%7C40.718217,-73.998284&sensor=false. Should I want to change that I'd pull it into Boxer and end up with something like this:

http://maps.googleapis.com/maps/api/staticmap
center=Brooklyn+Bridge,New+York,NY
zoom=13
size=600x300
maptype=roadmap
markers=color:blue|label:S|40.702147,-74.015794
markers=color:green|label:G|40.711614,-74.012318
markers=color:red|label:C|40.718217,-73.998284
sensor=false

It's a lot easier figuring out how to tweak it like that but squidging it all back together is a pain!

So, with a wee bit of free time last night, I wrote the tool above which takes the separate parts and does all the hard work for me! It just runs in your browser so feel free to copy the source if you'd like or use it where it is, its guts are easy as anything:

$(function(){
    $("#target").submit(function( event ) {
        event.preventDefault();
        var baseURI = $("#baseURI").val();
        var URILines = $("#URILines").val().split(/\n/);
        var lines = [];
        // http://stackoverflow.com/a/8479118
        for (var i=0; i < URILines.length; i++) {
            if (/\S/.test(URILines[i])) {
                lines.push($.trim(URILines[i]));
            }
        }
        $("#joinedLink").empty().append($("<a></a>", {
            "text": "New Link",
            "target": "_blank",
            "href": baseURI + "?" + lines.join("&")
        }));
    });
});

It's hosted on my Google Drive here: Make an url!, or just click the image above.

Friday 9 May 2014

Some thoughts on DateTimePicker (xdsoft.net)

We've decided to use this DateTimePicker as it seems to play nicely with older browsers but we've also had to do a fair bit of exploration in order to get it to do what we want. On the whole the documentation is brilliant but there's the odd issue where I got confused so in order to save someone else some time I'll document them here:

  • Format

    It uses PHPs date/time format - which is cool as I love PHP almost as much as I love JavaScript but you should still be aware!

  • minDate & maxDate

    These need to be in the "YYYY/MM/D" format (Moment.js format)! Generally speaking, once the format has been set in the picker initialization it's smart enough to clock that if you give it a value then it should parse it in the format it's already been given... except when it comes to minDate & maxDate where you need to use its default formatting - this took me a couple of hours to clock so I hope it helps someone.

  • Adding to the options

    It's possible to add to the methods of an already initialized picker by simple calling .datetimepicker() with the new option/s.

On the whole it's a lovely UI widget, I just hope these pointers help someone else when they use it.

School's out... FOREVER!

It's #2 son's last day at school!

He's had an interesting academic career thus far but it's come on leaps and bounds over the past year or so thinks to the sterling work of my friends, he himself and InterHigh!

His exams start next week for 10 whole days and then that's it! He'll be off to France to pick cherries or Standon to work over the Summer

A very proud Dad sends his love!

Good luck ASH!!!!!

This picture is of him with his first chainsaw! ;-)