| Comments

I’m an avid user of Twitter (join me on Twitter @timheuer) for things social, family and technical.  I use it to keep in touch with friends, learn things from technical sources, get news and otherwise interact with names I’ve never met in person.  My use of Twitter has changed much over the years and I’ve found myself just using the web site more and more while on the desktop where a full browser is available.  On my mobile I use native clients but presently not one of the ‘official’ Twitter mobile apps (I find them less full-featured than the 3rd party ones which also offer a better performing experience for me).  In my use of the web site I’ve noticed more and more links that say “view summary” in my feed. 

Twitter Summary Card sample

Sample Twitter Summary Card from dev.twitter.com

When expanding this, the twitter post (which is limited to 140 characters itself) basically provides more information about the post.  The most frequent I’ve seen is what Twitter calls a Summary Card, which reads metadata from the URL posted in the Tweet, effectively extending the 140 character limitation a bit (however summary descriptions are limited to 200 characters).  I post to Twitter most of my blog posts and thought it would be a great little enhancement to provide this summary data in the feed view (it isn’t expanded by default so users must explicitly click ‘view summary’ and thus there is no real risk of making your Twitter feed more noisy without you choosing to read more).

Learning about Twitter Cards

I recently learned more about these after a quick exchange with @JeffSand (former director at Channel 9, now at Twitter) about another implementation (more on that later) and thought I’d get into doing the Summary Card for my own personal use.  Twitter has some pretty decent documentation on this topic on their Dev center.  There are a few types of Cards available for content authors to leverage and the great thing is that you, the content author, really just have to add metadata to your content and that’s it.  Twitter feeds/apps do the rest by interpreting and displaying that data in a Card view in the feed.

Summary Cards seem to be the most popular to me but that could be just my own personal use.  The others that I could see add value are the App info/install and deep-linking ones.  These do presently, however, seem to add most value in the mobile space and not the desktop space.

  • App Cards – provide a link to mobile apps and product page information.  This is currently limited to iOS and Google Play store listings it seems.  There is also some documentation on App Install/Deep-linking techniques.
  • Photo Cards – provide a good representation of an image in-line.  You see this for images from Twitter, Flicker, SkyDrive, etc.  Sadly, Instagram chose not to pull this support for their usage last year (yay customers…grrr).
  • Player Card – seems great for podcast publishers!  You see YouTube usage of this most of the time as well.
  • Product Cards – I’ve not seen usage of this in my interactions but I would imagine we’ll see more of this in sponsored posts/ads as they become more prevalent

After reading about these, I set out to add this metadata to my own content on my site.

Modifying my blog engine

At present I use Subtext as my blogging engine of choice.  This is due to some choices made long ago using .Text and then migrating to Subtext when that transitioned the work.  Subtext has served me very well over the years but is showing its age more recently as I’ve been desiring to modernize some things and leverage the vast ecosystem of WordPress type themes and plugins.  Still, it is Open Source, written in ASP.NET and so I could modify things as I need.

I first went to the source of Subtext and thought I’d just upgrade.  The version I run is the latest stable/release build of Subtext and hasn’t really evolved since that version release a few years back.  The version on GitHub now is moving toward ASP.NET 4, which is good and I thought I’d just move to that.  I had an immensely painful time trying to do this upgrade and ultimately decided against it (blog post on my ASP.NET migration woes perhaps to come) as there wasn’t much return on my time investment at present to do that.

The first thing you have to do is set up your Twitter Card.  Twitter’s docs have a cool Cards validator tool (only works on Webkit browsers for some reason) to give you a display of your card so you can tweak settings.  Once you do this and have your metadata set up, you need to submit your URI to Twitter for validation.  This step is critical or they won’t show up.  This step is also not entirely clear in the process and you may think that just setting the META tags are sufficient…they are not.  Use the validator tool to see the second tab to “Validate & Apply” for your card view.  I did a basic Summary Card for my entire site to get through this process so I could test/validate my own logic for the per-post metadata later.

