After the initial learning curve, this has all been going swimmingly. I merged my first development branch into the trunk yesterday, and this branch just so happens to dovetail nicely into the whole point of this post, which is the YUI compressor, an open-source javascript and CSS minification tool developed by Yahoo’s YUI team.

The Problem

To understand quickly why one should minify production client-side code, consider only that with the upward trend of size in javascript libraries (and the necessary files for such libraries), it’s possibly to be downloading a lot of client-side code in a typical web application, especially as its scope grows.

For a long time, I was using Dean Edward’s Packer, as was everyone, because its Base62 encoding produced the very lowest file size. However, what should have been obvious to everyone is that eval(bunch_of_stuff_goes_here) is making the browser do a lot more work, and this is a problem on dinosaurs like IE6.

To make matters worse, the nature of such encoding also meant that for servers which tried to compress outgoing content like javascript (either with zlib or gzip), the compression ratio suffered. Just look at this table that Julien Lecomte posted last August.

I said to myself, “Hey, we use a lot of this stuff, and we still support a lot of users with slow computers and slow browsers.” So, I moved our project from a Packer-based compression to a YUI-based compression, and turned on server-side GZIP compression for javascript files. The only problem was that I was storing the javascript files already minified, and simply pasted them into a large a couple of large global .js files. I had to keep a separate source directory, along with any customizations.

This got to be a pain in the ass, as you might well expect, and so when it occurred to me that I might be able to use the YUI library at build-time in our Netbeans project, I immediately sprung into action.

This was around April, and one night while attending Sungard Summit in Anaheim. I did the initial work to get our Netbeans project into a state that could use the YUI compressor at build-time, creating separate source file directories and breaking our massive javascript file into modules; I did the same with our CSS, splitting it up based on what it decorated.

There are a few tutorials about using the YUI library. Some of them involve adding the YUI library to Ant’s classpath (didn’t want to go down this route); a lot of them involve invoking the library as an external executable during the build process, which is messy.

The solution I finally settled on was yui-compressor-ant-task, a small library that allows Ant to use YUI as a build task. By adding this library and the YUI compressor library to our common libraries folder, and enabling them at build only (and not for deploying in the web archive), it makes using the compressor pretty easy.

Here’s part of our build.xml:

<!--
   * minify will concatenate all of our non-TinyMCE javascripts and stylesheets
   * then use the YUI compressor library to compress them
   -->
   <target name="minify">
       <!--${libs} is path to the downloaded jars -->
       <property
           name="yui-compressor.jar"
           location="${file.reference.yuicompressor.jar}" />
       <property
           name="yui-compressor-ant-task.jar"
           location="${file.reference.yui-compressor-ant-task.jar}" />
 
       <path id="task.classpath">
           <pathelement location="${yui-compressor.jar}" />
           <pathelement location="${yui-compressor-ant-task.jar}" />
       </path>
 
       <!-- yui-compressor task definition -->
       <taskdef
           name="yui-compressor"
           classname="net.noha.tools.ant.yuicompressor.tasks.YuiCompressorTask">
 
           <classpath refid="task.classpath" />
       </taskdef>
 
       <!-- concatenation of javascript -->
       <echo message="Building global javascript" />
       <concat destfile="${build.dir}/web/common/js/global.js" force="no">
           <!-- explicitly order js concat because ordering matters here -->
           <fileset dir="${build.dir}" includes="web/common/js/jquery.js" />
           <fileset dir="${build.dir}" includes="web/common/js/jquery.bgiframe.js" />
           <fileset dir="${build.dir}" includes="web/common/js/jquery.hoverIntent.js" />
           <fileset dir="${build.dir}" includes="web/common/js/ui.core.js" />
           <fileset dir="${build.dir}" includes="web/common/js/ui.autocomplete.js" />
           <fileset dir="${build.dir}" includes="web/common/js/ui.datepicker.js" />
           <fileset dir="${build.dir}" includes="web/common/js/ui.tabs.js" />
           <fileset dir="${build.dir}" includes="web/common/js/tablesort.js" />
           <fileset dir="${build.dir}" includes="web/common/js/customsort.js" />
           <fileset dir="${build.dir}" includes="web/common/js/jquery.blockUI.js" />
           <fileset dir="${build.dir}" includes="web/common/js/jquery.form.js" />
           <fileset dir="${build.dir}" includes="web/common/js/jquery.ifixpng.js" />
           <fileset dir="${build.dir}" includes="web/common/js/jquery.superfish.js" />
           <fileset dir="${build.dir}" includes="web/common/js/jquery.cluetip.js" />
           <fileset dir="${build.dir}" includes="web/common/js/jquery.scrollTo.js" />
           <fileset dir="${build.dir}" includes="web/common/js/jquery.jqModal.js" />
           <fileset dir="${build.dir}" includes="web/common/js/validation.js" />
           <fileset dir="${build.dir}" includes="web/common/js/jquery.timeentry.js" />
       </concat>
 
       <!-- concatenation of cascading stylesheets -->
       <echo message="Building global cascading stylesheets" />
       <concat destfile="${build.dir}/web/common/css/global.css" force="no">
           <fileset dir="${build.dir}" includes="web/common/css/base.css" />
           <fileset dir="${build.dir}" includes="web/common/css/superfish.css" />
           <fileset dir="${build.dir}" includes="web/common/css/announcements.css" />
           <fileset dir="${build.dir}" includes="web/common/css/myvt.css" />
           <fileset dir="${build.dir}" includes="web/common/css/forms.css" />
           <fileset dir="${build.dir}" includes="web/common/css/cluetip.css" />   
           <fileset dir="${build.dir}" includes="web/common/css/tables.css" />
           <fileset dir="${build.dir}" includes="web/common/css/ui.tabs.css" />
           <fileset dir="${build.dir}" includes="web/common/css/ui.datepicker.css" />
           <fileset dir="${build.dir}" includes="web/common/css/ui.autocomplete.css" />
           <fileset dir="${build.dir}" includes="web/common/css/linkspan.css" />
           <fileset dir="${build.dir}" includes="web/common/css/stepMenu.css" />
           <fileset dir="${build.dir}" includes="web/common/css/print.css" />
           <fileset dir="${build.dir}" includes="web/common/css/youHaveMessages.css" />
       </concat>
 
       <!-- invoke compressor -->
       <yui-compressor warn="false" charset="UTF-8" fromdir="${build.dir}" todir="${build.dir}">
           <include name="web/common/js/global.js" />
           <include name="web/common/css/global.css" />
       </yui-compressor>
 
   </target>
 
   <!--
   * purge-src takes our compressed files, moves them to the base /common dir
   * and deletes the source js and css dirs from the build dir
   -->
   <target name="purge-src" depends="minify">
       <echo message="Purging javascript and stylesheet sources" />
 
       <move file="${build.dir}/web/common/js/global-min.js" tofile="${build.dir}/web/common/global.js"/>
       <move file="${build.dir}/web/common/css/global-min.css" tofile="${build.dir}/web/common/global.css"/>
 
       <delete dir="${build.dir}/web/common/js" />
       <delete dir="${build.dir}/web/common/css" />
 
   </target>

