Archive for the ‘web’ Category

Keep Your Project Files in the WAR

July 13, 2010

Have you ever created a project and had someone say (maybe that person was yourself) “we better put that file in an external place so I can be changed at runtime just in case”? Chances are if you did and followed through on it without a specific requirement for it then I would be willing to bet you ended up never changing the file at runtime (presuming you have a relatively strict change process at your shop). I have put myself in the same situation many times creating overly complex software which involved many random file system structures external to the central package (in JEE the WAR file) because of the “in case we need it” rationale. I want to convince people that we should stop unless its required.

When you start creating file system dependencies or other dependencies on your code outside the package you are basically trading increased complexity for flexibility. In most cases I have seen this trade off made (outside of requirements) because people are trying to anticipate issues with the code but it actually just heightens the probability for issues in the future because of the increased complexity. It’s not that you won’t code it right the first time but in the future it can and probably will cause confusion and problems with new developers without a lot of extra work. The extra work being creating hooks in the build process, handling potential environment differences, and deployment issues beyond the initial build.

In the end if you have the belief you can code it write in the first place then just code the simplest solution right, don’t over shot the mark. Unless you have a compelling need avoid creating external dependencies on your application.


WYSIWYG Needs Help

April 3, 2010

WYSIWYG editors (what you see is what you get) have always bothered me a little bit because what you see isn’t always what you get. Because you’re not seeing the content within the context of you entire page theme (in most cases), you could see differences in line wrapping due to page width, styling, and other minor issues. The biggest issue though is that you simply don’t see how your content looks with the rest of the page content.

I have found a pattern to fit this though! I’ll call it the “active preview” pattern in honor of the WordPress plugin I just created with this pattern. Basically you enable a preview window to be opened up and hook it up to receive updates from the WYSIWYG editor (or just text area). That way you can view your changes as you make them without having to hit the preview button each time you make a change and want to see if it fits. In its simplest form it would just be pure javascript (which I’ll show below). But if you needed to pass the text through some back-end processing first to do something like render some business specific tagging or something else you could expand this to some Comet work (maybe you could pull it off with just plain old AJAX though).

Here is how it would look roughly in javascript using jQuery and a tinyMCE WYSIWYG editor

