Firefox sluggish / jittering jquery (or css3?) animation

I had a browser based problem with Firefox yesterday where my animation wasn’t running smoothly, even the latest version, but it was running fine in Chrome and Safari.

I searched online for a bit but didn’t find a solution. I was, at the same time, trying to remove the dotted line that’s displayed when clicking a link in Firefox.

After some trial and error it turne out both things were solved by the same thing.

Solution:
In css add:

a:focus{
 outline:none;
 }

FIXED!

Web Developers vs Programmers

I recently had a discussion on Twitter with someone who I had respect for in the web community. He was arguing about the term UX developer having a negative effect on his part of the industry. I argued that the term developer is pretty generic, it simply implies that someone is developing something.

I then read an article about lazy programmers being the best programmers, a view I’ve agreed with for a long time and had the luck to observe on many occasions first hand.

The absence of the word Developer from the  article and the missinterpretation of the term by the chap I had the (argument) discussion with niggles me slightly and prompted me to write this reply:

http://www.jacobsingh.name/comment/10576#comment-10576

In my humble opinion:

A web developer helps develop things that make up part of the web, their job should be about configuration to deliver good presentation and functionality – minimal configuration of a programmers code. Their skill-set is usually quite broad and they probably have knowledge of a few web frameworks like WordPress, some of their skills might be programming, others are likely to be using photoshop or scripting (html etc), understanding network latency, security implications, accessibility etc

A programmer (lets say a web programmer) has an in depth knowledge about one or many languages and understands how application architecture fits together, to solve specific problems. They understand the intricacies of writing code and how it affects ‘the machine’, design patterns and when and why they should be used, if at all. They can craft their code efficiently and make it robust and understand how it needs to be tested and evolved. Their code should be the tools that the web developer integrates and utilises and ultimately configures.

I realise that in a lot of cases these are the same person – I just think our industry could do well to recognise the difference a little more often especially with all the good open source software programmers are producing these days!

 

Class and Object definitions in JavaScript

A developer friend of mine emailed me with a question about Classes in Javascript:

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