What you see there is essentially four steps.

1. Concatenate all the constituent source files into a global.js and a global.css
2. Compress both of these files, which creates global-min.js and global-min.css (default behavior)
3. Move these files out of the source directories and into the root of the common web directory as global.js and global.css
4. Delete the source directories in our build folder so they don’t get deployed with the web archive

Because certain browsers (IE) break without explicit ordering, we unfortunately can’t just use “*.js” and “*.css” in our concatenation step, but having to explicitly list our components in the build file certainly isn’t the end of the world. The nice thing is that the Ant task will even print out handy statistics on just how much you’ve been able to compress the files down. In our case, we have about 441.8KB of common Javascript and CSS in our source code that, by the time it gets sent to the user, has been minified and/or gzipped to about 89KB.

I’ve written a small WordPress plugin that provides some new template tags that return a post’s tags, categories, author, and date; useful for CSS trickery.

You can view its page here.

This initial release provides the following items:

<?php generate_tag_class(); ?>

This function returns a space-delineated list of the post’s tags, prefixed with ‘tag-’

e.g. tag-politics tag-election-2008

<?php generate_category_class(); ?>

This function returns a space-delinated list of the post’s categories, prefixed with ‘category-’

e.g. category-personal category-random-thoughts

<?php generate_author_class(); ?>

This function returns the author name of a post, prefixed with ‘author-’

e.g. author-Heliologue

<?php generate_date_class(); ?>

This function returns a space-delineated list of the post’s date, prefixed with ‘y’ (year), ‘m’ (month), and ‘d’ (day).

e.g. y2008 m03 d11

Yet, I find myself at home, with a White Russian and the urge to opine.

The Background

In the summer of 2006, my workplace (The University of St. Francis, my alma mater) went live with a portal. For the previous year and half, when I was a student worker, we’d been working desperately to implement Oracle Portal. At a conference that summer, my boss, Tim, heard about uPortal, an open-source J2EE portal. On the ride back from Ohio, we more or less decided to try it on a lark. It’s basic ease of setup let us switch to uPortal and go live in 6 weeks. That’s right, a production-ready portal in 6 weeks.

Much of the work in that time was tying CAS into our LDAP implementation (Novell’s eDirectory), customizing the view (props to Virginia Tech for their excellent Tab-Column customization), and writing some basic portlets to allow quick views into student data: schedule, personal info, billing, &c. We’re a Banner school, so we could basically just reach into our Oracle database and pull the data we needed.

The Cool Bits

Since that time, we’ve poured a tremendous amount of energy into the portal, as it’s become our go-to spot for finding information and getting things done. Actually, we’ve spent very little time on uPortal at all, as it already contains much of the quick-view functionality we want. Much of what we do is a custom extension to the portal that transparently shares session data via CAS.

We have completed our portal rollout using uPortal (running on apache/tomcat), and are integrated with Sungard Banner 7.x for much of the information we pull and display, and we are using Novell E-Directory for our directory.

