There’s not much in the way of documentation around that aspect of it.

As it turns out, there’s a good reason for that – clustering and session replication with Guice are mind-numbingly simple. In fact, if you’re doing session replication / fail-over, you probably already have it working.

This is because, @SessionScoped objects in Guice are stored in HttpSession, and with consistent internal keys.

That might be obvious to some people, but it wasn’t to me. I thought that Guice used… well… MAGIC or something to keep track of objects in session scope.

Actually, delving into the Guice internals, here’s the “magical” code -

  public static final Scope SESSION = new Scope() {
    public  Provider scope(Key key, final Provider creator) {
      final String name = key.toString();
      return new Provider() {
        public T get() {
          HttpSession session = GuiceFilter.getRequest().getSession();
          synchronized (session) {
            Object obj = session.getAttribute(name);
            if (NullObject.INSTANCE == obj) {
              return null;
            }
            @SuppressWarnings("unchecked")
            T t = (T) obj;
            if (t == null) {
              t = creator.get();
              session.setAttribute(name, (t != null) ? t : NullObject.INSTANCE);
            }
            return t;
          }
        }
        public String toString() {
          return String.format("%s[%s]", creator, SESSION);
        }
      };
    }

So the GuiceFilter servlet filter is actually what provides the magic for this functionality. The actual objects are stored in the HttpSession as attributes.

So in order to support session replication you just need to make sure that your session scoped objects are Serializable, and everything is good. Normal HttpSession replication across your cluster will mean everything works as expected.

Of course, what if you have non-serializable dependencies?

Well they can be @Inject’ed into a static member variable to get around that, though I’d suggest a better solution would be to refactor the code such that the data (Serializable) component is kept in session scope, but the functional (non-serializable) part is split out into a @Singleton service class.

Related posts:

1. AOP, Annotation-based caching solution for Guice projects…
2. The 5 Minute Guice Primer
3. 5 Minute Guide to Clustering – Java Web Apps in Tomcat

I don’t like Windows any more than the next guy when it comes to using it as a Server OS, but sometimes you’ve got no choice – maybe you work in an environment where Windows Server is the only option. *sigh*

Memcached is not something that you would generally install on Windows, (not for production anyhow), but it is possible to have it running happily as a native Windows service.

Here’s how -

1. Download either the 32-bit or 64-bit Windows builds of Memcached from NorthScale
2. Unzip the memcached build into a server folder, say “C:\memcached”
3. Run memcached.exe and ensure it starts. You should get a blank console window. Ctrl+C will close it, assuming all is well.
4. To set it up as a native service we will download the Windows Server 2003 Resource Kit
5. Install the Windows Resource Kit.
   For clarity I’ll refer to the install location as “C:\Program Files\Windows Resource Kits\Tools”, in reality it may be different. Substitute your install location as needed.
6. Open a command prompt and change to your resource kit folder e.g. C:\Program Files\Windows Resource Kits\Tools
7. At the prompt:

   instsrv Memcached "C:\Program Files\Windows Resource Kits\Tools\SRVANY.EXE"

8. Open Notepad and paste the following into it -

   Windows Registry Editor Version 5.00
   
   [HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\services\Memcached\Parameters]
   "Application"="c:\\memcached\\memcached.exe"
   "AppParameters"="-m 1024"

   Adjust the path as necessary. You can add (or remove) memcached command line options with the “AppParameters” option.

   The “-m 1024″ creates 1024MB (1 GB) memcache. You can get a list of other options with “memcached -h” or on memcached.org

9. Save the file as “c:\memcached\configservice.reg”
   
10. Double click the file in Windows Explorer and merge the settings into the Registry.
    
11. Start the service, e.g. “net start Memcached” at the command prompt
12. You’re done!

Also, there is an alternative option – you can use the Java based clone of memcached, (the intuitively/unimaginatively) named jmemcached.

This can be used in conjunction with Java Service Wrapper to create Java-based Windows service which operates like the native memcached.

Related posts:

1. 1 Minute Guide – Installing Redmine on Windows
2. 5 Minute Guide to Clustering – Java Web Apps in Tomcat

I’d never looked much into how it worked, until I wanted to know where these files were located.

The answer as it turns out makes a lot of sense – here’s the method that does the work in the DiskPageStore.java -

 private static File getDefaultFileStoreFolder()
    {
        final File dir = (File)((WebApplication)Application.get()).getServletContext()
            .getAttribute("javax.servlet.context.tempdir");
        if (dir != null)
        {
            return dir;
        }
        else
        {
            try
            {
                return File.createTempFile("file-prefix", null).getParentFile();
            }
            catch (IOException e)
            {
                throw new WicketRuntimeException(e);
            }
        }
    }

So by default it tries to use the servlet container’s local context’s temporary location, in a Wicket folder underneath. If that fails it attempts to grab the system’s temporary folder.

For Apache Tomcat, that means a folder under your webapps context in apache-tomcat/work/Catalina/… e.g.

Related posts:

1. Announcing – visural-wicket
2. Clustering Guice Java Web Applications
3. LessCSS available in Java and Wicket – less.js

I’ve been taking a break from posting for the last couple of weeks. I was starting to get a bit run down, and feel like burn out was about to set in. The kind of blog posts I do take quite a bit of time, both in terms of the technical background work and the time to write and proof read the posts. Balancing that with work, plus personal projects, family life something had to take a break, and it’s not going to be work or family life

Anyhow, I’m back with another 5 minute guide. This time, how to set up clustering with Apache Web Server and Apache Tomcat.

For the purposes of the rest of this article, when I say “Apache” I mean the web server, and when I say “Tomcat” I mean Tomcat.

There are pretty much two ways to set up basic clustering, which use two different Apache modules. The architecture for both, is the same. Apache sits in front of the Tomcat nodes and acts as a load balancer.

Traffic is passed between Apache and Tomcat(s) using the binary AJP 1.3 protocol. The two modules are mod_jk and mod_proxy.

mod_jk stands for “jakarta” the original project under which Tomcat was developed. It is the older way of setting this up, but still has some advantages.

mod_proxy is a newer and more generic way of setting this up. The rest of this guide will focus on mod_proxy, since it ships “out of the box” with newer versions of Apache.

You should be able to follow this guide by downloading Apache and Tomcat default distributions and following the steps. No funny business required.

Clustering Background

You can cluster at the request or session level. Request level means that each request may go to a different node – this is the ideal since the traffic would be balanced across all nodes, and if a node goes down, the user has no idea. Unfortunately this requires session replication between all nodes, not just of HttpSession, but ANY session state. For the purposes of this article I’m going to describe Session level clustering, since it is simpler to set up, and works regardless of the dynamics of your application.
…….  After all we only have 5 minutes!

Session level clustering means if your application is one that requires a login or other forms of session-state, and one or more your Tomcat nodes goes down, on their next request, the user will be asked to log in again, since they will hit a different node which does not have any stored session data for the user.

This is still an improvement on a non-clustered environment where, if your node goes down, you have no application at all!

And we still get the benefits of load balancing across nodes, which allows us to scale our application out horizontally across many machines.

Anyhow without further ado, let’s get into the how-to.

Setting Up The Nodes

In most situations you would be deploying the nodes on physically separate machines, but in this example we will set them up on a single machine, but on different ports. This allows us to easily test this configuration.

Nothing much changes for the physically separate set up – just the Hostnames of the nodes as you would expect.

Oh and I’m working on Windows – but aside from the installation of Apache and Tomcat nothing is different between platforms since the configuration files are standard on all platforms.

1. Download Tomcat .ZIP distribution, e.g.
   

2. We’ll use a folder to install all this stuff in. Let’s say it’s “C:\cluster” for the purposes of the article.
3. Unzip the Tomcat distro twice, into two folders -
   C:\cluster\tomcat-node-1
   C:\cluster\tomcat-node-2
   
4. Start up each of the nodes, using the bin/startup.bat / bin/startup.sh scripts. Ensure they start. If they don’t you may need to point Tomcat to the JDK installation on your machine.
5. Open up the server.xml configuration on
   c:\cluster\tomcat-node-1\conf\server.xml
   
6. There are two places we need to (potentially) configure -
   
   The first line is the connector for the AJP protocol. The “port” attribute is the important part here. We will leave this one as is, but for our second (or subsequent) Tomcat nodes, we will need to change it to a different value.

   The second part is the “engine” element. The “jvmRoute” attribute has to be added – this configures the name of this node in the cluster. The “jvmRoute” must be unique across all your nodes. For our purposes we will use “node1″ and “node2″ for our two node cluster.

7. This step is optional, but for production configs, you may want to remove the HTTP connector for Tomcat – that’s one less port to secure, and you don’t need it for the cluster to operate. Comment out the following lines of the server.xml -
   

8. Now repeat this for C:\cluster\tomcat-node-2\conf\server.xml
   Change the jvmRoute to “node2″ and the AJP connector port to “8019″.

We’re done with Tomcat. Start each node up, and ensure it still works.

Test It Out

With your Apache server running you should be able to go to http://localhost/examples

You should get a 503 error page as per below -

This is because both Tomcat nodes are down.

Start up node1 (c:\cluster\tomcat-node-1\bin\startup) and reload http://localhost/examples

You should see the examples application from the default Tomcat installation -

Shut down node1, and then start up node2. Repeat the test. You should see the same page as above. We have transparently moved from node1 to node2 since node1 went down.

Start both nodes up and your cluster is now working.

You’re done!

Related posts:

1. Clustering Guice Java Web Applications
2. 1 second guide – enabling gzip compression in Apache Tomcat
3. Where Does Wicket Store It’s DiskPageStore Files?

It’s a new addition to the visural-common Apache 2.0 licensed project.

Apply this filter in your Java webapp to get -

• Automatic CSS DataURI image inlining for supported browsers
• Automatic CSS MHTML image inlining for supported IE browsers
• LessCSS compilation for .less files
• Automatic YUI compression of .css & .js resources
• Optional: DataURI inlining of <img> tags in HTML responses

So as you can see, the primary purpose of this filter is web app resource optimization.

DataURIs and MHTML?

One of the most effective ways of improving website performance is to reduce the number of HTTP requests required for the page to fully load.

Typically you’ll have a bunch of small icons used for buttons, panels, links etc. in your CSS, as well as small background graphics here and there. These all add us to a significant number of HTTP requests, each one for only a couple of kilobytes of data.

“CSS Sprites” have often been used as a way of overcoming this issue, however two newer techniques (data URIs and MHTML)  are starting to become a more common way to address the problem.

The idea of data URIs and MHTML are the same – inline the image data into the actual CSS (or HTML) as base64-encoded text.

Data URIs are the preferred way of doing this, however they are not supported in older browsers, specifically IE6 and IE7. Also, IE7 on Windows Vista has problems, and I’ve talked about this in more detail recently. MHTML can be used reliably in IE6/7 on Windows XP, and so the filter will apply it for those clients.

Applying the Filter

I’ll cut right to the chase – here’s how you can apply this to your Java web-application in two simple steps:

1. Add visural-common to your projects set of libraries, or adding it as a dependency (Maven). You will also need to add the YUI Jar to your project to use CSS / JS compression.
2. Add com.visural.common.web.transform.ResourceTransformFilter to your your web.xml as a standard servlet filter, matched to the URLs of your resource file(s)

For example you might add the following XML your web.xml:

    <filter>
        <filter-name>ResourceTransformFilter</filter-name>
        <filter-class>com.visural.common.web.transform.ResourceTransformFilter</filter-class>
    </filter>
...
    <filter-mapping>
        <filter-name>ResourceTransformFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

And you’re done.

Default Configuation

The default configuration works as follows -

• Supported features will be detected by using visural-common’s built in WebClient detector (based on User-Agent)
• Resource URLs ending in .less will be compiled through the LessCSS compiler
• Resources ending in .less or .css will have DataURIs or MHTML applied, but only if the client supports them, otherwise the original image references will be left untouched.
  By default, only images < 50kb in size will be inlined, any larger images will be left as url(..) references. This is configurable.
• Resources ending in .less or .css will be compressed through the Yahoo YUI CSS Compressor
• Resources ending in .js will be compressed through the Yahoo YUI Javascript Compressor

Transformed responses will be automatically cached, so any additional overhead to generate these responses will be a one-time only cost. Note that any response headers you set will also be cached, and the filter does not affect the detection and dynamic behaviour based on the client browser/OS.

Custom Configuation

You can customise the behaviour of the filter by extending the filter’s class com.visural.common.web.transform.ResourceTransformFilter and overriding the protected “over-ride points” to change the classes behaviour.

Use the source as the starting point.

Optional .html DataURI Conversion

The default configuration does not do auto-conversion of HTML <img> tags to DataURI’s.

The reason for this is, that it is not always possible to reliably detect HTML responses, without a performance cost, and additionally, the CPU, memory and bandwidth overhead to doing this can be undersirable.

Unlike .CSS files, HTML responses are typically dynamic and can’t be cached. Additionally, images in the response may be from external servers, and may be larger than the types of image typically referenced from CSS.

For this reason, you will need to evaluate your circumstances to determine if enabling HTML inlining is a good idea in your application.

If you do want to enable it, you could do so like in the following example -

import com.visural.common.web.client.WebClient;
import java.util.Arrays;
import java.util.List;
import javax.servlet.http.HttpServletRequest;

public class MyResourceTransformFilter extends com.visural.common.web.transform.ResourceTransformFilter {
    @Override
    protected List getTransforms(HttpServletRequest req, WebClient client) {
        String url = req.getRequestURI();
        String last = url.substring(url.lastIndexOf('/'));
        if (last.contains(".")) {
            return super.getTransforms(req, client);
        } else if (client.supportsDataUris()) {
            return Arrays.asList(Transform.HTML_DATAURI);
        } else {
            return null;
        }
    }
}

There are several other override points, included in the filter, so consult the source or drop me an email if you’d like to customise further.

Summary

So with this one simple addition we get framework-agnostic image inlining, compilation and compression which responds intelligently to the user’s choice of browser.

This has been live on onmydoorstep.com.au for a week or two is working out well thus far.

Great, I don’t use servlet filters!

There is also a command-line version of the DataURI and MHTML converters which you can apply to non-JVM based projects as part of a build-script or manual process.

If you’ve downloaded the commandline version you can run it by:

  java -cp visural-common.jar com.visural.common.web.css.CSSDataUri [input-file.css] [output-file.css]

This will convert the [input-file.css] and inline the image data into the output. Note that the relative URLs are assumed to be resolvable relative the location of the CSS on disk. Mostly this will work just fine, and it will even attempt to resolve http:// urls.

The one thing that won’t work with the command line version is root-relative urls, e.g. url(“/folder/myimage.png”), since there’s no way to know what the root is, in the context of the disk. I could fix this is a future version by adding another command line option, so if you need it, let me know.

Similarly, you can run the MHTML converter from the command-line as so:

  java -cp visural-common.jar com.visural.common.web.css.CSSMHTML [input-file.css] [output-file.css] [http://serverurl/for/css]

For this one, you need to supply the additional server URL for the CSS file. This is because MHTML file references need the full URL to the defining CSS file (relative URLs don’t work).

This is one of the reasons that I chose to implement the solution as a filter.

Anyhow, given the simplicity of this filter, there’s pretty much no reason not to use this in your Java web app and improve those YSlow / PageSpeed results and rating without very little effort

Related posts:

1. Automatic Javascript and CSS Compression For Java Webapps
2. MHTML Browser Compatibility – CSS Inlining
3. 301 Redirects Made Easy In Java

This post is a pretty good jumping off point if you need to get up to speed.

It appears in the context of the for-pay Thesis theme which is the primary issue in the discussion, there are a few points worth pointing out -

• The issue of whether it’s a derivative work is moot since it has been clearly noted that it contains code from the original WordPress base theme, ergo even by the legal definition (as compared with the GPL’s), it is a derivative work.
• The GPL only covers code that is executed. This means that the Thesis developer is obligated to only distribute the .php source under the GPL, while the other theme assets may be proprietary.

So with that in mind, the real question is – does the GPL apply to a non derivative work (in the legal, copyright sense) that is executed in the same process as the core GPL WordPress code?

Yes it does.

At least, the GPL says it does – it’s yet to be tested in a meaningful way. So whether that’s a legally enforceable statement, remains to be seen, but the license is pretty clear on that matter.

My feelings about this issue in general are -

• The key issue here is that WordPress is mostly an end-user product, and a very popular one. This means there are a lot of people in the WordPress community with no understanding of GPL or licensing in general. The GPL enforces Freedom, and that’s with a capital ‘F’ – but the community around WordPress isn’t necessarily unanimously aware of this goal.
  
  Actually, that’s precisely why Stallman wrote the GPL as such. To ensure that his vision of community (and its efforts) were maintained despite any community that latched on to it down the road.
  
  
• People have a choice when they choose GPL licensed code.
  
  When you pick something that’s GPL’ed, you accept that other people have put a lot of effort into building it. You reciprocate that effort by providing any effort that you choose to add, to others. It’s a one good turn obliges another type philosophy.
  
  You may disagree with it – it goes too far!
  
  Well that’s no problem – just don’t use or modify GPL’ed software. There are plenty of other more permissive licenses.

I actually think this debate is a good thing for the WordPress’s community. A bunch of people who previously didn’t care about licensing and software freedom have now been pulled kicking and screaming into the debate.

And that can only be a good thing, if only a small step.

(For my general position on open-source licensing, have a read of my open-source page)

Related posts:

1. Facelift time and on to WordPress 3

The purpose of this class is simple -

User-Agent string goes in -> Browser, version and platform comes out.

The “User-Agent” string is a HTTP header property that is sent as part of the HTTP request. All common web browsers (and other HTTP clients, such as search engine crawlers) send predictable user agent strings which allow detection of the browser and operating system being used.

This makes it very easy to add conditional code to your server-side logic (in servlet filters or otherwise), such that you can customise the web experience for each platform and browser.

The usage of the class is very simple -

import com.visural.web.client.*;

class MyFilter implements Filter {
    ...
    public void doFilter(ServletRequest sr, ServletResponse sr1, FilterChain fc)
            throws IOException, ServletException
    {
        HttpServletRequest req = (HttpServletRequest) sr;
        WebClient client = WebClient.detect(req);
        if (client.getUserAgent().equals(UserAgent.IE)) {
            // do something for IE only
        } else if (client.getUserAgent().equals(UserAgent.FIREFOX) &&
                 client.getPlatform().equals(Platform.LINUX)) {
            // etc.
        }
    }
    ...
}

Currently it supports the detection of the following browsers, including version number -

    IE,
    FIREFOX,
    CHROME,
    OPERA,
    SAFARI,
    GOOGLEBOT,
    YAHOO_SLURP,
    MSNBOT

And will detect the following operating systems -

    MACOSX,
    WIN95,
    WIN98,
    WINNT,
    WIN2K,
    WINXP,
    WINVISTA,
    WIN7,
    LINUX,
    IOS, (iPhone, iPad, iPod Touch)
    ANDROID

There are certainly other solutions for this, but I wanted a simple, elegant implementation, that is optimised for the typical sort of logic that you want this for on the server side.

You can download version 0.4 of visural-common at google code and get started right away. It is licensed under the Apache 2.0 License.

Related posts:

1. ResourceTransformFilter – DataUris, LessCSS, Javascript and CSS Compression Made Easy!
2. 301 Redirects Made Easy In Java
3. Wicket – forcing page reload on browser back button…

To be honest there’s not really a great deal I was interested in, although the new Twenty-Ten theme is nice.

I took the opportunity to the give the site a bit of a facelift, since it was starting to look a bit cluttered. The new theme actually allows for more content, and doesn’t feel so cramped.

I did consider for a moment, writing my own blog engine and moving the site on to Google App Engine, but then I thought of the 100 other things I’d rather be building, and sat down until the thought went away.

WordPress is pretty great for what it is. There are times when I would like to get under the covers and have a bit more control (without learning PHP), but for the most part it does everything I need and is very user friendly.

Maybe when I get that “spare time” I hear about, I’ll reconsider, but for now, I heart WP.

Related posts:

1. Thoughts on the WordPress & Thesis GPL hoo-haa
2. onmydoorstep.com.au – officially launched!

MHTML is as far as I know, only implemented in Internet Explorer. And given that IE8 supports data URI’s there’s no reason to use it outside of IE6/IE7.

I’ve done some testing and, as cited in the comments of this thread on MHTML, there are issues with using MHTML to inline images in CSS on Windows Vista running IE7. This specific platform has problems and will not accept a CSS file with inlined MHTML images.

I tried fixing this, as some others have suggested, by separating the MHTML images into a separate file, and keeping the CSS by itself, referencing the MHTML file.

This appears to work — at least, it works the first time. But a subsequent reload will then display blank images. Essentially the next time it reloads from the cache, it breaks.

That pretty much rules out using MHTML on Windows Vista, since the whole point of MHTML is to load one file rather than making multiple requests. If you can’t cache the file, then there is no benefit!

What about other platforms?

Well on Windows XP, IE6 and IE7 appear to work just fine.

However – in some corporate environments there are browser security flags that may cause the inlined MHTML to not load initially. Subsequently you may get strange behaviour when the user does try to load them.

Update: I’ve resolved this one – this can occur when the MHTML content is not matched with appropriate MIME types and formatted as IE expects it. Most of the other articles about using MHTML in this manner do not adhere strictly to the MHTML format and exhibit this issue.

My Verdict

For the open-web, I’d suggest that MHTML is too much of a liability to use across the board. You really can’t be sure that people are actually seeing your site as intended.

Update: Actually, if you have a Java web app, my ResourceTransformFilter will apply MHTML in a reliable way across your application – only to the clients that can use it.

If you have a controlled environment (e.g. intranet or WAN) then MHTML might be a valid choice, since you can be sure that the browser configuration is suitable for your served content.

At least the future for Data URI’s is bright and as IE6/IE7 market share shrinks this whole issue will disappear.

Related posts:

1. ResourceTransformFilter – DataUris, LessCSS, Javascript and CSS Compression Made Easy!
2. Automatic Javascript and CSS Compression For Java Webapps
3. Wicket – forcing page reload on browser back button…

When I designed “On My Doorstep“, this was something that I gave quite a lot of thought, and came to the same decision as the one Blizzard just made.

It’s an interesting thing to consider for any web startup or application – what sort of community do you want to foster? Is it ok for people to be anonymous?

Generally we’ve shied away from using real names, I think for practical reasons (having a unique identifier for someone to log in with) and culturally (that’s the way everyone has always done it).

But, with social networking, users are encouraged to be themselves and be “celebrities in their own communities”, so to speak. As social networks merge and inter-operate with each other and web-based apps, it’s sensible to assume that our real identities will go with us to each service and community that we interact with.

I saw this as a useful thing for the type of community, I had planned for onmydoorstep.com.au.

Social sites revolve around one thing – the community of users that use them. I haven’t used a single community focused website that hasn’t experienced some amount of trolling, griefing or user-to-user abuse. It’s something of a joke actually – arguing on the Internet is probably one of the single biggest reasons for it’s success. Remember this XKCD comic -

Who hasn’t been the anonymous jerk, madly typing into the Internet to prove to some moron how wrong they are?

Pretty much everyone has done it, and had it done to them.

Certainly stuff like this happens in everyday life…. it’s not just an Internet problem?

Well, it seems to happen a lot more on the Internet, and the commonly cited reason (for both doing it and recieving it) is anonymity.

It’s a lot easier to act like an ass-hat and flame someone when you can’t be held responsible for your actions. Similarly when you’re telling “doomslayer1975” what’s what, it’s easier not to think of them as “Fred Williams, a 35 year old father of three from New Zealand who likes playing Half-life 2 and taking long walks on the beach“.

When they don’t appear as real people, you don’t have to treat them as real people.

So for “On My Doorstep“, it was apparent that for a site focused on the local community, the services, activities and events in your local neighbourhood, it was crucial that the user’s be real people. It adds to the feeling of locality, and encourages credibility and transparency in the information presented and the discussion of the users.

Was this the right decision? It’s early days yet, and the site hasn’t grown enough to know for sure.

I did receive some feedback from early users who were a little surprised to see their real names being used on the site. Other users don’t seem to be worried one way or another. So I would guess that some users may be discouraged to participate given the lack of anonymity, but others would not be phased. However I think that the potential cost in terms of engagement, is balanced in part by the quality of content and communication.

So to that end, I certainly understand what Blizzard are doing.

One thing about Blizzard though, which is different, is that they have an existing community, that was built upon the understanding of anonymity. They also have a line of products which up until now have presented users not as themselves, but actively as fictional individuals.

It’s one thing to build a community of users who are presenting themselves, as themselves, but to change an incumbent (and vocal) community of anonymous users into a publicly-outed one, is a Big Deal…. and I think this is the source of the backlash.

There are people in that community who value the anonymity they have, and the freedom to interact under the cover it provides. Those users are going to be upset.

Other users are going to simply be adverse to change regardless of what it is. They don’t like to see anything that’s going to fragment or disrupt the community that they interact with and value… I understand where those people are coming from.

There’s probably going to be a sweeping change to Blizzard’s hosted gaming community as a result of this change. Some people will leave, they’ll find other places to go which they feel more at home in. I’m also sure that other users, both old and new will find the new community to be a better one, and stick around.

Whether Blizzard’s community grows or shrinks as a result of this decision only time will tell, but I’m sure it will be interesting to see how it all pans out.

I hope that the use of real identity becomes a trend for web applications & startups which have appropriate communities. It’s probably not something that is appropriate in every instance, but hopefully we will see some balance, and as a result an improvement in the quality of discussion and interaction provided online.

No related posts.

This was far easier to implement than the original authentication, particular under Apache Wicket, but it should be easier regardless of your Java framework of choice.

Here’s how I did it.

First I developed a basic “magic” class for the Facebook API -

public class Facebook {
    // get these from your FB Dev App
    private static final String api_key = "MYAPIKEY";
    private static final String secret = "MYSECRETKEY";
    private static final String client_id = "MYCLIENTID";  

    // set this to your servlet URL for the authentication servlet/filter
    private static final String redirect_uri = "http://www.onmydoorstep.com.au/fbauth";
    /// set this to the list of extended permissions you want
    private static final String[] perms = new String[] {"publish_stream", "email"};

    public static String getAPIKey() {
        return api_key;
    }

    public static String getSecret() {
        return secret;
    }

    public static String getLoginRedirectURL() {
        return "https://graph.facebook.com/oauth/authorize?client_id=" +
            client_id + "&display=page&redirect_uri=" +
            redirect_uri+"&scope="+StringUtil.delimitObjectsToString(",", perms);
    }

    public static String getAuthURL(String authCode) {
        return "https://graph.facebook.com/oauth/access_token?client_id=" +
            client_id+"&redirect_uri=" +
            redirect_uri+"&client_secret="+secret+"&code="+authCode;
    }
}

You’ll need the visural-common library for some of the code above.

I want the “email” and “publish_stream” extended permissions, so that I can get the user’s email address and post updates back to their stream in Facebook. You can customise this list with the permissions that you need.

The process of authentication is simple.

1. You create a link on your web UI (generally labelled “Login With Facebook” or something like that) to the Facebook.getLoginRedirectURL() URL.
2. Facebook will authorise the user with the permissions you requested, and redirect the user to your “redirect_uri” as specified above.
3. In a servlet or filter at your “redirect_uri” you need to
   • Retrieve the request parameter “code”
   • Make another request to the URL – Facebook.getAuthURL(request.getParameter(“code”))
   • Parse the response for the “access_token” and “expires”, assuming that it was a valid response that contained them.
4. You use your access token to retrieve data about the user and/or make other calls to the Facebook Graph API

Due to the way Apache Wicket works, I implemented a Servlet Filter for the “redirect_uri” (/fbauth) –

public class FBOAuth implements Filter {

    public void init(FilterConfig fc) throws ServletException {
    }

    public void doFilter(ServletRequest sr, ServletResponse sr1, FilterChain fc) throws IOException, ServletException {
        HttpServletRequest req = (HttpServletRequest)sr;
        HttpServletResponse res = (HttpServletResponse)sr1;
        String code = sr.getParameter("code");
        if (StringUtil.isNotBlankStr(code)) {
            String authURL = Facebook.getAuthURL(code);
            URL url = new URL(authURL);
            try {
                String result = readURL(url);
                String accessToken = null;
                Integer expires = null;
                String[] pairs = result.split("&");
                for (String pair : pairs) {
                    String[] kv = pair.split("=");
                    if (kv.length != 2) {
                        throw new RuntimeException("Unexpected auth response");
                    } else {
                        if (kv[0].equals("access_token")) {
                            accessToken = kv[1];
                        }
                        if (kv[0].equals("expires")) {
                            expires = Integer.valueOf(kv[1]);
                        }
                    }
                }
                if (accessToken != null && expires != null) {
                    UserService us = UserService.get();
                    us.authFacebookLogin(accessToken, expires);
                    res.sendRedirect("http://www.onmydoorstep.com.au/");
                } else {
                    throw new RuntimeException("Access token and expires not found");
                }
            } catch (IOException e) {
                throw new RuntimeException(e);
            }
        }
    }

    private String readURL(URL url) throws IOException {
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        InputStream is = url.openStream();
        int r;
        while ((r = is.read()) != -1) {
            baos.write(r);
        }
        return new String(baos.toByteArray());
    }

    public void destroy() {
    }
}

This is a cut-down version of my actual code as I do a bunch of other things on onmydoorstep.com.au which is more related to internal house-keeping and UX.

Your “UserService” might look something like -

class UserService {

    // ....

    public void authFacebookLogin(String accessToken, int expires) {
        try {
            JSONObject resp = new JSONObject(
                IOUtil.urlToString(new URL("https://graph.facebook.com/me?access_token=" + accessToken)));
            String id = resp.getString("id");
            String firstName = resp.getString("first_name");
            String lastName = resp.getString("last_name");
            String email = resp.getString("email");

            // ...
            // create and authorise the user in your current system w/ data above
            // ...

        } catch (Throwable ex) {
            throw new RuntimeException("failed login", ex);
        }
    }
}

So, just to recap, the sequence of authentication is as follows –

1. User clicks a link on your site to Facebook.getLoginRedirectURL()
2. Facebook asks them for their username/password to log in to your application
3. Assuming they authenticate with Facebook, Facebook then redirects the user to your “redirect_uri” with a parameter “code” passed along.
4. You use the “code” parameter to query the Facebook authentication service – Facebook.getAuthURL(request.getParameter(“code”))
5. Assuming it was a valid authentication code, Facebook will pass you back an “access_token” that you can use to access the Facebook Graph API for the given user.

This could certainly be formalised into a reusable chunk of code. I may get around to adding it to visural-common, but right now there’s a lot of onmydoorstep-specific stuff in the real code.

Anyhow, hope it helps someone out!

Related posts:

1. Clustering Guice Java Web Applications
2. NetBeans 6.7 Broke My Parameterized Tests
3. Wicket On Google App Engine (GAE) – Deployment Configuration

What this means is the ability to remove the repetition and redundancy which almost always pops up in CSS for complex web sites. Just the addition of variables is a god-send towards this, but other features like the addition of operations makes support each browser’s “-moz-xxx” or “-webkit-xxx” properties, plus the standard ones go from 3+ lines to 1 line of CSS. This improves the signal-to-noise ratio of the CSS dramatically.

After having used LessCSS for a while now, I honestly wouldn’t go back to using straight CSS again.

So… my problem was, how to use LessCSS in Java, and more specifically Wicket?

The author of LessCSS, cloudhead, wrote the initial version in Ruby, however the new and improved version of LessCSS is written in Javascript.

This makes integration quite easy, using Mozilla Rhino, a Java environment for running Javascript.

As part of the 0.3.2 release of visural-common I included an integration which Java-enabled less.js by using Mozilla Rhino. Asual also did this, however I had some problems with the way his version was initialised and shutdown when doing redeploys of a web app, so I wrote my own integration using the latest trunk version of less.js.

With the 0.6 release of visural-wicket, I created a Wicket Resource Provider which will do auto-compilation of “.less” files inside of Wicket web applications. This makes working with LessCSS as natural as working with CSS itself.

My only gripe with LessCSS at the moment is that it doesn’t support the filter:IE…. garbage that you can use to do certain effects in IE browsers (e.g. gradients, shadows, etc.) which would be nice, however I know these are on the roadmap, and might be best separated out anyhow.

Related posts:

1. visural-wicket 0.6 released – lots of new components!
2. visural-wicket 0.5 released – ready for action!
3. ResourceTransformFilter – DataUris, LessCSS, Javascript and CSS Compression Made Easy!

Since then the project has seen 150+ developer downloads and a generally very positive reaction from the Wicket community.

I’m pleased to announce, the release of the next major release of the library – visural-wicket 0.6

Version 0.6 brings a bunch of new components and enhancements -

• DateInput - a new behavior which provides a pop-up Javascript date picker
• InputHint - a new behavior which provides “hint text” inside input fields, which disappears when the user focuses on the field
• BeautyTips - a new behavior which provides rich, attractive, stylable tooltips for any component
• “Confirmers” – prompt/confirmation dialogs that can be used for any Link / Submit type Wicket action
• Dialog-  a flexible modal dialog component which can be open/closed via Ajax or client-side Javascript
• LessCSS - integration of LessCSS and Wicket, so you can use “.less” files like they were “.css”
• JSR303 Validated Form - a binding behavior and Form which automatically transfers JSR-303 validation annotations on to Wicket Forms
• Generic security framework – a generic & light-weight way of implementing security integration with Wicket apps
• Various bug fixes and API extensions

As you can see there was a lot of stuff! Most of this was developed in response to my latest Wicket project – onmydoorstep.com.au

The live examples application has also seen an update with example implementations for most of the new features.

You can download the distribution and examples application at the visural-wicket project on Google Code.

Some features, such as the generic security framework are not well documented. I intend to do either a blog post or wiki article which steps through these features in the near future.

Maven support has also been added.

Note that to use LessCSS you also need Mozilla Rhino - this is not included as a dependency out of the box. You may add it to your project manually if you are using the LessCSS features of visural-wicket.

Anyhow, hope you enjoy the new release and as always, get in touch if you have any feedback, good or bad!

Related posts:

1. visural-wicket 0.5 released – ready for action!
2. Announcing – visural-wicket
3. LessCSS available in Java and Wicket – less.js

So, I’m proud to present the On My Doorstep Blog and the addition of comments / discussion features across the entire site.

Building a blog and commenting system in Wicket was a pleasure, and a smooth development process. I know, I know; creating a blog isn’t exactly rocket science, but I continue to be impressed with the speed and ease with which it is possible to build out, componentize and refactor major features using Wicket. I have a hard time imagining going back to a Model-2 type web framework. I think it would feel like writing in assembly again.

I’ve also using the wicketstuff-rome integration for the RSS feed features.

The site also recently introduced Facebook profile picture and Gravatar integration (for people not using Facebook Connect).

Anyhow, subscribe to the RSS feed & stay tuned for more updates coming soon!

Also hard at work on visural-wicket 0.6, should be out sometime this week or next.

Related posts:

1. onmydoorstep.com.au – officially launched!
2. visural-wicket 0.6 released – lots of new components!
3. visural-wicket 0.5 released – ready for action!

I had a great time, and even went so far as to take the step of changing careers. I quit IBM in mid 2005 to take a job as a freelance animator on a production being run from Sydney. This only lasted a few weeks though before they let me go, stating that they didn’t feel the remote working arrangement was working. I then went back to work for a past client part-time and kept working on animation in my spare time. I had a job offer to relocate to work for an advertising agency, but the low pay and move away from family and friends led me to turn it down.

My part time course finished at the end of 2004, and culminated in Bernerd and Mac – my first animation short which I produced from start to finish. It’s fairly underwhelming to look at now, but I was proud of it at the time and I still look at back at it with fondness. For those not familiar with the animation process, creating an animated short single-handed is not a trivial (or fast) thing. Most people specialise in only one part of the overall process, and creating a short by yourself requires general skills across the board.

I’m posting the movie here and on Youtube, more for myself so I can look back on it every now and again when I’m feeling nostalgic. I’ll be posting some of the later work I did over the coming months as I dig it up.

I’m still hoping to get back to animation at a later date when I have more spare time. When I stopped working on animation stuff in late 2006 I was half way through production of a far more ambitious short film. I’d done all the design, built the 3D sets, characters, recorded the voices and was in the process of building out the animatic when I found my engineering “mojo” again. Since then I’ve been busy coding, but I’d like to get back and finish that project one day though.

No related posts.

This version includes a new Servlet Filter, which makes 301-redirects in Java a breeze.

You’d recall that 301 redirects are useful for SEO (and just general good practice) for when you move content to another place, or to create a “canonical” version of a piece of content. Matt Cutt‘s has done a few posts about 301 vs. 302 redirects and when you should use each, but this post pretty much summarizes the use-case for this filter.

Using the filter is easy, just create a class that extends from PermanentRedirectFilter:

public class MyRedirect extends PermanentRedirectFilter {
    public void configureRoutes() {
        // ... your config goes in here ...
        // e.g.
        fromHost("mydomain.com").to("www.mydomain.com");

        // urls work too
        fromURL("http://www.mydomain.com/index.jsp")
             .to("http://www.mydomain.com/");

        fromURL("http://www.mydomain.com/blog/post.jsp?p=123")
            .to("http://www.mydomain.com/blog/2010/06/how-to-do-301-redirects-in-java");

        // you could also use this to move your domain to another place altogether.
        // The same page url and parameters will be used after the host.
        fromHost("www.myolddomain.com").to("www.other.com");
    }
}

Pretty easy and efficient syntax.

You’ll then want to add this to your web.xml in the usual way for configuring a filter, e.g.:

    <filter>
        <filter-name>MyRedirectFilter</filter-name>
        <filter-class>com.mycom.MyRedirectFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>MyRedirectFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

Done and done – that’s all there is to it.

Related posts:

1. AOP, Annotation-based caching solution for Guice projects…
2. ResourceTransformFilter – DataUris, LessCSS, Javascript and CSS Compression Made Easy!
3. Implementing Facebook OAuth 2.0 Authentication in Java

Why non-distributed projects?

Unlike most other caching libraries I don’t offer integrations with ehcache or other high-end caching solutions. This is an all-in-one-solution, which offers in-instance caching.

By that I mean caching that is scoped only with an object instance. This is particularly useful in situations where you have code which is scoped in “request” or “session” scope with Guice. It may not be appropriate to cache across all instances (like with a “service pattern”).

Anyhow, here’s an example of what this solution looks like:

    @Cache(maxEntries=10000, timeToLive=5000)
    public myExpensiveOperation(Object arg1, Object arg2) {
        // do some expensive stuff, e.g. database read
    }

To enable it you need to implement the “Cacheable” interface. There are 3 basic ways to do this:

class CacheService extends AbstractCacheable {
    // .....
}

class CacheService implements Cacheable {

    private transient CacheData data;

    public CacheData __cacheData() {
        return data;
    }

    @Inject
    public void __cacheData(CacheData data) {
        this.data = data;
    }

    // .....
}

public class CacheService implements Cacheable {

    private final CacheData data;

    @Inject
    protected CacheService(CacheData data) {
        this.data = data;
    }

    public CacheData __cacheData() {
        return data;
    }

    // .....
}

If you’re already using Guice, it’s a pretty simple, low dependency and easy to configure solution for caching.

For the full details head on over to the visural-common wiki…

Related posts:

1. Clustering Guice Java Web Applications
2. The 5 Minute Guice Primer
3. 301 Redirects Made Easy In Java

What does that mean?

Basically I’m just telling anyone who’ll listen, about it.

This site represents around 3 months work, in spare time and on weekends. It’s the reason my blog posts have been sporadic, I haven’t been going to the gym and I haven’t spent enough time relaxing.

The site was designed for the AppMyState competition, run by the Premier of Victoria’s office. The idea is to encourage innovation in apps for the benefit of Victorians.

You can read more about the ideas behind the site at the about page.

The site was built with Apache Wicket, Google Guice, warp-persist/JPA/Hibernate,  visural-wicket and PostgreSQL.

I dabbled with MongoDB (thought I’d see what all this NoSQL hype was about) for a week or two, but ended up retiring it in favour of a more familiar and tested stack. I also persevered with Google App Engine + Wicket for the first month or so, but that turned out to not be a great match.

I’m intending to cover some of the development issues / adventures I had along the way in some future blog posts, but in the mean time – check out the site!

Related posts:

1. Blog, and comments launched for On My Doorstep…
2. Using Bottom-Up Iterative Object/Database Layer With hbm2java and warp-persist
3. visural-wicket 0.5 released – ready for action!

One of the biggest problems is finding packs that are -

• Consistently high quality
• Have a consistent look and feel

There’s little point in have a hodge-podge of different image flavours across the site, like some sort of acid-induced Web 2.0 Geocities flash-back.

So here’s the best that I’ve found – post any I’ve missed in the comments!

Yusuke Kamiyamane’s “Fugue” and “Diagona” Packs

http://p.yusukekamiyamane.com/

Don’t let the pink background put you off, these packs are fantastic. In fact, they’re so good you’ve probably seen them before… all over the web.

They are CC 3.0 Attribution licenced, and you can buy a full commercial licence for a paltry $60 USD. A huge set of quality and consistent icons. Yum!

Tango Desktop Project Pack

http://tango.freedesktop.org/Tango_Desktop_Project

The Tango project is an open source initiative to provide a set of consistent high-res, quality icons for use in Linux desktop window managers and applications. The project has a style and standards guide which means the icons have a consistent quality and feel.

And they are released into the Public Domain, so you can use them however you wish!

FamFamFam Silk Icon Pack

http://www.famfamfam.com/lab/icons/silk/

You definitely seen these before too, all across the Web and in a whole bunch of open-source (and non-open source apps).

They were pretty much the best until the “Fugue” pack above came along, but they’ve still got their place and mix quite well with the Fugue pack anyhow.

Licenced under CC 2.5 and CC 3.0 Attribution.

Dynamic Drive Favicon Generator

http://tools.dynamicdrive.com/favicon/

Not a pack of images as such, but generating a favicon is something that needs to be done by most sites at some stage. Dynamic Drives tool gets you a pretty good favicon 99% of the time, with very little graphic design effort.

Handy!

Smashing Magazine Freebies

http://www.smashingmagazine.com/tag/freebies/

Smashing Magazine (other than being a pretty good design blog) regularly publishes high quality freebies, in the form of icon packs, images and themes (e.g. for WordPress). They are generally to give exposure to a given designer and made available for any sort of commercial or non-commercial endeavor.

In particular the “Flavour” icon pack is very nice, but I’d highly recommend mining their archives as they have some very good “domain specific” icon and vector packs.

$99 Designs, $99 Logo Store

http://99designs.com/logo-design/store

Of all the graphic resources in your app, your logo is probably the most important. It’s your branding, your ID and the way you build association with your users.

If you’re designing on a budget, or building something as an experiment, then $99 is not much to spend on a high-quality and professional logo for your site. Having bought two logos from the site and having them customized to my request within the day, I’d say this is a great one-stop shop for getting something in place that will serve you well until you really need to spend more on it.

Related posts:

1. 5 Minute Guide to Clustering – Java Web Apps in Tomcat

The main differences with this version over the original are one or two bugs fixed and a revamp to bring the output (almost) up to 2010 standards. The original output was pretty hard to read.

For the full story, head on over to the OraDocletPlus page.

Feel free to download / modify / restyle this version as you see fit. I threw this together as a quick and dirty solution to an urgent need to generate some DB documentation, but it’s still a pretty nice solution if you were to implement it into your build process (e.g. in Hudson or similar).

Related posts:

1. visural-wicket 0.6 released – lots of new components!
2. visural-wicket 0.5 released – ready for action!
3. Markdown Doclet for Javadoc