This is one of those snippets that might be useful someday:

HttpWebRequest webRequest = (HttpWebRequest)WebRequest.Create("http://this.domain.com/someThingThatRespondsWithRedirect");
webRequest.AllowAutoRedirect = false;
HttpWebResponse response = (HttpWebResponse)webRequest.GetResponse();
string redirectUrl = response.Headers.Get("Location"));

Typically browsers or the default http request class of your favorite programming language redirect you automatically in case they receive a HTTP Redirect status code. Typically that’s exactly what you want.
Last week however I ran into a situation in which I didn’t want the redirect to happen.
Since the code was written in VBScript / ASP, I first tried to accomplish it there. No chance. Good thing that I don’t have to rely entirely on VBScript. The C# WebRequest class has an attribute that allows to explicitly turn off the automatic redirect. You can read the Redirect-URL from the response header.

Having bought my iMac in September 2010, I’m still pretty new to Mac OS X. One of the first things I did back then was to install MacPorts in order to install e.g. the Gimp, Ruby and a couple of other open source software. It all worked great … but… I felt a little bit like a couple of years ago when I first installed Gentoo on my desktop. It’s all about downloading and compiling, downloading – compiling, downloading… you got it.

Installing Gimp through MacPorts took about 45 minutes… not great. Very annoying in fact.

One of the reasons I switched from Gentoo to Ubuntu was that it has a great package manager. After the MacPorts Gimp experience I was hoping there was a great quick alternative for MacPorts, too.

Turns out there is. Homebrew … The missing package manager for OS X. It’s quick, it works, no more compilation … happiness!

Today I downloaded Adobe Photoshop Elements 9 for testing . After a few hours of trying it out: Great software and I’m pretty sure I’m going to buy it since it’s for only 100 EUR which I consider a fair price for it.

I’m used to the Gimp which is a great image processing software itself. But: the user interface and the overall usability are not any more up to date. You get used to, but while Gimp is awkward to use, Photoshop Elements feels just right.

Here the result of my first trial with the Smart Brush

While the tool is very intuitive to use, here is a useful tutorial: Creating a blue sky

When you create a new bucket in Amazon S3, you can choose from five different locations: US Standard, Northern California, Ireland, Singapore and Tokyo.

Most web applications however have visitors from all around the world. So if you choose US Standard, visitors from the east coast will have a very low latency while visitors from Europe and Asia will have to wait longer for the resources stored on Amazon S3.

A common approach to this problem is using a Content Delivery Network (CDN). A CDN consists of many servers all around the world all holding copies of the resources of your web page. So a visitor from the US would get content from a server in the US, a visitor from Asia would receive the content from an asian server and a European from a server in Europe. This guarantees low latency and better bandwidth for visitors from all locations.

I’m using S3 for 3-6-5-days.com with a US Standard bucket. I wasn’t really happy with the latency, but luckily setting up a CDN for your S3 bucket is as easy as pie.

All you need to do is this (I will assume you’re already signed up for S3 and created a bucket):

1. Sign up for Amazon Cloud Front.
2. Click on Create Distribution and select the bucket which you want to distribute through Cloud Front CDN)
3. Now, specify whether you support http and https or only https. Only you can configure whether your resources should be available for streaming or downloading.
   
4. On the last screen, hit Create Distribution
5. You’re done! The distribution is configured now. Amazon will automatically start deploying the resources to the various edge locations, in the US, Asia and Europe.

There are two more things that need to be done outside of the Amazon AWS Management Console:

1. You need to create a subdomain and configure the CNAME you specified when creating the distribution. So for above example I would create a subdomain like this: cdn.3-6-5-days.com. The CNAME would point to the domain name you see in the Amazon AWS Management Console. It is something like 123xyz.cloudfront.net
2. Once subdomain and CNAME are configured you’re ready to use the CDN in your web application. Simply make sure that instead of loading resources from the bucket URL you use your new CDN URL. For above exmaple that would be cdn.3-6-5-days.com/path/to/resource/test.css