We used uPortal which proved to be a much more promising and easier to use platform than Oracle portal. Within 6 weeks we had our first production portal deployment. Over the last year we have built and put the following into production:

• Student Schedule and Grades Display (pulled realtime from Banner)
• WebCT Integration/SSO
• Announcements (Targeted coming by end of summer ’07)
• SSO to Novell WebMail, Netstorage, and Banner Self Serve
• Bookstore Integration with Barnes and Noble (Shopping cart of books)
• Financial Aid Portlet/Accept Loans – Display and update banner data
• Tuition Bill Portlet – Pulled in realtime from Banner AR
• Payment of Tuition Bill/Post Directly to Banner AR
• My Profile Portlet (information pulled realtime from Banner)
• GPA/Credit Hours Portlet (Pulled realtime from banner)
• Banner Security Question/Reset Password Functionality
• Expired Password Functionality
• Faculty Schedule/Class Rosters/Email Class, Export to Excel
• Banner Survey Integration
• HR Leave Balances
• Budget Reporting/Financial Activity/View Documents, checks cut, etc
• Banner Requisition Approval
• Web Based University Income/P&L Statement
• Banner Finance Journal Voucher Upload
• PIDM Usage Utility to help identify and resolve duplicate pidms
• EZProxy/Library Databases Integration
• Advancement Constituent Profiles
• Advancement Fundraising Activity Reports
• Advancement Constituent Contacts Data Entry/Reminders
• Financial Aid targeted messages
• GUAMESG
• Residence Life View your Room/Roomates
• Bulletin Boards (phpBB)
• VT Calendar
• Various Web based Reports
• E-Directory Integration/Account Creation
• Early alert and midterm warning submission, that allows the student, advisor, registrar, athletic coaches, and other support staff know when a student is having academic difficulties.
• An online advising center. Advisors can now see all of their advisees, look at who’s registered, view issues with the students account such as registration or medical holds, etc. The goal is so that advisors can also help the students get their issues resolved.
• Our initial stab at targeted announcements is done. We can now target based on the student type, level, or college as currently stored in the Banner ERP, as well as target to only employees or faculty members. The framework is in place to target off of any data element stored in Banner. Now we just need to expand our GUI allowing users to target messages.
• Accounts Receivable Reporting Suite – Our finance office now uses the portal to do various AR reporting tasks, drilling into student details, etc.
• Enrollment/Registration Status Reports – Various members of the university can now easily look at the overall student registration status through the portal.
• A faculty attendance tracking module for faculty to electronically submit the attendance of students in their classes at the beginning of term and at the mid-term point. This helps the registrar and financial aid determine who is actually attending, and replaces an old paper based process.
• On online Student Check-In procedure. Students can now confirm their class schedules, financial aid, and pay their bill through an easy to use “wizard” interface. The system will notify when they need to perform the electronic check in process before the start of the term, and then walks them through the process. This helps to collect payments sooner and determine which students are actually going to show up to class on day 1.
• Our portal now has a targeted messaging facility which looks at business rules and notifies the students of issues or action items related to their student records. For example, if a student has holds on their account the system will tell them, show them the hold, tell them what it prevents them from doing, and who to contact to resolve the hold. For students with incomplete medical records they are notified, and shown which parts of their medical records are incomplete (and for our nursing program, which shots, etc they need to have on file to be able to attend clinicals).
• A co-curricular transcript which pulls from Banner all the clubs, organizations, and sports a student has been a member of during their time at the university, and shows them in a nicely formatted page that they can print.
• A real-time registration status dashboard for administrators, deans, and faculty members. This dashboard now shows the head counts, course registration counts, credit hours, and billing hours generated for registered students, and the number of potential students who are left to register. It breaks the summary counts down in several ways: by college, major, advisor, or level (graduate, undergrad, etc). The users can drill into this report and extract lists of students who still need to get registered, whom to call to see if they need advising help or assistance registering, etc.

As the UI architect for the portal extension, I decided this past summer to standardise on jQuery, and certainly haven’t regretted it. The only bad thing about javascript is that it becomes easy to rely on it for things which should really be controlled server-side. Important validation checks, for instance. Since our ERP system has certain business logic which it enforces on the database level, we usually do two checks for important data: one (javascript) for the user’s sake, and one (servlet) for ours.

It got to the point where we were loading 10 different jQuery javascripts and 2 stylesheets in our header. Most of the javascripts were either packed or uncompressed (if packing broke them), and totaled about 200Kb. Not only was this too much, but the eval() caused a delay for each script. Recently, after one of our rollouts to production, when I got more leeway to play, I completely upgraded our script layout. I’m not going to provide an apples-to-apples comparison table here, since the prior configuration was a hodgepodge, but after minifying and turning on server-side compression for javascripts and stylesheets, I managed to reduce the load from 200Kb in 12 requests to about 50Kb in 5 requests. According to Julien Lecomte, running mod_deflate on a minified (but no obfuscated) javascript yields the lowest file size; regardless of how often that’s true, I like the idea of avoid latency from the eval(). A lot of our users are still on IE6, and they take some pretty big performance hits.

