Blog from the Loft

I was getting a bit bored with my almost one year old iPhone wallpaper photo that I took. So I went to Aperture, found another good picture, crop it portrait sized, since the iPhone screen is normally used in portrait mode, and synced it to the phone. This morning I look down on the locked screen, and realized that that top and bottom of my wallpaper picture is obscured by the time and the unlock control.

Duh !! They designed that screen to display a (heavily) letterboxed landscape picture !!

Technorati Tags: apple, iphone

After playing SpyMaster for a day, it clicked — Since the game cycle is in multiple of 5 minutes, it can be integrated into a time boxing ‘(10+2)*5′ procrastination hack. The best explanation for this procrastination hack is at 43 Folders. Basically focus on one single task for 10 minutes, then allow yourself to be distracted and go have “fun” for 2 minutes. Checking and playing SpyMaster an be your 2 minute reward.

Technorati Tags: business, GTD, social media

Encourage user to put spymaster messages into their tweeter stream in exchange for more game points — More PR for spymaster.

Technorati Tags: business, social media

I have been keeping a paper based work journal all my professional life. I have a bookshelf of them. While I live pretty much on the web, I find there is nothing (yet) that can replace jotting down notes, pen on paper.

I switched systems many times. Most recently, I had an inspiration — Combine Levenger Circa notebooks with a good scanner, my SnapScan S300M, I can have the best of both worlds. I would take notes on the Circa notebook, and then scan them into PDF for electronic archiving.

Well, I finally decided to try the scanning process. What I feared came true — the circa “holes” are not meant for a scanner’s auto feeder. The leading (moving) piece of paper will snag the next sheet, resulting in a mess. Take a look at the second picture — how it chewed up the second paper.

Fortunately, the SnapScan is good enough, and my hand-eye coordination is good enough, that I can hand continuous feed papers one sheet at t time into the scanner. It is a bit more work, but I also get over the max 10 pages at a time limit of the SnapScan.

So the system seems to work. Now if only my hand writing is good enough for some sort of OCR based PDF searching, then the system will be complete.

Technorati Tags: GTD

Our process for developing a website is to help the client express their brand and customer base, to help our designers come up with a consistent and effective design. Often, as a project picks up attention, the client committee size grows, or new people take charge, and they started “contributing” to the visual design over and over.

This is one respond I wrote today:

Sorry to be direct, but we are heading down the wrong path and time is precious:

It is not productive to spend time on the look. Designing by a revolving committee will never get us anywhere. Trust us on the current look—it’s a synthesis of ideas that has a lot of consistency to it.

In fact, the content management system is designed to discourage any visual tweaking by the content writer. Can you imagine all the New York Times reporting wanting to specify what font and colors for their articles when they are writing? We just need the content, and leave the visuals to the graphics designers.

So let’s get the content written, approved, and entered. And we are good.

Technorati Tags: business, web design

I did it. I bought a rebuilt single speed bike from Bikes Not Bombs last week, and I am on my third day of commuting by bicycle. Yes, my new office is only 0.6 mile away from home. But I actually use the bike to head to meetings in other parts of town, to the bank, etc. It really works well. It helps that the weather is getting better and better too.

Having not rode a bike for many years, it was not easy. Together with the lacking of general aerobic exercise thru the winter makes for a challenging start. There are also the other related things like getting the bike thru doorways, carrying it up and down a flight of stairs, finding good places to U-Lock it, that are all part of the commuting experience.

I’ll have to give an update each week to see how it goes.

And here is the bike: A Jetter with all new JIS single speed parts, and a wald basket. Apparently there are very few Jetter’s around. Googling found almost nothing about this NJ manufacturer. It was “love at first sight” at the bike shop. I like the bright blue with the well worn look. It has just the right urban and unique feel to it.

Technorati Tags: bicycle

Now that I have a good bluetooth headset (the Jawbone 2), I need to toggle the bluetooth interface on and off all the time on the iPhone. When I don’t need it, switching off saves battery. Normally it make sense to have the bluetooth on/off setting under, well, settings (settings – general, to be precise). However, the Apple software limits the use of the bluetooth interface to nothing except making phone calls. So why is the bluetooth on/off switch a switch within the phone application?

I hope the iPhone 3.0 software (tomorrow!) enables A2DP bluetooth support so that I can listen to podcast on my bluetooth headset while walking to work.

Technorati Tags: iphone

I am working on an application that, besides providing a dynamic website, also talks to an iPhone application. What happens when the iPhone, or a web visitor, triggered a bug in the application?

Django actually provide a nice mechanism to report error in its “batteries included” goodness. You can easily setup the Django environment so that it will send you an email when a “server error” occurs. You just need to make sure the following is setup:

Outbound email working

The django environment must be able to send outbound emails. The actual requirement depends on your server environment, but you definitely need to have correct values setup for:

settings.EMAIL_HOST
settings.EMAIL_PORT
settings.EMAIL_HOST_USER
settings.EMAIL_HOST_PASSWORD

Admin users

settings.ADMINS — this is a list of lists (or more accurately tuple of tuples)
settings.SERVER_EMAIL — email address of the error reporting from address
Debug Setup

