This was the solution:
http://support.apple.com/kb/TS1389

Don’t suppose you have any literature or anything I can look at in regards to the correct structure for a javascript class (in node.js)?
I have looked all over the shop and found various different ways of doing it but am having problems.

My emailed response

Classes don’t exist in Javascript (yet), at least not natively. There is some work on EcmaScript / JavaScript.next that suggests they might but, in short:

Javascript is lexically scoped and functions are ’1st class objects’.

You can declare and instantiate objects in many ways but the most familiar might be  like this:

function foo(bar){
    this.bar = bar;
}

var myFoo = new foo('oh hi there');
alert(myFoo.bar);

Where you’d normally use the term ‘class’, it’s implied in Javascript, as above for example,  but not explicit. There are also many different ways to approach this. Javascript does not support access levels (private, public, protected etc) natively, so you have to follow a coding style that will have the same effect.

There  many different patterns you can use, but different patterns work well for different problems and you don’t always want to use the classical (class based) style, you can do things differently in Javascript and utilise the flexibility of the language to your advantage.

Some things worth reading about:

Read mostly everything Douglas Crockford writes: (and get his book on Javascript – The good parts). Although I disagree with some things he says about coding style, it’s all relevant even though it was written a while ago.

http://www.crockford.com/

Learn these

Prototypal Inheritance

http://javascript.crockford.com/prototypal.html

 Javascript scope

http://coding.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/

Javascript closures

http://blog.morrisjohns.com/javascript_closures_for_dummies

Object Literals

http://www.dyn-web.com/tutorials/obj_lit.php

Currying

http://www.dustindiaz.com/javascript-curry/

Module pattern

http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

That should be enough to get you started!

A simple jQuery Plugin to automagically create anchors from recognised HTTP links and convert hash tags into links to Twitter.

Get the code on github.

I created linkify after using the @anywhere Twitter library and found that it didn’t automatically link urls in tweets or hash tags.

Usage

$([selector]).linkify();  / $([selector]).hashify();

Examples

$(‘p’).linkify(); – convert all recognised urls in all matched paragraph elements to hyperlinks.

$(‘p’).hashify(); – convert all recognised hashtags in all matched paragraph elements to links to hash tags on Twitter.

$(‘.toLink’).linkify(); convert all recognised urls in all matched elements with the class .toLink to hyperlinks.

$(‘.toLink’).hashify(); convert all recognised hashtags in all matched all matched elements with the class .toLink tags to links to hash tags on Twitter.

Simple not much to it.

www.grundini.com

I just finished working on the first release of this website (above) for Peter Grundy, with Further Creative http://www.furthercreative.co.uk.

After discussing with the user experience expert and designer, I  faced the usual development decisions. I chose some solutions which use technology that I’d not employed in anger on many projects before. With Peter’s content being heavy on the visual side, delivered via Flickr, my decisions were largely driven by how well we could present his work,  over any potential SEO ranking.

I don’t remember enjoying working on content that was as stimulating and interesting as the work that Peter creates. Luckily Further allowed the user experience expert, designer and myself enough time to try and achieve what we set out to do and I think this first release is very close to getting there.

Working in a good team always makes work more enjoyable, and the client is always part of a wider development team. In this case the team was great and the content we were working on was inspiring.

I hope it’s not too long before I get to work on the same kind of project again!

I wanted to add some ShareThis buttons on a page in an single page web application and update the link to be shared every time the hash was changed.

The shareThis functionality didn’t really allow this ‘out of the box’ and it took me a while to work out the best way to do it using Google and their API documentation.

What I wanted to do

Share an AJAX friendly / hashed url that updates along with the hash, using ShareThis and some custom button images

How I did it

