ShopMarks! isn't a radical turning point in how humankind develops, it isn't an evolution in how we interact online and it isn't neccessarily a revolution in online shopping - although it i a rather nifty little app that you can use to bookmark your online shopping activities.

What ShopMarks! really does is mark the final stage in a personal journey to create something from scratch and get it released for people other than those closest to me to download, use and give feedback on.

Time & Knowledge

Although I've got ideas pouring out of my ears for iPhone apps, large-scale web apps and the like, a couple of barriers have stopped these from progressing any futher than the drawing board: time and knowledge.

Time is as simple as it sounds - I don't have enough of it. With a regulat full time job, a home and two kids to maintain, time is a precious commodity. I know that "sleep is for the week" and all that, but to be honest that's bullshit. I can get a couple of hours of good work in after the kids have gone to bed before I start yawning, after that it's just wasted time - 10 minutes of productivity here and there interspersing lapses into Facebook, Reddit and nodding off. It also makes me tired and cranky for the next day, leading to a snowball of diminishing productivity until the inevitable big catch up on sleep at the weekend.

Knowledge is intrinsically linked to time, in that at present I haven't got the time to learn a completely new language. Sure I'd love to learn Cocoa or Java to get making native mobile apps, but I wanted to get motoring making things - so the dilema is using the little spare time to create with the skills I have, or use that learning something new (and not creating).

Making the app

Starting out making a browser extension was the best option by far - I could use a latent skill set of HTML5/Javascript and also create something light-weight in fairly little time. It's been agreat learning experience that I'll hopefully be able to use to build bigger and better versions of ShopMarks!, as well as future developments.

Firstly, HTML5 local storage is easy. If you can write

localStorage["storageVariableName"] = "value";

then you're a HTML5 local storage ninja/rock star/pimp daddy.

I'm not a designer, so I relied heavily on Twitter Bootstrap to create for core structure and visual elements of the app - highly recommended to any other lone developers worried about the aesthetic aspect of their creation! Luckily I wanted ShopMarks! to be a clean, simple layout, so Bootstrap helped no end.

There are numerous Chrome API specific challenges that are too great in number to list here with detail, especially when getting into concepts such as creating "Isolated Worlds" for interacting with websites in other tabs.

Lastly, a big thanks has to go to Joss Crowcroft for creating with wonderful money.js, a Javascript library which provides functionality for converting currencies on the fly, so big props to him!

So, please download ShopMarks! and feel free to comment and advise on what you like, dislike or feel could be better!

Google Maps' Geocoding API does a great job of converting street addresses into Latitude and Longitude coordinates to enable you to plot the markers on the map.

The initial implementation of the map went well, plotting 2 or 3 markers without issue. Problems started surfacing however when we started putting 26 markers through the Geocoder at once - it bailed out after retrieving the coordinates of just 7 addresses. After a bit of research, it appears the Geocoder has some strict limits that don't like a lot of calls per second.

My initial code involved loading in all the required addresses into hidden <div>, which could be looped over using jQuery's .each method. The .html of each <div> could then be fed into the Geocoder to return the Latitudes and Longitudes.

With the addition of setTimeout against each call to the Geocoder API, we can reduce per-second requests and keep Google sweet!

$(".address").each(function () {


var address = $(this).children(".locationAddress").html();


setTimeout(function () {


geocoder1.geocode({ 'address': address }, function (results, status) {


if (i < $(".address").length) {
i++
}


if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: googleMap,
position: results[0].geometry.location
});


}
});
}, 1000*i);
});

For my implementation, the adding of the markers to the map visibly a marker per second didn't matter (in fact, it actually enhanced it!) - but you might want to set up some kind of "Please wait" message whilst waiting for the markers to be retrieved.

"NoteSlate is low cost tablet device with true one colour display, long life battery, handy usage and very simple and useful interface for pen and paper."

I, like many others, got a bit hot under the collar when Noteslate was first announced. A low cost, low power, e-ink device with the ability to ACTUALLY WRITE ON IT? Yes please!

Oh, but how they tease! Delayed till this date, no prototype till that date, still only in concept stage and so on and so forth.

Constant updates via Twitter and Facebook should be a great way to keep prospective customers informed and updated - but the social web is a two-way street.

When a product is promised and the promise is broken, each update is dissected, chewed up and spat back - a hundred fold.

Social media - great when you're on the ball, bites you in the ass when you drop it.

All have one thing in common - does this ring any bells with you?:

