Archive for the ‘Development’ Category

I’ve spent most of this week doing hardcore pair programming on a new web app that we’re working on at SEO Logic. But my daughter was sick today, so I ended up working from home while my wife taught her classes at the Homeschool Coop. We didn’t let this stop us from continuing to pair program, however.

If you use iChat, you may have noticed a small double-rectangle icon at the bottom of your buddy list:

So all I had to do was plug in a USB headset for audio in and out (echoes and feedback otherwise), select my programming partner from the iChat window, and click that icon to start screen sharing.

After a few seconds, he could see my desktop in real time and full size on his machine, while his own desktop floated in a minimized window. Either one of us could control my laptop, with full support for keyboard shortcuts… everything you would expect to be able to do if sitting side by side with a second keyboard and mouse.

Surprisingly, the one keyboard shortcut that he could not execute remotely, instead affecting his own computer, ended up being a handy one– command-shift-3, used to take the screen shot above.

I should point out that we were both on laptops with connectivity through 801.11g wireless routers, and there was absolutely no discernable lag in voice communications, keystrokes, or screen drawing.

A couple of years ago we were blown away by SubEthaEdit, which let multiple people edit the same document in real time. I remember wishing at the time that BBEdit would let you do that. Now with iChat screen sharing, that’s a reality.

After upgrading to BBEdit 9, I’ve happily left TextMate behind and returned to my favorite bare-bones IDE for Rails development. (I’m planning to share some tips on this topic this weekend.)

I just came across a very strange bug that crashes BBEdit, and thought I’d share a workaround in case someone else has this problem. The bug report has already been filed.

Operating environment:
BBEdit version 9.0 (1320) of Wed, 27 Aug 2008
Mac OS X 10.5.4 Build 9E17

To reproduce:

• Create a new file
• Set its type to Ruby using the menu at the bottom of the window
• Type (not paste) the following, exactly as you see it here:
  

  "tag-#

BBEdit will now invoke the spinning beach ball of death, start consuming massive CPU cycles, and never recover. Note that I have text completion triggers turned OFF, so that’s probably not the problem.

The workaround for this is (and any similar string that brings this on) is open the Scratchpad window (Window -> Show Scratchpad), type your string in there, and paste it back into your Ruby file.

I should point out that a couple of minor issues aside, I’m incredibly happy with this upgrade. And given my history with Bare Bones, I expect fixes to be forthcoming quickly.

About a month ago, I replaced my old SVN GUI client (svnX) with the excellent Versions SVN client from Pico. I won’t rave about it now; check it out for yourself and bask in the goodness.

One of the unfortunate side-effects of using Versions, however, was that after the mandatory upgrade of SVN from 1.4 (OS X default) to 1.5, BBEdit’s SVN support was broken. I kept getting the message “svn: This client is too old to work with working copy“. Grr.

I looked around in BBEdit’s preferences and even .plist files, to no avail. This morning I even filed a bug report with Bare Bones. Turns out that that was premature… BBEdit was doing the right thing all the time, using the system’s SVN. The problem was that I had multiple versions of SVN installed.

From the command line:

Cerberus:bin bantik$ which svn
/usr/local/bin/svn
Cerberus:bin bantik$ svn --version
svn, version 1.5.1 (r32289)
   compiled Jul 25 2008, 12:47:20
...

As expected. However, this was less than expected:

Cerberus:bin bantik$ find / -name "svn" -print | grep svn
/opt/subversion/bin/svn
/usr/bin/svn
/usr/local/bin/svn

OK, but maybe some of those are links?

Cerberus:bin bantik$ ls -al /opt/subversion/bin/svn
-rwxrwxr-x  1 admin  admin  788520 Jul 25 14:05 /opt/subversion/bin/svn
Cerberus:bin bantik$ ls -al /usr/bin/svn
lrwxr-xr-x  1 root  wheel  23 Jul 13 09:41 /usr/bin/svn
Cerberus:bin bantik$ ls -al /usr/local/bin/svn
lrwxr-xr-x  1 root  wheel  23 Aug  3 19:39 /usr/local/bin/svn
       -> /opt/subversion/bin/svn