Goodness knows there’s more I could do, but given the nature of our portal (single-image CSS layouts, anyone?), it wouldn’t be a productive use of our time); I have enough crap to do with counting pixels.

jQuery rocks my socks

I might take a moment here to say just how much I love jQuery. For those of you who don’t know, jQuery is a javascript framework which abstracts a lot of functions into a much more easily-written manner. In the past, I’ve sort of been a Copy & Paste javascript programmer, since it’s been easier to use some free script than to write one’s own code. jQuery and it’s vast array (har!) of plugins makes it easy to implement or write new code. For instance, if we want to implement a support for CSS hover effects in IE, all we do is this:

$("input:text,input:password,textarea").focus(function() {
     $(this).addClass("focused");
});
 
$("input:text,input:password,textarea").blur(function() {
     $(this).removeClass("focused");
});

Easy as pie.

Granted, there are a lot of frameworks to choose from. Originally, there was only Prototype; now there’s also jQuery, Dojo, YUI, Mootools, Rico, and any one of a number of others.

The one I wanted to talk about in this post in particular is ExtJS, which was originally an extension of the YUI framework, but which eventually split off into its own project. It recently went 2.0, and boasts some rather impressive demos. I marvel at the Vista-like UI, which, admittedly, is very slick.

But the more I look at ExtJS, and half-heartedly consider its possible deployment within our portal, the less enthused I become. ExtJS’s grid, for instance, doesn’t even function on existing HTML table markup: you mass it an array of data as a javascript variable, and it creates markup on the fly… a lot of markup, in order to create it’s slick Office 2007 interface. While this is good insofar as it manages to completely abstract data from presentation, I’m not sure how much I like the idea, since it (1) relegates users to the script default without heavy customization, and (2) doesn’t allow for any kind of fallback mechanism if the javascript should fail or the user has it disabled. Our table-sorting function, in a case like that, doesn’t at all prevent the table markup and data itself from being rendered.

Work can be fun sometimes.

Blockquotes, by definition, can and should in most cases have a title attribute and, if possible, a cite attribute. The former is the actually name of the quote’s source. The latter is the URI to the quotes location, if it was retrieved online.

For instance:

<blockquote cite="http://heliologue.com" title="A Modest Construct">
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu ligula, tempus vel, dignissim at, molestie ut, leo. Etiam luctus, ipsum sit amet tincidunt malesuada, magna nisi feugiat eros, in tempus libero justo sed dui. Aliquam bibendum pulvinar turpis. Ut iaculis gravida nibh. Quisque elementum ligula vel nibh. Sed leo augue, tempor sed, nonummy in, interdum at, quam. Ut cursus tincidunt felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pharetra vulputate nunc. Cras nec felis ornare augue tempor fermentum. Nullam rutrum malesuada nunc. Aliquam vel purus. Aliquam faucibus malesuada orci. Nulla sit amet nulla sit amet tortor fermentum euismod.
 
</blockquote>

This is all well and good for search engines, but it doesn’t do much for human readers (who are arguably more important, though it depends on who you ask). A human might want to see something like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu ligula, tempus vel, dignissim at, molestie ut, leo. Etiam luctus, ipsum sit amet tincidunt malesuada, magna nisi feugiat eros, in tempus libero justo sed dui. Aliquam bibendum pulvinar turpis. Ut iaculis gravida nibh. Quisque elementum ligula vel nibh. Sed leo augue, tempor sed, nonummy in, interdum at, quam. Ut cursus tincidunt felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pharetra vulputate nunc. Cras nec felis ornare augue tempor fermentum. Nullam rutrum malesuada nunc. Aliquam vel purus. Aliquam faucibus malesuada orci. Nulla sit amet nulla sit amet tortor fermentum euismod.

A Modest Construct

Which I achieved by appending

<cite class="source">
     <a href="http://heliologue.com" title="A Modest Construct">A Modest Construct</a>
</cite>

to the blockquote.

But nobody wants to hard-code a citation into every blockquote, especially when it’s technically correct to attach the information to the semantic element in question (the blockquote, for those of you not following along). So, how to be structurally correct when using blockquotes, while still allowing human readers the benefit of such data?

Well, there are a number of methods. If you’re using a CMS or any kind of dynamically-generated page, you can use the system itself to parse blockquotes for their attributes and reuse that information.

The Old Way

A somewhat simpler and more flexible solution would be Javascript, which isn’t foolproof, but should be good enough for most people. Previously, I used Dunstan’s Blockquotes, which was an excellent solution for a long time.

