Return of the Singing Keyboard

April 3, 2008Funnyelectronics, Funny, hack, officeJeremy Gillick

Since posting my DIY instructions for the Singing Keyboard Prank, a couple years ago, it continues to be one of the most viewed entries on this site; and the most fun to write. So when I saw that Instructables.com was having an April Fools contest, I had to enter it. I’m still not even sure what the prize is, but I’m motivated to win!

So please checkout my instructable and give it a vote!

Plagiarism Claims

Some people on the site have already added comments accusing me of copying KipKays video. On closer inspection you’ll notice that he posted that video a whole 8 months after my original post. In fact his video follows exactly the same steps and procedures that my instructions outlined. I’m not mad, I think his video is excellent and I’m glad somebody took the time to do that. However, I would have liked him to give credit where it is due.

To take other peoples work and claim it as your own is wrong.

Thanks for the vote

With that said, checkout my new instructable and if you like it, throw it a vote. Thanks!

A Bad Week for Software: Parallels vs. VMWare, Pandora vs. Last.fm and Entourage

March 28, 2008SoftwareJeremy Gillick

This has been an interesting week with software for me. I decided to try a few software apps and had some surprising results.

Parallels vs. VMWare vs. Entourage

I’m a mac user who works in a PC environment. As such I have to learn to work with MS Exchange in the best way possible. I’ve tried Thunderbird with IMAP — but that simply didn’t work since I couldn’t schedule or respond to meetings.

Eventually I went with Parallels so I could use Outlook on my mac. It worked well, not great, but good enough for my purposes. My biggest problem was that somethings just didn’t seem to work well. For example after the computer would wake up from sleep Parallels thought it would be a good idea to reopen the apps that were already running. So windows would have 5 new Outlook processes and 3 new IE processes open at the same time. This can be very annoying.

So this week I decided to try out VMWare Fusion. Everyone I’ve talked to says it’s awesome and so much better than Parallels. I was very optimistic and downloaded the demo and imported the Parallels vhd into it. Unfortunately I found VMWare to be kludgier than Parallels. More specifically:

Problems with VMWare Fusion

Often times ran slow, or had a significant delay when I tried to access it.
It doesn’t know I have a dock and when I maximize widows, they expand under it.
(the kicker) No cross application support. For example, when I click a link in Outlook it opens in the Firefox on Windows. I want it to open in Firefox on the mac side.

Parallels doesn’t have these problems, so I am back to using that.

Except that’s not the end of the story. I also won a copy of Office 2008 for Mac at the Geeks Love Bowling event at SXSW. We didn’t win for the most points, but for consuming the most alcohol; we had to live up to our team name: “The Beer Liberation Front”. (See Pictures).

I got excited that Entourage in Office 2008 might actually be usable. After installing it I was impressed — the UI looked great and the calendar wasn’t pink! (Entourage 2004 was pink) Entourage is very usable but I still fell back to Outlook because I couldn’t totally get used to it. Here are some points:

Problems with Entourage 2008

Local folders are far down on the left bar, so you have to scroll to get to most of them.
Not many options to customize.
Sorting email by “conversation” doesn’t build the message tree like Outlook, so you don’t really know who replied to which message.
Not as easy to skim through the email list.
NO WAY to directly import PST files from Outlook (The same company produces both of these products, right?)
(the kicker) Dragging an email to your local folder COPIES it instead of moving it! How does that make sense?

Overall these are mostly small issues, but the app wasn’t good enough to make me totally switch to it. Maybe someday.

Pandora vs. Last.fm

I’ve been using the Pandora music player for the last 6 months and have found so many great new artists through their music recommendations; I love it. They’ve always had big advertising around the player, and I never minded. They provide a valuable service to me and I think they should get paid for that. The problem is this week their player took a turn to the dark side: It would play a song or two, but refuse the next one until you put focus on the browser window with the player. This is unacceptable! I cannot stop what I’m doing every 5 – 10 minutes to jump to that page just to get another couple songs!

This was enough of a push to send me to try another thing that I’ve been hearing everyone rave about: last.fm. With so many people talking about it, it must be good, right? I signed up, downloaded the software and “scrobbled” (WTF?) my itunes library. Coming from Pandora I expected that by having their program send the titles from my itunes library to my account it would know what I like and give me recommendations on that. No luck. It didn’t tell me what to expect from it, so I decided maybe it was waiting for me to listen to some music first.