"The following vacancy may be suitable for you.  If it is not then please
accept our apologies and update us as soon as possible with your current skills."

"Apologies if this email has reached you in error - your details have been generated on the basis of a database skill search"

"Apologies if this email isn't relevant, but as you have been registered as potentially having the right skills for this vacancy I thought I'd drop you a line."

WTF? Did IQs just drop sharply while I was away? Now, I'm not, never have been and, for the forseeable, never will be a part of the recruitment industry, but to me this method of trying to find suitable candidates is dumb, lazy and above all irritatiing.

Is this the same across all sectors of recruitment?

Does this method of finding candidates actually work? Does the machine gun/shit against a wall tactic prevail over any form of un-automated, personal communication?

I've recently found an interesting bug/nuance when using jQuery animations with Javascript timing (setTimer/setInterval) in Firefox/Chrome.

Basically Firefox and Chrome try to be clever and, instead of continuously playing a repeating animation (like our carousels) whilst the window is not active, it saves processor usage by "pausing" the animation in a queue. The only downside is that the queue is then dumped out in full when the window is active again, meaning it will cycle through the stored animation in matter of seconds, which doesn't look good.

There are a number of documented fixes, including the jQuery.queue() function and Mozilla's own window.mozRequestAnimationFrame(), but I didn't have any luck incorporating these into our existing code.

The fix I finally got to was using window.onblur and window.onfocus to find if the window containing the animation is active or not. The following code is something I've recently implemented:

window.onblur = function () { $('#div').stop(); clearTimeout(timer); console.log("blur"); };

window.onfocus = function () { clearTimeout(timer); startTimer(); console.log("focus"); };

This simply stops the animation and clears the timer if the window loses focus, then clears the timer and restarts the timer when it regains focus. Simple, ja?

Worth noting if you're putting in any timed Javascript animations.

This is all very well, but we're missing a vital point - altering the UI to make it look nice is one thing, but are we considering the "U", the User, enough?

I started my working career in a call centre. Answering phones, responding to customer queries, cross-selling services. Even though the types of call were not that intersting, each customer situation had it's own unique variances - complaints, sales enquiry, age of customer, accent - each variable called for subtle alterations from my side of operations to enable a successful outcome. By reacting to the customer I would be able provide a better level of customer service and, if dealing with them in the future, I would have a history of experience to call on that wouldd allow me to be more proactive to their needs.

This is a simple example of customer service, but it got me into thinking how we build things on the web.

Take an e-commerce application for example. A user browses your stock, they select items to add to their basket, they checkout, they leave. Or, they put things in the basket, but then they change their mind, then leave. Or you're just too expensive, and leave.

Okay, so many online shops or e-commerce packages have concepts like displaying related items of things you've viewed or recently purchased, but how about a system that is monitoring what the user has been looking at in their current browsing session, reviewing the navigation trail that they have taken since landing on the site, what options they have selected, their deliberations, and reacting on the fly to give them a more customised experience. How about the following examples:

• A user hits a page 3 or 4 times, but leaves evertime by clicking the browser's back button. Why are they doing this? Is there an issue with site navigation? Can they find what they're looking for? Would it be beneficial to take them to a site search page, or even redirect them to a top-level page?

• A page expires with pending changes waiting to be committed. Have they forgotten they have pending changes? Could you automatically commit them, with an option for them to easily back the changes out if required? Could you email them with the pending change details so they can re-enter them at a later date?

• A user puts an item in the shopping cart, then leaves the site twice, returning both times from competitor sites viewing the same item. What are they comparing? Could you alter the price at all? Could you offer any other incentives on the fly to convince them to purchase through your site?

These are all hypothetical situations, and a system to offer the type of instant "reaction" is far from a defacto implementation in modern web applications, but if we could think in terms of not only how we portray the web to our users but also how we are perceiving their experience of our web applications in a very real-time sense, it would greatly improve our understanding of the "U" in User.

I've recently been thinking about the business of creating digital media, be that coding up an app, styling a web page or touching up a photograph. Generally speaking (and without annoying any OSS advocates out there), the big players out there such as Apple, Microsoft and Adobe offer all the tools we need for creating works of art in one shape or form.

But what happens after that? After you've pushed your wonderful IDE or photo editing suite to all and sundry, you've got a product that, by itself, demands to be updated, fixed and maintained to ensure that it stays ahead of any other competing product out there that might start offering bigger and better features.

