Facebook, OpenSocial - meh. Why aren’t widget useful?

Posted on November 8th, 2007 in software as a service, widgets, openid, javascript by Myles Eftos || 5 Comments

TwitThis || StumbleUpon || Digg it || del.icio.us || Reddit

Widgets are a hot topic in the world of social networks and blogs, but at the end of the day they really don’t make our lives better. I mean honestly, if all of those widgets out there stopped would we miss them? Hell, some of them are down right annoying. The IDEA of a widget is not as dumb as some of these apps, but for some reason they haven’t been embraced by those developers that are helping us to get things done.

Google has just released OpenSocial, and I was admittedly pretty excited - for about 5 and a half seconds at which point I realised it would have limited scope outside of the social networking world (hence the name). Why was I excited? Well I would love to be able to create a widget for 88 Miles - imagine being able to drop a time-tracking widget into BaseCamp or NetAccounts or <insert you favourite GTD application here>? Or, even better, into your internal intranet.

OpenSocial has so much potential, but isn’t quite there for the Software as a Service guys, so why don’t we create a an Open Widget API? What do we need? Well, not that much - if we flip the way that OpenSocial works a little and do a little work from the application side.

JavaScript, JSON and HTTP

The easiest way to drop your widget on to a third-party site would be JavaScript. Create a standard JavaScript end-point that the third-party app can retrieve. Maybe it could pass in a element id that you could use to build your DOM tree from. Because the script is hosted on YOUR server, you can make calls back to your server via AJAX. You can use this to generate HTML, make callbacks, retrieve JSON and generally interact with your database.

This is SO easy with Rails, as you can get a JSON REST API out of the box, with very little effort. PHP/Pylons/ASP.NET will do the same thing easily enough to. Extend that idea, and with a little knowlegde of the site you are embedding on, you could probably even interact - add a company to your Basecamp account and it would automatically add it to 88 Miles. You could do it by registering observers of specific types maybe - not sure, will still have to think that bit through.

Authentication

We already have a system for authentication - it’s called OpenID. If your site implements OpenID, it is pretty god-damn trivial to authenticate a user that has already authenticated on the third party site. Any OpenID provider worth it’s wait will remember your credentials once you have logged in - so the third party site can pass your OpenID URL down to the widget, then you can authenticate them from there, and because your provider has already logged you in, you won’t need to enter a username or password.

The ultimate mashup

If all of your favourite apps had these widgets, you could easily drop them in to your intranet site. How kick-arse would that be? What do you think?

JavaScript is OK!

Posted on February 9th, 2007 in port80, javascript, personal by Myles Eftos || No Comment

TwitThis || StumbleUpon || Digg it || del.icio.us || Reddit

A couple of days ago, the regular ol’ Port80 meet up was on. However, this one was a little different. Firstly, we tried out our new venue - the Velvet Lounge in Mt Lawley. We booked a room so we didn’t have weather and other punters to contend with. It just so happens that the room has a stage. And it was on this stage that the first set of Port80 mini talks took place.

The idea behind the Port80 mini-talk is simple: Two local gurus get up and talk on a (web-related) topic for 10 minutes. It is a great way to share knowledge between the tightly knit web industry and a great opportunity of Perth designers and developers to show their wares. Because of our small population and isolation from the rest of the country attending conferences is both expensive and difficult, so these mini talks are a great way to build community.
Brian Madsen started off the proceeding with a talk about the new expressions suite from Microsoft. Since most in the room would have written off Microsoft products for anything web related, it was great to see that Microsoft are now taking standards a little more seriously.

Brian Madsen. Photo by Kay Smoljak

Then it was my turn with a little talk entitled “Out of my way JSON! If CSS can be unobtrusive, so can JavaScript” where I go on to explain the benefits and techniques involved in un-obtrusive JavaScript.

Myles Eftos. Photo by Kay Smoljak

You can view the slides (S5 format) for those of you who weren’t there on the night (Brian said he will upload his soon) and I’m busy doing some post-production on the audio in preparation for some podcasty goodness. That will include transcribing too for those that want to skim read the talks.

