Grails.org has a new home page design

I absolutely love the new design of the grails.org home page. It's sleek, clean, easy to find what you need. Simply brilliant!

Visual Event

This is a really neat tool by Allan Jardine, a UI developer! It makes it so easy and visual to see what even handlers are attached to the elements of a page. Great addition to my toolbox!

When working with events in Javascript, it is often easy to loose track of what events are subscribed where. This is particularly true if you are using a large number of events, which is typical in a modern interface employing progressive enhancement. Javascript libraries also add another degree of complexity to listeners from a technical point of view, while from a developers point of view they of course can make life much easier! But when things go wrong it can be difficult to trace down why this might be.

Read the whole article about Visual Event

jQuery 1.3 upgrade & selector bug

I've just upgraded my website to jQuery 1.3. First thing that broke was the attribute selector. This was well documented in the jQuery 1.3 Release Notes - Upgrading as well as in the documentation. So this was easily fixed.

Another problem I had was with a selector matching <select> tags, such as

$('.size select')

For some reason it is no longer matching the <select> tag, but it's <option> tags instead. There is plenty of buzz about how jQuery switched to Sizzle.js selector engine and all the performance gains. I have not found any information pointing to the change that causes by selector bug. Navigating to the parent node solved the issue for me, but it's more like an ugly hack rather than expected behavior.

$('.size select').parent()

Anybody else noticed this problem?

Tagline

It has been quite a few busy weeks since my last post. I was heavily snowed down with work on my website. Then there was Christmas and new years celebrations.

Happy new year, everybody! On the optimistic note:

Let the new year be better than it is going to be!

:-)

What am I doing right now?

I am thinking about a tag line for my new website. The site will be selling special t-shirts for couples. These t-shirts will have funny designs split 50:50. So the big question is what should the tag line say?

Couple of my (pretty bad) ideas:

• Couple T-Shirts ...because one is not complete
• Couple T-Shirts two is better than one
• Couple T-Shirts one for you, one for your +1

I would like to hear your suggestions.

Colors for the web

Do you need to find interesting photos that would enhance your website and would perfectly match its color scheme? I found a perfect tool for that job.

Multicolr Search Lab by Idée Inc.

And these are the images that match colors of my blog:

1. orange
   


2. orange & blue
   


3. blue
   

Easy Groovy Iteration

The problem

Let's say we want to check the correct mimetype and file extension of the file being uploaded. In a typical Java way I would write something like this:

boolean isRightType = "image/jpeg".equals(contentType)
    || "image/png".equals(contentType)
    || "image/x-png".equals(contentType);

boolean isRightFileExt = filename.endsWith(".png")
    || filename.endsWith(".jpg")
    || filename.endsWith(".jpeg");

Groovy solution

The Groovy way is much simpler and more elegant.

private static CONTENT_TYPES = ["image/jpeg", "image/png", "image/x-png"]
private static FILE_EXTENTIONS = [".png", ".jpg", ".jpeg"]
...
boolean isRightType = CONTENT_TYPES.any { it.equals(contentType) }
boolean isRightFileExt = FILE_EXTENTIONS.any { filename.endsWith(it) }

This was just a small example. What I really find useful are some of the following constructs that make my programming life really pleasant

Groovy Iteration

each

Simple collection iteration

def fibList = [1, 1, 2, 3, 5, 8, 13]
fibList.each { println it }  // prints all of the numbers in the list

any

If you need to find out if any element of the collection meets the condition.

def fibList = [1, 1, 2, 3, 5, 8, 13]
assert fibList.any { it == 3 }
assert fibList.any { it - 2 > 10 }

This is pretty much equivalent to a Java construct

boolean any(List list, Condition cond)
    for (E e : list) {
        if (cond.meets(e)) {
            return true;
        }
    }
    return false;
}

every

If you need to find out if any element of the collection meets the condition.

def fibList = [1, 1, 2, 3, 5, 8, 13]
assert fibList.every { it > 0 }

This is pretty much equivalent to a Java construct

boolean every(List list, Condition cond)
    for (E e : list) {
        if (!cond.meets(e)) {
            return false;
        }
    }
    return true;
}

collect

If you need to create a new collection that contains each element of the original collection transformed in some way.

def fibList = [1, 1, 2, 3, 5, 8, 13]
assert fibList.collect { it - 1 } == [0, 0, 1, 2, 4, 7, 12]

