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

Linkify (and Hashify)

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.

Interesting content, it makes work less ‘work like’!

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!

Creating ShareThis buttons with custom images in Javascript

This should have been easy!

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

My Twitter Flickr Mashup

I attended full frontal last week, which was excellent. It gave me inspiration to experiment a bit with some JavaScript.

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.

flittr
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.

Javascript League Tables

Having seen a lot of league tables on various websites I was suprised to not see the implementations use the UI more effectively. Most of the implementations required the user to click on seperate links to view the current table, results or fixtures.

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!

ExtJs stores and baseParams

I have found myself using ExtJS on both of the last two contracts I have worked on.

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…

Continue reading

MacBook Pro Trackpad and Keyboard not Working?

I was sat at the airport the other week with very little to do.

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!