Over a decade ago, when I started in my current job, I started out by building a portal page for the organization, with easy links to useful resources and applications. Today, it has grown to a full content management system with commenting, a file store, a notifications system, and a trade sheet. It has also gone through three major revisions as I moved from straight HTML, to a simple framework, to a complex framework, to a simple framework of my own devising. Maybe I’ll blog about my framework someday.

In an effort to beautify my CMS, I decided to put icons next to the filenames for knows types of files (and a generic one for unknown types).

I did this via this piece of jQuery:

$(‘.file[href$=”.jpg”]’).prepend(‘<img src=”images/icons/jpg.png” border=”0″ /> ‘).removeClass(‘unknown’);

For people who can read jQuery, this is pretty simple stuff, but I’ll walk through it. The $(‘.file[href$=”.jpg”]) tells jQuery that what follows will be applied to all elements with the class “file” and an href attribute ending in “.jpg”. This would find elements like the following:

<a href=”documents/image001.jpg” class=”file unknown”>This is image 1</a>

The method call .prepend(‘<img src=”images/icons/jpg.png” border=”0″ /> ‘) adds the call to the image of the icon, changing the element to this:

<a href=”documents/image001.jpg” class=”file unknown”><img src=”images/icons/jpg.png” border=”0″ /> This is image 1</a>

Finally, the .removeClass(‘unknown’) removes the “unknown” class. When I get done will all the “known” file types, I’ll apply a generic image to items with that class.

A little more complicated trick.

Next, I wanted an easy image preview that didn’t require me to create thumbnails on the server. Originally, I tried an image preview jQuery plugin which I didn’t like, but then I remembered I was already using the clueTip plugin. I wondered if there was a simple way to use clueTip as my image preview.

I came up with this script:

$(‘.file[href$=”.jpg”]’).each(function() {

$(this).attr(‘title’,’image preview|<img src=”‘ + $(this).attr(‘href’) +'” width=”200″>’).cluetip({splitTitle: ‘|’,width:’220′});

});

This uses the same selector as above, but instead of chaining all the methods,  I used the each() method to pass each object to a function. I did this so I could refer to each object matching the selector as “this“. There might be a way to do this manipulation without “this”, but “this” was the way I did it.

The rest is pretty easy. I put this string in the “title” attribute of the href:

image preview|<img src=”documents/image001.jpg” width=”200″>’

Then I call clueTip with teh splitTitle option, which tells it to take the title and use “|” as a delimiter between its title and content. The result looks like this:

All-in-all. I think this is a much more engaging interface than a list of text links. One weakness of the preview, however is the lack of a thumbnail, so the previews will load slowly. Of course, if I had thumbnails, I probably wouldn’t have bothered doing it this way.

Currently, at work, I’m writing a knowledge base and ticket system. If you’re not familiar, a ticket system is a way to ask for assistance from your IT department, or a way for them to talk to each other.  Why am I doing this, when there are several commercial products available? Because my boss would rather pay my paycheck than give the money to a vendor. I think this is a fine plan.

So, in my knowledge base, which is basically a speed bump on the user’s way to writing a ticket, I wanted to do some simple rich formatting, bold, italics, bullet lists, and hyperlinks. However, the other employees in my tiny IT department are not as familiar with HTML as I am. So, I want to use some kind of intermediary plugin to help them write it.

The first solution I looked at was Markdown. Markdown is a simplified syntax used in site like the Reddit and Stack Exchange for rich formatting. If you are at all into computers and don’t know about Stack Exchange, you should take a look. Markdown looks kind of like this:

**bold text ** _emphasis_  [html link (url)]

Markdown might not be the easiest syntax in the world, but if you goof it up, you don’t have broken HTML in the middle of your page. For this application, I’d probably use a jQuery Markdown interpreter and keep the Markdown in the database.

The other solution I looked at was, and I have a feeling you’ve already guessed, WYSIWYG, or What You See Is What You get. WYSIWYG editors have a high comfort level for users, as they can literally see what the page will look like. However, that doesn’t always work so well. WYSIWYG interfaces have to deal with anything the user throws at them, so if a user plays around with the formatting, you can easily get some weird, leftover markup hiding in the background. Still, some of these WYSIWYG editors do very nice things, I’m nearly happy with TinyMCE, the editor used in WordPress. It looks like this:

In the end, I think I’m going to move ahead with Markdown. It might mean a little more learning curve for the staff developing the knowledge base, but I think will ultimately be the better user experience for the people using the knowledge base. Also, having used some WYSIWYG editors in the past, I think I want to try something different.

I was reading a report today that claimed the average age of a social network user was 40 years old. Now, I knew there were lots of old women on Facebook sharing pictures of their grandkids, but I had no idea that the average age was that high. When you take out sites like LinkedIn, the number doesn’t skew downward. The average Facebook and Twitter user is somewhere between 38 and 39 years old.

Now,I admit I’ve dismissed Social Media on several occasions as being a haven for kids, but it turns out I was totally wrong. In my defense, I’m a bit anti-social anyway. Seriously, I didn’t get into computers to be more social. Still, today there are are even social sites for anti-socials, like 4chan–No, I know what you’re thinking, but if there is any goodness in your heart, don’t check them out.

I guess the moral of this datum is that you might not be able to teach an old dog new tricks, but you can teach him to send a friend request.