PHP Hosts

I found four resources linked to from DZone to be particularly interesting this week. I am linking to them in this post as a form of glorified bookmark for my own future reference and in case someone else has not seen them already.

Five Things I Used to Forget About Java

The blog post Five Things I Used to Forget About Java could be useful to anyone returning to Java development, anyone new to Java development, or anyone who has not used one the items discussed for a while. The post covers Java approaches for converting String to Integer, use of the ternary operator, instanceof keyword versus Class.isInstance method, implementing comparators, and obtaining the number of command-line arguments passed into a main function.

Is It JRuby?

The useful online tool Is It JRuby? helps deal with the question of whether a particular Ruby gem will work with JRuby. Although many Ruby gems do work well with the JRuby implementation, some Ruby gems (especially the C-based ones) only run with other, non-JRuby implementations of Ruby. This community-driven site helps organize which Ruby gems work with JRuby. I plan to mention this resource in my Colorado Software Summit 2009 presentation Applied JRuby.

RESTGate – Web Client for REST Resources

The online tool RESTGate – Web-Based Client for REST-based Web Services appears to be an easy-to-use (no setup) browser-based client for performing simple testing of and interaction with REST-based web services. I will likely blog on this in more detail in the future and will almost certainly mention this tool in my Colorado Software Summit 2009 presentation RESTful Java.

sqlREST

The sqlREST project looks like an interesting one. This project benefits from use of Java standards, running on Java EE servlet containers and connecting to multiple databases via appropriate JDBC drivers. The goal of this project is to allow easy exposure of database entries via REST-style web services. Like the other Thomas Bayer tool mentioned above (RESTGate), I plan to mention sqlREST as part of my RESTful Java presentation.

TinyBox is a lightweight and standalone modal window script. At only 3.4KB it doesn’t include any slideshow capabilities built-in but allows for any AJAX or HTML input so the sky is the limit. Future versions will include additional features. It can also be used for images and auto hiding alerts. The popups fade in/out and dynamically size based on the content if enabled. The styling is completely customizable through the simple CSS. I have a couple tutorials and a few scripts I will be posting very soon so check back.

To display a popup box use the following code:

TINY.box.show('advanced.html',1,300,150,1,3);

There is nothing to initialize, just start using the script. The TINY.box.show function takes 6 parameters: the HTML content for the box or the relative path to the AJAX source, a toggle (true/false or 1/0) if the content is via AJAX, the width of the window (use 0 for auto), the height of the window (use 0 for auto), a toggle (true/false or 1/0) to animate the window, and the time in seconds to wait before auto hiding the popup (optional).

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source code.

Update 11/15/2009 – Updated logic to speed up the animation and fix a positioning issue. Slightly dropped the code weight.

Update 11/16/2009 – Fixed issue that occurred when sizing down a box.

If you’ve worked with webdev professionally you know how it goes. “Why can’t a company with a strong visual brand get to use their own font?”, the designer asks. Then a long discussion about web fonts follow, where you decide to replace the font with a “web safe” font instead. Or do you?

You could think it’s strange that in 2009, we can’t use any fonts we want on the web, and I would fully agree. You could ask whose fault that is, and I would reply with a quote from a meeting between browser makers in august 2008:

“My understanding, from Chris, is that supporting direct linking of the fonts would be a great disservice to the independent font industry. A high-level decision within MS says we won’t implement that in IE. So what is done other than EOT is [probably] not going to interop with IE. “

“MS” is of course Microsoft, and “Chris”, is referring to Chris Wilson, Platform Architect of the Internet Explorer Platform team. The same Chris has also written a longer text about font linking on his blog. I first thought that this was something the font foundries had pushed through, but on the above post it seems that this is also a personal opinion. Browsers (but only IE) need to protect fonts from getting pirated.

And that’s the whole reason why we don’t have cross-browser fonts on the web today. (Although direct linking to fonts work in all the latest versions of Firefox, Opera, and Safari). Nice isn’t it?

Embedding fonts anyway

Of course, there’s still a need to embed custom fonts on webpages. That means clever developers will develop techniques will work around a broken internet explorer. No matter what the font founderies and Internet Explorer team thinks.

My reasoning for why this is a good thing is because that’s how everything else works in the browser. Even though anyone can copy an image, we have a big market for stock images. Even though anyone can copy the HTML, CSS, and Javascript of a whole site, we still have people building websites for money. Fonts are no different, and the exact same business model that works for stock images can work for fonts.

One popular technique is sIFR, a way to use javascript to replace regular html with flash. Inside the flash you embed the font you want, and voilá, you can use any font you want. sIFR misses one crucial point though: It’s far too annoying to embed a font inside a flash movie. You need a commercial program, and you need to know what you’re doing. And you’re dependent on flash support. It’s not that bad, but a bit annoying to work with.