function extractBlockquoteInfo()
        {
        quotes = document.getElementsByTagName('blockquote');
	for (i = 0; i < quotes.length; i++)
		{
		cite = quotes[i].getAttribute('cite');
		title = quotes[i].getAttribute('title');
		if ((cite) && (cite != ''))
			{
			if ( (cite.match('http://', 'i')) || (cite.match('ftp://', 'i')) || (cite.match('person://', 'i')) )
				{
				newlink = document.createElement('a');
				newlink.setAttribute('href', cite);
				newlink.setAttribute('title', ('Go to ' + cite));
				title = quotes[i].getAttribute('title');
				if ((title) && (title != ''))
					{
					newlink.appendChild(document.createTextNode(title));
					}
				else
					{
					newlink.appendChild(document.createTextNode('Quote source'));
					}
				newdiv = document.createElement('div');
				newdiv.className = 'source';
				newdiv.appendChild(document.createTextNode('\u2014 '));
				newdiv.appendChild(newlink);
				quotes[i].appendChild(newdiv);
				}
			else
				{
				newdiv = document.createElement('div');
				newdiv.className = 'source';
				newdiv.appendChild(document.createTextNode('\u2014 ' + cite));
				quotes[i].appendChild(newdiv);
				}
			}
 
		else if ((title) && (title != ''))
			{
			newdiv = document.createElement('div');
			newdiv.className = 'source';
			newdiv.appendChild(document.createTextNode('\u2014 ' + title));
			quotes[i].appendChild(newdiv);
			}
		}
	}
 
window.onload = function(e) {
extractBlockquoteInfo();
}

The New Way

I ran into conflict issues, however. Also, the script seems overly complicated for what it’s doing. I long ago chose my spot in the jQuery camp, and am currently using it on this blog for Thickbox and a few other miscellaneous things. So I thought: why not get blockquote data using jQuery? Here’s my resulting code (which I’m sure is flawed and crufty, but I put it together in about five minutes; suggestions are welcome).

$(document).ready(function(){
     $("blockquote").each(function(){
          var title = $(this).attr("title");
          var cite = $(this).attr("cite");
 
          if (cite == null && title != null) {
              $(this).append("<cite class='source'>"+title+"</cite>");
          }
 
          else if (cite != null && title == null) {
               $(this).append("<cite class='source'><a href='"+cite+"' title='"+cite+"'>"+cite+"</a></cite>");
          }
 
          else if (cite != null && title != null) {
               $(this).append("<cite class='source'><a href='"+cite+"' title='"+title+"'>"+title+"</a></cite>");
          }
 
          else {
          }
     });
});

Essentially, I’m looking for blockquotes that contains at least one of our particular attributes, and then parsing them for title and cite values. There are four possible outcomes:

1. title but no cite:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu ligula, tempus vel, dignissim at, molestie ut, leo. Etiam luctus, ipsum sit amet tincidunt malesuada, magna nisi feugiat eros, in tempus libero justo sed dui. Aliquam bibendum pulvinar turpis. Ut iaculis gravida nibh. Quisque elementum ligula vel nibh. Sed leo augue, tempor sed, nonummy in, interdum at, quam. Ut cursus tincidunt felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pharetra vulputate nunc. Cras nec felis ornare augue tempor fermentum. Nullam rutrum malesuada nunc. Aliquam vel purus. Aliquam faucibus malesuada orci. Nulla sit amet nulla sit amet tortor fermentum euismod.

2. cite but no title:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu ligula, tempus vel, dignissim at, molestie ut, leo. Etiam luctus, ipsum sit amet tincidunt malesuada, magna nisi feugiat eros, in tempus libero justo sed dui. Aliquam bibendum pulvinar turpis. Ut iaculis gravida nibh. Quisque elementum ligula vel nibh. Sed leo augue, tempor sed, nonummy in, interdum at, quam. Ut cursus tincidunt felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pharetra vulputate nunc. Cras nec felis ornare augue tempor fermentum. Nullam rutrum malesuada nunc. Aliquam vel purus. Aliquam faucibus malesuada orci. Nulla sit amet nulla sit amet tortor fermentum euismod.

3. cite and title:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu ligula, tempus vel, dignissim at, molestie ut, leo. Etiam luctus, ipsum sit amet tincidunt malesuada, magna nisi feugiat eros, in tempus libero justo sed dui. Aliquam bibendum pulvinar turpis. Ut iaculis gravida nibh. Quisque elementum ligula vel nibh. Sed leo augue, tempor sed, nonummy in, interdum at, quam. Ut cursus tincidunt felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pharetra vulputate nunc. Cras nec felis ornare augue tempor fermentum. Nullam rutrum malesuada nunc. Aliquam vel purus. Aliquam faucibus malesuada orci. Nulla sit amet nulla sit amet tortor fermentum euismod.

4. no cite and no title:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer arcu ligula, tempus vel, dignissim at, molestie ut, leo. Etiam luctus, ipsum sit amet tincidunt malesuada, magna nisi feugiat eros, in tempus libero justo sed dui. Aliquam bibendum pulvinar turpis. Ut iaculis gravida nibh. Quisque elementum ligula vel nibh. Sed leo augue, tempor sed, nonummy in, interdum at, quam. Ut cursus tincidunt felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pharetra vulputate nunc. Cras nec felis ornare augue tempor fermentum. Nullam rutrum malesuada nunc. Aliquam vel purus. Aliquam faucibus malesuada orci. Nulla sit amet nulla sit amet tortor fermentum euismod.

I think that the <cite> element is the most semantically correct, but of course you’ll have to change that to fit your needs. I style it like this:

blockquote cite.source {
     text-align: right;
     border-top: 1px dashed #aaa;
     font-size: 0.95em;
     display: block;
     }