This is pretty much equivalent to a Java construct

List every(List list, Command command)
    List result = new ArrayList(list.size());
    for (E e : list) {
        result.add(command(e));
    }
    return result;
}

findAll

If you need to create a new collection that contains all elements that meet the condition.

def fibList = [1, 1, 2, 3, 5, 8, 13]
assert fibList.findAll { it > 1 && it < 5 } == [2, 3]

This is pretty much equivalent to a Java construct

List findAll(List list, Condition cond)
    List result = new ArrayList(list.size());
    for (E e : list) {
        if (!cond.meets(e)) {
            result.add(e);
        }
    }
    return result;
}

find

If you need to find first element that matches the condition.

def fibList = [1, 1, 2, 3, 5, 8, 13]
assert fibList.find { it > 1 } == 2

This is pretty much equivalent to a Java construct

E findAll(List list, Condition cond)
    for (E e : list) {
        if (!cond.meets(e)) {
            return e;
        }
    }
    return null;
}

References

• Groovy Makes Iteration Easy by Ted Naleid

CSS Naming Conventions

This is a great article about CSS coding: semantic approach in naming convention.

I am keeping this link for any time I will start a new project and will need to look back at some good advise for CSS naming conventions.

Surprisingly I was not far off with my currently undergoing project bar sorrento.

An image is worth a thousand words.

Nevertheless, I recommend you read the full story.

Gmail Themes

I'm loving new Gmail Themes!

The big question has been finally answered.

Official Gmail Blog announced addition of themes today. Users of Gmail can choose from around 30 themes. No need for styling Gmail with Firefox plugins like Stylish and a theme from John Hicks (although I liked it quite a lot for some time - until I had to change machine and re-install everything, again).

My favorite: Shiny! Just like my laptop.

Track 404 with Google Analytics

For many of us it is important as well as interesting to see where our customers go, which pages they visit. Tracking the pages is quite simple with Google Analytics. However the question is: "How do you track the pages that do not exist?"

If you configure your server or web application to handle 404 error - page not found (I strongly recommend you do) you will have a template page that is displayed every time the user navigates to an invalid URL - a page that does not exist.

So, how do we do this? How do we track our customers that somehow got lost and landed in a location that does not exists, at least not as a valid location that would provide them with the information that they expected.

It's quite easy. If you search for more information you may come across Google Analytics blog post Tracking 404 Pages, which is now outdated as the new ga script is recommended instead of old urchin. The best source for the answer is Google documentation itself. Simply follow these instructions.

<script type="text/javascript">
    var pageTracker = _gat._getTracker("UA-xxxxx-x");
    pageTracker._trackPageview("/404.html?page=" + document.location.pathname + document.location.search + "&from=" + document.referrer);
</script>

This code sends a virtual pageview of "/404.html?page=[pagename.html?queryparameter]&from=[referrer]" to your account, where [pagename.html?queryparameters] is the missing page name and referrer is the page URL from where the user reached the 404 page.

Then simply look for /404.html in your Top Content report.

Grails and 404 Page Not Found

Every good website should have a nice 404 page. This is the page that is displayed when your customers or clients navigate to a destination that does not exist, by typing an invalid URL.

Grails does not give you a nice implementation of 404 error (or any other than 500 error). You need to implement it yourself.

If you search the Internet for examples of how to implement 404 Page Not Found error in Grails, most of the results talk about the following scenario:

class UrlMappings {
    static mappings = {
        "500"(controller:"errors", action:"serverError")
        "404"(controller:"errors", action:"notFound")
        "403"(controller:"errors", action:"forbidden")
    }
}

The previous piece of declaration resides inside UrlMappings.groovy and what it means is that if an error occurs, the request is redirected to errors controller which will execute in case of 404 the notFound action. This action could be as simple as

def notFound = {
    render(view:"/notFound")
}

This is all good, but if it is all you need to do (render a view - notFound.gsp) you may as well express it declaratively inside UrlMappings.groovy

class UrlMappings {
    static mappings = {
        "500"(view:'/error')
        "404"(view:'/notFound')
        "403"(view:'/forbidden')
    }
}

This way you won't need a controller class at all. All you need are GSP files in the locations declared in the mappings.

References

• Mapping Response Codes Grails documentation
• 404 UrlMapping does not work with Tomcat
• More on Grails declarative error handling