Here is another good article about the topic: How to Setup Amazon S3 with CloudFront as a Content Delivery Network

Today I ran into a problem with Visual Studio 2008: It wouldn’t show me the Configuration Manager in the Build menu which caused that I couldn’t easily switch between Debug and Release compilation.
For the exact same source code and the same version of VS2008 a colleague got the right menu item.

Turns out you need to enable configuration manager! Go to Tools > Options > Projects and Solutions > General and enable the Advanced Build Configuration option.

Allen’s Getting Things Done is a resourceful book in many ways. If someone asked me for the two most valuable / interesting passages of the booking I’d probably point out the “Getting Things Done” diagram which I wrote about here and the “Natural Project Planning” which I want to write about in this post.

Natural Project Planning consists out of five steps:

1. Defining purpose and principles
2. Outcome visioning
3. Brainstorming
4. Organizing
5. Identifying next actions

If you’re like me you will probably read over that list and think “yep, that’s how it should be, so what’s the big deal here”. Well, the big deal is, that while this model is very natural it won’t be followed most of the time.

Think back to your last kick start meeting for the latest and greatest project. For sure someone said “let’s brainstorm”. That just sounds right and very actionable. The problem: If you didn’t talk about the purpose of the new project yet and if you have no idea about possible desired outcomes for the project the brainstorming will lead to absolutely nothing constructive. Without knowing the purpose of the project and without any vision you won’t be able to separate the good ideas from the bad ones. So next time someone says “Let’s brainstorm” make sure everybody is clear about the purpose, principles and outcome visions.

Once these are defined and you successfully brainstormed the new project everybody leaves the room and now what? If you’re lucky someone took a photo of the whiteboard with all the good and bad results of the brainstorming on it. Since most teams don’t have the luxury of working on one project at a time it is fairly certain that other things come up and get prioritized. After a week nobody will understand anymore what all the words on the photo of the whiteboard are really about and we have to start the process all over again.
Brainstorming is important but it will be for nothing if you don’t take the time and organize all the unordered ideas into actionable items. Start writing a project plan. I doesn’t have to be a huge formal document. Simply make a list of “next actions”. Prioritize them and assign them to concrete people.

Following these five easy steps helps to get projects started and keep them going. It works for small and big projects, however for big projects you’ll likely need more formal approaches…

In my last article I described how to improve the speed of your Rails 3 Ajax Application by returning correct HTTP states and optimizing browser caching.

One thing that still annoyed me was the fact that the browser had to wait for the 304 “Not Modified” response from the server before displaying cached data. Once the response was received it would trigger the success callback. That means the user needs to wait for a response from the server just so that the browser can display cached data…
At that point I remembered reading about Wycats’ jquery-offline. jQuery-Offline has the same interface as jQuery’s native getJSON, but once it receives the response it’ll store the JSON data in the browser’s localStorage. The next time the same Ajax request is triggered the success callback is executed twice. First when the data is loaded from the localStorage (which is very very fast obviously) and the second time when the browser returns a 200 status response. The great thing is, that the success callback won’t be triggered if the server returns a 304 “Not Modified” status code. This is really really neat and makes the UI unbelievably snappy.

jQuery.retrieveJSON( "/lists/1", { options: "in case you need it" }, function( data, textStatus, jqXhr) {
  // process the data. This will be called up to two times.
} );

Unfortunately getJSON doesn’t have a great way to handle errors. Since retrieveJSON uses the same interface it suffers from the same weakness. Luckily jQuery 1.5 introduced the jqXHR object. With jqXHR error handling becomes real easy:

var jqXhr = jQuery.retrieveJSON( "/lists/1", { options: "in case you need it" }, function( data, textStatus, jqXhr) {
  // process the data. This will be called up to two times.
} );
jqXhr.error( function( xhr, errorType, exception ) {
  // do your error handling here.
} );

If you want to use above functionality you need to use my fork of jQuery-Offline because the official version hasn’t been updated yet to return a jqXhr object.

