Things that made me happy this morning:

• Pestering my colleagues in the US late last night made sure that we have YQL tables for Google Buzz
• In case you ever go to Bergen, Norway, beware the Scuba Divers in the street
• Mashable has a nice infographic of the state of the internet
• Safer Internet is a Europe-wide campaign to tell kids about the dangers of going online – very cool videos. I especially like the golden rules of communication (but notice the URI fail)
• Minify is PHP5 script to, err minify scripts
• Phishing with Google wave shows a potential attack vector
• 12 reasons why gay marriage should be illegal has some very logical points, like “Legalizing gay marriage will open the door to all kinds of crazy behavior. People may even wish to marry their pets because a dog has legal standing and can sign a marriage contract.”
• Anatoly Zenkov has a cool mouse tracking utility that records what you with your mouse in the background and creates an overlay image.
• Twilio now has a SMS API

One thing that annoys the heck out of me with maps you see on a screen is that you can’t rotate them. When I look at a real map I constantly turn it around so that I face in the right direction. Google maps lately added this feature in the hybrid and satellite maps but I wanted to do that with the simple maps and also other map providers.

The solution was CSS3. With the rotation transformations you can arbitarily turn elements. Of course this differs again from browser to browser which is why it made sense to me to find a library plugin that does that. Zachary Johnson build one of those and using this together with the Google Maps API it was pretty easy to build a rotating map:

The code itself is very easy – thanks to the transformation work already done in Zach’s code:

google.load("maps", "2.x");
   function initialize() {
     var mapcontainer = $('#mapcontainer');
     var mapdiv = $('#map');
     var geocoder = new GClientGeocoder();
     var map = new google.maps.Map2(mapdiv);
     map.addControl(new GSmallMapControl());
     map.addControl(new GMapTypeControl());
     map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
     mapcontainer.after('<div id="buttons">'+
                        '<form id="f"><label for="loc">Location:</label>'+
                        '<input type="text" id="loc">'+
                        '<input type="submit" value="go"></form>'+
                        '<p>Press R and L to rotate map, = to reset.</p>'+
                        '<p>Use cursor keys to move.</p>'+
                        '<p>Zoom with + and -.</p>'+
                        '</div>');
     mapcontainer.attr('tabIndex','-1');
     mapcontainer.focus();
     $('#f').submit(function(event){
       var value = $('#loc').attr('value');
       if (geocoder) {
          geocoder.getLatLng(
            value,
            function(point) {
              if (!point) {
                alert(value + " not found");
              } else {
                map.setCenter(point, 13);
                var marker = new GMarker(point);
                map.addOverlay(marker);
                mapcontainer.focus();
              }
            }
          );
        }
       return false;
     });
     mapcontainer.keydown(function(event){
       switch(event.keyCode){
         case 82: mapdiv.animate({rotate: '+=5deg'}, 0); break;
         case 76: mapdiv.animate({rotate: '-=5deg'}, 0); break;
         case 40: map.panDirection(0,-1); break;
         case 38: map.panDirection(0,1); break;
         case 39: map.panDirection(-1,0); break;
         case 37: map.panDirection(1,0); break;
         case 107: map.setZoom(map.getZoom()+1); break;
         case 109: map.setZoom(map.getZoom()-1); break;
         case 61: mapdiv.animate({rotate: '0'}, 0); break;
       }
     });
   }
   google.setOnLoadCallback(initialize);

Of course I was not the first with this. The StreetView Fun demo by Lim Chee Aun (@cheeaun) has a similar implementation (click “maps” in the demo to see it):

Things to fix

• Map navigation: as you might have already experienced, dragging the map is becoming very confusing. This cannot really be solved as it would require Google Maps to know the rotation. Right now I am using the panDirection method to move the map with the cursor keys – a cleaner way would be to use PanTo and really calculate the next place to pan to taking into consideration the angle of the map. Any volunteers?
• I am quite sure I am violating Google’s terms and conditions with this as I am cropping off the copyright.I found a way to display the copyright and Google branding:

GEvent.addListener(map, "tilesloaded", function() {
 var logo = $('#logocontrol');
 logo.attr('style','');
 var copyright = $('#map div[dir=ltr]');
 copyright.attr('style','');
 $('#mapinfo').append(logo);
 $('#mapinfo').append(copyright);
});

Things that made me happy this morning:

• What love means to a 4-8 year old contains some wonderful quotes
• Windows 3.11 in DHTML – gee all the pain and suffering comes back to me now.
• What everybody needs to know about SVG right now is a good primer on open, XML based vector goodness.
• Home decor for absolute geeks has a lot of things full of win
• Every time I travel, I see kids with Trunkis in London – I want one in my size!
• Tomorrow is a Mozilla Labs Meetup in Mountain view and tonight Douglas Crockford is talking about the history of JavaScript – I’ll be at both.
• Sergey Brin’s homepage at Stanford does not only feature an awesome image applet – no, it also shows that he stayed in the Gates building :)
• Today I will earn my Coffee drinking badge

If you do a lot of research using web searches can be frustrating. Different search engines have different results, you need to open things in tabs and in general it can be pretty time consuming to find what you need.

To make this a bit easier I thought it’d be cool to have an interface that searches Yahoo, Google and Bing at the same time and thus I built GooHooBi:

As explained in the screen cast the thing under the hood of GooHooBi is YQL. Instead of fussing about with all the different search APIs all I did was to play with the YQL console and put together the following YQL statement:

select * from query.multi where queries=’

select Title,Description,Url,DisplayUrl

from microsoft.bing.web(20) where query=”cat”;

select title,clickurl,abstract,dispurl

from search.web(20) where query=”cat”;

select titleNoFormatting,url,content,visibleUrl

from google.search(20) where q=”cat”

‘

The query.multi table in YQL allows you to list a few queries which will be executed one after the other on the YQL server. The queries themselves I put together by using the different tables in the console and only selecting what I really need from each of them.

You can try this query in the YQL console and you can see the JSON output.

The rest is pretty easy. Cut this up into a parameterized string and do a cURL call:

$query = filter_input(INPUT_GET, ‘search’, FILTER_SANITIZE_SPECIAL_CHARS);


	
$queries[] = ‘select Title,Description,Url,DisplayUrl ‘.

‘from microsoft.bing.web(20) where query=”’.$query.’”’;

$queries[] = ‘select title,clickurl,abstract,dispurl ‘.

‘from search.web(20) where query = “’.$query.’”’;

$queries[] = ‘select titleNoFormatting,url,content,visibleUrl ‘.

‘from google.search(20) where q=”’.$query.’”’;

$url = “select * from query.multi where queries=’”.join($queries,’;’).”’”;

$api = ‘http://query.yahooapis.com/v1/public/yql?q=’.

urlencode($url).’&format=json&env=store’.

‘%3A%2F%2Fdatatables.org%2Falltableswithkeys&diagnostics=false’;

	
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $api);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

$output = curl_exec($ch);

curl_close($ch);

$data = json_decode($output);

Then loop over the results and assemble the HTML output.

You can check the source code of GooHooBi.

• The HTML/JavaScript version JS source JS live.
• The PHP version PHP source PHP live
• The PHP “API” API source API live

In addition to this, here’s a half hour live coding screencast how to build something similar:

Building a search mashup with YQL using Google, Yahoo and Bing – live :) from Christian Heilmann on Vimeo.

The source of the code built in this screencast is also on GitHub.

Things that made me happy this morning:

• YUI 3 is out of beta – the changes to YUI needed to run the new Yahoo homepage, smaller, faster, less code to write.
• Google Docs now has an experimental OCR conversion API – post an image to the API endpoint and get a text version as a Google Doc.
• A nice bookmarklet to show the HTML 5 structure of a document
• Mockflow is an online collaborative wireframing tool
• Kalle Saas has some good JavaScript localisation tips
• We are colorblind is a pattern library for color blindness concerns
• One sentence contained in every HTML tag there is
• Paul Carvill of the Guardian explains why front end developers matter to the future of businesses
• Another way to fix bad CSS support – eCSStender is finally live
• @mediajunkie new book features thehairofchristianheilmann