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!

Advertisements

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.

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

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

ASP.Net MVC Preview 3 and JsonResult

I’ve been doing some work with the ASP.Net MVC framework, which is a little more involved than I first expected, even through I understood the MVC pattern. It looks like a is a huge improvement on the existing webforms model and may have just about stopped me considering a look at alternative web platforms to develop in.

I liked the fact that JQuery is now supported and will be included with future versions of Visual Studio, and is included as part of the MVC framework.

So, all that left was a neat way of encapsulating the way I was using http handlers for ajax calls as I recommended in my previous post on ASP.Net Ext JS and Jquery. Then in Preview 3 that’s exactly what I found today using the JsonResult.

Nice.