Das Weltgeheimnis by Thomas De Padova is not quite an international best seller, at least I didn’t find an English version of the book. Nevertheless for those who speak German and who are interested in natural science it is a very enjoyable book.

De Padova tells the story of Galileo Galilei and Johannes Kepler, two remarkable figures of history who changed how we saw the world and the universe in which we live.

Kepler lived and worked many years in Prague, back then the centre of the Habsburg Monarchy. With endless patience Kepler analysed Tycho Brahe‘s observations of stars and planets and thus found the Laws of Planetary Motion.

Galileo Galilei is most famous for the heliocentric model. Though he wasn’t the first one proposing a model in which the sun, not the earth, is the centre of our planetary system he and Kepler were two important personalities arguing for the model.

Among many interesting things, there are three things I’d like to point out here.

First, it’s amazing under which conditions and with which persistence scientists and philosophers in the 17th century changed the world. They started a process which would accelerate through the 18th, 19th and 20th century until the present day (and it is still accelerating).

Second, many chapters about Kepler give a little bit of inside into how life must have been in Prague in the 17th century. It was the capital of the Habsburg Monarchy and thus for a huge part of what we call Europe today the centre of the world. Two world wars and 40 years of communism change things a lot…

Third, in the story of Kepler and Galileo you recognize all to well the principle of “the adjacent possible” described in Steven Johnson’s awesome book “Where good ideas come from“. Galileo and Kepler both were able to build on top of Copernicus. Kepler based his analysis and calculations on Brahe’s extensive data collection. One generation later, Isaac Newton referred to Galilei’s and Kepler’s findings…

The history of science is an exciting story to tell and Thomas De Padova tells it well.

If you are interested in science books: I’m currently reading “A Short History of Nearly Everything” by Bill Bryson. I’m not yet finished with it, but Bryson is a brilliant narrator and I highly recommend to get a copy (of the book, not Bryson…).

List Kung Fu uses Ajax a lot and so far it works out pretty well. Over the past two weeks I’ve looked into improving the performance of the UI and there are a couple of things that helped a lot and which I want to share here.

Returning the correct HTTP status code and optimize browser caching

There are two status codes I mean specifically:

• 200 – “Ok“. Tells the browser that the server was able to respond successfully to the request. The response contains the data from the server in the HTTP payload.
• 304 – “Not modified“. Tells the browser that the data for the sent request did not change and that data should be loaded from the cache. In this case the response does not contain any payload.

Since a “Not Modified”-message contains much less data (no content, only header) that’s what you preferably want to return to the browser. Of cause you only want to that if you are sure that the browser already has the data.

For my application I found that the server was returning far more often 200-responses than 304-responses which caused

• More data than necessary had to be transmitted.
• More data had to be processed by the UI.

Both things were slowing down the application. Just a little, but enough to be noticed in the UI. Luckily there are only a few things you need to change in your Rails application to get the right behaviour.

1) Use stale? in your GET methods

  def show
    @list_item = @list.list_items.find( params[ :id ] )
    if stale?( :etag => @list_item, :last_modified => @list_item.updated_at.utc, :public => true )
      respond_with( @list_item )
    end
  end

Stale? sends back an etag and a last_modified date in the response. With the next request to the same URL the browser will send this etag and last_modified date to the server. The stale? method then analyses both parameters and returns 304 in case they are the same or 200 plus the new content if the newly calculated values are different.

More information on stale? you get in Rails’ API documentation and on Rails Guides.

2) Make sure the browser asks for new data on each request

After above modifications something interesting was happening. If the same Ajax action was triggered multiple times within a short period of time, the browser wouldn’t send a request at all to the server, but instead take the data from the cache. While obviously this made the UI really fast, it wasn’t exactly what I wanted. My goal was maximum performance while guaranteeing correct and up to date data on the screen.
The browser’s caching behaviour is influenced by three HTTP header flags: cache-controll, pragma and expires.

To “disable” caching in the browser all together you could send the following:

  def set_cache_buster
    response.headers["Cache-Control"] = "no-cache, no-store, max-age=0, must-revalidate"
    response.headers["Pragma"] = "no-cache"
    response.headers["Expires"] = "Fri, 01 Jan 1990 00:00:00 GMT"
  end

