Just in case you missed all the great things we have been doing lately here are a few reminders:

CJ business profile was seen in the Reading Post - the three directors took pride of place on the website and the copy was both on and offline. Read it here...  http://www.getreading.co.uk/news/s/2109006_business_profile_creative_jar

We recently developed the Knight Frank app: http://news.yahoo.com/knight-frank-launches-global-property-app-iphone-ipad-092211450.html

http://www.henleystandard.co.uk/business/business.php?id=1059875

A new survey by Facebook, using the Open Graph platform, has discovered that 18-25 year olds are more likely to download facebook apps. But, it wasn't long ago (2010) when Pew Research found that 42% of the users joining Facebook were in the 50-64 bracket.

So, in conclusion Facebook is for everyone... obvious huh 

Being a digital agency, we have got to stay on top of the current browser landscape. What are the latest versions from each major vendor's and what are their market share? This means we know what browsers we need to support, and looking at percentages of older versions we can determine whether support is required or not.

Using sources such as NetMarketShare and StatCounter, we get a good idea of what the browser landscape is looking like both globally and for our UK market. As of the beginning of February 2012, only including browsers with market share above 1%, the statistics looked like below:

Global

• Microsoft Internet Explorer 9.0 − 11.64%
• Microsoft Internet Explorer 8.0 − 27.45%
• Microsoft Internet Explorer 7.0 − 4.90%
• Microsoft Internet Explorer 6.0 − 7.93%
• Firefox 9.0 − 8.51%
• Firefox 8.0 − 4.73%
• Firefox 3.6 − 3.58%
• Chrome 16.0 − 15.90%
• Safari 5.1 − 3.19%
• Opera 11.6 − 1.47%

UK

• Microsoft Internet Explorer 9.0 − 16.37%
• Microsoft Internet Explorer 8.0 − 19.15%
• Microsoft Internet Explorer 7.0 − 4.90%
• Microsoft Internet Explorer 6.0 − 7.93%
• Firefox 9.0 − 9.17%
• Firefox 8.0 − 3.48%
• Firefox 3.6 − 2.63%
• Chrome 16.0 − 24.82%
• Safari 5.1 − 5.29%

Note that some browser vendors have made new releases since these statistics were published, therefore need to be taken into consideration. These include Firefox 10 and Chrome 17.

We intend this to be the first in a monthly series to see how these statistics change, what new releases have happened, so make sure to check back regularly.

Bit of a short post from me this week (a longer one coming next week, I promise). Just wanted to cover a little bit of jQuery I discovered that helped me a lot with a particular problem I couldn't seem to beat.

I had a contentEditable area that showed a little admin toolbar above it when you focused on the element, and I needed to remove it as soon as the user clicked away from the area. Unfortunately, the "blur()" implementation for contentEditable areas is a little bit all over the place and a user can get around it occasionally. It doesn't seem to fire, for example, when you immediately highlight some other text rather than just clicking away.

So, I came up with this snippet:

$(document).mousedown(function (e) {

if (!$(e.target).is('.editable, .editable *')) {

$('.top-bar').remove();

$('div.active').removeClass('active');

}

});

This basically fires a mousedown event whenever you click anywhere on the document. It checks whether the target is within the editable area and if it's not, it removes the admin toolbar and associated CSS class.

Something every developer has to do when creating a website/online application is test their work. My passion is acheiving zero defects so in my MVC application I want to see how I can work with Unit Testing.  First off I had a look at this tutorial (http://msdn.microsoft.com/en-us/gg618510) and had a go with my own application. Things didn’t quite add up despite setting Actions, etc to the appropriate values. So my next port of call is to download the application used in the tutorial and see how far I can get! 

Radio button lists play an important role in web forms, but there isn't a lot you can do to make the interface more engaging for the user, or even more like real-life. In reality, if we are presented with an action which has 1 of 2 options it comes in the form of a toggle switch. Think of a light switch - it is either on or off.

This got me thinking, can radio button groups which are made up 2 options be presented like a switch? I've previously seen designs on Dribbble and the like of these elements, but have yet to see one in practice*.

Using CSS3 pseudo elements, pseudo classes and transitions, I was able to create the effect I was after. By looking for the currently checked (by using input[type=radio]:checked) option, I could re-position the slider and show the appropriate label.

You can see a demo of the final product here. Tested in Firefox 10, Safari 5.1, Chrome 17, Opera 11.6, IE9 - however the transitions seem to work best in Firefox.

* I highly doubt I am the first to do this. If you know of anyone who has achieved a similar effect, let me know on Twitter - I would be very interested to see how they achieved it.

Last week I reviewed ‘Responsive Web Design’ by Ethan Marcotte and in theory I stand by what I thought of it but in practice things are a little different. As I rework my recent blog engine project into making it responsive I noticed a fundamental flaw in Ethan’s teachings.

Now making a pre-built site responsive is simple a case of changing all pixel based css values into percentages based upon their container. When it comes to margins and paddings for example this is what the book stated:

1. When setting flexible margins on an element, your context is the width of the element’s container.
2. When settin flexible padding on an element, your context is the width of the container itself.

Now this made perfect sense to me thinking about the box model, but on using this theory in my project I found the resulting padding was completely off target. Only when using the padding in relation to the elements container was I able to get the values I wanted – not as Ethan Marcotte explained.

On a brief search of the web, I was unable to find a direct apology from the author ( unlikely I know) but will do some research into how other developers have achieved flexibility of margins and paddings.

Everybody at the Creative Jar office knows how much of an advocate I am for keeping my finger on the pulse of the web community. What is being talked about? What new technologies can we introduce to our work? Has a new browser been released? If so, what are the differences?

With more ways of getting information, more discussion, and unfortunately for me, less time to spend on this, I feel I am beginning to drown in a sea of information. This of course makes it increasingly difficulty to wade through the waves of information (see what I did there? ;) to find valuable content.

At the time of writing this post, I currently have:

• 299 unread items in my RSS feed reader, and that's after spending a good chunk of last night trying to catch up.
• 73 items in my Instapaper account. All of which I either need to read, debug a cool effect that I've seen, or items which I need for actions I am still yet to complete on my to-do list.
• 4 books piled on my coffee table at home which I need to get round to finish/start reading.
• So many podcasts that iTunes has stopped syncing them to my iPhone and iPad. One these devices, the count is currently at 30.
  

This ontop of all the discussions which I partake on Twitter or read from the W3C mailing lists.

So where do I go from here? That, I'm not sure of. I am of course my own worse enemy - if I were to decrease my number of sources of information, then I would stand better chances of reading everything.

My initial step is to take a leaf out of my friend, Laura Kalbag's approach of reading a chapter a day. However, rather than a chapter a day I will spend at least 1 hour a day reading all the information from different sources. I could even start listening to podcasts on my morning runs...!

Watch this space and I will let you know how I get on.

while using textures in webGL i came across this error, which i managed to find out is to do with images locally and  HTML5 canvas.

The work around i found is to base64 encode the images your working with so you can test locally and don't have to deploy to see if something's working. i've not yet applied this but i'll try it out and let you know how i get on with it in my next post. where i should have something with textures and keboard input to show off.