And there you go. An excellent Javascript library, a few lines of code (more than necessary even, as I wanted to cover all the possible cases), and you’ve got a flexible solution to blockquote citations.

Boy Scouts in the Los Angeles area will now be able to earn a merit patch for learning about the evils of downloading pirated movies and music. [...]

The movie industry has developed the curriculum.

“Working with the Boy Scouts of Los Angeles, we have a real opportunity to educate a new generation about how movies are made, why they are valuable, and hopefully change attitudes about intellectual property theft,” Dan Glickman, chairman of the Motion Picture Association of America, said Friday.

…. Does this seem just a bit creepy to anyone else, or am I on my own here?

A few problems:

Allowing an industry to develop a curriculum is a recipe for disaster (or should I say “flop”?). I would no more allow the MPAA or RIAA to tell me about copyright than I would allow Exxon to tell me about alternative energy or Microsoft to tell me about “embrace and extend.” Remember, the MPAA’s the same organization that said you aren’t allowed to make backups of the DVDs you buy—if it gets damaged, you simply have to go out and buy another copy. Apparently, this sort of stricture is perfectly OK, but it strikes me as odd, given the Boy Scouts’ fear of homosexuals: apparently, getting fucked in the ass is only all right if it’s a litigious media conglomerate doing the mounting.

Glickman, ever stubbornly flogging the same dead horse, is right when he concludes that the attitude toward intellectual property theft needs to be changed—yes, by consumers, but just as much by the studios and the soulless abysses which represent them. I think people know the value of movies, and that is precisely the problem: certainly, they don’t seem to be worth buying anymore. At least, not when they suck, hard, and are available on digital media that was designed to give consumers the shaft.

The article goes on to that say that prospective badge-earners must also choose from a list of activities which include visiting a movie studio “to see how many people can be harmed by film piracy.” I love this, because I’m quite certain these children will be told that for every movie they download, some humble janitor or assistant to the assistant director will lose their job and return home, Bob Cratchit-like, to tell his starving family that there’ll be no Christmas presents this year—piracy has ruined the movie industry and it tireless, selfless constituents. No one will tell the Boy Scouts, of course, that the people who really care about piracy are executives whose salaries won’t be affected. The truth is that this tack by conglomerates to stem piracy with appeals to pathos is little more than people like Dan Glickman holding a pistol to some lowly worker’s temple and screaming that Dammit, if the piracy doesn’t stop, then Mr. Cratchit here gets it!

Dan Glickman is an asshole. And his merit badge isn’t worthy to wipe my ass with. Fín.

The last time an image of mine was stolen, I was nice about it. Rusty wasn’t (if you’re reading this, Rusty, your screenshot is a 404 error).

Well, after the last time, I wrote an .htaccess file that stopped all hotlinking of images except for sites on this domain, as well as a few select others.

Here it is, excerpted:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?heliologue.com(/)?.*$     [NC]

[snip]

RewriteRule .*\.(gif|jpg|jpeg|bmp|png)$ - [F,NC]

After looking through my logs recently, I found that most referrals from MySpace failed—most were still trying to hotlink HUH.gif. But there was one MySpace page that showed up under successful referrers. I visited the page, and sure enough, there was one of my images, unabashedly leeched.

So, Point 1 is: can anyone tell me why this particular MySpace page was able to leech the image (it was called via CSS, not by an <img> tag)?

Point 2 is: I was not feeling generous this time around, so I Tubgirled the idiot. He changed the background pretty quickly, but not before I snagged some screenshots.

One of the following images (“After”) contains a very graphic photograph that is Not Safe For Work, Not Suitable For Children, and as a matter of fact, not suitable for just about anyone. I’d advise any of you not already familiar with the internet phenomenon known as “Tubgirl” to simply take my word for it and not view the image. Viewing the image means that you forfeit the right to complain about it.

Before | After

Cleveland is a funny place. Like Wisconsin, it’s significantly greener than Illinois, and I find myself surprisingly aflush at the sight of all the verdure, but Cleveland is like a rusted, hulking monolith overgrown by jungle. The juxtaposition is frightening: while lost, we drove along so many leafy parkways lined with large embellished houses, but our destination was inevitably in the sprawl of the city itself, hemmed together with slummy, apartmented streets and the blackened faux-marble of the botanical gardens, the public library, and the enormous Presbyterian church on Euclid Ave. One building along a main drag called Chester St. appeared to have two dark bronze statues of skeleton warriors, as though someone had stitched together twisted detritus from a plane wreck to make this thanatotic duo, their sharp ribs prominent, their wielded swords even moreso.

It rained all three days we were there, in random spurts of thunderstorms. Cleveland’s drainage—at least downtown—isn’t the best, as even a relatively gentle storm left standing pools of water on the roadsides and muddy ponds in the grassy medians as late as the next morning. I’ve already said that Cleveland is organic, but add near-constant construction and rain to the list, and the city itself is a violent storm of confusion, parkways ceding to slums, trees to effaced apartment complexes, prestigious university to vacant, overgrown gas stations.