What I wanted however is this:

  def set_must_revalidate
    response.headers["Cache-Control"] = "must-revalidate"
  end

This advices the browser to check for new / updated data with each request. I added this method to my application_controller.rb and I’m calling it in a before_filter of controllers for which I want to have this flag set.

3) Using stale? for GET methods which return collections (e.g. index)

Above stale? example is taken from a controller’s show method. This is what you find in most examples on the web. To make this work in a method which returns a collection, like typically a controller’s index method you need to find some way to figure out whether the current collection is the same as it was for the last request.
List Kung Fu has a model List which has_many ListItems. Each ListItem belongs_to a List. To be able to determine in list_items_controller whether a collection of ListItems changed, I added code which updates the list.updated_at timestamp for each write operation on a list_item.

In ListItem.rb:

class ListItem < ActiveRecord::Base
  belongs_to :list
  after_save :update_list
  after_destroy :update_list
 
  # [...]
 
  def update_list
    self.list.updated_at = Time.now
    self.list.save
  end
end

Thus, in the list_items_controller the index method could look like this:

  def index
    @list_items = @list.list_items
 
    if stale?( :last_modified => @list.updated_at )
      respond_with( @list_items )
    end
  end

Instead of using the updated_at field I could have added a version field to the List model, but that seemed unnecessary. If the model doesn’t have a model it belongs_to, you need to find another strategy for checking whether the collection has been modified. Maybe it’s possible to calculate a checksum over all objects in the collection…

So much for this post. I also switched from using jQuery’s getJSON to Wycats jquery-offline. More about that in my next post.

Persepolis is an amazing comic book and it offers a view on Iran and life in Iran that you don’t hear about often these days. I read it within a couple of days and it is very worthwhile. It will make you reconsider your own situation and history.

They also made a movie out of it. I haven’t seen it but it got lots of positive reviews on Amazon:

If you need to run some SQL manually on Heroku, the Heroku SQL Console is exactly what you’re searching for.

It’s installed in 5 seconds:

heroku plugins:install git://github.com/ddollar/heroku-sql-console.git

If you ever were curious about how innovation actually works this video is probably what you should start with:

If you found this video interesting, you definitely want to get a copy of Johnson’s awesome book “Where Good Ideas Come From”.

Johnson found, that there are re-occuring patterns which support innovation. He describes these patterns in seven chapters which there are

1. The Adjacent Possible – New innovations more often than not take existing pieces and put them together in a new way. Each new innovation increases the space of the adjacent possible.
2. Liquid Networks – History of innovation shows that networks support good ideas and innovation. People connecting to other people and multiple disciplines are more likely to have an innovative thought.
3. The Slow Hunch – Great new ideas often don’t break through in an Eureka moment. Much more often they linger in the back of someone’s head and need months, sometimes years or decades to develop into something real. Liquid networks at this point can help to bring slow hunches together and then these combined slow hunches lead to a new idea.
4. Serendipity – Sometimes great ideas come to you in unexpected moments. Johnson talks about a whole bunch of good examples in his book. Sometimes it’s just necessary to free your mind, go for a walk, watch a soccer game, go on vacation and eventually a brilliant connection will occur to you which didn’t come to your mind before.
5. Error – Innovation is also a history of error. If you don’t want to make any error you likely will never invent anything. By making errors you learn from every single one and if you’re lucky and interpret the errors correctly you might come up with something wonderful new.
6. Exaptation – Exaptation is a term coming from biology. The feathers of birds for instance were at frist developed by mother nature for means of isolation. Later on however they turned out to be essential for flying. So feathers were exapted for flying. Looking at innovations of the recent centuries from the view point of exaptation, you’ll find that many innovations were possible by using an existing thing in a different way.
7. Platforms – Platforms support innovation. Platforms allow you to _not_ think about certain things and instead concentrate on the solution of the actual problem you’re trying to solve.

