Joe Maller.com

iTransmogrify!

iTransmogrify! is a bookmarklet for iPhone which transforms embedded Flash content into direct links to natively supported formats. That means YouTube videos and MP3s can now be played from the iPhone’s Safari web browser with just a few clicks.

Seeing it work is the best explanation:

On an iPhone? Try it now: iTransmogrify! (works in Safari and Firefox too)

Sorry, it took YouTube a long time to re-encode that for iPhone, here’s a baby panda:

Installation

To install the bookmarklet, just drag the link to your Safari or Firefox Bookmarks, IE users should right click and choose “Add To Favorites…” After adding the link, sync your iPhone.

Grab it now: iTransmogrify!

You can also add iTransmogrify from your iPhone!

More information, source code and bug-tracking is available on the iTransmogrify Google Code page.

    Currently supported content:

  • Default YouTube Object-Embed code
  • YouTube bare Embed
  • YouTube bare Object
  • A variety of Flash-based MP3 players including Digg Podcasts

Lots more added: iTransmogrify update

Support for other embedded media sites will be added as I figure them out. Please report broken sites or suggest additional sources using Google Code issue tracker.

Acknowledgements

The first robust, script insertion bookmarklets I ever saw was Sumaato’s original Flickr GeoCoding bookmarklet.

Other sites also deserving links:

iPhone graphic reference:

Also, John Resig’s amazing jQuery JavaScript library. This project was the excuse I’d been looking for to finally dig in and learn it.

The name came from a late-night brainstorming chat with Bruce and was far more fun and interesting than the utilitarian ones I was thinking of. So thank you Bruce, and of course, Bill Watterson.


Multiple RegisterResource directives broken in Leopard

