Bearfruit

Last week, around May 2nd or 3rd, my daughter learned to crawl. It’s been a week so now she’s officially at that stage referred to as, “no really, don’t take your eyes off of her!”

So now I’ve got this challenge that so many people before me have faced. How to get her to be stationary for a little bit. This is my brief and whimsical diary of a few experiments.

Attempt one
I’ll call this one, immobilize, I stumbled on it by accident and it worked for a good 30 or 40 seconds. It gave me the inspiration to do this investigation and try to find a technique that would work, possibly for even longer!

As you can see this technique is quite simple because all you have to do is entangle the legs. Unfortunately it is simple but ineffective after the first time. You’ll notice the picture above is a bit blurry… I forgot to flip up the flash on the camera so it chose a slow shutter speed. Quicker than I was able to pop the flash and snap another picture she had escape the entanglement.

Attempt two
Best called distraction, this technique works quite well in certain circumstances. Basically you lay cheerios on the floor in a path that leads nowhere.

Unfortunately there are numerous ways this can go wrong. Also this technique means you will be vacuuming the floor more often than you will be washing your hair.

Attempt three
This attempt was a miserable failure. Nothing more needs to be said - except that I had no idea a 10 month old could lift up a laptop.

Attempt four
The tried and true technique.

It never fails.

I have a theory and so far it has worked out correctly. There are three ways to complete a web application project. The wrong way is to skip the planning step and just start designing and coding. This greatly decreases the chance of finishing your project. However there are two ways that I’ve used to complete projects:

1. planning
2. coding
3. designing

In essence you write your code and then make it look pretty after you’re done.

1. planning
2. designing
3. coding

With this you create the look of your application and then add the code afterwards.

My theory is that getting the application or website’s interface done first and then doing the code afterwards helps you get it done more quickly. So far it’s helping me.

I was talking to a good friend of mine - one of the most elite graphic designers I know - and he made a simple comment that, as often happens when speaking to someone of great wisdom, communicated something with tremendous meaning in only a few words. It was something I knew but would have been hard pressed to describe or communicate to others.

It was about using graphics on websites but has a far broader scope than that. I’ll reword his statement somewhat to remove the context of the original conversation. He said that if you notice the drop shadows then the designer has failed.

The meaning here is that graphical effects such as drop shadows, glossy buttons and the such are there to help you communicate some information. The goal is not to show the world that you know how to make a drop shadow, the goal is to use a drop shadow to draw attention to an important element. Therefore if someone has noticed your drop shadow you’ve failed to draw attention to an important element, instead you’ve distracted your user.

The same goes true for desktop animations and effects in Ubuntu/Compiz. There are two reasons to use effects - you can use effects to make the desktop users more productive or you can use effects to create a nifty (or not nifty) animation.

Powerpoint users have been struggling with this same set of options for a decade. It may be fun to make your presentation use a lot of animations but it rarely helps your presentation at all. As a matter of fact, it usually distracts your viewers and hinders your presentation.

It’s a challenge to look at your design and scrutinize it to ensure you’re using design elements to draw attention to the proper parts and avoiding distracting with unneeded features. Yet it is necessary.

OK, I’ve been trying to think of a way to report this problem for a while. Who does it go to, GNOME HIG, Ubuntu, Usability, Art team? I’ll probably send it to all of them but in order to simplify my explanation, this blog post exists.

In brief: GTK dialogs are way too big and they tend to waste a lot of screen space. To demonstrate my point I’m comparing the File Save dialog from Gedit and Windows XP Notepad. You’ll see that the Windows XP dialog is far smaller and yet communicates significantly more useful information. This is accomplished because it makes more efficient use of the screen space. It does this without being any less usable, and actually, because of it communicates more useful information can be more usable under some circumstances.

This image shows the two dialogs side by side. I’m using Virtual box’s seemless mode to show the two applications at the same resolution (1280x800, 96dpi) at the same time. In this view you can see that the Windows XP dialog communicates far more information - there is room for more files (14 files shown in XP, 9 in GNOME) and there are more data columns (XP includes the date, like GNOME, but also file type and size). Otherwise the dialogs are pretty similar as far as the capabilities.

But the Windows XP dialog is able to do this in about half the space (256k pixels vs 455k pixels). Here’s a picture showing the dimensions:

In the XP dialog there is no wasted space. Somehow they are able to use this space very efficiently without making the dialog crowded or feeling like parts of it are competing for your attention. The GTK dialog has massive amounts of wasted space. Huge expanses of just empty pixels, tons of padding around the file names in the list, and look at the gap between the end of the file name and the column where the date is shown.

I wish I could help fix this problem by actually coding, but I’ve looked at the code and frankly glib scares me.

If you have a comment for me or as a suggestion on the proper way to report this problem leave it below. Once I get a bug report I’ll paste a link to it and the best place to comment on the problem will be on the bug report.

My current task will be assisted by showing an iframe but without the distinctive scrolling of an iframe. So if the iframe content is 350px high the iframe should be 350px high so that it appears to be part of the content above and below it. I’ve seen people refer to this technique as “100% height iframes” but I think that’s a misnomer or at least confusing since some people want an iframe that fills the height of its parent container. I just want an iframe that looks and acts as if its content were part of the normal page content and not on a separate site.

This isn’t so hard to do when your content is all on the same domain but when you need to work across domains its far more difficult because of the same domain security policies all browsers enforce. But there are ways to do it and the way I’m using now is clever and not well documented on the web. As a matter of fact, if it is documented I couldn’t find it. It does not require an iframe within an iframe nor does it require that the iframe’s content be tailored to the site that will be embedding the iframe. I’d love to hear any advice or suggestions for making it better.

In a nutshell, you simply have the iframe detect its referrer, which should be the parent frame, and then change the parent frame’s URL to add a hash/fragment which includes the height of the inner iframe’s content. A script on the outer frame watches for the hash to change and then once it does, gets the height and resizes the frame. Code is below.

The problem with this is that in firefox the back button needs to be clicked twice to go back after the iframe’s content loads. In IE this doesn’t happen and I’m not sure which browser is doing things wrong. However Google may be using a similar technique for their custom search feature because they have the same problem. I seem to remember in olden days there was a way to remove items from the browser history… brief searching reveals no code though so I’m going to have to dig through some books to find out what I’m remembering (or mis-remembering maybe).

Remarkably, this is the exact opposite problem a lot of ajax applications are experiencing. I’m trying to remove items from the history and they try to add items. :-)

Anyway, here’s the code, please please please leave comments if you’re trying this. I’d really like to know if I’m on the right track.

In the iframe, you need this: (it uses mootools for the domready event but it could as easily be in the body’s onload event)

<script type="text/javascript" src="/scripts/mootools.v1.11.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
ref = document.referrer;
h = document.body.offsetHeight;
if( top != self && ! (ref.indexOf('#') >= 0) ) {
    // create a url like #h312-6789 where 312 is the height
    top.location = ref+'#h'+h+'-'+parseInt(Math.random()*1000);
}
});
</script>

In the page that will embed the iframe you need this code: (this does not use mootools)

<iframe src="http://path/to/iframe.html" width="100%" frameborder="0" marginheight="0" marginwidth="0" id="downloadframe" style="height:350px"></iframe>
<script type="text/javascript">
    function checkFragment() {
        h = document.location.href.indexOf('#h');
        l = document.location.href.length;
        if( h > 0) {
            u = document.location.href.substring(h+2,l);
            // u will be like 312 or 312-123456 and we only want the 312
            height = parseInt(u.split('-')[0]);
            setFrameHeight(height);
            clearInterval(frameint);
        }
    }

    function setFrameHeight(height)
    {
        var frame = document.getElementById("downloadframe");
        frame.height = height + 20; // there's a bit of scroll without the 20
    }

    // our interval
    var frameint = self.setInterval('checkFragment()', 500);
</script>

In the first script you need to change the path to point to mootools or change it to use the body’s onload.

In the second script change the path in the iframe tag to point to the correct content then also change the height of the iframe to be something reasonably close (but a little long) to what you expect the height to be. Its better to be too long than too short since people read the pages from top down. If the iframe starts out too small you get a weird glitch where it shows up with scrollbars at first and then the the content suddenly grows so that the scroll bars disappear causing the content to also widen and reflow slightly. Its not a big deal but if you start out too long then the change in height is almost imperceptible.

OK, here’s the problem… you want to test a website by sending custom headers, but the website uses https. Normally you’d just telnet to port 80 like so:

telnet www.somesite 80
GET /index.html HTTP/1.1
Host: www.somesite


(Note you need to press enter twice at the end)

This would be a valid HTTP GET request and you’d see the server’s response headers and response data. But with an SSL website this won’t work at all. What do you do?

Use openssl of course. The openssl s_client program works perfectly here:

openssl s_client -connect www.somesite:443
[watch the ssl certificate details scroll by]
GET /index.html HTTP/1.1
Host: www.somesite


(again you need to press enter twice)

VOILA! But one gotcha… when using telnet the webserver would patiently wait for me to type out the request completely. s_client does NOT. So type out your request in a text editor and have it ready to paste in right after the ssl cert details scroll by.

I’ve only tried it with Ubuntu Linux but it should work on any Linux and Mac OS if you have openssl installed. There is a version for Windows too.

Thanks Ng, one of the phenomenal Canonical sysadmins for this tip. Also, Steve Langasek, the Ubuntu release manager suggests gnutls. It works similarly:

gnutls www.somesite


No need to specify a port number or use any command line options. Note that like s_client you need to be ready to paste your request in. apt-get install gnutls-bin will take care of you here.

I have a few servers (virtual and physical) and all of them run Ubuntu 6.06 LTS (aka Dapper Drake). Until now. I did my first LTS to LTS upgrade and it went without a hitch. So now I’m running mostly 6.06 servers and one 8.04 server.

I was very brave, maybe foolish even. I didn’t create a snapshot of the server before I started. 8-) I just did the upgrade. Apache upgraded fine as did MySQL, Django, Python and Samba. There are some warnings about upgrading SSH in place but I did it and had no issues. There were numerous warnings about needing to upgrade grub that scrolled by but the installer handles these for you automatically so you can disregard the warnings.

I did this because I wanted to install couch db (via) which is an exciting distributed database project. My first impression is that it is an excellent and exciting project but I will do more investigation and report later. In the meantime, test the LTS to LTS upgrade!

My class last night seemed to enjoy an illustration I gave so I decided to share it here. The class is the first of 5 I will teach called “Getting a better spouse,” which is a poor name, but the goal is to make our families stronger by improving the husband and wife relationship. The common denominator of all the people in the class is that we all have kids and as any parent knows, sometimes life seems incredibly busy. Also at times it can feel like our kids are the center of our families and all life revolves around them.

As parents its critical to admit that one of our most important job is to raise our children properly (cf Proverbs 22:6, Deuteronomy 6:6-7). But that doesn’t mean the children become the center of the family. They need to learn that the world does not revolve around them. Therefore the class’s goal will hopefully help draw the mom and dad together. Doing this helps the whole family.

But… the husband/wife relationship is not the most important relationship in the family. The most important is the parent/God relationship. God invented the family and He knows how to make it work best. Not only that, but He knows our temperament, gifts and needs better than even we do ourselves. He also knows what’s coming down the road. When we draw close to God we benefit in too many ways to describe, but the most relevant to this topic is that it helps us as parents make wise decisions for our families. So here’s the illustration:

I have a two story house with a finished basement. If I’m on the top floor and my son is in the basement and I want to give him instructions, what do I do? Do I try and yell detailed instructions across the house? Picture it, “Son, I need you to make your bed and clean your room, also, take your dirty clothes to the laundry and brush your teeth.” The son can’t hear me well so he yells back, “What?” So you try again and he yells back, “What?” Wouldn’t it work much better if you just said, “Son, come closer, I need to tell you something.”

When we get too busy to spend time with God daily we start to distance ourselves from Him. And admit it, its easy to go far longer than a couple days. If you’ve gone weeks or months without opening your bible or praying seriously it’s like you’re on different ends of the house. You have no clue what God’s trying to tell you, you need to get closer.

So the point of the class was to encourage people to work on the relationship with God. If you’ve gotten away from doing it you’re probably discouraged and if you’re a normal parent the thought of setting a substantial amount of time aside from your already hectic day sounds impossible. Therefore I taught the class my technique for getting back on track, “7 minutes with God.” I’ve found that finding half an hour is hard but I can find 7 minutes.

This topic warrants another blog post but in a nutshell it works like this, and its utterly simple - about two minutes goes to prayer, but not your normal prayer. Do nothing but praise God. You have no problem making time during the day for prayers like, “God help me with xxxxx!” so this prayer time is for remembering who God is and how great He is. “God, thank you for the rain, I can’t wait to see the flowers bloom and the green grass…” Then the remaining minutes go for a mini bible study.