This is a very short summary of a great book, so I hope you got appetite and are going to read it. You can get a copy for example at Amazon.de

It is amazingly easy to get Spring running on Google App Engine. Here is how you do it.

Install the development environment

I’m assuming you installed a recent version of the JDK. Once Java is installed on your system download either Eclipse or the Spring Tool Suite (STS), which is build on top of Eclipse.

I personally decided for the Spring Tool Suite because it makes it ridiculously simple to install additional plug-ins like for example the Google Plugin and comes with support for Groovy and Grails which I both want to try out at some point. After starting up STS, you’re presented with the STS Dashboard.

Click on the “Extensions”-link and search for the “Google Plugin”. I already installed it, that’s why it’s displayed as installed on below screenshot, but when you get to that page the first time, you can click the check-box on the left and then hit the “Install” button in the lower right corner. It will take a little to install the plugin, but once that’s done you’re ready to go.

Create an App Engine Project

For the sake of simplicity I will create an App Engine project only without Google Web Toolkit. Click on the Google Plugin icon () and specify a project name, a package and disable the GWT check-box.

The plug-in will auto-generate some example code for you which you can deploy straight away to App Engine.

Deploying the App to App Engine

If you haven’t signed up for Google App Engine yet, now is the right time to do so: code.google.com/intl/de/appengine.
Next navigate to appengine.google.com. All you will see is a rather empty screen (at least if you just signed up for App Engine). Click on the “Create Application”-button and fill in the form.

Typically it requires some creativity to select an app ID. I usually use the name I want to use and add some random numbers. That works out well most of the time. If you plan to develop and production application, the app ID doesn’t really matter anyway because you can use a custom domain later on. Once things are set up on Google’s side, hit the “Deploy”-button in STS:

On the upcoming screen, click “App Engine Project Settings …” and specify the app ID you chose in the last step.

Type in the app ID and confirm with OK. Now type in your Gmail address and the password and hit deploy. After a couple of seconds your app will be available at “your app id”.appspot.com.

Adding Spring

Now you will add Spring to the application. Instead of using a simple servlet to return the “Hello World” string you will use a Spring MVC controller.

Adding the right JARs

1. Download the latest version of Spring 3. I used Spring 3.0.4.
2. Extract the zip file a copy following JARs to the /war/WEB-INF/lib directory:
   • org.springframework.asm-3.0.4.RELEASE.jar
   • org.springframework.beans-3.0.4.RELEASE.jar
   • org.springframework.context-3.0.4.RELEASE.jar
   • org.springframework.core-3.0.4.RELEASE.jar
   • org.springframework.expression-3.0.4.RELEASE.jar
   • org.springframework.web-3.0.4.RELEASE.jar
   • org.springframework.web.servlet-3.0.4.RELEASE.jar
3. Additionally you’ll have to add these JARs to your lib directory:
   • antlr-3.3-complete.jar
   • asm-3.3.1.jar
   • asm-commons-3.3.1.jar
   • commons-logging-1.1.1.jar
4. Rename commons-logging-1.1.1.jar to something else, e.g. commons-logging-1.1.1-personal.jar
5. Add the JARs to your Build Path.

Configuring the App

First, you tell the application to use the Spring Dispatcher Servlet and map it to the root URL. This is the web.xml after the changes:

<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
	<servlet>
        <servlet-name>SpringAppEngine</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
        <servlet-name>SpringAppEngine</servlet-name>
        <url-pattern>/</url-pattern>
	</servlet-mapping>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
	</welcome-file-list>
</web-app>

Now create a file named “SpringAppEngine-servlet.xml” and paste below XML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
        xmlns:context="http://www.springframework.org/schema/context"
        xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd  
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
 
        <context:component-scan base-package="com.projectsierra.springappengine" />
 
        <bean id="viewResolver"
                class="org.springframework.web.servlet.view.InternalResourceViewResolver"
                p:prefix="/WEB-INF/views/" p:suffix=".jsp" />
 
</beans>

Line 8 tells Spring where to look for your controllers. Line 10 specifies that you will use JSPs as View technology.