I wanted the data from each of my posts to be a unique Summary Card as I felt that has been the most valuable I’ve used in my feed.  Card data is implemented as META tags so your mileage may vary on how you need to implement this. 

If you are a WordPress user, there is an amazing ecosystem of plugin developers who have already done this for you and you just install a plugin.  It doesn’t seem that Twitter provides a directory of recommended plugins for popular CMS systems, so I can’t speak to which ones are reliable or not.  Twitter Cards for WordPress seems to have a lot of downloads so I’d check that one out first if you are a WordPress user.

Unfortunately the way Subtext is architected doesn’t easily let me jam new META tags into my site that are dynamic (there is a tool that allows me to easily add static ones without altering the page itself).  A few properties for my cards would indeed be static (creator, site, domain) so I just used the Subtext admin area to add those.  The title and description I wanted to be content-specific.  I didn’t modify the Subtext source, but rather created my own ASP.NET 3.5 control that did this.  I put the code on my GitHub repository for you to view…you’ll see it is a quick few lines of code.  My control basically gets the context of the request, pulls the title/body out and sets these META tags.  Now whenever I post a URL to Twitter, my Summary Card option will be there and provide some helpful information to the reader (hopefully).

Viewing the results on different platforms

Looking at the results, I’m happy with my quick hack.  Outside of the web site, the cards only show on Twitter official apps it seems.  Here are some examples based on my site content.  The red box is only there to illustrate what content is actually the card:

Twitter Summary Card web view

View on twitter.com when expanding ‘view summary’

Twitter Summary Card iOS

View on Twitter for iOS when viewing full Tweet detail

Twitter Summary Card on Windows

View on Twitter for Windows

Simple metadata additions providing some more content beyond the 140 characters Twitter allows in the post itself.  I chose to use my face in the image because my blog doesn’t associate a “poster” image per-post.  If yours does, you should use that if available and change the twitter:image value as needed.

Summary

This didn’t take me long to implement and adds some additional value on to the content I post on Twitter (I hope).  Again, this is optional for the user, they have to click “view summary” or view the Tweet in details view to see this, so there is no general feed noise here.  I have found that it appears to cache the results per URL so there may be an issue if you change title/description on a post.  I’ve found that my initial tests wouldn’t update the previous Cards I had which were just the blog summary data…that’s unfortunate, but now I know.

When I talked with @JeffSand he mentioned this would be nice to have the App cards for Windows Phone/Windows Store apps (ugh, we really have to do something about that name).  I think this is a great idea!  Unfortunately it looks like Twitter needs to do something to understand Windows apps as it only understands iOS/Google Play app stores.  I’ve started a conversation with Jeff’s team as of the date of this writing and hopefully we can understand what might be required and deliver some goodness here.

If you are a content publisher (hint: if you are a blogger you are) this is a subtle and helpful addition to your content in my opinion.  If you are podcaster, consider using the Player Card as well.  It was really easy to understand and implement and I like the results.

Hope this helps!

| Comments

As someone who uses a few iOS devices around the house, I’ve become fond of visiting sites and seeing a little banner that lets me know that a native app is available for the web app I’m using.  This concept was introduced in iOS 6 and called “Smart App Banners” in the developer documentation.  You may have seen them as well

Smart App Banner example

I wanted to provide the same affordance for Windows Store apps and recalled there are already two ways to integrate the web app browsing experience with the native app in the Windows Store:

In iOS, this is implemented a bit natively in mobile Safari, not through any additional JavaScript files/functions.  As with any random idea I have, I always set out to search if it has been done before (often it already has).  I couldn’t find something like this specifically for Windows Store apps, however I did find an implementation for pre-iOS6 browsers as well as Android.  It was from Arnold Daniels and hosted on GitHub, so what’s a guy to do?  Fork it!

And that’s what I did: https://github.com/timheuer/jquery.smartbanner

