Widgets

Of late I’ve got round to installing a few widgets on my computers – Dashboard on my Mac and Yahoo Widgets on Windows (no linux widgets as yet). I’m actually still running OS X 10.3.9 and using the very nice Amnesty to allow run to Mac Widgets.

I’ve been meaning to play with widgets for a while, mainly because I’ve been using HTML, CSS and Javascript for years and widgets simply reuse these technologies – making it easy to just jump in an make something handy. I’m also a fan of web services in general and widgets provide another handy interface to many online services.

I’ve mainly been using the Junior Mint widget (and Minty) for keeping an eye on my site stats, I think I mentioned before I’m hooked). I’ve also been using WiFi monitoring widgets, battery monitoring widgets and looking at the backpack widget which looks nice.

As for having a go at developing them – I just made available my first go, a widget to keep track of the @media2006 feed agregator I have built. It’s relatively simply – it polls the site for a couple of variables and displays them across a couple of panes. The numbers in question are the total number of posts, the number of new posts this week and today – as well as a countdown to the event. I had to do a little work to expose these properties in an XML format from the site but nothing major.

I learned by looking at a couple of tutorials as well as existing widgets. Disecting code prooved the most useful – the majority of tutorials seemed to provide good Hello World examples but you could probably guess most of that. If anyone has any good intermediary or advanced widget tutorials then let me know.

The main problem with the development process was definately the iterative testing. With web pages I tend to work in large steps (with very little testing) early on and then move to more small changes and quick testing later on when it’s down to the details rather than the brush strokes. I’d definately echo the sentiment of others by testing in safari (it uses the same rendering engine) first, and also add that getting all the markup and CSS in place before moving to Javascript is probably the best bet. You really need to test the Javascipt with a real running widget as it has it’s own functions available via the widget object. I’ve heard Apple may be working on a suitable IDE for widgets (my guess would be a tie in with Xcode) and I’ve come across Wcode which appears to offer some useful tools.

I’ve not yet looked into the situation with Yahoo Widgets – I intend to port my @media widget to Yahoo as an experiment and we’ll see how that goes (and yes I know that’s the wrong way round – Dashboard was, to some, a copy of Konfabulator, now Yahoo widgets. It’s early days I think for widgets – the move to more of a distributed systems feel, with open APIs and web services, amongst modern web applications would seem to be a perfect match for small desktop applications that tie into them. Watch this space.

@media redux

Yes it’s back. @media returns as promised by Patrick last year and, well, it’s definately bigger. Two streams, more speakers and panels than you can shake a pink elephant at. I know for a fact that this was being planned even before Molly had left the bar last year and boy does it show.

The blogs are alight with the sound of people coming up with something, anything to tell their bosses in the morning. I’m sure I’m not the only one still awake either posting comments (Yes Zach, Patrick I do mean you) and making blog posts.

I’ll post more about what I want to see, how I’m going to decide which sessions to go to (I’ll need some sort of system – simply trying to decide which one’s will be best will only end in heartbreak) over the next 6 months or so. Yes it really is that far away. With the Carson Summit coming up so soon as well that should more than keep me going – especially with them having different emphasise (web standards/accessibility and web application development/design respectively) to keep thinks from getting boring.

And with all that in mind the reason it’s late when I post this makes sense. Yes it’s another feed agregator thing.

morethanseven.net/atmedia2006

The place is already starting to hot up and I’d guess that will only get worse (or better?) over the next few days. I’m glad to get in early this time. Last year proved useful (at least to me) in keeping up with the aftershow goings on with 150 posts from 52 feeds – but I only got it together a week or so after the event, thanks mainly to Faruk for compiling the initial list of posts.

Any bugs or suggestions let me know. Also if anyone has a good name (feed agregator is pretty mechanical) then please do tell. I’ve added a few of the requested features from previous editions and it’s now possible to quickly suggest new feeds and to search through all the posts.

Anyway – Hope to see people in June. My predictions of a year of real world activity to mirror our enlightened online existence are coming to fruitition already.

@Commented-on Follow up

Since the brief discussion based around ben’s original idea for using del.icio.us to track comments you have made on other blogs I’ve been having a play.

The main issue that people saw was simplicity, which I see falling under two headings:

• Ideally it should just happen. If you comment somewhere (and opt in, obviously) you browser or online service should keep a track and give you access to this data. This would require changes to existing blogs and in particular the common software like textpattern or the other one
• Saving that for later, a simple one click service which does not get in the way and achieves the same thing should be suitable.

It’s the later that I’ve been playing with and thought I’d present here in it’s early stages. The plan is as follows:

• A bookmarklet collects the data from the page (title and url) and sends it to an intermediary page, rather than del.icio.us.
• The intermediary page prompts for a username and password (HTTP authentication) and adds the post to del.icio.us automatically.
• The page is then either closed or redirected back to the page from whence the request came.

The bookmarklet

The bookmarklet section is simple enought modifications of the existing del.icio.us bookmarklets. See the download at the end of this post for details.

Intermediary

The intermediary page uses HTTP authentication to ask for a del.icio.us username and password (note that I’m not storing these at all, or for that matter at present checking if they are correct.) This needs only happen the first time you use the page if you use your browser to store the details or once per browser session otherwise.

The page then makes a request to the del.icio.us API using the lovely PHP library from dietrich.ganx4.com/delicious/

Return

On a failed request the page reports that an error has occured (I’ll expand on this with more pertinent error messages as time permits.)

On success however we have two options, depending on the bookmarklet used. The default is to close the page down, with an alternative beiong to redirect back to the refering page. We do however run into a slight problem here with Firefox. Our favourite browser will only allow windows to be closed via javascript if they where opening by a script (NOT including our bookmarket). Internet Explorer has a similar set up where it prompts the user for an action, although a simple fudge get’s us around that one. At the moment therefore the close window bookmarklet is of limited usage for Firefox users.

Future

This could quite easily be expanded for use on a blog as the requests are simple HTTP requests with query string parameters. However the security implications of giving out your username and password would likely limit this approach. I’m going to look into the sending of bookmarks to others that ben mentioned and see if that can be used here – as hopefully that may only require you to give out your username. A service like gravatar could then be used to do lookups between email addresses and del.icio.us usernames and away we go.

Any thoughts, comments or suggestions welcome. And feel free to try out the bookmarklets. I’ve included a handy download below including a quick readme and the bookmarklets.

download @Commented-on pack

Obligatory next year post

Well, that’s nearly 2005 over and done with. Quite an eventful year all told and I couldn’t let it end without the obligatory next year post .

So without further ado, this year various things happened to me:

• @media was great. Met lots of nice people and had a blast. Roll on next year.
• I moved jobs
• I actually started blogging. I redesigned the site around that goal and now I’m hooked. Oh well.
• The Reboot was a massive success. It got me to redo my site properly, got me all of ten minutes of minor fame and I’m still on the front page. Thanks to everyone.

Next year my crystal ball predicts:

• The Carson Workshops Summit will be huge.
• I’ll find something more specific to write about rather than jumping around all the time.
• Newcastle New Media will kick into action with some real world meetups and then who knows?

On less of a self centred trip:

• Elastic and Liquid design will be essential.
• Yahoo Vs Google will really hot up. With more buying and innovating that you can shake a stick at.
• Intel powered Apples will be launch to a crazy ipod fueled public. Who still wont buy them. They will however by the machine of choice for the discerning conference attending web design geek next year.
• Some crazy, web 2.0, buzzword compliant CMS/Blogging software will hit the streets causing a ruckus. Textpattern will still be great.
• Some cools stuff has to come out of Alexa opening up their archive via web services

All in all, I’m looking forward to next year for a range of reasons including the above. Hope to see (or meet) all of you (again) over the coming year.

@commented-on

Update I’ve updated this site to include a list of recent comments I’ve made powered by del.icio.us and @commented-on. A quick hack of the txt.icio.us plugin and some thinking on at rules for del.icio.us later and their we go. Expect more details soon.

Update Ben has posted an update to his post with a quick hack of the del.icio.us bookmarklet.

Ah Ha. Nice when you have a vague need and think about spending some time coming up with a quick solution, only to forget about it until you come across a solution.

I’m busy (ok sometimes) but only part of that is down to my blog reading habit. I only occasionally find time to comment and then often forget where I’ve commented and no doubt miss the follow up. If only their was a quick way of keeping track. Where did I comment and when? What if (strange, probably stalkerish) people wanted to know where I had been commenting and what I’d been saying? Well thanks to Ben we may have a solution.

Enter del.icio.us. Ben has suggested using the tag `commented-on and who am I to argue? By tagging any page I make a comment on in this way del.icio.us will keep a record at as well as make a feed available at del.icio.us/rss/garethr/@commented-on

Nothing on those at the moment but as I comment on things around the web I’ll try and remember. The whole flock thing would be particularly useful for this (at least once it’s a bit more stable) with it’s built in del.icio.us setup. A couple of apps spring to mind on that back of this, and playing with rss is still one of my fave things. A textpattern plugin (I’ve been meaning to at least have a look at building one at some point) or some social network app would be interesting. Watch this space (maybe).

Anyone else start using this technique leave a comment. I’d be interested to see it catch on.

A meetup and a quick review

Well last week or so the Newcastle New Media list kicked into life once again with a flurry of posts (some of a sickening nature regarding future rock star Nathan Hardwick). After a suggestion to have a look at meetwithapproval.com (more on in a moment) we finally got round to organising a proper meetup.

The date has been set as the 12th of January 2006. The location as The Bridge Hotel and the time around 17:45.

So anyone in the area fancy coming along feel free. The plan is nothing formal. Lots of people have lots of ideas from organising a full blown conference to a vaguely regular meetup. My feeling is that anything we can do to help build a sense of community can only be a good think – what to do with the website and education are on the top of my list in reality. The latter both in terms of learning from everyone else and hopefully giving back. I’d like to get some sort of response to the Local Uni’s web coursess as well, something me and Phil discussed a while back.

With regard to meetwithapproval we used it and organised something so there you go. A success. However it had a wide range of little bits that didn’t quite work or things that appeared missing – plus no documentaion I could see. I’m going to note them down here, but before I do I’d like to say it’s not in a vengeful sort of a way. I’d much rather be using web applications like this (in Beta if you must) now rather than the finished, untested things in six months. Ok, here goes:

• A few people using the service could not, try as they might, mark them selves as accepted. Not sure on browser type and version – sorry.
• In setting up the event I wasn’t really sure what was going to happen. The email that was sent to people didn’t really tell the recipients about the service as I didn’t include that in the description. A separate box for email message would be handy here.
• A nicer memorable event url would be good, rather than the long numeric string.
• RSS feeds for comments and acceptances and date suggestions are an absolute must and would make the app far more useful.
• Some badges would be nice. I’m going to… and so are… type things. Good way of promoting the service too.
• When I confirmed the event I was not aware that it would immediately close comments and acceptances from people. I just thought that it would mean the event was definately on. I found this misleading. I think some more explanation and fine grained control would be nice here. If the event was going to move later on then I’d need to set up a brand new event.
• Maybe cancel does what I’m describing but I’m not wanting to press it incase it emails everyone telling them not to bother coming.

As I mentioned I hope the people behind the app dont take this the wrong way. I’ll love to keep using it in the future and with a couple of improvements (especially the RSS and documentation) I can see a nice future. Maybe a nice API as well? Any other comments or suggestions leave a comment.

Anyone coming along on the 12th as well who feels like saying hi, or getting going early leave a comment too.

Tis the season to...

It’s nearly that time of year again where all of us working types get more than a week off work (the students amongst you are probably already on holiday, or at least acting like you are).

As well as all the obvious things everyone will be up to I always try and have some sort of computer project on the go. Something I can have a proper run at over the festive period. New language. Application. New site. You get the idea.

I’m intrigued to see if that’s just me? Is everyone else thinking “No computer for a week!” or similar? Or has anyone got any exciting projects on the go, and fancy letting us in on a little secret.

Needless to say I’ll have more on what I’m up to nearer the time but obviously it will start in beta and if I’m really pushing the boat out I’ll set up an AJAXified sign up page and maybe an invitation only period. I might just be mocking others here but maybe not, time will tell.

Tips for fluid design II

A while back I decided to jot down a couple of practical, simple techniques that have served me well when actually building fluid designs.

One of the situations that often comes up is the need to make an elements width vary. This is no problem when that element is a block level element (say a div or a paragraph) as unless you tell them otherwise their width willl vary with the space available. However, when it comes to graphics this can be a problem. After all, these will (probably) have been designed with a fixed size in mind.

Their are a couple of possible solutions here, both useful in different circumstances. However, both rely on the image itself to some extent.

The sometimes obvious method is using the CSS background rules, the image wont actually be part of the page and so wont take up any space, the size of the image can then be controlled by the size of the element (say a div) on which the background image is placed. This works but has a couple of ugly side effects – if the image is content based (ie. it carries some sort of important message rather than being just for it’s asthetic attributes) then placing it in the CSS removes it from the page completely, not good for those without CSS support. Another consequence is in site management. Having content imagery in the CSS can make life a little tricky.

The second approach involves using the CSS overflow property. By wrapping the inline image with a container (again, maybe a div) and assigning this an overflow: hidden we can control the viewable area of the image by controlling the size of the surrounding div (with CSS, natch). An example of this can be seen on these pages, with the favourite sites and flickr images. Resize the window. These images should expand to fill the available space.

OK, so we have added some additional markup to the page, depending on your feelings on this that solution may be fine. Want to go a bit further? What about assigning a class to the image and using some nifty DOM scripting to add in the additional markup?

AJAX and Privacy

Ok, so everyone by now has no doubt had a play with XML">AJAX in some shape or form, and their are lots of good tutorials and articles around. I’m not going to add to the pile, but on my travels I did do something that raised a couple of questions. Let me know if anyone has any answers.

The questions are more ethical than technological however and came about when considering online advertising and it’s never ending need for metrics – at the moment that generally means impressions and click throughs (maybe also including converting click throughs). These two states are imposed to some extent by the stateless nature of most web pages. We can tell what gets shown to the visitor. But they then disappear from our radar until they do something – in this case click on an advert (or dont).

But what about the asynchronous nature of our new toy AJAX? We are starting to break out from the constrains of the stateless web so can anything be added to our add example? Why yes of course it can.

I’ve set up a quick working example that should hopefully make my point a little clearer. Open in a new tab (I know 80% of you can – mint is great) if you will – morethanseven.net/monitor

Mouse over the two Ad areas a few times. Click on them a few times too. Obviously the appearing message telling you what you have done is hardly exciting but it’s actually a response from an AJAX (actually it’s not returning XML so is that AJ?) call. All the call does is log the action inn a text file and return a success or failure. This isn’t high tech stuff – it’s proof of concept remember, it gets interesting a couple of jumps forwards.

The two buttons at the bottom, clear log and view log, allow you to see the log of actions (and delete them). I dont imagine this attracting high but the log file will log everyone’s actions not just yours, so you might want to clear the log first to more easily see your actions appear.

OK, so what? Well lets imagine instead of just the actions I log your IP address, some date details, maybe store a cookie on your computer while I’m at it. Also as well as hooking up two add areas as in the example I hook up everything on the page. Not only can I build up a picture of your activities between pages (your path through the site), I can build up a picture of what your mouse was doing on a given page. Now where stalking.

OK, so I’m not sure if their is a correlation between a web users mouse pointer and what they intend but think of other examples – I could trigger the events on focus for form elements. You might get half way through registering or purchasing (you’ve entered your name and an email address) and then decide against it. Normally all I’d be able to get would be someone went to the page in question and did not complete the required actions – with AJAX I could log who you where and were you got to in the process (and then email you to ask why).

Ethics anyone? Anyone else see problems? Let me know.

Note. The javascript examples are not great and I’ve testing in recent versions of IE and Firefox only. It’s a proof of concept rather than tutorial.

Roll On February

Well – It looks like february has made a quick move to try and secure the prestigious month of the year award.

With two events happening in London, namely Clearleft’s Ajax Training Workshop on the 10th and Carson Workshops Future of Web Apps summit on the 8th it’s all go in the rapidly expanding world of web geek meetups.

After missing d.Construct I dont feel two bad about the outlay for going to both of these, especially with the assistance of my lovely employers. So I need to work out the details; travel, accomodation, what to do on the thursday, etc. but that should hopefully not be too painful. Any suggestions welcome – especially if anyone else is going along to one or both – be good to be in the same hotel as other attendess – I met Nic at @Media last year as she was in the same hotel.

So, anyone else going along? Want to meet up? Ideas for accomodation or things to do on the Thursday? See you in February!