I think the night was really successful - and we are currently looking for some more speakers! So if you are in Perth or going to be in Perth on March 8, 2007 and you have a topic you can babble on about for 10 minutes, drop me a line! Even if you don’t want to talk just yet, I hope we can see you there next month. It’ll kick off about 6 o’clock.

Photos by Kay Smoljak.

Password Generating Bookmarklet

Posted on December 6th, 2006 in javascript by Myles Eftos || 1 Comment

TwitThis || StumbleUpon || Digg it || del.icio.us || Reddit

Some how I managed to get lumped with the un-enviable task of creating email accounts for clients at Bam Creative - we currently have to use an archaic web interface and it takes forever. One of the many things that annoyed me about the system, is it can’t generate passwords for you, so I whipped up this little bookmarklet that will generate an eight character password made up of upper and lowercase letters and numbers. It adds a small div to the very top of the page you are viewing. Clicking the password makes it disappear again.

Drag the following link into you bookmarks. Click it now to see it work!
Password generator

Known issues:

  • It doesn’t play nice with frames, it will throw a JavaScript error.
  • Clicking the link in IE doesn’t make it disappear.

The raw code:

  1. passwd=;
  2. for(i=0; i < 8; i++){
  3. switch(Math.round(Math.random() * 2)) {
  4. case 0:
  5. passwd += String.fromCharCode(Math.round(Math.random() * 25) + 65);
  6. break;
  7. case 1:
  8. passwd += String.fromCharCode(Math.round(Math.random() * 25) + 97);
  9. break;
  10. case 2:
  11. passwd += Math.round(Math.random() * 9);
  12. break;
  13. }
  14. }
  15. var pDiv=document.createElement(‘div’);
  16. pDiv.setAttribute(’style’,‘postion:absolute; top:0px; left:0px; border: 1px solid black; background-color: grey; text-align: center;’);
  17. var pClose=document.createElement(‘a’);
  18. pClose.setAttribute(‘href’,‘#’);
  19. pClose.setAttribute(’style’,‘color: white’);
  20. pClose.setAttribute(‘onclick’,‘this.parentNode.parentNode.removeChild(this.parentNode);’);
  21. pClose.appendChild(document.createTextNode(passwd));
  22. pDiv.appendChild(pClose);
  23. body = document.getElementsByTagName(‘body’);
  24. body[0].insertBefore(pDiv,body[0].firstChild);

New JavaScript framework - Tennaxia

Posted on November 1st, 2006 in javascript by Myles Eftos || No Comment

TwitThis || StumbleUpon || Digg it || del.icio.us || Reddit

I just received an email a couple of days ago from one of the developers of a new JavaScript framework called Tennaxia. The point of the email was to ask permission to use my JavaScript colour picker as part of the library which is pretty cool. They also included the fabtabulous library from my mate over in Queensland, Andrew Tetlaw.

The library is a group of JavaScripts based on Prototype which provide widgets to use on web pages. Andrew’s widget, for example converts divs into panel tabs. There are a number of demos on the Tennaxia page.

It all looks pretty cool, so go and check it out.

Javascript colour picker based on Prototype

Posted on April 13th, 2006 in javascript by Myles Eftos || 10 Comments

TwitThis || StumbleUpon || Digg it || del.icio.us || Reddit

I have written a small colour picker using the Prototype javascript library, which I thought I would share with the world.

It is very simple, but does the job suprisingly well. I may very well add extra features to it later on, so watch this space.
You can download the source file here.

Instructions for use

1. Include prototype.js and colourPicker.js in you html

2. Create a “target” element and a “trigger” element. The target element is the input tag that will store the colour hex code, so a text box or hidden input will work nicely. The trigger element is the element the user will click to popup the colour picker

  1. < input type=“text” name=“colour” id=“picker” value=“” />
  2. < a id=“trigger” >Pick a colour< /a>

3. Create an instance of the colour picker using the following javascript:

  1. var picker = new ColourPicker(‘picker’, ‘trigger’);

And that is it! Clicking the link will popup the colour picker and after a colour is selected, the text box will then have the hex value in it.
Future plans include better positioning of the popup, and callback functions to you can intecept the colour.

Update: you can see a demo here.

Next Entries »