With a few more conditional checks, if you put this in your web app/site now you’ll get it automatically linked to your Windows Store app if you have the correct meta tags.  For the implementation for Windows Store apps I’ve made some assumptions about the meta tags used.  The following would get you a good experience:

   1: <html>
   2:   <head>
   3:     <title>Hulu Plus</title>
   4:     <meta name="author" content="Hulu LLC"/>
   5:     <meta name="msApplication-ID" content="App" />
   6:     <meta name="msApplication-PackageFamilyName" content="HuluLLC.HuluPlus_fphbd361v8tya" />
   7:     <link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen"/>
   8:     <meta name="msapplication-TileImage" content="http://wscont1.apps.microsoft.com/winstore/1x/c8ac8bab-d412-4981-8f31-2d163815afe4/Icon.6809.png" />
   9:   </head>
  10:   <body>
  11:         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
   1:  
   2:         <script src="jquery.smartbanner.js">
   1: </script>
   2:         <script type="text/javascript">
   3:             $(function () { $.smartbanner() })
   4:         
</script>
  12:   </body>
  13: </html>

If you have the combination of linking your app using the msApplication-ID and msApplication-PackageFamilyName values and the pinned sites high fidelity msApplication-TileImage value to deliver the combined experience.  If you have all these, then the banner “just works” for you.

NOTE: Because the Microsoft documentation mixes msApplication and msapplication (note the casing on the “A”), you should use the capitalization (which is more consistent in the documentation) for ensuring it all works smoothly. 

Now some may use a different pinned site TileImage than that of what they may use for the app tile, however this can also be overridden in the options:

   1: $(function () { $.smartbanner({ icon:'http://some/url/to/tile/image.png' }) })

When done the web app/site would display a dismissable banner (using Hulu as an example here) on a machine running Windows 8:

Hulu smart app banner example

So adding one reference, 2 files and an initialization and you’ll help give your app a bit more promotional flare for those viewing in browsers other than the ‘modern’ IE view.  As you can see the screenshot above is from the desktop version which doesn’t take advantage of the other msApplication-** attribute usage in desktop mode.  The one thing it doesn’t do that the iOS system-level banner does is detect if the app is installed and change “view” to “open” however there isn’t a mechanism to easily detect if the app is installed using JavaScript from a web app.

NOTE: While the ‘View in Store’ button works in IE, Safari and Firefox it does not work in Chrome.  I’m not sure what any timeframe it would be for Chrome to support the store launch protocol.

Anyhow, I thought this might be a useful addition to app developers web apps that have a Windows Store app counterpart (and perhaps already have an iOS and Androi counterpart as well).  I’ve submitted a pull request to the project I forked from, but you can get it from my GitHub repository for jquery.smartbanner.

Hope this helps!

| Comments

In the late nights when I have time to work on Callisto (my Windows 8 XAML toolkit), I often am making changes that I really wish I could either pair with someone on or at a minimum solicit some feedback.  Primarily single-person open source projects are lonely :-).

Last night was no different.  I had a user of Callisto having a problem with a specific code path.  While my testing of the fix was fine, I didn’t want to rush it without him understanding the simple fix.  I had no good way of showing him a combined diff to comment on at the time.  My problem was, what I thought, simple: how do I quickly share a diff from a GitHub project without requiring them to have a fork?

I set out to the best place to have an argument, Twitter.  I asked the same question and got a lot of different responses, but almost all of them pointing to what appears to be the typical git flow in this matter is to use pull requests for code reviews and sharing potential updates.  This really frustrated me as I thought it was unnatural to the goal I was trying to accomplish.  Lots of folks told me this was the way to do it and that I was thinking about it wrong.  To them I say this is broken.  I didn’t want to pollute pull requests to be a mix of legitimate pull requests to “in-flight” code changes that shouldn’t be even considered for merge yet.  I simply wanted a quick, light-weight way to share a diff graph.