A method that can be seen prominently in the development arena is the creation of an "ecosystem". Rather than send out a product into the big bad world and hope for the best, the masters of these tools also provide an environment that creatives can return to, either to show off their new creation, get advice from others or learn from the curators.

Apple is a fine example of this: they provide the free IDE Xcode for developers to create beautiful applications for the Mac, iPhone and iPad; the developer has a rich document library to sift through for help and advice on developing for the platforms, from beginner to advanced topics; finally there's the ubiquitous App Store, a ready made market which developers can submit their application to for the whole world to download and adore.

Microsoft do the same - although corporate versions of Visual Studio cost silly amounts of Dollar, they provide a rich and varied set of tools for free, including Express versions of most of their commercial applications, and more recently venturing into PHP/Open source development stomping grounds with Web Matrix. Again, they provide an extensive library for developer bedtime reading, and now also have their own app market place specifically for the Windows Phone 7.

Google and Blackberry, whilst not having their own unique IDEs, provide plugins for the ever popular Eclipse platform, and both provide extensive documentation libraries as well as having specific market for developer's apps to be published to.

Imagine if they didn't do this. Imagine if Apple charged as much for Xcode as they do for Photoshop, didn't provide any developer help or documentation, and didn't have an app store. How popular would the iPhone be then? How many apps would be listed there?

By providing the tools, the information and the means to propagate creative's creations, Apple at al not only keep developers happy, they ensure that they don't wander away from the flock. Which is, of course, great business strategy.

So, do you want to emulate that? You might not be in the business to take on the likes of Microsoft or Adobe, nor may you be looking to create a brand new development language, complete with bespoke IDE. But from anything like simple application for a smartphone up to an enterprise level web application, there's Here's a few points that I think could be learned from the big boys:

Provide tools

It may seem like a loss at first, but by giving developers the tools to create things for your platform, for free, will pay dividends. It doesn't have to be a full blown IDE - providing any tool that makes the creative life cycle less of a headache will be cherished. If you're creating an application that's going to be sold through a market place, why not provide some cool auxiliary tools on your site?

Educate your users

All the gear but no idea? Having your peeps kitted up ready to go is one thing, but where do they go from there? Give them ample documentation to get them up and running, as well as references and cheat sheets to refer to.

Promote contributors

Whether it's through a market place or a special mention on your product's site, special creators should get special attention. If someone using your system is making great things, make sure they know how happy you are they're doing it.

Stay fresh

Stagnation, in any area of creativity, is a nail in the coffin. Make sure that updates and fixes are released regularly, as well as keeping your docs up to date.

A problem that was presented to me today was how to override the jQuery Tools Overlay inline styling for the "left" property.

By default, "left" is included in the Overlay inline style no matter what - the default value centers it to the screen, although a numeric value can be assigned to it. Either way, "left" is present at all times, making it tricky to set your own value via CSS (in my case, setting a different "left" value for different clients accessing the same page containing the Overlay function).

The way around this (which should work for other jQuery plugins with default inline styles) is to explicity assign a value from a particular class, like this:

<style type="text/css">
  .some_class
  {
  left: 100px
  }
</style> 

<script type="text/javascript">
  $(document).ready(function() {
        $("#some_div").overlay({
            left: $(".some_class").css("left")
        });
    });
</script>

This way, the "left" property of Overlay can be set programatically by any number of different style sheets accessing the same Overlay function.

Check it out, have a look at the current cyclists, give us some money, and sign up yourself!

Last week I noticed some strange activity on the access to my internet banking - random login attempts in the wee hours of the morining. I immediately logged in, checked the accounts to make sure nothing had been transferred, and changed my pins, passwords and anything else I could change, just to be on the safe side.

The next day, the account had been locked out due to a number of failed logins. Somehow someone, somewhere, had got hold of my details and had tried peppering my account with the now redundant login details.

Well done me I thought. All I have to do now is contact Santander, explain the situation and get my account unlocked.

Oh, the naivety of my youth!

Do you know what Santander said to me? They explained that their "system" had "detected" I have a virus on my computer, and to get my account unlocked I was required to install their recommended Trusteer Rapport software send them a SCREEN SHOT of my VIRUS SOFTWARE showing a clean scan.

..........

I'll give you a minute.

..........

Better? Yep, that's what they asked me to do. Rather than coming over as the "I work in IT blah blah" customer, I obliged, and sent them this:

Anyway, what's done is done. I could have sent them this: