@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 [email protected]

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!

Accessify ROCKS Manchester

Back from Manchester after a pretty good weekend all in all.

It didn’t start particularly well. Very briefly I was late getting to the station. Missed train. Waited an hour and the next train was delayed half an hour. Missed meeting everyone at the station and had no clue where the place was. After a trip (in the opposite direction to the pub) to the tourist information centre I finally got there and things picked up markedly.

Present where Patrick Lauke, Vigo, Andy Saxton, Jack Pickard, Pixeldiva, Robert Wellock, Dan Champion and myself.

We started out in a small deserted bar where Patrick had booked a table (including a reserved sign with bad fonts). Considering that we accounted for the vast majority of people in their throughout the afternoon this was mildy amusing.

I missed most of the introductions but not to fear. Conversation jumped around – people who made it to d.Construct filled everyone else in with the highlights and the behind the scenes gossip. Tales of massages and ladies mainly. We had a wireless laptop connection and browsed around a little. Bad examples of error messages (I’ll dig out the links later on), brand new public sector sites that simply consist of sliced up images (including links with blue underlines and ovely image maps) and goings on at the BBC. But we cant speak about the later. Some talk as well on privacy issues tied in with the whole open API goings on and an idea we intent to sell to google – stalking.google.com – which is fairly self explanatory but we got into a worrying level of detail!

After a brief break to stop off at the hotel, and for some of the group to depart, we got some Indian food on the way to a pub recommended by Patrick, who was going to meet the rest of us there. It was a ROCK pub. Rage on the jukebox, lots of proper beers, people wearing black, etc. All of a sudden we found something else we had in common – musical tastes. More discussions going backwards and forwards between the music (what’s that tune?) and the state of the industry. All good fun.

Overall, another enjoyable meetup. Thumbs up to everyone turning up and I’ll look forward to the next one. I’ll post links and the obligatory flick details once everyone else has their say.

'Creatives'

I’m not going to prattle on but something that’s bugged me for an age. The usage of the word “Creatives”. And lo and behold it bugs other people too.

I like knowing that it’s not just me!

Just to say as well that anyone reading this and going along to the Accessify Meetup in Manchester this weekend let me know. Leave a comment. Be good to put names and faces to email addresses and web sites!

d.Construct?

Right. I wasn’t at d.Construct I’m still a bit gutted really as it sounded like a hoot and lots of it was up my street and would have been good to meet up with ‘people’. But hey, I can still watch the feeds pour in right?

With that in mind, to again make my life easier and hopefully be of some use I’ve set up another (the first one was for @media) feed syndicator.

morethanseven.net/dconstruct

All I’m doing is parsing, storing and displaying all the feeds. On first run I picked up 27 and hopefully by the time you read this more will have been said. The collection of feeds are a combination of people I’ve met and people who where blogging about `media. If you have a feed and want it adding just leave a comment on here or drop me an and I’ll add it to the rest.

I’ll just say a big shout for everyone at Clearleft for organising it on such short notice. I’d rather thinks like this happen and me not be there than they not happen at all because of problems with size or cost or admin. Maybe next year?

Tips for fluid design

After getting a few comments about the site design, and in particular a few of the fluid nature comments about it being tricky to get right. I’ve found myself tending to develop fluid designs more often that not over the last few years and thought I’d do a short series of posts about some of the techniques I use. I’ve generally found it pretty easier to find discussions about the pro’s and cons and the basic principles but less so on actual techniques. I’ll try cover some or all of the following over the next few weeks or so:

  • extendable background images
  • using overflow hidden
  • use of fluid flash banners
  • min-width and max-width (and javascript)

I’ll kick off with tricks for background images.

This techniques makes extensive use of the background CSS property which is used as following: div\#iBackground { background: url(path/to/image) center top no-repeat; }

I’ll assume some familiarity with this and CSS in general, basically all we are doing is setting a background image to the div with an id of iBackground which is set to align to the top vertically and centered horizontally.

Moving the image to the background has a couple of interesting effects, the one that we are interested in here is that the the size of the div is not affected by the size of the image (as it would be if the image was placed inside it). It acts as a kind of viewport into the world of the image. By specifying the width of the div in percentages (or em’s if you are dealing with an elastic design) the size of the viewport can change dependent on the size of the browser window. An example is inorder:

joshuaink.com makes use of a large background graphic that stretches the full width of the site. This means the space can be used for pretty large imagery but without breaking the experience (sideways scrolling!) for those with lower resolution displays. Note that the flower background is 2000px wide.

The only problem with this technique that I have come across is generating the images in such a way that they degrade gracefully. You need to make sure real content (logos or text) appear in a smaller area that the whole image and live with the fact that not everyone is going to see the whole thing. In my mind this is a small price to pay for asthetically interesting fluid layouts.