Paul Betts (as he has always awesomely helped with my GitHub questions) pointed me to the thing I was ultimately looking for:

   1: git diff > current.diff

This gave me the output that I needed and Gist understands color coding for this data so I just needed to post it there.  Good thing is that GitHub has an API that is relatively simple to understand.  Since I’ve been using poshgit as my shell lately I set out to create a CmdLet for my flow.  I wanted one command that would grab the diff and post to a Gist and give me the URL.  I’ve never touched a line of PowerShell programming before and set out to start.

Honestly, it was painful to understand PowerShell for me in this simple task.  The PowerShell “IDE” is slow to help with any really good flow.  I wanted some VS experience to bootstrap me and I knew I didn’t want a full-on assembly approach.  A PowerShell script should do me just fine.  I scoured many sites online and started out with my script.  After a few hours of searching/trying I was almost there but still not successful.  I ended the night posting back to Twitter with a Gist of my attempt.

It was late, I went to bed.  As is how most things happen on the interwebs, I awoke to some pointers to where someone has already done most of the work!  Despite my searching I never found something that basically took me 90% there already.  This was in the form of PsGist.  Boom!  This is exactly what I needed.  I just needed to modify the input from a literal file to the source of the diff.  I spent an unnecessary hour fighting with an unauthorized error on the GitHub API due to some unexpected value being in the string captured after entering credentials, but after that was solved I was done.  I decided to merge this back to PsGist and submit a pull request for the new command.  A few minutes later and after a few questions/quick modification, it was merged.  I now have a simple/fast flow to quickly say “hey, here’s what I’m working on, what do you think?” to anyone without having to do any different branching that isn’t currently in my flow.

   1: New-DiffGist -Description "SettingsFlyout fix" -Public

After the module is imported the above command will perform a diff, and immediately post that to Gist and give you the URL (and optionally launch in browser if you use the –Launch param).  I know it may sound trivial, but it helps my flow and is the simple thing that I was looking for.  Thanks Ryan for the PsGist starting point (and for merging my new CmdLet)!

Hope this helps someone!

| Comments

If you already pay attention to the IronRuby dev group and are on the distribution list, apologies for the dupe.  I’ve just got back from a camping trip and rifling through all my emails now.  I checked in on the IronRuby group and noticed a new project emerging from someone.

It’s from Ivan Porto Carrero and he calls it IronNails.  It was previously called something else (quite frankly I liked the other name better myself) but there was already a project named after his chosen name.  So alas, IronNails it is!  Ivan describes this as:

IronNails is a framework inspired by the Rails and rucola frameworks. It offers a rails-like way of developing applications with IronRuby and Windows Presentation Foundation (WPF). This framework uses the pattern Model - ViewModel - View - Controller (M-VM-V-C). It should be able to run on both WPF and Silverlight.  The idea is that the views can be created using a design tool like Blend for example and just save that xaml as is. The designer should not need to use anything else than drag and drop to create a GUI design. The behaviors are then added to the view by using predefined behaviors in the framework or by defining your own behavior. Source: IronNails GitHub homepage

The project is really just started so don’t expect a ton of meat there just yet, but it has a great goal and I can’t wait to see it evolve.  Ivan’s using the Rails-like framework of MVC where the XAML can serve as the view for either a WPF or Silverlight application.  The idea being that someone can create a view using a rich interface design surface like Expression Blend and write the code that targets the view which can be fine tuned to either Silverlight or full WPF.

The vision is something like this:

   1: class MyController < IronNails::Controllers::Base
   2:  
   3:   view_object :some_model, :refresh => :refresh_some_model, :refresh_interval => 2.minutes
   4:  
   5:   view_action :some_action, :target => :my_button, :action => :some_action_implementation
   6:  
   7:   def refresh_some_model
   8:     # code here
   9:   end
  10:  
  11:   def some_action_implementation
  12:     # code here
  13:   end
  14:  
  15: end

If you are interested in contributing or lurking, get on over to GitHub and watch the project!