So for a recent project I’ve been playing with Cufón, which uses javascript, but draws on canvas, or in VML for browsers that don’t support canvas (IE). They have an extremely friendly website, which walks you through the process of getting things to work, and the font conversion needed is available directly on the website. I’ve only used it for simple cases, but it works really well.

All in all, Cufón is a great alternative until IE gets its shit together.

PS. Famous people that don’t agree with me:

• Richard Rutter, author of the clagnut blog suggests that font founderies server-side generate our fonts on demand, much like Google Maps only sends a part of the map, and not all of it.
• Joe Clark: “Quite simply, there is no broad clamour among Web designers to use any font they want.”
• Jason Santa Maria: “embedding normal typefaces without any sort of precautions is putting it on a silver platter for anyone to take freely. That’s like saying people steal from stores anyway, so let’s just leave the doors unlocked at night ”
• And of course, the IE team…
• …and all the typeface makers in the world.

There are many times when I am writing an application I need to display data in a table. Most of the time a simple HTML table styled with CSS is all that I need but occasionally I want a bit more. Today we’ll look at designing a plugin for jQuery that will add some advanced features such as row selection and sorting.

Design Goals

Starting out we are going to keep this pretty simple and as it progresses we’ll add more features.

For now we are going to start with a hand coded HTML table and CSS. In a later post we’ll look at populating the grid from a data source.

In this post today we’ll apply the CSS to the table but will expand this to a skinning system later on.

We’ll also be applying the row selection feature today.

Starting Point

Let’s use a simple table as out starting point.

<table cellpadding="0" cellspacing="0" class="easygrid">
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Bill</td>
        <td>CEO</td>
        <td>53</td>
    </tr>
    <tr>
        <td>Jason</td>
        <td>Developer</td>
        <td>29</td>
    </tr>
    <tr>
        <td>Sue</td>
        <td>Accountant</td>
        <td>37</td>
    </tr>
    <tr>
        <td>Frank</td>
        <td>HR Manager</td>
        <td>42</td>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Graphic Artist</td>
        <td>31</td>
    </tr>
</table>

Basic Style

Next we will apply some basic CSS to make our grid look nice.

body, table {
     font-family: verdana, arial, sans-serif;
}

table.easygrid {
     font-size: 11px;
     width: 600px;
     border-top: 1px solid #b8b8b8;
     border-left: 1px solid #b8b8b8;
}

table.easygrid th {
     text-align: left;
     padding: 5px;
     background: #424242;
     color: white;
     border-bottom: 1px solid #b8b8b8;
     border-right: 1px solid #b8b8b8;
}

table.easygrid td {
     padding: 5px;
     border-bottom: 1px solid #b8b8b8;
     border-right: 1px solid #b8b8b8;
}

table.easygrid td.alt {
     background: #f6f3f6;
}

table.easygrid td.selected {
     background: navy;
     color: white;
     font-weight: bold;
}

Building The Plugin

Here is the basic layout of our plugin. We’ll look at implementing those functions in a minute.

This is pretty simple so far. We have our default values, we merge the user passed options with the defaults, and then call two methods on each jQuery instance.

(function($) {
     $.fn.easygrid = function(options) {
         var defaults = {
             alternateBackground: true,
             allowRowSelect: true
         };

         options = $.extend(defaults, options);

         return this.each(function(index, table) {
             setAlternateBackground($('tr:odd td', table), options.alternateBackground);
             rowSelection(table, options.allowRowSelect, options.alternateBackground);
         });
     };
})(jQuery)

Here is our setAlternateBackground method. Note we are passing all the odd rows found in the current table.

function setAlternateBackground(rows, alt) {
     if(alt == true) {
         rows.attr('class', this.className + ' alt');
     }
}

This function appends the alt CSS class to each row if alternate row backgrounds is enabled.

The next function adds a click handler to each row to implement the row selection functionality.

function rowSelection(table, allowSelect, alt) {
     if(allowSelect == true) {
         $('tr', table).click(function() {
            //reset all rows
            $('tr', table).each(function() {
                $('td', this).each(function(index, cell) {
                    $(cell).attr('class', cell.className.replace(' selected'));
                });
            });

            //restore alt backgrounds
            setAlternateBackground($('tr:odd td', table), alt);

            //select this row
            $('td', this).attr('class', this.className + ' selected');
        });
    }
}

There is a little more involved with this function. If this feature is enabled we are adding a click handler to all the rows in the table.

First the click handler will clear any selected rows and reapply the alternate background colors. I am not sure why this gets lost.

Then, finally, the row that was clicked is selected by applying the selected CSS class to each cell of the row.

What’s Next?

That is it for this post but we will look at adding sorting to our grid in post in the near future.

Currently the row selection is a bit buggy in Firefox but works fine in IE. I will have the Firefox issues sorted out for the next post. You can check out a demo here.

Be sure you don’t miss out by grabbing the RSS feed, updates by email, or following on Twitter.