If the need to lug a bible around will make it difficult for you to do your 7 minutes then you can print out a chapter of the bible from www.biblegateway.com and stash it in your pocket so that you have it. Note that five minutes of reading time is probably not enough to get through a whole chapter - don’t rush it, it’s ok if you just get a third of chapter in. As Henry Blackaby so rightly said, “God can speak to you on any page of this book.” And the goal of the 7 min is to encourage you to get closer to God, not speed through the pages. I’ve found that once I get back on track the thirst for the word grows and I’m better able to find time for more in-depth study.

I’d love to hear your comments.

Strong words, I know, and there are definitely some qualifying statements. I am not throwing out Eclipse just yet because it can still do some things that Netbeans doesn’t. But first, let me say that I’m excited by Netbeans 6.1, which is currently in Beta. I’m excited because I see in it a product that will challenge Microsoft’s Visual Studio, especially for new users and those doing development without a computer science background.

Netbeans has a simple but powerful GUI designer. Create your application window, drag buttons onto it and then double click them to add code and events. If you’ve used the GUI builder in VBA applications, it looks and works a lot like that. And it is extremely easy to learn while at the same time providing powerful layout helpers.

Netbeans is also tightly integrated with a web application server which enables you to quickly write and debug web applications. Create your JSPs and servlets, hit run and voila!

The Netbeans website and documentation is readable by people who don’t yet know Java. I can’t tell you how important this is. The biggest barrier to Java adoption is all the acronyms. The tutorials are easy to follow and don’t assume you’re a CS expert. This is glorious! In 20m you can build a graphical calculator program and in 45m you’ll be building CRUD style graphical database applications.

And the best part is, unlike with Visual Studio, your applications will run on Windows, Mac OS, Solaris and Linux.

One more esoteric feature I like is that there is already a plugin for a distributed version control system. It’s mercurial, which is not the dvcs I use (I use bazaar) but that a plugin already exists implies it will be easy to integrate other dvcs systems. It also integrates SVN and CVS support.

So besides the above, why do I think Netbeans beats Eclipse?

• Netbeans is an IDE first, and a platform second. Through and through, Netbeans is a tool for writing code. Contrast this with eclipse, which, quoting from their homepage, is an “open development platform comprised of extensible frameworks”
• Netbeans is moving quickly. New features are being added and they’re being added in a way that makes them useful and mature. I’m not sure why eclipse lacks SVN and DVCS support, I’m not sure why there’s no GUI builder and I have no clue why you need a plugin to debug web applications.
• The features - SVN, application server, built in database access, web services support

With every line of code I write I start to like it more.

So where does Eclipse beat Netbeans?

• More programming languages supported. PHP is a biggie. There are at least 10x more PHP developers than Ruby on Rails developers, yet Rails is tightly integrated and PHP is derelict. For the record, I’d enjoy Python/Django support too.
• For RCP type applications Eclipse is better because it looks like a native program… on Windows it looks like Windows, on Linux/GTK it looks like GTK. That is nice. But if I were building an RCP application I’d still use Mozilla/XUL rather than eclipse, simply because it uses web technologies like XML, CSS and JS.

So where do they both need to improve?

• I’d like a GUI web page builder. Similar to the GUI form builder.
• I want to debug PHP web applications. And I’d like it to work out of the box on both Windows and Linux.
• I need easy testing of web applications in multiple browsers. Since Gecko (firefox) and Webkit (Safari) rendering engines are both free and open source, why can’t these be embedded into the IDE?

Things I’m looking forward to trying:

• I see there is a PHP project for netbeans but it doesn’t install on 6.1 beta and it looks like there are many steps to getting it working. I’ll keep my eye on it.
• I’ve been reading books and playing with Rails in my very limited free time so I look forward to giving it a shot in Netbeans. I wonder if it has the same quality of debugging as servlets.
• There is a RESTful Web Services plugin.

PHP web applications tend to be very easy to deploy. You simply upload the application and it works. Maybe your application needs to have an install.php that creates the database tables but that’s hardly difficult.