//Hook into your preview button or link's onclick.
var activelink = jQuery('#yourpreivewbuttonorlinkselector'); (e) {
//Open up the window but keep a reference in the windows DOM.
window.communicator =,'activepreview','menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes');
//We need to hook into onKeyUp to catch key strokes.
//If your not using tinyMCE change this to hook into the input in question.
tinyMCE.activeEditor.onKeyUp.add(function (ed, l) {
var jcommunicator = jQuery(window.communicator.document);
var post = jcommunicator.find('selector to get the content area changing');
//Update the content area on the preview page with the data entered into the editor.
return false;

This pattern works pretty well hopefully you can see how this would change if you weren’t using tinyMCE.

There are two scenarios where this isn’t going to work (at least without some more work)…

  • When content has to be sent through some processing before being displayed on the page.  With some more work on the server side you could work through this issue though.
  • When you cannot reliably identify the area on the rendered page that is being changed.

In the right situation this solution provides a true WYSIWYG experience for users.

First Impressions, Google Wave

March 29, 2010

About two weeks ago I was excited to get a Google Wave preview account and wanted to give some thoughts on what’s good/bad etc. In case you haven’t heard of what Wave is all about take a look here. In a couple words though basically they are rethinking email now that we have all became such different users of the internet.

First off the good!

  • Wave Threads – Basically a ‘wave’ is analogous to an email but can do much more with a ‘wave’. They did a great job and have fixed near all issues with communicating via modern day email. You start it and address it to several users put an initial message attachment or even more. At this point nothing more than a normal email but where it leaves email in the dust is when people respond to your message. With a ‘wave’ you get a thread which allows you to inline reply, reply privately to just a single person, reply the sequence of replies, and again lots more. With a ‘wave’ you don’t have this long list of replies to topics in previous emails separated by email meta data which sometimes can make email’s almost un-followable.
  • Extensions – Wave provides interesting ability to leverage special in message extras such as ‘Yes/No/Maybe’ polling. This provides new abilities to exchange ideas like outlining a area on a map your interested in moving to via using the Google Maps extension. Because its pure now it seems like a great way to allow people to extend ‘wave’ quickly however I could see it turning into a new way to hack a computer.

The Bad

  • It’s slows down everything! Full disclosure on this one. I do most my computing on a ebook which isn’t the beefiest machine in the world but COME ON! If I run it with Chrome it can have a noticeable effect on my system. I do notice on other machines the effect isn’t bad (mainly multi core processors), however I hope its more about being a ‘preview’ still and not ready for prime time. From the presentations on wave I know they use GWT (Google Web Toolkit) which is infamous for creating more javascript then you thought was necessary, not sure if thats a function of that or what.
  • No integration with legacy email (yet). I would just think that the first thing out of the gate if you were serious about doing something made to be a peer to email and potentially a replacement would be to provide legacy email interaction functionality. Maybe though they don’t intend on integrating with email at all, I would guess not though. I know I’m probably just too early on this but its difficult to get a feel for how this would work out in real life with other people working on real email. I’m sure that email won’t just go away and the questions I have would be does one person using email with it ruin it or what?

From the quick look I have been able to do so far its a great idea and well executed overall so far. The big issue is performance to me and understanding how it fits in with current day email. All which are fixable. Keep an eye on Google Wave I think it has a way to go but could change how we communicate online.

Trading Clicks for Keystrokes

March 22, 2010

There is a saying out there which goes something like ‘Reducing the amount of clicks to do an action is good’. I know that’s a gross paraphrase and I’m sure you could find exceptions to the rule, but generally I prescribe to this idea of reducing clicks. In many cases though there is only so much click reduction you can do. An alternative to think about though when you think you have reached your limit on reducing clicks is to explorer some non-standard browser functionality with hooking into keystroke events.

Providing short cuts to search functionality, help functionality, or maybe an ‘alt+tab’ type functionality to allow the user to shift through the previously visited pages, are all interesting ways to integrate keystroke events into a webapp. In then end most of the integrations of the keystrokes will GREATLY very from application to application. So I’ll show you a quick sample of hooking in with jQuery and then let your mind run free.

Here is an example of listening for a user who hits ‘Ctrl’ and ‘F’ at the same time (or in sequence) using jQuery. I wanted to make sure to provide something to used a two key combination because you probably don’t want a user to accidentally type ‘F’ and cause an action or interface to popup.

<script src=”; type=”text/javascript”/>
var wasControlPressed = false;
$(window).keydown(function (event) {
if(event.keyCode == 17) {
wasControlPressed = true;
} else {
if(event.keyCode == 70 && wasControlPressed) {
//Allow this path if ctrl was pressed.
alert(‘This sequence was met’);
} else {
//Reset because the sequence wasn’t met.
wasControlPressed = false;

I only tested this in Chrome and Firefox. I presume jQuery will take care of IE as well. Entirely probable that you’ll need to worry about ‘charCode’ there instead of ‘keyCode’ if jQuery doesn’t take care of it for you.  Here is a good site in case you need details on that

Hello world!

March 20, 2010

Welcome! I’m sure most people would delete the default ‘Hello World’ WordPress post but the title fits too well for this blog so I made sure to keep it around.

This is my blog ‘The Heap Dump’ where I’ll be providing highlights about Software development, web development, and system admin stuff which I encounter daily.

The ‘I’ here is Chris Upton. I’m a IT Consultant who has worked in Software Development for years. Right now I focus specifically on web related software, so don’t be surprised to see that theme throughout.

I’ll leave you with a comical view of web tech, check out one of my favorite Strong Bad email’s from a long time ago -> Check it out