Monday, October 13, 2008

7 Things I Learnt about Japan

Here are some random things that I learnt about Japan from my first visit there last week. Keep in mind that most of my pre-knowledge before the trip was based on scenes from "Lost in Translation"... :)

  • More than just Sushi. I assumed that when I came to Japan, I'd spend my whole time eating Sushi, since I'm a huge fan of that here. But then I was brought out by various people who all insisted I try various types of Japanese fare - ramen in a cube (solitary food confinement), okiyanamaki (from Osaka- spelling completely off), tonkatsu (japanese chicken fingers, finger-licking good!), and even non-Japanese fare like Lebanese food.. and that's when I realized that there was so much deliciousness to be had in Tokyo if I'd give up my sushi obsession for the week. In retrospect, I never went out for any Sushi meals..so now I'll never know how it competes with the US equivalent. Oh well, next time!
  • Bowing, bowing everywhere. Japanese bow as a way of saying thanks or acknowledging you or something like that, so I was constantly surrounded by people bowing. Sometimes it was the hotel staff (there'd be 6 in a row bowing in the lobby - I felt like I was running through a gauntlet), sometimes it was developers saying goodbye. It was altogether awkward for me, since I wasn't sure whether I was supposed to bow back - I generally did a head nod, which I figure is like a mini bow, and better for my back anyway. The weird thing is that I'm now finding myself bowing in China ever so slightly.. which is completely unnecessary here. :)
  • 4 addressing modes. I'm not sure the linguistic term, but in Japanese, your speech changes depending on the level of you to your addressee - there's Honorary, polite, humble, and inferior. So if you're addressing the president, you'd use Honorary, and if addressing a customer, you'd use humble/inferior (to make the customer feel important). The modes change both suffixes of words and sometimes even the words themself (e.g. "eat" is different), and the more polite the mode, the longer the suffixes are. So that explains why it always felt like hotel clerks and cashiers were always saying so much to me, for so little of an occasion (like saying "thanks").
  • Half punk/half prep. In the offices and developer events, the Japanese people were often super dressed up, in business suits and the like. In walking the streets though, there were quite a few Japanese that were dressed in punk/goth/leather/lolita/etc. So it seems the norm is to be very formally dressed, and the "non-conformist" solution is to be very out there. Basically, nobody there does casual - the t-shirt & jeans scene just isn't their thing.
  • Japanese = Spanish? I found myself constantly thinking that I was actually listening to Spanish, as I was overhearing conversations or watching videos on MTV Japan. I figured out this is because they clearly pronounce all vowels in the Japanese language, as they do in Spanish, so their syllables are very similar. I also realized that I knew multiple Spanish developers in Japan (and only 1 Japanese developer)..which leads me to suspect that Spanish speakers are on to the similarities as well, and figured Japanese would be the next easiest non-Romance language to learn. The similarities actually tempt me to learn Japanese, since Spanish is one of those few languages I can actually pronounce, and I would like to learn an Asian language.
  • English.. not so much. In the world of restaurants and cafes, pretty much noone spoke or understood English and all communication was done through pointing and gestures (which worked). In the world of developers and engineers, there were some that could understand English, but many of them only understood Japanese (which is why my talk was translated simultaneously). However, even amongst those that could understand English, there were very few that could fluently speak English, and they were all clearly more comfortable speaking Japanese than English. I hadn't realized that English was such a low language on the Totem pole in Japan, and I now understand why the developer community there is so separate from our Europe/America community (with its own forums and Gurus) - they simply can't use our English resources. So, a big thanks to our localization team for getting a Japanese version of our documentation out this year!
  • Karaoke is awesome. Singing the opera part in "Bohemian Rhapsody" in a room of Japanese developers is something that everyone should experience. And of course, one always has to finish with "Living on a Prayer". I always believed it was a song embraced all over the world, and I have now proved it. Bon Jovi - you may kinda suck now - but you've done a great thing for world peace.

Tuesday, October 7, 2008

Using Notebook in a Delicious Way

Okay, I'll admit it. I was a big user of delicious during my first year in the "web2.0 world", despite the fact that it'd take 5 tries to type "del.icio.us" correctly. It was great to be able to bookmark stuff and then share my bookmarks with other people easily (e.g. "Check out all these visualization bookmarks I've collected").

But then I started working at Google, and resolved that I would try to use Google services for everything possibly - mostly because I hate multiple logins, and Google does seem to offer almost every service possible, so it seemed a reasonable goal. So when it came to bookmarks, I discovered Google bookmarks. Excited to find a replacement for delicious, I started using it 24/7. But then someone asked me for a suggestion of campus maps mashups, and I realized that there was no "publish" option for Google Bookmarks... and that was a very sad day indeed.

Now, as it happens, I happened to try out Google Notebook around that time - and realized that all my bookmarks were actually in an unfiled bookmark. I moved them over to a new notebook and published it here. So I'd accomplished the first goal - publishing my bookmarks - but now I wanted to be able to let people easily view certain tags in my bookmarks, and have permalinks for them. Unfortunately, the published notebook page had nothing like that - it's just a list, and I actually had to tell people "visit this page and CTRL+F for campusmap".

But, never fear - APIs to the rescue! Notebook has a read-only Google data API, which means that I can retrieve my notebook feeds in JavaScript just via the JSONP output (alt=json-in-script). So I used the API to create a gadget that lets users view all the labels in a notebook, and filter by the labels. I think the UI is pretty nifty - it shows all the labels in cloud-tag format (sized based on bookmark count), and then when you select a label, it will figure out which labels are still relevant for filtering by and grey out the rest. That makes it super easy to find which combination of labels are useful. Try it out below:

There are a couple of neat tricks to the gadget:

  • pagination: The Notebook API only gives 100 entries at a time - I wanted to be able to get all of my notes at once, so that I could show every category. So here's the code I used to get all the pages in the feed:
     function loadURL(url) {
        var script = document.createElement("script");
        script.src = url + "&callback=myCallbackFunction";
        document.body.appendChild(script);
      }
    
      function myCallbackFunction(root) {
        entries = entries.concat(root.feed.entry);
        var nextLink = findNextLink(root.feed.link);
        if (nextLink) { loadURL(nextLink);
        } else { createCategories(); }
      }
    
      function findNextLink(links) {
        for (var i = 0; i < links.length; i++) {
          if (links[i].rel == "next") {
            return links[i].href;
          }
        }
        return null;
      }
    
  • user preferences: I wanted to be able to permalink to certain labels, and I also wanted to be able to let other users use the gadget for their own feeds. So I used Gadget user preferences for the user ID and notebook ID (string type) and for the categories (list type). You can play with customizing the gadget here and you can see a permalink with the "campusmap" category user preference set here (notice the "up_categories=campusmap" in that URL). Here's what the UserPref for the labels looks like in the Module spec:
    <UserPref name="categories"
              display_name="Categories"
              datatype="list"
              default_value="gmaps|streetview"/>
    
    And here's the code that toggles labels on if they're set in the preferences:
    var default_categories = prefs.getArray("categories");
        for (var i = 0; i < default_categories.length; i++) {
          toggleCategory(default_categories[i]);
        }
    

Note that you can actually extend this gadget for any Google data API feeds - you can test out feed URLs in this older version of the gadget. Youtube playlist feeds look kinda nifty in it - the tags are all over the damn place. Enjoy!

P.S. Notebook now has a bookmarklet, so it's easy to "note" any page in the browser directly into a published notebook. Whee!

Flex Tips (OR: Examples I Wish Had Been Easier to Find)

So, in the last several months of supporting our new Maps API for Flash and learning all about this new fangled thing called Flex, I've discovered some things:
1) OMG I love Flex and the fact that I can create a ColorSelector natively, and the fact that I can "bind" dynamic variables as data sources to UIComponents. I'm very close to deprecating my love for JavaScript.
2) There are alot of ways to use Flex components, and I often find that the way that I want to use a component is possible..but not example-ified enough.