Now, the last two things you need to do, is to create an actual controller and a JSP view. First, delete the auto-generated SpringAppEngineServlet class and instead create a HelloWorldController:

package com.projectsierra.springappengine;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
 
@Controller
public final class HelloWorldController {
 
	@RequestMapping(value = "/springappengine",  method = RequestMethod.GET)
	public String HelloWorld() {
		return "MyView";
	}
}

Next create a folder “views” within the WEB-INF folder. Add a file named MyView.jsp. The sole content of MyView.jsp is the string “Hello World”.

That’s it. Start up the development server and hit http://localhost:8888/springappengine:

By clicking the deployment button a second time you can deploy this version of the application to App Engine. If you want to preserve the first version, change the version number in the App Engine Project Settings before you deploy. A live version of above code runs at http://2.springapptest987654321.appspot.com/springappengine.

Resources

• Download the example code here.
• Spring on GAE
• Spring MVC Documentation

Since I started working in a full time job in 2008 I didn’t really spend much time taking pictures. Last June I decided that I should change that again. I had mainly two reasons. First, I really like taking pictures, second it’s healthy to have some sort of creative hobby other than programming.

After not following the market for digital image processing software for two years I first went through some research regarding which software suites my needs best. After much testing and playing around with trial versions I’m now pretty happy with the ones I list below.

The Basics

RAW developement: I first tried Bibble 5 for developing my RAWs because a colleague recommended it but I didn’t really like the work-flow. After throwing Bibble away, I quickly fell in love with Adobe Lightroom 3. It’s quick, has amazingly useful editing features, efficient noise reduction and supports lens corrections for many models. Lightroom is available for Windows and Mac OS X. Linux users come away empty-handed.

Manipulation: Gimp is the often mentioned free Adobe Photoshop alternative. It requires a bit of effort to get started but it’s well invested time. There are plenty of plug-ins for Gimp out of which I find the following most useful:

• G’Mic: An excellent collection of filters which I highly recommend to install.
• UFRaw: Raw Converter for Gimp. By far not as powerful as Lightroom, but it does its job. Useful for Linux users who can’t benefit from Lightroom.
• Exposure Blend: Exposure Blend supports you in creating HDR / DRI images out of a series of photos with different exposures. I’m not using it much but during testing it did what it promised.

Check out the Gimp Registry for more plug-ins.

HDR Photography

HDR is short for High Dynamic Range and is essentially a method to increase a photo’s contrast range. Thus dark and light areas of an image will be equally well exposed. Use Google’s image search and search for “HDR” or search for the same on flickr, in order to get an impression.
The right software support to create such images you’ll find in Photomatix. Photomatix is totally foolproof while offering a wide range of options. You’ll have your first tone mapped photo within minutes!

Panoramas

I think I haven’t tried to create a panorama for at least 5 years and I remember back then the stitching process was a real pain. Nowadays, software like PTgui let’s you create awesome panoramas in very short time; at least if the source images are usable. PTgui pro even combines panorama with HDR awesomeness. Quite an impressive combination. Check out Christian Maier’s photos on fotocommunity.de for some examples which take it to the maximum.

Macro Photography

I never used any special software for macros, but I recently found Helicon Focus which takes several photos with different depth of field and combines them into one photo. They have a video on their page demonstrating the process. It’s like HDR, but instead of increasing the contrast range, it’s merging depth of fields.

If you find the Mac OSX startup sound as annoying as I do you will love this tool: StartupSound.prefPane

A detailed description about how to use it you’ll find here.

I do wonder why Apple does not include this option in the system preferences.

Relaxing introduction to the DOM. Great for starters, but also interesting for experienced JS programmers

Today I faced some weirdness around scrollable DIVs and the droppable component of jQuery-UI.

So you have a div with fixed height and width and overflow settings so that it scrolls vertically but not horizontally. Let’s call this div “wrapper”. Within the wrapper you find additional div-elements. Actually so many of them that the wrapper starts scrolling. Each of these inner elements is a droppable which accepts the “Drag Me!” div.