I wrote a small Javascript function to do it (it’s not pure JS as I was using jQuery anyway.

IMHO the solution isn’t ideal as I don’t really like having to recreate te buttons every time, but it seems like the only way to make it work.

You can find the code on github here.

//---->BEGIN
  function updateShareButtons(location, title, imgsrc) {
    $('.share').hide();
    $('.sharethis').html('');

    var services = [
      {type : 'facebook',
        image : './css/img/social-facebook.png'},
      {type : 'twitter',
        image : './css/img/social-twitter.png'},
      {type : 'email',
        image : './css/img/social-email.png'},
      {type : 'sharethis',
        image : './css/img/social-more.png'}
    ];

    var svc, elm;

    for (var i = 0; i < services.length; i++) {
      svc = services[i];
      elm = $([''].join(''));

      $('.sharethis').append(elm);
    }

    stButtons.locateElements();

    $('.share').show();
  }

//----<END

I went about setting myself a very loose brief; Completely written in JS, I wanted to do something quick, in no more than seven hours, I didn’t want to have to write any server-side code and wanted the code to reside on a single page.

I went about looking into the Twitter and Flickr APIs and decided to combine them by doing a photo search on Flickr using tweets from the Twitter public timeline every 60 seconds.

What I came up with ended up as a kind of visual social commentary using Twitter and Flickr.

visual social commentary

I can’t claim any credit for any of the content and I doubt that the idea is unique or original but  I did set out some rules for getting the content : search terms had to exceed two words and I attempted to recognise proper nouns and only use them. The content updated every minute. The tweets must not be recognised replies.

The result gave some interesting effects on me as a viewer. The search result images weren’t always obvious results from the tweets, hey – people tag their photos with strange tags. So knowing that I only had 60 seconds to look through the tweets (not always in English) it made trying to figure out the relationship of the narrative with the  corresponding photos more important, somehow and it became more important to look at the photos and see where the connections came from when I got frustrated.

I also liked the fact that very few users would see the same page with the same tweets and images. This makes me want to expand on the idea and add the option to ‘save your favourite fleet’ (a fleet is what I called the combination of tweet a Flickr images, brilliant hey!)
I thought about adding the option to enter a twitter screen name and allow that to work in the same way on a specific timeline.

I was interested to see if I could provide an easier way of navigating between these sets of information, whilst providing a generic API to support different sports, using Javascript only, fed by JSON serialised data.

I naturally chose soccer (football!) as the base of my test data and used the current English Premier League teams to build a demonstration table.

This is what I’ve come up with so far: Javascript League Table and Fixtures

What I’ve done so far is delieverd completely in Javascript and is a bit verbose! If anyone is interested in getting me to develop it further for their website then let me know!

I have found that the API documentation, however well organised, doesn’t suit me.
Finding examples that are  specifically what you need can be a difficult task as they tend not to exist in the documentation itself but are more often than not found fragmented in the forums, across several posts, or in the example pages within the ExtJS site.

I’m not sure if this is intentional and meant as a way of pushing the user to buy a support contract but it can be frustrating. As well as  this the extensiveness of the ExtJS library causes me to sometimes forget some of the more straightforward principles in Javascript and become more lazy, expecting things to ‘just work out of the box’.

An example of this occurred this afternoon…

I have a grid on a page and am setting the grid to have only 10 records displayed, paged at any one time.

I wrote some asp.net to facilitate the request and return some data as JSON which I called with the start and limit parameters, as described in the API documentation. Using a JsonStore bound to a grid with a pagingToolbar I could make subsequents requests to next and previous pages of data, sorted ascending or descending.

All good so far!

An additional requirement was for the data to have a filter applied by the way of a text box at the top of the grid.
I’m not using ExtJs for anything other than the grids on this project and am using jQuery as an adapter.
So I simply wanted to get the filter text from the grid and pass it in as an additional parameter as part of the requests made by the jsonStore.

I can treat any initial request to the data as an ‘empty filter’ so can have all requests passing all three parameters (start, limit and filter), no matter when the request occurs.

So all I needed to do was make sure that, for each subsequent load of the store, I was retrieving the value from the filter.

The problem I had was a confusion over what to send across in the params when using the store.load({…}) call and and how to set the baseParams on the store and when.

In hindsight, the way to achieve this seems obvious , but it wasn’t something that came to me naturally at first (because of the reasons I described above).

I found myself looking around at the pagingToolbar class in the API docs and trawling through the API for an example. I found it hard to believe that the forums didn’t have any specific examples of how this might be done, seeing as I’m sure many others have tried to do the same thing.

The solution was to set the base parameters before the request was made by adding a listener to the beforeload event on the datastore. I’m using jQuery to get the value of the text box with the id of txtFilter to do this:

//DATA STORE
    var myStore= new Ext.data.JsonStore({...});

    myStore.on('beforeload', function(store){
	store.baseParams = {limit: gridPageSize, filter: $('#txtFilter').val()};
    });

Nothing too complicated about it.  I just wish that this kind of example were more readily available (or at least linked to) from the ExtJs API documentation.

Lewis Barclay
Web Development, Architecture and Design

I turned on my 13 and  a half month old (that’s one and half months out of warranty I believe, around 45 days) MacBook Pro , that I love and has been working perfectly since I purchased it and I couldn’t type in my password when it came to logging in to OSX.

‘No problem’ I thought, ‘a simple reastart should fix this’.

Hmm. Not so. On restart this time, I realised that th Trackpad wasn’t working also.

‘One last try, booting into Windows instead’ was my next thought. Only, holding down the Alt key wasn’t bringing up the boot loader menu!

Suddenly I had a lot to do

• Find an Internet booth at the airport to check for known issues
• Find a local Apple dealership that would be helpful and fix my laptop before I wanted to turn it back on again.
• Write an angry letter to Steve Jobs (Get well soon Steve) about how I felt my two year old loyalty to Apple as a brand had been taken for granted, by providing me with equipment that lasted less time than the reasoning behind me spending £1,500 on the new notebook did with my Bank Manager.
• Decide what I would buy instead of the Mac Pro I had been pricing up for £3500 just that week.
• Wonder how my life would work whilst my Macbook Pro keyboard didn’t.

Blimey, I was busy.

After a flight home fraught with concern, a few minutes ignoring my girlfriend when I arrived home and the meal she cooked ‘because my laptop is broken’ I calmed down and took out the battery.

The problem

Anyway, what I found was that there are two small ribbon cables just under the battery in my MacBook Pro  (Revision :3,1). The darker orange / brown cable was the one causing trouble.

To discover this I:

1. Booted into OSX with a USB keyboard and mouse
2. Plugged in the power cable
3. Removed the battery
4. Whilst pressing the caps lock key on continuously (on the laptop keyboard),  I gently pressed the ribbon cable.

Although there was no visual signs of a problem, it seemed as though the ribbon cable had heated up too much and become warped. When pressed down the keyboard functioned perfectly.

The Repair Centre

So, I started looking for a company to repair my Macbook and, I found  a local Apple repair center who, after hassling them without any response on a Saturday, fair enough on the weekend I guess, responded at 9.15 on Monday morning, with a price.

I’ll be honest, I wasn’t happy about the £250 price tag, ‘because the whole keyboard housing was going to have to be replaced’, which I suspect was Apple, not Amsys’ reasoning,  but the response time was the best I could have expected. Well done Amsys.

My (temporary) Fix

Not getting a response until I was back in another country on Monday morning did however leave me with a weekend to work out my own fix.

Before you try this, it is temporary and I’d like my MacBook Pro to be fully functional without the use of Sellotape (Scotch tape, whatever) at some point,  as I’m sure you would. I take no responsibility for burnt laps, smoking MacBooks or the smell of burning glue or any other associated issues the fix might cause.

1. Get a small piece of sticky tape and roll it up
2. With the power on, battery out and machine on:
3. Place the Sticky tape onto the ribbon cable whilst pressing the caps lock key to identify that the keyboard is working
4. Close the screen and turn over your mack book.
5. Replace the battery so that it presses on the sticky tape and ribbon cable

This worked for me, but did take a few attempts, and it is still working after three weeks!

Let me know if you’ve had the same issue please, or if you know of an alternative fix or repair centre!

• The xUnit unit testing Framework
• ReSharper, .Net code productivity tool

I’ve just started using the xUnit framework, and inherently the xUnit approach as a unit testing framework within .Net. For the purpose of this post and to avoid confusion when I say xUnit, I’m talking specifically about the framework!

I’m using ReSharper and the integration is really useful. I have a VS2008 standard edition license and it adds the UI point and click testing environment I lack, not having the heavier weight VS editions.

I’m currently building an MVC application and have abstracted out the model into seperate project(s).
This leaves me with the following projects as part of my solution:

• NewSolutionName.Model [C# classes : Business Logic]
• NewSolutionName.Web [MVC / ASP.Net (C#) : UI]
• NewSolutionName.Tests.xUnit [C# Classes :  Unit tests]

Setting up the xUnit unit test project

Add a reference to xunit.dll so that you can write unit tests using xUnit , as well as referencing any of the projects that you are going to write unit tests for, in my case both the Model and Web Projects.

I structured my unit test project into the followiung folders:

• /ModelTests/
  (contains all the tests for the Model Project)
• /WebTests/
  (contains all the tests for the Web Project)
• /TestRespository/
  (contains all Mock /  Dummy / Stub etc and helper class code)
  

I collate my tests into logical collections. So unit tests for a Foobar class, in my model layer, would be created in a class in the /ModelTests folder:

• /ModelTests/FoobarTests.cs

Creating a Simple Test

Using the Foobar class as an example:

namespace SolutionName.Model
{
    public class Foo
    {
        public int MyValue { get; set;}

        public Foo(int initVal)
        {
            MyValue = initVal;
        }

        public int Bar(int toAdd)
        {
            if (toAdd < 10)
                MyValue += toAdd ;

            return toAdd;
        }
    }
}

I wrote the following (far from exhausitve) example test:

namespace SolutionName.Tests.xUnit.ModelTests
{
    public class FooTests
    {
        private Foo thisFoo;

        public FooTests()
        {
            //SETUP[ARRANGE]
            thisFoo = new Foo(5);
        }

        ~FooTests()
        {
            //TEARDOWN
            thisFoo = null;
        }

        [Fact]
        public void TestFoo_MyValueHasExpectedValue_AfterInstanciation()
        {
            Assert.Equal(5, thisFoo.MyValue);
        }

        [Fact]
        public void TestFooBar_MyValueIsSame_AfterBarMethodPassingValueGreaterThanTen()
        {

            int expectedValue = thisFoo.MyValue;//[ARRANGE]
            thisFoo.Bar(100);//[ACT]

            Assert.Equal(expectedValue, thisFoo.MyValue);//[ASSERT]
        }

        [Fact]
        public void TestFooBar_MyValueExpectedValue_AfterBarMethodPassingValueLessThanTen()
        {
            Assert.Equal(5, thisFoo.MyValue);

            int newValue = 9;
            int expectedValue = thisFoo.MyValue + newValue;

            thisFoo.Bar(newValue);

            Assert.Equal(expectedValue, thisFoo.MyValue);
        }
    }
}

Developing units with xUnit sits more naturally than other frameworks I’ve used.  I try to  think of the test itself as a self contained object that has a constructor for setup and destructor for tear down (as well as helper methods where necessary) and then each method should contain the following:

• ARRANGE – this should be any code that needs to setup the test Mock / Dummy objects etc.
• ACT – Execute the actual functionality being tested
• ASSERT – check that the results of the test are as expected

The test we’re interested above is:

TestFooBar_MyValueIsSame_AfterBarMethodPassingValueGreaterThanTen

Where I marked the AAA code!

Running the test From ReSharper

The first thing to do is to check that the xUnit Test Runner plugin is installed and recognised by ReSharper:

1. Select the Resharper Menu > Plugins…
2. There should be a plugin entitled : xUnit.Net Runner for ReSharper 4.0

If so you should see green and yellow ‘test icons’ on the left hand side of your code, one for your test class (to run all tests) and then  one for each individual test.

Running unit tests in ReSharper

To run your tests simply click the icon for your test class and choose Run or Debug to debug your code.

Lewis Barclay
Web Development and Web Consultancy