Working With Social Network APIs

Creating Vicinity Buzz naturally involved working with a the APIs of social networks. That information seemed worth sharing for those of you interested in writing any type of application that would integrate with a social network.

Developer Documentation

Any of the social networking sites you probably want to integrate with have developer api’s that are well documented. Here’s the starting points for a variety of services:

Working With JSON

All of these APIs are best used with JSON. If you’re not familiar, you can read up at json.org. It’s the notation for serialization of javascript objects, and object literals.

Where To Make the Call From

If you are working in a standard web page, you could call the api from document.ready (assuming you are using jquery). This is the approach I take on hoolihan.net, my personal homepage. There is a twitter feed on the right side.

If you have a bit more of an application, you may want to look at one of the many javascript frameworks that help you route events to actions. These are frameworks like backbone, knockout, spine, etc. There are also commercial variants like kendo, dojo, and sencha.

jQueryMobile is commonly paired with PhoneGap, and in that scenario, using something like backbone is a bit tricky. You may want to bring in a template binding library, but avoid routing.

Binding

jQuery.templates was one of the first good javascript template binders that I’m aware of, but there are now many different options. In the jQuery world, most of the momentum seems aimed at jsrender. Recently I’ve considered bring in knockout and only using the binding part, but I’m not far enough in to evaluate that direction.

API Keys

Unless you’re using the most basic parts of the API, you’ll probably need to register your app and get an API key. It’s a token that identifies your application. In the event of API abuse (too many calls, etc), they have information to contact you and analytics around the issue.

Open Authentication

This is a big topic, but if your application wants to use a social network to identify your users, this is possible via open authentication. If you are interested in this, get started here.

What Do You Think?

Are there any particular areas of the APIs that you’d like to see more detail about? Any conceptual parts that would warrant their own post? Let me know what you think below.

Simple URI Tip for HTML

You may already know this, in which case you ran across it randomly, or are the kind of developer that reads specs. But if you haven’t run across this, prepare for a face-palm moment wondering why you didn’t know this years ago.

Using a uri like the following tells the browser to get the content over whatever protocol the current document was fetched from.

<script src="//platform.twitter.com/widgets.js"></script>

Think of all the little annoying server side script you’ve written to determine the protocol based on the request variables in order to avoid security warnings. Never again. Enjoy.

One warning… don’t do this in phonegap.

More detail, and links to rfcs at stackoverflow.

Dealing With An ORA-01440 When Altering a Table in Oracle

When altering a table to an Oracle reduce a columns size, you’ll get a ORA-01440 error, indicating that you can’t make the adjustment because of the potential data loss.

I had to do this to recently to a bunch of columns, as I had incorrectly specified the size of numbers that would end up as integers in the application. Note that Oracle can treat any column as an integer by specifying a scale of 0. But for entity framework (via the Devart providers) to map to an long (Int64), you want the precision and scale to be Number(19,0).

Since the fields were left at the default size, they were too large. And being that many of these fields were a primary key or foreign key, constraints were also and issue. So the table had to be backed up, and restored. In order to safely do this, any triggers needed to be disabled.


Rather than do this repeatedly for many tables and risk missing something, or making typos, I created a script generator. You enter the table, and add any foreign key constraints, and then generate a script. All that is left to do is to add the columns to be re-sized to the alter statement in the middle of the script.

The script and generation code is all written in javascript, using jquery and jquery templates. If you’re interested in the code, I have it up on github.

Flex is a Relic and Silverlight is a Zombie

…or some other catchy metaphor that will grab your attention. These technologies were hot over the last 5 years. Flex gained a particular amount of popularity in the Java community where UI technologies have a bit of a spotty record (that’s like saying my Bengals have a bit of a spotty record over a lifetime). Silverlight gained a lot of traction among Microsoft developers who actually cared about design and UX. Many alpha-geeks of the Microsoft space were running around giving conference talks about the MVVM pattern, and sharing code on codeplex. So what happened?

Both of these technologies are going to fade on the public web. Tablets and mobile devices are too big a share to ignore. Html5, phones and tablets did them in. The heavy hand of Steve Jobs probably gets credit for the coup de grĂ¢ce. The browser vendors and phone OS creators have really put their weight behind Javascript and Html5. If you have have that skill-set right now you can create:

  • Web Content
  • Mobile Web Content
  • Mobile Apps via Appcelerator
  • Mobile Apps via PhoneGap
  • Windows 8 Metro Apps