I realize that I saw but a fraction of the city, but I would expect that the university-dominated section would be a thriving little community of its own. Perhaps things are different during the school year: I saw few college students at all; only middle-aged conference attendees and the occasional gaggle of misguided tourists—why Cleveland?—gaping at the squalor.

A Retrospective on Ben qua Conference Attendee, as Well as a Discussion of Code

But enough sentiment. My own journey to get here, in a plain grey van, speeding down I-480, was just as mixed. I woke at 7:09 this morning and —my understanding being that only my boss and his boss were going to the presentation at 10:30—went back to bed, to be awoken exactly four hours later at 11:09 by the sound of little kids (?) playing soccer on the athletic field next door. I was alone—all four of my companions had gone to the presentation, had even called for me through the door of my sleeping area, but to no apparent avail. The neck-ache I awoke with had nothing on the painful feeling of being such a schlub.

I mentioned last night that the recurring theme of the conference was that Oracle’s portal is utter shit. To that end, I find myself excited not by the opportunity to work with it, my loving ministrations being severely limited by its obstinate nature, but the opportunity to work with Tim, our DBA and resident Java guru, on his separate-but-not webpiece that will tie into the portal. Having seen yesterday’s presentation on Web 2.0 and AJAX, he and I decided that it would be a good idea to integrate it into his webpiece. Since the logic that drives the overhead menu requires database calls, we thought that using AJAX to load content into the specified area would reduce overhead and feel more responsive to the user, broken back-button or no. So, during the afternoon session on Thursday, I found a little AJAX script and made a working prototype with static HTML. Tim came back from his afternoon session with news of OS3Grid, a Javascript-based table system that allows for dynamic reordering, editing, and effects that wouldn’t be possible in IE with pure CSS. The only problem is that they don’t want to work together: the function to render the grid is run on page load, which doesn’t work if you are loading the grid’s host page with AJAX. I hacked up a fix by adding a new line to the AJAX script’s pageload function that reevaluates OS3Grid’s table-rendering function, forcing the grid to be rendered when the page was loaded with AJAX. The only problem is that each grid has a specific line that has to include the name of the parent div that hosts the rendered table, and since we’re guaranteed to have pages with multiple tables, we can’t simple hard code a standard id into the function and let it go. I will need to research other methods of forcing the script to run.

These are both neat Javascript tricks, but the real question is how well we can get them to work with the database. The AJAX function for navigation is entirely client-side: there’s not yet AJAX to submit any forms or grab any data from the database—it merely calls a JSP, which in turns talks to the database. One of the interesting features of OS3Grid, however, is the ability to edit table contents, and I’d like to make it so that an edited table cell submits—via AJAX, of course—back to the the database the changed contents. For that, I’ll need Tim’s help in using AJAX to talk to Java to talk to the database. It’s possible, of course, but my experience with Java is so limited that the slightest problem will sending me running to Google. Still, I think that this has the potential to be a really great interface, and I really like working with Tim because he’s truly excited about what he’s doing, and he asks things of me that push my limits and force me to improve my knowledge set.

I woke up at 5:45am this morning to the screech of my alarm clock, which somehow seemed even more grating than usual, having been one of the few amenities supplied by the otherwise—ahem—austere housing department here (for which see my previous post). Last night, after I’d finished blogging, I realized with some degree of dread that I’d forgotten my toothbrush, having brought indeed everything else required for the care of my teeth except the most basic implement. At midnight in a strange city, I had no recourse but to go to bed feeling somehow fundamentally dirty, and waking up with my teeth feeling mossy. Today, I am told, we will having a shopping spree at Walgreens or Walmart or whatever store we can find to stock up on the essentials that we weren’t provided. Were we in a hotel, there would at least be a vending machine with toothbrushes, but sadly the dorm we are staying at appeared entirely vacant last night except for two malcontents watching the BET Awards in the common room at a volume loud enough to pulverize concrete.

The “free swag” situation improved somewhat when we arrived at the Dively Center: upon registering, one received a blue CampusEAI lanyard upon which was attached a name tag. Ostensibly, everyone is to wear it around his or her neck during the conference, but afterwards, of course, it can be used for pretty much anything. More importantly, our “free gift” was a Belkin 4-in-1 pen, a heavy metal affair with a bright bluish reading light, a laser pointer, a ballpoint pen, and a PDA stylus in one phallic cylinder. It requires four tiny batteries (included), but considering the number of times just today that I’ve accidentally flash the reading light or the laser, I have a sneaking suspicion that it will die within a month and I will have no desire to buy more batteries.

The lobby of the Dively Center was a real sight: wall-to-wall geeks, some of them long-haired misanthropes that look like they spend most of their time in the dark using vi, some of them crisp-collared management types, always greying just slightly at the temple and generally looking affable, and even some women, which is a rarity at technical conferences. I seem, as I suspected, to be the youngest person here. No matter: the first meeting put me in my element.