The next easiest applications are cgi apps. In addition to uploading, users need to know if they have a special cgi-bin folder that they upload to and ensure they upload to it. They also need to know how to make a file executable. However no server configuration needs to be done.

The leap from the above two types of web applications to the remaining types is quite different. Servlet, Python and Ruby on Rails applications tend to be far far more difficult. They require editing server configuration files and installing software that is far less common. For example, a servlet often runs separate from your web server and static images/css need to be served by the web server while the servlet is not. Rails likes a similar model that uses fastcgi for dynamic content. Python applications prefer modwsgi or modpython (but often work fine with a config similar to Rails).

It makes it difficult to choose an application development platform, especially for open source projects, other than PHP because comparatively speaking, it’s very difficult to deploy the applications.

Below is a chart from google trends comparing the search popularity of PHP compared to Ruby on Rails. Interestingly, if you search google trends for PHP alone and Ruby on Rails alone you will see the search frequency for both phrases is declining. Asp.net is also declining. Django is increasing but its hard to compare django since it’s popularity goes back further than the existence of the Python Django framework indicating it is a popular search term outside of the scope of web applications.

Is there any work being done to make it easier to deploy web applications? I’ve seen the Resin servlet container has a feature where once properly configured you can simply upload a war file and it self-installs. This is progress.

A year ago I was making my decision on a javascript library. At that time I felt Mootools was the best deal. It was small, it was easy to learn, the ajax was dead simple (and needed no stupid tricks like reading the HTTP header for json data), it had beautiful effects and it was fast. It was far smaller than dojo and mochikit and it was a toss-up between it and jQuery as to which would dominate in the “market” that they both shared.

In the last year though things have changed. All the good stuff about mootools is still good. However jQuery is being adopted by many open source websites and projects and is getting a larger amount of development and documentation work than mootools. They project has risen to the challenge of addressing code efficiency and download size. The jQuery community has shown itself to be open and friendly while the mootools community is starting to feel elitist.

For the record, dojo has split its mammoth library into a few different packages now so the core, which is very feature competitive with jQuery and mootools is also now in the same ball-park for download size. The benefit of dojo is that the mammoth code is still available as plugins providing the widgets and data visualization features, ready to load when needed.

Maybe its time to start re-evaluating the JS library I use.

I’ve done a couple little projects using the fabulous Blueprint CSS Framework lately. Let me just say, this rocks for getting your stuff done quickly. It allows you to create fixed-width layouts much faster than if you do your layout by hand. If you’ve already created your own CSS framework then it may not be a huge benefit, but you may still want to give it a try.

It works on the premise that you create a container that is a grid made of columns (by default, 24 columns 30px wide) and each column has a 10px gutter. Then, you assign styles to your elements that packs them into the grid. You can use an online application to generate a custom grid for you so that the result will be a layout that matches the widths you’ve specified for your site.

Even better, the css framework does a full reset of styles and fonts and then sets sane and useful defaults. There has been extreme attention to detail regarding the reset and it produces truly beautiful typography. If you’re a programmer like me and you wonder why some sites look clean and elegant but yours looks messy and jumbled you may find that blueprint’s typography and reset code will be a big help even if you leave out the grid.

I’m absolutely stunned at how much this is boosting my productivity. Layouts that used to take hours to tweak and adjust take 30min now. And because of the reset and typography they look better than before.

I’ll give full disclosure here, I think a big reason for this productivity is because by thinking inside the grid it’s caused me to design my layouts (before the html and css begins) with the grid in mind. I think to myself, ok, I need this images that is 260px wide, and I want a fixed-width page of 850px. So that means my grid must be X columns each Y px wide with a gutter of Z px. Then I bring it into inkscape and design my layout to fit. The only way I’ve gone faster from concept to working HTML is when I used Photoshop to generate it for me. And if you’ve ever tried doing that you’ll immediately recognize that statement as tongue in cheek.

My previous layout framework wasn’t really a framework but served the purpose for me, however all of my sites tended to look the same (think the old Ubuntu website/wiki, bazaar-vcs.org, fosscamp.org). I also experimented with a sliding doors layout as my foundation for non-fixed width themes but wow did that html/css look messy! (see the 2007 layout for ubuntu.com and canonical.com)

The new Ubuntu layout will have much less HTML and there will be no JS hacks needed to get things in the right places. The total CSS will be a little larger I think but since the browser caches that it’s not going to be a problem.