A life in the day

3/31/2007

Overlabel with JQuery

Filed under: — Scott Sauyet @ 2:24 pm

I’ve been playing with JQuery lately, and when I found a need to use the wonderful little accessible compact form script by Mike Brittain, I thought I’d try to duplicate it with JQuery’s simpler syntax. This is my first attempt at anything close to a JQuery plugin. It works for me, as you can see on the test page.

Here’s the code I wrote:

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
jQuery.fn.overlabel = function() {
    this.each(function(index) {
        var label = $(this); var field;
        var id = this.htmlFor || label.attr('for');
        if (id && (field = document.getElementById(id))) {
            var control = $(field);
            label.addClass("overlabel-apply");
            if (field.value !== '') {
                label.css("text-indent", "-1000px");
            }
            control.focus(function () {label.css("text-indent", "-1000px");}).blur(function () {
                if (this.value === '') {
                    label.css("text-indent", "0px");
                }
            });
            label.click(function() {
                var label = $(this); var field;
                var id = this.htmlFor || label.attr('for');
                if (id && (field = document.getElementById(id))) {
                    field.focus();
                }
            });
        }
    });
};

And it would be called like this:

1
2
3
$(document).ready(function() {
    $("label.overlabel").overlabel();
});

I’m wondering whether there are some simplifications to this that a more experienced JQuery user could explain, though. I feel as though it’s still too wordy, and that it spends too much time switching between the DOM elements and the JQuery ones.

In any case, if you are interested in this (public domain) plugin, you can grab a zip here, or just go straight to the Javascript source.

3/15/2005

Stylesheets Plugin

Filed under: — site admin @ 12:52 pm

I’ve created my first WordPress plugin. It allows you to add your own stylesheets independent of the chosen theme. You can download it at http://scott.sauyet.com/php/wp-plugins/stylesheets/. Install is the standard, unzip, drop it in the plugins directory, and activate. It adds a panel to the managment page.

The genesis of this plugin was a little itch I had to scratch: I’ve been playing with themes for my blog. Someday I’ll get around to writing my own, but for now I’m working with many of the beautiful options available online. The trouble is that I kept having to patch the stylesheets with a little extra CSS that I was using on my site. I have some health issues that I’m tracking with markup that looks like this:

    I’m at <strong class="good reading">78</strong>, which is in the
    target range of below <strong class="target reading">100</strong>.

which in this blog looks like:

I’m at 78, which is in the target range of below 100.

and of course sometimes there’s a "class='bad reading'" too. :-( To go along with this, I’d been adding a tiny bit of CSS to the stylesheet for each theme I tested. This is tedious and error-prone, and seems to be against the spirit of WordPress.

So when I started to understand the plugin architecture, I created a tiny plugin that added the necessary CSS to the head of the document. Then I switched to an extenal call to the stylesheet. After that, I arranged for the call to the stylesheet to call through the plugin itself. At this point I realized that these techniques could be useful to others. So I’ve generalized it quite a bit, and tried to reasonably bulletproof it.

I think it’s straightforward to use, and self-documenting. It allows you to create as many separate stylesheets as you like, each one including as much CSS as you choose, linked or imported (maybe later I’ll add the option to include the CSS directly in the head), and associated with whatever collection of media you wish. You can also choose to hide any of these stylesheets.

I’m pretty happy with the results, but so far I am the only user. I would love to hear feedback from WordPress users.
(more…)

1/6/2005

Arguing for an upgrade

Filed under: — site admin @ 12:41 pm

My team has a big architectural meeting coming up soon; it will be time to discuss what’s working, what’s not, what our system wants to be when it grows up. It’s a three-day, offsite meeting. We’re flying in team members from Houston and Indianapolis. It’s a big deal. And I’m trying to prepare.

I want to write a document describing some of the benefits of many of the modern software development tools and techniques. But I’m stumped at where to begin. The problem is that there’s far too much to say.

Our current system is an ASP/VB/SQL Server web application. It works only with IE6. Our ASP pages are mixes of presentation, business logic, and data access. Parts of the navigation relies on Javascript. Some of the HTML is generated inside VB DLLs. There are client-specific functions mixed in with generic stuff. There is a very flat directory structure, with no way to distinguish the functionality of various modules.

There are no automated tests, nor any scripts for manual testing. Building the system is a matter of grabbing the code from several different source-code control databases (and all the code that developers have forgotten to check in), moving it to the production machine, then manually trying out anything you’ve been working on, finding the DLLs you forgot you needed to register, trying it again, calling everyone who worked on the system, adding to the database the tables someone forgot to tell you you needed, lathering, rinsing, and repeating until no one notices any further errors.

And of course there is absolutely no documentation.

The initial system was built by a very talented programmer who was quite new to all the technologies used. She did a great job getting things working, but the system has grown in all directions, and there has been little coordination of the efforts.

What I want to propose is a multi-tiered application architecture, using modern development technologies and techniques. My choice would be Java with Hibernate and Spring, although I don’t have much experience with either framework. But I would certainly be willing to live with .NET or a Python framework. I could even see doing all or some of it in PHP. I would be willing to consider full-fledged J2EE, although that scares me a bit.

Out output should be standards-compliant XHTML and CSS. Javascript should be optional, used only to enhance a working page(1).

Everything should be test-driven. No code should be checked in without passing unit tests, and no code should be written without having tests for it to pass. The builds should be automated. There should be automated functional tests.

In short, we should be building a modern, modular, scalable, testable, automated system.

The trouble is in having so much to say that I can’t seem to even begin actually writing my document. I’ve been working around the edges, mostly analysis of the various options for technology. But I need to work on the main part, and I need to do so soon.

Anyone ever seen good sites describing in management’s terms the advantages to modern techniques?


(1) There is one inescapable exception to this. We have a Javascript WYSIWYG editor. We are told we need to maintain a WYSIWYG editor without relying on any plug-in. Nonetheless, everything else should still work with Javascript turned off.

Powered by WordPress