settings.DEBUG=False

500.html and 404.html

Once DEBUG is off, Django will want to display your 500 or 404 page. Create these pages and make them available on one of our template directories.

Example

Here are some sample entries from my settings file:

EMAIL_HOST=’smtp.webfaction.com’
EMAIL_PORT=25
EMAIL_HOST_USER=’my_mailbox_name’
EMAIL_HOST_PASSWORD=’my_mailbox_password’
SERVER_EMAIL=’webmaster@imperial-consulting.com’
ADMINS=( (’PK Shiu’, ’support@imperial-consulting.com’),)
DEBUG=False

Reference

• Django settings file settings
• Django e-mail configuration
• Django Error Reporting via Email

I blogged this before, the ringer on/off switch on my iPhone fell off soon after I bought the phone (yes, on launch day). Last week, the audio jack broke as well. The mic-input is not working anymore. This is a problem for me as I use a wired headset all the time with the phone to listen to music and to make calls.

Of course, one quick schedule and visit to the Genius bar, and I have a new replacement phone. The only quirk that I ran into is that when I restore my phone from backup, it did not restore everything. Specifically:

• I have to re-enter all my email account passwords
• I have to re-arrange all my apps on the screen pages

One additional observation that I have is the new ringer on/off switch feels different from my old one. It is much looser and snap into position quicker. The old on was much stiffer — and I wonder if that’s the reason why it broke so easily.

I run into this issue all the time. Inside a callback function,
like a function that response to OnClick, do I use this,
$(this), or event to get to what I need?

Let’s use a real example to demostrate what to do: A web page of
biography for a website uses a side menu to select one of several bios
to display in the main area. Doing this in JQuery means that we want
to hook a handler to the click events of each of the <A> element
in the menu. When a menu item is clicked, we will display the
corresponding biography enclosed in a <DIV>

HTML

Here’s the HTML for the menu area and the biography area.
I am using ID’s to distinguish each biography.

Line 1 gives the menu a class of MENU so that we can
easily find it in JQuery.
Line 2 to 4 provide three menu items for the user. Notice
that at line 3 and 4, there are extra styling for the menu text.

Line 7 and on are three DIV’s with ID corresponding to each
of the menu items. Each DIV has a class of BIO, again for
easy selection by JQuery.

<ul> class="menu">
<li><a href="#" id="1">1. Click me to show first bio.</a></li>
<li><a href="#" id="2">2. Click <em>me</em> to show <em>second</em> bio.</a></li>
<li><a href="#" id="3">3. Click <strong>me to show third</strong> bio.</a></li>
</ul>

<div class="bio" id="1">
Biography for person number one.
</div>
<div class="bio" id="2">
Biography for person number two.
</div>
<div class="bio" id="3">
Biography for person number three.
</div>

JQuery: Initialization

The following initialization code first hides all biography divs on load,
and then show just the first one by default. Notice how we use the
:first selector to make selecting the first matching
DIV easy.

Line 9 attach our function click_me to the menu.

$(function(){

    /* Hide all bio divs, then show the very first one. */
    $(".bio").hide();
    $(".bio:first").show();

    /* Hook the onClick function, any A inside an object with
       class menu (UL in this case) */
    $(".menu A").click(click_me);

});

JQuery Handler Function

Here is the handler function that we hooked to the anchors in
the menu. Can you guess what’s the console log output would be?

function click_me(event){

    console.log('clicked');
    /* "this" is DOM element attached by the function */
    console.log('this=' + this);

    /* "event.target" is DOM element receiving the event, can be a child */
    console.log('event.target=' + event.target);

    /* Show the bio selected */
    var s = ".bio[id=" + this.id + "]";
    $(".bio").hide();
    $(s).show();

    /* Silly effect to show the use of $(this). */
    $(this).fadeOut();
    $(this).fadeIn();

};

Here is the explanation:
1. this inside a JQuery event handler is the
DOM element that has the handler attached. This (sic) this is
not necessarily the A link itself. If we have attached the
handler to something else, like the containing DIV, we will
get the DIV DOM element doesn’t matter which inside elements
of the DIV we clicked. In this case we have attached the click_me
function to the anchors (A) themselves, so we are safe
to know that this.id will give us the ID specified
within our A tags.

2. The standard argument passed to the function, event
is the eventObject;
It is a JQuery structure the contains many useful attribute regarding
the (click) event. Specifically event.target is the DOM element received the click event.
Note that it will be “the DOM element that issued the event. This can be the element that registered for the event or a child of it”.

For example, in menu item two, if you clicked on the word “me”, it will
be the span element, not the A element.

3. Finally, when you turn this into $(this),
you are creating a JQuery object out of, well, this.
Turning a DOM element (the A in this case) into a JQuery object
allows you to use all the JQuery functions on it. We do not really
need to do that here, but just as a demonstration, we use $(this)
to fade the menu item out and in. We need to turn the A into a
JQuery object so that we can call the JQuery fadeOut
and fadeIn functions.

You can see a working version of this example here.