From 9am to 11:30am, I and a laptop:human ratio >1 were regaled with advice on how to attack the Oracle portal’s styling, either using the built-in style generator (which is, if you have a speck of intelligence, obviously crap), adding extra CSS (which we already do), or use a custom renderer. You see, Oracle’s portal allows one to customize where the content area goes, which means that I can place the portal contents within a standards-compliant template. The bad news is that the output created by the built-in code escape #content# is tables nested inside of tables, nested inside of tables. It’s enough to make you sick, and the end-user really has no control over what is outputted. The instructor assured us that later in the afternoon, he would go over customizing the renderer that outputted said tables.

Another attendee, who happened to be from a British university, and thus immeasurably fun to hear speak, complained about Oracle Portal’s total lack of compatibility with anything resembling a standard. “Good,” I thought. “Maybe I’ll get some answers. And maybe this guy will show up again and I’ll get to hear his accent more.”

Lunch was buffet-style, and was actually quite good. The chef—a trim black man with a rakishly-askew hat—announced the courses and the soups of the day, and I got lasagna and a turkey sandwich and pasta salad and cream of chicken soup and was quite stuffed. I only had to stop eating once, when trouble back at the university forced me to whip out my laptop and troubleshoot.

The afternoon session was a short one, only lasting until 2pm, and was actually no help at all. The instructor described editing the various files used for rendering, but it occurred to me in medias res that what I want to change in the portal—that is, changing the tables-in-tables-in-tables structure into a much simpler one based on flexible divs, ideally AJAXified ones—isn’t really possibly without a lot of work, because Oracle’s interface for adding portlets to a user’s page involves essentially a table-splitting mechanism, and I gather from the code that trying to change the way it’s outputting might break that. At any rate, it’s something to look into.

So here I am, drinking tea and eating an apple, typing on my laptop and its persnickity wireless network card. I relish the thought of getting a toothbrush and possibly beer. I sort of relish the thought of sitting down and reading Rousseau’s The Social Contract. I don’t know how in the world we’re going to stretch that out for the rest of the day.

The default blockquote style in K2 is a simple indent and a left-positioned PNG openquote. Not only is the quote graphic kind of ugly (a not-very-stylized grey), but it seems incomplete in that it’s only an openquote, and doesn’t include a closequote. Because it’s set as a background image, of course, we can’t have two (one for open, one for closed).

In my old theme, I solved this with a messy hack wherein I searched and replaced all blockquotes with a blockquote and a nested div. I set the blockquote to have the openquote in the top left and the div to display the closequote in the bottom right. Semantically bad, but it worked.

For K2, though, I wanted less cruft, but I wanted to accomplish the same basic thing. Enter CSS and Design Meme’s Curly Quotes idea. It uses :before and :after pseudo-classes to add areas before and after the blockquote. Then it uses the content attribute to add in open-quote and close-quote. It’s an elegant solution, but it has two problems. One: it’s not cross-browser (IE doesn’t support pseudo-classes). Two: even among CSS-compliant browsers, the handling of the open-quote and close-quote varies. Obviously, I want the quotes to appear as “” and not "". However, only Firefox 1.5 did that: Opera 8.52, Safari 1.3, Firefox =< 1.0.7 and others all displayed ".

So, I changed

content: open-quote | close-quote

to

content: """ | """

Still no luck. Only Firefox 1.5 would display them correctly. The others just gave me marks that looked more like 11s than stylized quotes. So, I went back to my old theme, grabbed the quote images, resized them to 50px and adapted the CSS to use images instead of content. Here’s the result:

blockquote {
display: block;
padding: 0 60px 0 60px;
width: 350px;
border: 1px solid #c6c9ff;
background-color: #f0f0ff;
margin-left: auto;
margin-right: auto;
}
 
blockquote:before, blockquote:after {
color: #616d9f;
display: block;
font-size: 900%;
width: 50px;
font-family:  'Georgia', 'Times New Roman', serif;
}
 
blockquote:before {
content: "";
background-image: url(images/quote1.png);
background-repeat: no-repeat;
background-position: left top;
height: 0px;
margin-left: -0.55em;
padding-top: 60px;
margin-bottom: -50px;
}
 
blockquote:after {
content: "";
background-image: url(images/quote2.png);
background-repeat: no-repeat;
background-position: right bottom;
height: 50px;
margin-top: -50px;   
margin-left: 360px;
padding-bottom: 0px;
margin-bottom: 0px;
}
 
blockquote cite {
display: block;
text-align: right;
border-top: 1px dashed #69c;
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 5px;
}

The rendering is pretty good—except for IE6, which doesn’t display the images at all, but degrades pretty gracefully—but I can’t for the life of me figure out why Opera pushes the open-quote so far to the right (see below). Anyone have any ideas? I was able to fix it. For some reason, I overlooked the fact that the original curly quotes designer had used em width only for the left margin on the blockquote:before declaration. When I noticed that Opera seems to handle em a bit differently than its peers, it clicked.

Safari 1.3.2 [OS X 10.3]

Safari 2.0.3 [iCapture]

Konqueror 3.4.2 [SuSe 10]

Firefox 1.0.7 [SuSe 10]

Firefox 1.5.0.1 [Windows XP SP2]

Opera 8.5.2 [Windows XP SP2]

Internet Explorer 6.0 [Windows XP SP2]