I open the player and entered “Pink Floyd” — my favorite band — and pressed play to listen to them and similar artists. Nice so far. I have a rather eclectic music taste so as much as I like Pink Floyd I don’t want to listen to them and similar music all day. In Pandora can setup stations and add a range of artists like Metallica, Ludo, Booker-T and the MGs, RJD2, Moby, Bob Marley, etc. The point is I like my music to switch up ever couple of songs and give me a different sound. Last.fm wont give that to me.

It feels very restrictive. I have to pick an artist or genre and I can’t add anything to it. If I get tired of the music selection I need to start over. The site isn’t helpful either. No real instructions or guidance, they just expect that you get it or are going to take the social approach and search for users like you. I’m sorry; I just want to listen to good music.

For example, take the following screen (notice it tells me the recommendations are a “Sample”):

It says that there aren’t any “real” recommendations for me yet because…why? It read my itunes library, I’ve listened, and scrobbled, a lot of songs. So at what point is it going to recommend something to me? I’ve done everything it has asked me to do. BAD USER EXPERIENCE == FAIL!

The good news is that I’ve found that several projects that have created desktop applications that play music from Pandora and they don’t have the stupid “pause” behavior that is present in the web player. So I’ve downloaded PandoraBoy and can now groove to my stations. In fact as I type this blog post Pandora is playing a list of fantastic selections — I’m very pleased. (at this second it’s playing “Sunday”, by Moby)

Summary

So at the end of the week, even though I’m back where I started, I’m happy I tried these products and got a taste for what’s out there. It seems I was using the better apps to begin with. Big Win!

Back from SXSW with a little Scurvy

March 21, 2008ConferencesJeremy Gillick

SXSW this year was fantastic! I built my foundation last year (it being my first), so this year I had loads more fun partying with my existing friends, meeting lots of new people and scheming new ideas. The panels were OK and the conference center floor plan was horrible — but then again SXSW is really about the networking.

Sadly I returned with what is now widely known as the SXSW Scurvy! It seems everyone who went to the 5 day conference came back with a bad strain of the flu. To make everyone feel better Stephanie Trimble, Josh Gillick and I put together a giant Get Well card and patient registry for all who are infected.

Not only did I return with the scurvy, I also came back with a sprained ankle and now I need to wear this walking boot for 4 – 6 weeks.

All-in-all though, it was totally worth it. I extended my network in many important directions and had a great time with friends. I’m already planning a list of panel ideas in hopes of actually speaking at the 2009 conference. The ideas are revolving around JavaScript, how social sites connect people in real life and easy progressive enhancement techniques. I’m hoping that next year will have a stronger technical path and design panels with fresh information and strategies.

More photos from SXSW.

Back From India and off to SXSWi

March 11, 2008TravelJeremy Gillick

My trip to India was a huge success!

It was great to finally meet all the people who I had been exchanging emails with over the past 14 months at PayPal. There is something very human and refreshing when you put a face to the name. The training went very well and both weeks were very interactive with lots of great questions and discussions. We were able to get through beginning JavaScript and ended on intermediate OO JavaScript techniques. Everyone was really friendly and always made sure Kimberly and I were comfortable and having a good time.

While I was there I also received a comment on my blog asking me to do a talk at a local webcamp in Chennai. Even though I wasn’t able to make it out to that, it was very flattering to receive a request out of the blue like that. Thanks Prabhu!

Over the weekend we flew up to Delhi and Agra to see the Taj Mahal and a few forts. There aren’t words to explain how amazing of an experience it was. From seeing the amazing architecture and history to watching people putting the time, heart and pride into making a marble inlaid dinner table which takes a full year and a half to complete.

After the 2 weeks were complete I realized that it truly wasn’t about the training; it was about the people. There’s not enough room on my blog to thank everyone who affected my journey, but I want to say a special thanks to Guru Prasath and Reena Bansal. Guru made sure Kimberly and I were always comfortable and not getting ourselves into too much trouble and Reena became our tour guide through Delhi and helped us negotiate good prices for things in the market and let me borrow he camera when mine ran out of battery.

See more pictures…

After I returned to California I had 6 days to readjust before jumped back on a plane to head down to Austin, Texas for 5 days at the SXSW Interactive conference. More on that later…

Off to India to do Taining