If you drag & drop the “Drag Me!”-div within the wrapper you get an alert “dropped”. That’s nice, because it’s expected. What’s weird is that you’ll get the “dropped” alert as well when you drop the “Drag Me!”-div somewhere below the wrapper. If you scroll down to item “Test28″ and drop again below the wrapper, the drop event won’t be triggered. So it looks like while the items are invisible to the user, they are still accessible through the DOM and thus cause that the drop event is fired.

Check out the example on jsFiddle: http://jsfiddle.net/2p56Y/.

Solution 1

One solution is to wrap the code in the function which is assigned to the drop event into this condition:

if ( $(this).position().top < $('.box').height() && $(this).position().top > 0) {
    // code within this condition will only be executed
    // if the draggable is dropped on an item
    // somewhere within the wrapper
}

See the modified example on jsFiddle: http://jsfiddle.net/5NuLa/5/

This solution seems to work in all scenarios I’ve tested, but it looks a little bit like a hack.

Solution 2

Solution #2 is cleaner because it uses functionality of the droppable component.

$('.item').droppable( {
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: "#draggable",
    tolerance: 'fit',
    drop: function( event, ui ) {
        alert("dropped");
    }
});

If the tolerance option is set to “fit”, the drop event is only triggered if the draggable is placed exactly within the droppable item. In this example it works, but if the if the draggable is bigger than the droppable it won’t work. It’s also not working if the draggable is a lot smaller than the droppable. Code: http://jsfiddle.net/CcthK/1/

Summary

Looks like there’s currently no easy and elegant solution for this problem, but with above approaches you can work around it. I actually asked the question on Stack Overflow. Check out the comments, there are some really good ones.

Ruby is just so simple:

ruby-1.8.7-p302 > 'ff'.to_i 16

 => 255

ruby-1.8.7-p302 > 255.to_s 16

 => "ff"




]]>
			http://blog.project-sierra.de/archives/1907/feed
		0
		
		
		
		http://blog.project-sierra.de/archives/1877
		http://blog.project-sierra.de/archives/1877#comments
		Sat, 01 Jan 2011 00:12:06 +0000
		Stefan Siebel
				
		

		http://blog.project-sierra.de/?p=1877
		
			

I just read this Gimp tutorial and tried it out: Gimp Tricks: Fake Fill Flash
Before:

After:

I like the result, specially because it took me only a couple of minutes.



]]>
			http://blog.project-sierra.de/archives/1877/feed
		0
		
		
		
		http://blog.project-sierra.de/archives/1871
		http://blog.project-sierra.de/archives/1871#comments
		Thu, 30 Dec 2010 21:33:07 +0000
		Stefan Siebel
				
		

		http://blog.project-sierra.de/?p=1871
		
			

I’m currently reading Watts S. Humphrey’s Reflections on Managment. After being doubtful at first, I really started enjoying to read the book after a while.
One thing, which I think is really important is Humphrey’s demand to always make a plan (1). Plans prevent chaos, the are (2)

A basis for agreeing on the cost and the schedule for a job
An organizing structure for doing the work
A framework for obtaining the required resources
The standard against which to meaure job status
A record of what was initially committed

The reason most people don’t like planning and plans is that they are used to incomplete plans and plans which by far do not reflect reality. Good plans (3)

Have to be accessible to everyone involved in the project (really everyone)
Have to be clear
Are specific – what, when, by whom, for how much?
Are precise – Relative term! A three year project, probably won’t be described in days. A two day project however could be described with a detail level of hours.
Are accurate

Inaccuracy of plans is one of the most common reasons why people don’t like plans and don’t make plans in the first place. You’ll often hear “Why to make a plan, it will be out of date tomorrow”. That’s not a reason. Building software is a very dynamic process. Therefore, if you can’t plan accurately, you have to plan often (4).
(1) Reflections on Management, page 139.

(2) page 29

(3) page 30

(4) page 32



]]>
			http://blog.project-sierra.de/archives/1871/feed
		0