Here is the story. On Sunday night I went out to a bar… the party was a bit dead and I thought… wouldn’t it be nice if I could have checked out how many people were there before heading out? On Monday, I woke up around 6am and decided I would build an application that would allow me to do exactly that, using the Foursquare API. I worked on the app until 9pm. It should not have taken me that long but I ran into bugs and know-how limitations.

I built this using php. I am not a developer so it is not well optimized for now. I am making one call per venue and not caching any data which leads to empty responses at time. UPDATE on Jul 12th:  Now it It is super fast and super optimized!

I then submitted the application to Foursquare, because why not. The week went very fast and I almost forgot about it. Yesterday, I received an email from an engineer at Foursquare who among other things said:

I loooooooove it! It’s one of the coolest foursquare apps I’ve seen.

His friend (a girl) also told him:

I kid you not, this app alone makes me love foursquare more than any other social media i use :)

This mini web app is now featured on Foursquare. Yay!

Ha!

Update on Sept 2011: created a new version of this concept for the Global Foursquare Hackathon.

Xmarks: save and synchronize bookmarks across machines. Bookmarks are precious…
MeasureIt: measure pixel distances in your browser.
ColorZilla: pick any color you see.

(+ Firebug, Web Developer, HTML Validator, Fireshot and TOR for stealth browsing…).

1. display:none; hides the text from the CSS. Then what is the point?
2. left:-5000px; pushes the text to the extreme left, outside of the screen. While it is still on the page, it is not entirely sure that search engines won’t ignore it thinking you are hiding a bunch of text.
3. The “alt” tag within the image. Necessary but not a solution in itself.

None of them are SEO friendly, clean and legit. Here is a fourth one which happens to also be used by Google. You will place your image after the text you are replacing and give the image an absolute position.

Here is the code that I applied to the h2 in the right rail of the ubenice.com homepage in early 2010.

First the html:

<h2 class="hdr">
   Photos
   <img alt="Send Us Your Photos" src="_images/h2-photos.gif">
</h2>

Then the CSS:

.hdr {
   height:65px;
   margin:0;
   width:250px;
   position:relative; /*this is important - there has to be a relative element somewhere above*/
}
.hdr img{
   left:0;
   position:absolute;
}

Finally, if the image is not correctly positioned, you can adjust it by playing with left:Xpx; and/or adding top:Xpx;.

Let me know how this technique is working out for you and if you have any questions!

UPDATE on Sept 23 2010: James below is asking proof that Google uses this technique. Let me show you their code (I am using the code that’s around the logo on any search result page – upper left corner, next to the search box).

The HTML first:

      <a id="logo" title="Go to Google Home" href="http://www.google.com/webhp?hl=en">
         Google
         <img width="178" height="238" alt="" src="/images/nav_logo16.png">
      </a>

The CSS:

#logo{
    display:block;
    height:62px;
    margin:3px 0 0 2px;
    overflow:hidden;
    position:relative;
    width:178px;
}

#logo img{
    border:0 none;
    left:0;
    position:absolute;
    top:-145px;
}

Yesterday, I finished a project for Geek Girl, Inc. A simple website built on WordPress.org: mysweetgeek.com. I had no idea how much fun it was to play with WordPress. It is a great CMS, super easy to use for clients who want to be able to maintain their websites. I created her own WordPress private theme. I also created the illustration n the homepage but the entire idea came from Geek Girl, Inc’s head.

This made me want to start to offer web development services to others. This is it. We shall see where this takes me… You can find more information on my web development service page. My company is M.B. Works. Cara came up with the name without really thinking about it. I like it. It’s simple.