Last week I enjoyed some time up in Edinburgh for the International Workshop on Portals for Life Sciences (IWPLS ‘09), hosted at the e-Science Institute. It was a good workshop - there were good presentations, lively debates, and good social planning for the evenings!
I have to admit that quite a lot of the content of the workshop was completely irrelevant to me and went straight over my head at times, but I did enjoy it, and it’s good to hear what other people are doing.
I was there for two reasons, first was an interest in the content of the workshop, and second was that I was one of the people presenting a lightning talk! The content of my talk was pretty different to most of the other presentations - they were mostly about grid computing and development of portal interfaces for said grids - whereas mine was about the architecture I developed for the new Sanger Mouse Resources Portal.
It seemed to go down pretty well, it got a couple of laughs, no one fell asleep and quite a few asked questions at the end, so I was quite happy at that. Here’s the slides from the talk, just in case anyone would like to take a look. Copies of all the presentations from the workshop can be found here.
A great idea from the folks over at 37 signals.
It’s easy to think that the relative-time style of “this comment was written 15 minutes ago†is incompatible with caching. How are you supposed to cache something if the text changes every minute? Static pages with JavaScripts, that’s how!
full post.
Update: Looks like this type of idea has been around for a while (I’d just never thought of it before)! 
(0)
Found this while trawling the feeds this morning - looks like quite a useful utility. It offers a nice alternative to Firebug (when testing in browsers other than Firefox).
Blackbird via
(2)
I’ve just spent the last week on a Javascript and Ajax course (thanks to work for footing the bill)! As such I come armed with some newfound javascript knowledge! 
Here’s the first fruits of my labour - a very simple jQuery plugin that enables you to unobtrusively make an element on a webpage collapsable, and have the showing/hiding controlled by another element.
Like I said, this is very basic stuff and there is probably about a million other (most likely more feature-full and better) plugins that do the same thing already on the web, but it’s all I really need for it to be useful for my stuff and I had fun learning how to do this - never know someone else may find it useful!
If you want to have a play, here’s where to go:
My Projects Page
Demo/Documentation
You will have noticed this effect out on your travels on the internet - a text input field has some default text in it (often in a slightly dimmed colour), and when you click on the text box, default text disappears and then reappears when you click away from the box. It happens on the search box to the right here too.
I needed this same effect at work today so a quick Google came up with this great blog post - a lovely example of the exact effect I was looking for in both raw javascript and a version using the jQuery library.
The script searches the page that it’s inserted on for all form input fields that have a class of ‘default-value’ applied. Each form input field must also have a unique ID.
When the page loads the script changes the color of the text in the text fields it has found to the value of ‘inactive_color’. If the user clicks on the input field, the default text is blanked, and the colour changed to ‘active_color’. If the user clicks away from the input field, i.e. the input field loses focus, the value of the text field will revert back to the original text, and the colour will change back to ‘inactive_color’, unless the user has entered some other text.
Here’s a copy of the jQuery version for my own personal notes, never know when that could be useful:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| /*
* Written by Rob Schmitt, The Web Developer's Blog
* http://webdeveloper.beforeseven.com/
*/
var active_color = '#000'; // Colour of user provided text
var inactive_color = '#999'; // Colour of default text
$(document).ready(function() {
$("input.default-value").css("color", inactive_color);
var default_values = new Array();
$("input.default-value").focus(function() {
if (!default_values[this.id]) {
default_values[this.id] = this.value;
}
if (this.value == default_values[this.id]) {
this.value = '';
this.style.color = active_color;
}
$(this).blur(function() {
if (this.value == '') {
this.style.color = inactive_color;
this.value = default_values[this.id];
}
});
});
}); |
However, we don’t use jQuery at work, our entire site is based around Prototype and script.aculo.us, so I did a bit of butchering and here’s the code adapted to use Prototype:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| /*
* Written by Darren Oakley
* http://hocuspokus.net
*/
var active_color = '#000'; // Colour of user provided text
var inactive_color = '#999'; // Colour of default text
Event.observe( window, 'load', function () {
var default_values = new Array();
$$("input.default-value").each( function (s) {
$(s).setStyle({ color: inactive_color });
$(s).observe( 'focus', function () {
if (!default_values[s.id]) {
default_values[s.id] = s.value;
}
if (s.value == default_values[s.id]) {
s.value = '';
$(s).setStyle({ color: active_color });
}
$(s).observe( 'blur', function () {
if (s.value == '') {
$(s).setStyle({ color: inactive_color });
s.value = default_values[s.id];
}
});
});
});
}); |
Now all you need to do is give your input text fields a unique id, and the class of ‘default-value’, then the script will take care of the rest.
Yet more chart drawing goodness. This takes a different approach to the Google model by generating really good looking graphs all on the client-side in javascript - very nice!
Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming. Although Flot is easy to use, it is also advanced enough to be suitable for Web 2.0 data mining/business intelligence purposes which is its original application. The plugin is targeting all newer browsers.
via
(0)
TableKit is a great javascript library for making your HTML tables fully editable. However, one problem is that you can’t add or delete rows from the tables…
I came up with a solution to this not so long ago, but it still had a problem - TableKit caches the tables on loading, so after we update the table body (adding or deleting a row) the sorting and editing of the table is completely screwed! 
However, with a little more work, and some help from one of the guys in the office - we’ve finally got this cracked!
Continue reading ‘Adding/Deleting Rows in TableKit Tables Revisited’
This post has now been updated. Please head over to the new post for something better…
Following on from my previous post on how to integrate the excellent TableKit into your Catalyst webapp (to make your data tables dynamically editable), here’s how i’ve gone about adding ajax inserts and deletes so that you can add and remove data rows in your tables.1
Continue reading ‘Adding/Deleting Rows in TableKit Tables’
Catalyst is an MVC web-development framework for Perl, very similar in concepts, ideas (and even some of the implementation) to Ruby on Rails. I’m using Catalyst a lot in my job now, and one of the first challenges that i’ve had to go through is making dynamically editable tables for some of the views we are using (in other words, Ajax driven edit-in-place tables).
Following a short Google, there seemed to be only two ready-made options I could see: one, using the Catalyst controller module Catalyst::Controller::ROSE::EIP; or two, by integrating and using the stand-alone javascript package TableKit.
Continue reading ‘Making Editable Tables With Catalyst and TableKit’
Recent Comments