February 15, 2008Miscellaneous, Technical, TravelJeremy Gillick

In a few hours (5.5 to be exact) I’m jumping on a plane to travel from San Francisco to Chennai, India. PayPal is sending me to do the JavaScript training for the Web Development team there.

My plane leaves tonight at 12:05a and lands in Singapore for an 8 hour layover. I expect to leave the airport of a few hours of sight seeing and sampling the local food. Then I jump back on the plain to hop over to India.

I’ll be in India for 2 weeks and doing the “Intro to JavaScript and DOM Scripting” class for half the team each week. Over the weekend my boss, Kimberly Blessing, and I will be traveling up to Agra to see the amazing Taj Mahal. I’ll be taking lots of pictures and posting them on Flickr along the way. I love how every time I tell someone I’m going to India their eyes light up and they instantly have stories and advice for places to go and things to do — it’s fantastic! (and yes I’ve had my shots, pills and will avoid the water)

OK, off to finish packing now. Wish me luck!

SXSW Panel Follow-up

January 7, 2008ConferencesJeremy Gillick

I received word from the SXSW planning committee that my panel idea was not chosen for the 2008 SXSW schedule. I can’t say that I’m surprised, since documentation isn’t a very exciting or compelling topic.

I still would like to contribute to a SXSW topic, so if you’re putting together a panel and need another person, let me know. Personally I specialize in standards based web development where my target areas are:

Unobtrusive and accessible JavaScript
Semantic [X]HTML/CSS
Logical use of XHR (i.e. don’t use it for everything — only where it matters)
Discussing where certain Web 2.0 and Ajax patterns are over used and abused

If you’re interested, leave me a comment below and I’ll get back to you. Don’t send me an email since I get too much spam at my public address.

Flickr / Twitter Mashup = Twickr (or maybe Flitter)

January 1, 2008Software, TwickrJeremy Gillick