That’s a pretty wide reach for a markup / scripting language set.

So what do you do if that’s your trade? You work as an AIR/Flex developer or Silverlight developer, what do you do? There are good options for each camp, and some universal options.

Flex Developers

I think this is the slightly less promising path in the long term (despite it hitting a much higher peak than Silverlight). That said, Flash and Air will live on for a while, and you have some time to make a transition. Additionally, the ability to use the Adobe tools to make mobile applications provides a bridge to the hot mobile market. And you can make long term plans to transition to another cross-platform tool (PhoneGap, Appcelerator, etc), or go native. If you’re in the Adobe camp, new tools like Edge are likely to ease the transition to the standards-based technologies of the web.

Silverlight Developers

Similarly, Silverlight won’t be gone tomorrow. Intranet applications that need rich functionality (and simple deployment) are still a nice fit for Silverlight Desktop applications. And the adjustment to WindowsPhone 7’s flavor of Silverlight is straightforward, though I would be cautious and investigate the financial realities of that market. Finally, while Windows 8 Metro Apps don’t specifically use Silverlight, they can use C# with XAML and a subset of the .Net libraries that emphasize a security sandbox and async data connections. Sound familiar? That’s because they re-animated the corpse of Silverlight and made it an option for writing Metro apps. Long term, you should probably learn to use the Html5 / JavaScript hooks for Metro due to the ubiquitous nature of those skills. But isn’t it nice that you can learn the new API (WinRT) while keeping C# and XAML, and then make the languages switch at your leisure.

For Everyone

Both camps should embrace these newer web technologies and the UI skills they picked up during their time with the respective technologies. Good user experience and design are rare skills in developers, and retraining the languages and tools should be the easy part. Keep your black turtlenecks and invest in the next tools rich applications. You already have a leg up.

Popup Overlay Auto-Applied to an Anchor with jqModal

Working on a relatively straightforward page, I want to have some of the simpler static contact come up as an overlay style of popup. Following web standards, it would be nice to have this code automatically work based on a CSS class. This would provide two benefits: easy to add more such links without writing new code and it will work without javascript.

I worked through a solution using a variety of samples. The project uses html5, jquery, and the jqModal plugin.

The footer code where I have the link I want to change gets the “popup” css class added to it.

          <a href="terms.html" class="popup">Terms</a>

terms.html itself is a simple static html page with a header and some paragraphs, so I won’t show it here. I’ll only mention that it can still have html and body tags of it’s own.

In css, I have some simple styling in place for jqModal to use.

.jqmWindow {
    display: none;
    
    position: fixed;
    top: 17%;
    left: 50%;
    
    margin-left: -300px;
    width: 600px;
    height: 600px;
    overflow:auto;
    
    background-color: #EEE;
    color: #333;
    border: 1px solid black;
    padding: 12px;
}

.jqmOverlay { background-color: #000; }

Finally, here’s the javascript that sets it all up. If you were going to use this on multiple pages, you might want to move it into it’s own file.

      <script type="text/javascript" 
            src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js">
      </script>
      <script type="text/javascript" src="jqModal.js"></script>

      <script type="text/javascript">
        var dialogs = {}; // cache for dialogs keyed by url

        $().ready(function() {
          $('a.popup').click(function(event){
            event.preventDefault();
            var url = $(this).attr('href');
            if(!(url in dialogs)) {
              dialogs[url] = 
                $("<div class='jqmWindow'>Loading content</div>");
              $(dialogs[url]).jqm({ajax:url});
              $('body').append(dialogs[url]);
            }
            $(dialogs[url]).jqmShow();
          });
        });
      </script>

First, you’ll notice the code references jquery via the Microsoft CDN. It also pulls in a local copy of jqModal.

Then, I declare a page level variable. “Global” variables are not something to use often, but as a page level cache, this is actually an appropriate use. If this was off in it’s own file, you may want to use namespacing tricks in javascript to avoid name collision (outside the scope of this example).

Next, in jquery’s document ready function, we add a click handler for any anchor (link) with the class popup. It stops the default behavior (which for a link is to submit a get request). Then, the function tests to see if it has already setup a dialog div for that url. If not, it creates the html for the div with the proper jqModal class, and adds it to the body. Finally, it sets up the dialog div to load the url from the associated anchor via ajax.

The final step after either creating or fetching the dialog div, is to call it’s jqmShow() method.