This is sort of a follow up on the old mod_rendezvous article I wrote for O’Reilly. While cleaning up my virtual hosts I discovered a bug in 10.5’s handling of multiple RegisterResource directives in mod_bonjour. This is expanded from a bug report I submitted to Apple (rdar://problem/5628484).

I keep functional mirrors all my development sites in separate Apache Virtual Hosts. Each one then gets it’s own port, which allows me to check them on local networks, in Parallels and, if I want, remotely via IP address.

To advertise two local vhosts over bonjour, something like this in httpd.conf should work:

<IfModule bonjour_module>
RegisterResource "Site 1" / 9001
RegisterResource "Site 2" / 9002
</IfModule>

After restarting Apache (sudo apachectl graceful), local copies of Safari should see the two sites, “Site 1″ and “Site 2″ in Bonjour bookmark listings. In 10.4, they show up. In 10.5, only “Site 2″ shows up. No matter how many directives are included, only the last one will be visible.

I’d love to be wrong about this, but it seems that something broke this function in Leopard.

A faster way of checking Bonjour entries is to open a terminal window and run the following command:

mdns -B _http._tcp

That will show a live updating list of current multicast (Bonjour) entries. Under 10.4, I get the following after adding the above directives to httpd.conf:

16:10:14.517  Add     0 local.     _http._tcp.     Site 1
16:10:14.667  Add     0 local.     _http._tcp.     Site 2

However with 10.5, I get this:

16:12:52.597  Add     1 local.     _http._tcp.     Site 2
16:12:52.598  Add     1 local.     _http._tcp.     Site 2
16:12:52.598  Add     0 local.     _http._tcp.     Site 2

What I’d really love to do is figure out how to register and respond to multiple Bonjour names. That way I could have each vhost be a named host and each staged site accessible at a url like site1.local and site2.local. So far I haven’t had any luck getting that working.


WordPress MySQL Cheatsheets

Here are two cheatsheets showing the table-structure of WordPress versions 2.3 and 2.2.2. Click the thumbnails to download the PDF.

WordPress 2.3
WordPress 2.3 MySQL Tables

WordPress 2.2.2
WordPress 2.2.2 MySQL Tables

I created these to help transition some custom category queries from WordPress 2.2.2 over to the terms tables in WordPress 2.3. Table keys are in bold.The pages were generated by a small AppleScript Studio app I never quite cleaned up enough to release, it reads MySQL dumpfiles then spits out nice looking tables in OmniGraffle.


Quick note about sed’s edit in place option

From the sed manpage:

-i extension
   Edit files in-place, saving backups with the specified extension.
   If a zero-length extension is given, no backup will be saved.  It
   is not recommended to give a zero-length extension when in-place
   editing files, as you risk corruption or partial content in situ-
   ations where disk space is exhausted, etc.

This doesn’t work:

sed -i -e's/apples/oranges/' file.txt

The key thing here is that the extension after the -i flag is not optional. If you leave it off, sed assumes you’ll be entering it via stdin, which isn’t allowed and yields this error:

sed: -i may not be used with stdin

The solution is to send a zero-length extension like this:

sed -i '' -e's/apples/oranges/' file.txt

Careful with this, it could be really dangerous with poorly crafted commands.


SSH Key Pair troubleshooting

For some reason I’ve put off setting up SSH key pairs, probably having something to do with how arcane most of the setup instructions appear. Tonight however, I’m unexpectedly preparing to transfer a client to a new hosting account on Media Temple and enjoying key-pair access to their new repository.

Media Temple doesn’t yet support svn:// access to Subversion repositories, only svn+ssh://. So, having been pushed, I finally decided to make my life easier with SSH key pairs.

The best tutorial I found was Allan Odgaard’s: Subversion support and ssh key pairs. Without ssh key pairs, all the fantastic Subversion integration in TextMate won’t work with svn+ssh:// repositories.

However there’s one crucial piece of information missing from that: Permissions.

If access to the SSH configuration files is not properly assigned, the ssh pair won’t work. No meaningful errors at connect time, just silent, infuriating failure.

The ~/.ssh directory permissions need to be set to 0700 and the authorized_keys file needs to be set to 0600:

chmod 0600 ~/.ssh/authorized_keys
chmod 0700 ~/.ssh

If group or world have write access to authorized_keys, key pair authentication will fail.


SlickSpeed

Valerio Proietti, author of the MooTools JavaScript framework wrote a benchmarking tool called SlickSpeed. This tool runs a number of JavaScript libraries against a suite of CSS selector tests. The source is available from Google Code, I downloaded a copy so I could run tests against the most recent versions of Prototype, MooTools and JQuery against one another.

prototype
1.5.1.1
jQuery
1.1.4
MooTools
r873 (svn)
MooTools
v1.2dev
Firefox 2.0.0.6
(Gecko/20070725, Mac)
210 454 218 243*
Firefox 2.0.0.6
(Gecko/20070725, Windows XP)
177 339 180 164*
Safari 2.0.4
(419.3)
1385** 372 837 727*
Webkit
(AppleWebKit/523.5)
120 185 154 149
iPhone
(AppleWebkit/420+ Version 3.0 Mobile/1C28)
35975 13224 25594 22811
Microsoft Internet Explorer 7
(Windows XP)
969** 421 867 811*

Results are in milliseconds (ms), smaller numbers are better. Asterisks indicate errors returned during the test.

All tests were served and run from a MacBook Pro 2.16 GHz Core Duo, iPhone tests were run on a 1st Generation 8 GB model. Firebug was disabled for the Firefox tests.

A few things which are immediately apparent:

MooTools is a solid performer. Not the fastest and not the slowest, but Valerio Proietti’s code is consistently impressive.

JQuery has gotten significantly faster in the most recent version, John Resig is also writing really good code.

At least as applies to Valerio’s set of selector tests, JQuery is the fastest library on iPhone, nearly twice as fast as MooTools and almost three times faster than Prototype. Joe Hewitt’s iUI project uses Prototype, how much would iPhone performance benefit from switching to JQuery?

The Webkit team is writing some seriously crazy speed optimizations. If they could just get Safari to stop leaking memory we’d be all set (don’t go looking all smug Firefox, you’re standing in a puddle). As it stands now, when Leopard ships Safari will have the fastest JavaScript engine available. The difference between jQuery and Prototype on Webkit and iPhone is surprising, iPhone runs JQuery nearly three times faster than Prototype using the same browser core.

Firefox runs faster in virtualized Windows than it does native on the Mac. Camino (Mac native version of Mozilla/Firefox/Gecko) was slightly faster, but still not as fast as Firefox Windows.

I’ve got one project wrapping up soon which used MooTools and I’ve been very happy with it. Lately I’ve been reading a lot of buzz about JQuery and might be working that into another project. These tests were mostly just done to satisfy my own of curiosity.


Web Syntax Coloring

February 2011 Update: This post was originally published in 2007 and hasn’t aged well. For code snippet syntax coloring, I currently use Google’s Prettify script (prettify.js). The script is dynamically inserted by jQuery if there are code elements to style.

Recently I’ve been experimenting with two very different methods of syntax coloring source code in web pages. The first method uses a Dan Webb’s CodeHighlighter JavaScript library to convert appropriately tagged content into syntax colored code. It’s necessarily simple, but easily extensible. As an example, here are the CSS rules I’m using to style CodeHighlighter’s conversions:

code.html span.comment         { color: #999;}
code.html span.tag             { color: #07f;}
code.html span.string         { color: #080;}
code.html span.attribute     { color: #07f;}
code.html span.doctype         { color: #07f;}

code.css span.comment          {color: #999;}
code.css span.keywords         {color: #fd2;}
code.css span.selectors        {color: #0b0;}
code.css span.properties    {color: #66f;}
code.css span.units            {color: #33c;}
code.css span.urls            {color: #4a0;}

code.javascript span.comment     { color: #999; }
code.javascript span.brackets     { color: #07f; }
code.javascript span.string     { color: #4a0; }
code.javascript span.keywords     { color: #07f; }
code.javascript span.exp         { color: #808; }
code.javascript span.global     { color: #06e; }

The second method uses two more fantastic TextMate features, Create HTML From Selection and Create CSS from Current Theme. What these two commands do is translate exactly what I’m seeing in TextMate into very precise and valid XHTML with accompanying CSS rules. The main disadvantage of this is the weight of the code, the above 721 bytes of CSS converts to nearly 36k of HTML and CSS rules. It’s a seriously heavy pile of span tags, but the cost is immediately outweighed by 148 very specific reasons. And that’s just bundles, there are dozens of great themes too.

Aaron Quint also deservingly gushes over these two commands.

What these do is convert exactly what I’m seeing in TextMate into very precise and valid XHTML. Here’s the same CSS as above translated by TextMate:

code.html span.comment      { color: #999;}
code.html span.tag          { color: #07f;}
code.html span.string       { color: #080;}
code.html span.attribute    { color: #07f;}
code.html span.doctype      { color: #07f;}

code.css span.comment       { color: #999;}
code.css span.keywords      { color: #fd2;} 
code.css span.selectors     { color: #0b0;} 
code.css span.properties    { color: #66f;} 
code.css span.units         { color: #33c;} 
code.css span.urls          { color: #4a0;} 

code.javascript span.comment    { color: #999;}
code.javascript span.brackets   { color: #07f;}
code.javascript span.string     { color: #4a0;}
code.javascript span.keywords   { color: #07f;}
code.javascript span.exp        { color: #808;}
code.javascript span.global     { color: #06e;}

Just for the sake of comparison, below is a screenshot of how my code looks in TextMate. It’s not a perfect translation, but it’s a very good start:

Syntax Coloring CSS in TextMate

One of the purported advantages of the JavaScript method is that the source code remains unchanged. That’s sort of true, but not really. The JavaScript functions work by inserting a bunch of spans, so by the time the user sees it the main difference between JavaScript converted code and pre-processed code from TextMate is the detail (and weight) of the TextMate result. Also, any HTML would need to have entities escaped which is another step and a further degradation of the original code.

The main advantage then becomes convenience. A simple block of code doesn’t need to be run through TextMate (on the off-chance I’m writing somewhere else), it can be entered directly and tagged for styling without breaking focus.



« Previous PageNext Page »