I’ve been using Twitter (https://twitter.com/jgillick) for a little over a month now and the one that’s lacking is picture messaging. What I want is to upload a photo to Flickr, create a TinyUrl for it and sent that plus a short description as a Twitter update. Well now it’s possible.

After a little research I found a tool, called TwitterGram, which does just this. You enter your Flickr username and Twitter username/password and it will automatically send updates to your Twitter log when you upload a photo. Unfortunately it didn’t work for me, so I went ahead and made my own which you can download and run on your servers!

My script starts by reading the Flickr feed (rss or atom), checks for new images that were uploaded within the last 12 hours (this can be set by $timeout — see configuration), gets the TinyUrl for each new photo and sends it with the Flickr title to Twitter.

Setup

Download the script.
Upload it to your PHP enabled web server.
Set configuration options
Setup a cron job to run this script as often as you want.

Configuration

The options PHP variables at the top of the file.

$twitter: The username/password for your twitter account
$flickr: The flickr feed URL to watch. This must be in atom or rss2 format. NOTE: RSS1.0 does not have timestamps and can cause duplicate entries or other unexpected behavior.
$cacheFile: This file holds the last 50 flickr image URLs uploaded in PHP serialized form to prevent duplicate entries.
$timeout: Filters out photos from your stream that were uploaded before this number of hours ago.
$debug: Set this to TRUE if you want to test the script and do everything but send the message to twitter.

Flickr Feed

Using a Flickr feed lets you limit the Twickr tweets to a specific tag. Here’s how to get the feed URL:

Login to Flickr
Click “Your Photos”
Add the following to the end of the URL “tags/twickr/” (change “twickr” to any tag you want to limit the app to)
Click the RSS icon () towards the bottom of the page.
The page that loads is your Flickr feed, copy that URL into your $flickr configuration variable.

Testing

Before finishing the setup be sure to test it. Edit the script and set $debug to TRUE and then run it from the command line:

php -f twickr.php

A common error will be “Permission denied” when it tries to create the cacheFile — which is used to store the URL of the last 50 images tweeted to prevent duplicates. This file is saved in the same directory as the script. Be sure the user which calls the script has access to write to this directory.

Remember to set $debug back to FALSE when you’re ready to use the script for real.

Cron Job

If you’ve never setup a cron job before, use this command:

sudo crontab -e

The to have the script (which in my case is at /usr/local/bin/twickr/twickr.php) run every 10 minutes enter the following as it’s own line:

0,10,20,30,40,50 *   *   *   *   php -f /usr/local/bin/twickr/twickr.php

(More information about cron)

Now whenever you upload a photo to flickr with the required tag it’ll automatically send a tweet with the Flickr image title and URL (as a TinyUrl).

Download

Download or get the latest from my SVN repository.

Web Service

If you do not have a web server or are want to have somebody else host the script I’m considering putting together a simple site to do just that for you. If you’re interested let me know in the comments and subscribe to my blog to hear about updates like this in the future.

Updates

Subscribe to my blog to learn about updates.

Make Sure You’re Site Says “Hello” to New Users

December 29, 2007Usability, WebsitesJeremy Gillick

I can’t tell you how many sites I’ve stumbled on which do not tell me who they are on their homepage. Yeah they have a cool design — BUT WHAT DO YOU DO? This is more common on (sadly) open source project websites, but I’ve also seen them on sites which are trying to sell some sort of Enterprise software. I’m sure if I dig deep enough I’ll find out who you are, but I just don’t have the time.

An example I saw today, and what compelled me to write this post, was when I dropped in on the PunBB website (http://punbb.org/). It tells me “It’s called PunBB. It’s the only way to fly.”, hmmm, OK sure, whatever that means. Then the main column part of the page is News, with the developers talking about milestones and progress and other stuff they’re doing on this mysterious product. Why wont you just come out and tell me who you are? When you finally look around and discover the “About” link, you find out that “PunBB is a fast and lightweight PHP-powered discussion board.” Oh, why didn’t you say so?

This is a perfect example of poor design and user interaction. As a web developer or designer you should always ensure that the user immediately understands what you do as soon as they hit your site. Don’t waste your homepage with talking about progress and milestones; put that on another page. At most you should only have the latest update on the homepage and all other news on a dedicated page. If you forget this many users will come, glance around the homepage, be confused and run away with a negative feeling about your website. This is dangerous because that feeling will last and can mean they’ll never use your service or product.

PHP Nuke (http://phpnuke.org/) is another example of this. This site does have a tagline, although you might have to look for it: “Professional Content Management System – Official Website”. Unfortunately that’s the last bit of coherent content you’ll find. So tell me more about this professional CMS. Half the links send me to pages with content which doesn’t help me at all. Cut down on the links and the noise. Put the most important information and links for new users at the top.

Don’t fall into the same bad habits. Take time and care to make sure your homepage is clear, self explanatory and easy to navigate — you know what they say about first impressions.

Semantic Tab Box v2.0

July 18, 2007Accessibility, Code, TechnicalJeremy Gillick

Heads up! This was written in 2007 and many things have changed since then. This is probably not the most modern approach.

Last year I came up with the original semantic tab box, now I’m improving it. Here are the things I wanted to fix:

Keep JavaScript unobtrusive — no inline event handlers and needs to work without JavaScript.
Create a standard API that can be easily reused and customized.
Make the markup more flexible.
Support both vertical and horizontal tabs.
Don’t constrain the height of the box — let it expand to the size of the content.
Keyboard navigation.

How is this better that other tab boxes out there?

All the tab boxes I’ve seen overcomplicate their solutions. They start with an unordered list of the tab names, followed by the content blocks. With a bit of CSS this looks very nice, but for screen readers the content is disconnected from the tab names and can be very confusing. Just try turning off CSS, you’ll see how horrible this looks:

Internet
Accessibility
Progressive Enhancement

The Internet is a worldwide, publicly accessible network of interconnected computer networks that transmit data by packet switching using the standard Internet Protocol (IP).

Accessibility is a general term used to describe the degree to which a system is usable by as many people as possible.

Progressive enhancement is a label for a particular strategy of Web design that emphasizes accessibility, semantic markup, and external stylesheet and scripting technologies…

Notice how the content is disconnected from the “tabs” when CSS is disabled (or when being read by a screen reader).

To solve this problem, most people just duplicate the tab name with a header (h2, h3, etc) at the top of each content block and use CSS to hide them from visual users. Here’s an example of what this solution looks like without CSS:

Internet
Accessibility
Progressive Enhancement

Internet

The Internet is a worldwide, publicly accessible network of interconnected computer networks that transmit data by packet switching using the standard Internet Protocol (IP).

Accessibility

Accessibility is a general term used to describe the degree to which a system is usable by as many people as possible.

Progressive Enhancement

Progressive enhancement is a label for a particular strategy of Web design that emphasizes accessibility, semantic markup, and external stylesheet and scripting technologies…

Sure this works, but why the redundancy? Yuck!

My solution gets rid of the unordered lists and formats the content blocks logically — with header tags.

Enough talk…

…lets get to the examples:

Simple-Horizontal: A simple horizontally oriented tab box.
Simple-Vertical: A simple vertically oriented tab box.

In <head>
<script type="text/javascript">
   var tabs = new Tabbox("editorTabs")
</script>

In <body>
<div id="myTabbox">

   <!-- Internet Tab -->
   <div class="tabPanel selected">
      <h3><a href="#interWebTab">Internet</a></h3>
      <div id="interWebTab" class="tabContent">
         <p>
            The Internet is a worldwide...
         </p>
      </div>
   </div>

   <!-- Accessibility Tab -->
   <div class="tabPanel">
      <h3><a href="#accessTab">Accessibility</a></h3>
      <div id="accessTab" class="tabContent">
         <p>
            Accessibility is a general term used to...
         </p>
      </div>
   </div>

</div>

Pretty simple huh?

Accessibility and Non-JavaScript Support

This new version supports accessibility by using CSS to hide the content divs (<div class="tabContent">) off screen, instead of with the unaccessible display:none CSS property.

These CSS classes are applied with JavaScript, so the content will be viewable if JavaScript is disabled or broken on the page. Try viewing the examples with JavaScript disabled and you’ll see what I mean.

API

To setup the tab box all you need to do is initialize the Tabbox object with the main div ID:

var box = new Tabbox("myTabbox", { header: "h3",
                                   vertical : true,
                                   select: 1,
                                   autosize: true });

All the values in the second parameter are optional:

Name	Default	Description
header	“h3”	The header element used for each tab name. This element cannot be used anywhere else in the content block.
vertical	false	If the tabs should be oriented vertically. The tabs are setup horizontally by default.
select	0	The tab index to select initially.
autosize	true	Automatically size the box to the content of the tab.

The code has been commented and layed out logically so updating it with features and enhancements should be easy. Speaking of enhancements…

Advanced Example — Hey Look! Something shiny.

So far the examples have been rather simple and plain so I wanted to create one that was more advanced. This example has a more complex UI, animations and implements the YUI history manager. Now when you change tabs it adds history to your browser and the back button will select the previous tab. Check it out — it’s the Über-Cool, Shiny, Tab Box.

Download

Now that you’ve seen the examples, you can download all the code and use it on your site:
tabbox2.zip (46K)

Ajax Experience Here I Come

July 13, 2007ConferencesJeremy Gillick

It’s official, I’m going to be attending The Ajax Experience in San Francisco July 25 – 27th. I expect it to be a great opportunity to get around my peers, network and hear about a lot of really cool stuff. The schedule looks packed and the list of speakers is impressive.

If you’re going to be there, lets get together for some drinks and general geekiness. Leave a comment below with your email (which will be kept private) and I’ll get back to you. Don’t send me an email, because my @mozmonkey email system is not working right now.

If you see me there, reach out a hand and say “Hello”. Here’s what I look like. And here’s a more recent picture by Dustin Diaz on the 4th of July.

The Mozmonkey Blog

The life and thoughts of Jeremy Gillick

Return of the Singing Keyboard

Plagiarism Claims

Thanks for the vote

A Bad Week for Software: Parallels vs. VMWare, Pandora vs. Last.fm and Entourage

Parallels vs. VMWare vs. Entourage

Problems with VMWare Fusion

Problems with Entourage 2008

Pandora vs. Last.fm

Summary

Back from SXSW with a little Scurvy

Back From India and off to SXSWi

Off to India to do Taining

SXSW Panel Follow-up

Flickr / Twitter Mashup = Twickr (or maybe Flitter)

Setup

Configuration

Flickr Feed

Testing

Cron Job

Download

Web Service

Updates

Make Sure You’re Site Says “Hello” to New Users

Semantic Tab Box v2.0

How is this better that other tab boxes out there?

Internet

Accessibility

Progressive Enhancement

Enough talk…

In <head>

In <body>

Accessibility and Non-JavaScript Support

API

Advanced Example — Hey Look! Something shiny.

Download

Ajax Experience Here I Come