So this post is just a collection of Flash API samples (shamefully copy and pasted from the demo gallery) that use Flex stuff in nifty ways. Hopefully I've now somehow helped future developers looking for examples. :)

Context Menu  This demo shows how to create a context menu on the map that gives the user an "Add Marker" option. When selected, a marker is created on the map at the clicked location.
Non-Map Classes used: ContextMenu, ContextMenuItem
View the source
Polygon with Effects & Filters  This demo shows a polygon with a DropShadowFilter applied, and a Glow effect applied to that polygon on mouseover. Any filter or effect can be applied to a polygon or polyline.
Non-Map Classes used: Glow, DropShadowFilter
View the source
TabNavigator InfoWindow  This demo shows how to use customContent to put a UIComponent (TavNavigator) inside an infowindow and create the effect of tabbed info windows.
Non-Map Classes Used: TabNavigator, VBox, UIComponent, TextArea
View the source
KML Parser  This demo uses the open source KML DOM parsing library from the utility library to parse a KML file and create a sidebar Tree list and corresponding map overlays.
Non-Map Classes Used: Tree
View the source
Store Locator  This demo lets the user enter an address, pick a radius, and then it queries a database through a PHP script, parses the resulting XML, and adds the resulting markers to the map and the store information to a sortable DataGrid.
Non-Map Classes Used: ComboBox, DataGrid, itemRenderer, DataGridColumn
View the source
Driving Directions with DataGrid  Lets the user enter to/from in a form and displays the steps in a customized DataGrid, and displays static maps in the info windows for each step.
Non-Map Classes Used: DataGrid, DataGridColumn, itemRenderer, ArrayCollection
View the source
PolygonOptions Playground  Lets you experiment with the properties of PolygonOptions (including the GradientStyle) and see the resulting Polygon placed on the map.
Non-Map Classes Used: Grid, GridRow, ColorPicker, ComboBox, HSlider
View the source