Aha! I’ve got an old version of SVN at /usr/bin. So let’s replace that with a symbolic link to the new version:

Cerberus:bin bantik$ sudo rm /usr/bin/svn
Cerberus:bin bantik$ sudo ln -s /opt/subversion/bin/svn /usr/bin/svn

That should do it. I restarted BBEdit just to make sure, and now, like magic, Subversion integration works again.

I was inspired this week by a post on the Rails Google Group by Melvin at 48hourlaunch.wordpress.com, who was asking for suggestions on a software problem to tackle with 48 hours of effort.

I’ve got what I call a “magic notebook”– several, to be precise– full of app ideas in various stages of ideation. So I decided to take on this challenge as well and see what I can do with one of them.

Like Mel, I’m taking on a project that meets one of my immediate needs and is well within my area of expertise. So I’ll be creating something that is useful to me and also has a broader market appeal.

One of my defining characteristics is the inability to do things halfway; unfortunately, this can sometimes manifest as “analysis paralysis”, overengineering, etc. Although Rails inherently short-circuits a lot of these tendencies (as does my business partner, for that matter!) the strict time limit I’m putting on myself makes this something of a competition between completion and perfection. At worst, I will move one of my unrealized applications one step closer to market, and hopefully learn something about my internal process along the way.

So what’s the big project going to be? Can’t talk about that yet, but if all goes according to plan there should be something public in within the next 30 days (48 hours / 2 hours per day = 24 days). I’ll also be posting notes about my progress as I go.

One of Internet Explorer’s famous shortcomings is its lack of native support for transparency in PNG images—one of the very characteristic that makes PNGs so appealing to begin with. Here’s how to incorporate transparent PNGs into your site in a way that all browsers will handle, using only Cascading Style Sheets (CSS).

1) The Approach
We’re going to put each image into the document twice: once in a way that Internet Explorer will understand, and once in a way that standards-compliant browsers can understand. In both cases, we’re going to use an appropriately classed <div> element:


<div class="png_standard"><img src="my_graphic.png" width="150" height="294"></div>

<div class=”png_ie” style=”width=150; height=294; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’my_graphic.png’, sizingMethod=’scale’);”></div>

This results in one image and an empty <div> showing up for Firefox and Safari, and two images (the first without transparency) showing up in IE. Note that you must specify the height and width of the image in the style tag of the png_ie <div>!

2) The Following Line is True. The Preceding Line is False.
Now we’re going to use CSS selectors to only show the <div> that’s appropriate for the browser. It’s crucial that these CSS rules are included in your style sheet in the order presented!

We’re going to take advantage of a non-standard CSS selector that only IE recognizes: * html.


div.png_standard {display: block;}
div.png-ie {display: none;}
* html div.png_standard {display: none;}
* html div.png_ie {display: block;}


Read from top to bottom, these rules state:

• Display any <div> with class=”png_standard” in the normal way.
• Do not display any <div> with class=”png_ie”
• If you are IE and can read this, hide any <div> with class=”png_standard”
• If you are IE and can read this, show any <div> with class=”png_ie”

3) The Last Step
Actually, there is no last step That’s it! For standards-compliant browsers, the <div> containing the transparent PNG is displayed normally, and the <div> containing the ugly IE code is hidden away. For IE, the <div> that it does not understand remains hidden, and it renders the <div> that forces it to recognize PNG transparency.

Transparent PNG in Internet Explorer for Windows:

And in Safari for Mac OS X:

4) Sample Code
Assuming that you have a PNG named my_image.png, the following page will render appropriately in all browsers:


<html>
<head>
<style type="text/css">
div.png_standard {display: block;}
div.png-ie {display: none;}
* html div.png_standard {display: none;}
* html div.png_ie {display: block;}
body { background-color: #bdbdce; }
</style>
</head>
<body>

<div class="png_standard"><img src="my_graphic.png" width="150" height="294"></div>

<div class="png_ie" style="width=150; height=294; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='my_graphic.png', sizingMethod='scale');"></div>

</body>
</html>