Thoughtless Banter – John Bellone

Programming

Nov

Social Integration: Tweeting, +1 and Like

Posted by JB at 11:20 pm

You may have noticed that there are several websites now that included integration with social networking websites such as Facebook, Google Plus and Twitter. These small buttons allow your user’s to share content instantly with their friends. Depending on which you’re including on your site it’ll show up differently, and each has a separate process to include them on your blog’s pages. Since I am using WordPress I will explain how to do this, but if you follow the example it should work in the broad case as well.

This functionality is provided by using meta information that is stored on the user’s browser. Unless you decide to do something nefarious, you do not have to their data by merely adding these buttons, but it does expose your user’s to a potential security risk. There are browser plugins that allow them to turn off this functionality if they have it enabled. If you’re comfortable with all this, then go on ahead and follow the instructions.

A useful wizard is available that provides you with both the XHTML and Javascript necessary to make this functionality work correctly on your site. The Javascript code snippet provides the bridge between the user’s browser and the Facebook social graph that this is using in the background. There are a few routes regarding how to implement it, I chose the HTML5 approach which asked me to add a schema namespace to the HTML element, and then used the custom like button element that is provided to display it.

Javascript snippet Place this after your BODY element

<script src="//connect.facebook.net/en_US/all.js"></script>
        <div id="fb-root"></div>
        <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=309698452382243";
        fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

HTML element Place this where you want the button to appear.

<fb:like href="http://example.com" send="true" layout="button_count" show_faces="true" action="recommend" font="lucida grande" display="inline"></fb:like>

You will be given the exact HTML element tag that you should use based upon your wizard settings. If you want to use this dynamically in the WordPress Loop to display under each post you’ll have to use a PHP function the_permalink(); which will return the URI to the page in question. This can also be done on the single pages if you so desire. One last step is to include meta information at the top of each page to let Facebook know how the post should be described in the user’s activity feed. This is very straight forward and simple. An optional title element should be used on individual pages. Categories can be selected through the wizard.

Meta information Place this in the HEAD element

<meta property="og:type" content="blog" />
<meta property="og:site_name" content="Thoughtless Banter" />
<meta property="fb:admins" content="199800257" />

The Google Plus approach is very similar, and doesn’t require any meta information tags. When a user decides to “+1″ any of your posts they will in a special location on that user’s profile, and in any the subscriber’s feeds as well. You’ll need to include a Javascript snippet, like above, and a special HTML tag element. You can add all of this below the Facebook directives if you desire.

Javascript snippet Place this after the BODY element.

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

HTML element tag Place this where you wish the button to appear.

<g:plusone href="http://example.com" size="medium" annotation="inline"></g:plusone>

Finally, the Twitter button is the easiest to place, and they once again provide a wizard for you to change the colors of the background, design, and number of tweets you wish to show (if you do not just want a button, but rather the feed itself). This one-liner can be placed anywhere you want the button to appear.

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://thoughtlessbanter.com/2011/11/23/furniture-for-men/" data-text="Furniture For Men" data-count="horizontal" data-via="johnbellone">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js">

That should basically the gist of how to get this functionality working on your website. Facebook offers more comprehensive widgets that take advantage of the social graph to display photos, and even information about user’s actions on your page. There is beta examples of how to post directly to the new Facebook Timeline feature that will be rolling out to your profile shortly. As more and more of these snippets become available you should consider both the advantages and the disadvantages of using them. I know that many user’s are worried about privacy and tracking that all the social sites are beginning to do. It is quite possible in the future that this type of functionality will be opt-in rather than opt-out and it may not work with the breadth of your user’s without their explicit consent. So be wary designing your website around these widgets specifically.

Nov

Visual Studio, WPF and XAML

Posted by JB at 5:30 pm

The last time that I touched C# was about four years ago. I had just finished my first semester at NJIT as a sophomore transfer, and I took a summer course with Daniel Boston where we developed a payment gateway for the Vector newspaper. Since neither of us had ever used any of the .NET languages, and one of our requirements was that this had to run on a Windows server, we figured it would be a very good learning experience. We taught ourselves the ASP.NET and C# syntax in only six weeks, working tirelessly during the nights over Skype (we both had summer jobs), to complete our project on time and present it to the class. Needless to say, we succeeded, but got burned a few times by how much a pain in the ass ASP.NET was back then.

A couple of weeks ago I had the opportunity to get familiar with one of our developer tools at my day job, which is written with C# and WPF, and I have to say that I am quite impressed. Microsoft has identified a key point in the application development pipeline, and as far as I can tell, made a valiant attempt at solving it: the user interface should not be tied directly to the application (business) logic, and using WPF with XAML you give designers the ability to modify the layout of the application through the use of themes. This approach is very similar to how the web development process, through the use of HTML and CSS, allows for web designers to not affect the application logic that sits in the “backend.”

WPF 4 Unleashed

This has been a huge help learning WPF and XAML.

I haven’t yet spent enough time with WPF 4.0, but from what I can tell this is the way to be developing all future Windows-based applications. After a little searching it unfortunately looks like that the team behind Mono will not be supporting WPF in the near future. It would be nice to be able to use XAML and C# to quickly develop cross-platform applications which would use the native API for each platform. That means Aqua for Windows (Vista/7), Cocoa for Mac OS X and either Gnome or KDE for Linux/Solaris/Unix. Not to mention each time that I get a chance to use Visual Studio I feel like any other software development IDE pales in comparison, but I have felt that way for awhile now.

If you’re interested in getting your hands into WPF 4.0, XAML, and the whole caboodle, head on over to Amazon.com and pick up Adam Nathan’s WPF 4: Unleashed which is the first programming book that I have seen that has high quality, full color, code samples. You won’t be disappointed!

Jul

C++ Async HTTP Server

Posted by JB at 12:00 pm

A few days ago to the sweet, sweet melodies of Billy Joel, I woke up in the wee hours of the morning to code up a very crude C web server. Of course, I tried to pass it off as a C++ implementation, but in reality I was pulling the wool over your eyes – the only C++ was used to build error messages, and the actual message to send down to the client. Not to mention it was a very crude, basic, implementation of socket handling in C. Nothing fancy.

Yesterday I was talking with some kind folks at the re:build 2011 conference in Indianapolis, and it got me to thinking that there aren’t enough examples of C++ applications talking to the web. You know, actual C++, using the boost libraries and what not. So this morning, after grabbing my amazing breakfast burrito at Henry’s in downtown Indianapolis I scoured the Internet and re-wrote my example application in Boost.Asio.

The code is much simpler, straight forward, and just damned better to look at. As always it is up and available at my Github account for consumption. If you’re interested in seeing the actual difference in implementations than go no further than right here.

I have a few more ideas on web services written in C++, but that’s for another day. Let me know if you have any questions. As always, enjoy the code and report any bugs.

Jul

C++ Web Server

Posted by JB at 6:54 am

C++
nginx

So, this morning I couldn’t sleep, and around 4:00AM I started messing around with nginx, fastcgi and C++. For awhile now I have been considering the feasibility of an extendable and reusable framework for serving up web content from C++ applications. Of course, all you web programers want to write code in Javascript and Ruby, but sometimes there are applications that can be core to a company that do not need to (or should not) be rewritten merely to service a different type of client. I wrote a little test program that I threw up on my Github.com account.

That’s my reasoning for developing this simple proof of concept application. I didn’t want to actually download the fastcgi libraries that exist for C, mainly because it was 4AM and I am a lazy fuck, so I decided to write up something simple with accept(), recv() and send(). The actual configuration for nginx is quite simple, you can just use their example for proxying to an Apache web server.

For those of you that are just as lazy as I am, click on this big bad beautiful link, and enjoy the show. Later, at some point, I will write up my thoughts on how an actual framework to solve this problem may work (and look), but right now I need to take a shower and go to work.

Mar

Type Aloud Launch

Posted by JB at 9:43 pm

After talking about it for several years now, telling my friends (and family) that I would eventually get around to doing it, and working through some good times (and hard ones) to get it ready, I am both happy and relieved to flip the switch for registration on the Type Aloud. I spent the night putting the final touches on the release candidate while watching Arnold bust some ass in Eraser.

Type Aloud has been a dream of mine for at least four years now. I envisioned a writing and reading community where people will not only be able to share their stories (and poems) but also get collaborative feedback for both editing, and hopefully, print publishing. Some of the most intriguing writing I have read came from people that were not published professionally. I look forward to being able to read (and write!) much more than I have in the past with this service. My primary goal is not to be profitable: Type Aloud is a service that I want to use myself. I am a lucky man if I am able to break even.

For those of you that consider yourselves an amateur writer, or anyone who has the itch to tell a good story, please head on over to Type Aloud where you can sign up and begin writing! Over the next couple of weeks I am going to start posting some of my own work, and I will be (trying) to get some local writers to do the same. The more, the merrier.

Now its time for me to go to bed.

Mar

Model Scopes in Rails 3

Posted by JB at 2:53 pm

I am going through the Type Aloud code trying to improve queries, implement some fragment caching, and generally clean anything up that I can before flipping the proverbial switch on this bad boy. I came across something a few weeks ago that, combined with the awesomeness that is Arel, makes my life a hell of a lot easier writing queries.

These named scopes have been around in Rails for awhile now, but as always I am coming late to the party. Because Type Aloud contains “draft mode” where stories and chapters can both be in an unpublished state I need to be able to call only the chapters and here is a quick, simple way to do that on the model.

scope :published, lambda {
   joins(:story).where(:disabled => false, :stories => {:disabled => false}).includes(:story, :user)
}

The named scope will filter out any chapters that are not published or any chapters in stories that are not published. This is very important when displaying, let’s say, a random chapter for reading that may not have yet been published in an existing story. The last statement at the end there will eager load the story (and user) because there really is never an instance where I don’t want the story (user) records associated with this. Here are the queries that are executed.
And here and the queries that are executed from this little snippet.

SELECT `chapters`.* FROM `chapters` INNER JOIN `stories` ON `stories`.`id` = `chapters`.`story_id` WHERE (`chapters`.`disabled` = 0) AND (`stories`.`disabled` = 0)
SELECT `stories`.* FROM `stories` WHERE (`stories`.`id` = 1)
SELECT `users`.* FROM `users` WHERE (`users`.`id` = 2)

And of course, this is what the signature looks like from the controller.

@chapter = Chapter.published.limit(1).first

For this particular operation it resulted in a 0.5ms improvement in time spent during the Active Record phase. That may not sound like a lot, but it actually is a 19 percent time optimization. Good stuff!

Feb

RDBMS Specific Migrations With Rails

Posted by JB at 10:55 pm

I have been running into a problem recently with my development over at Type Aloud; some of my column data types differ from MySQL (my development database) and PostgreSQL (my production database). I store two copies of the story in the database: the first is the “human readable” version that uses the Markdown syntax and the second is the HTML version of that syntax so it is easier to fragment cache and display when someone is viewing the chapter. This problem is particularly irritating because when it first happened in MySQL the text was merely truncated, but in PostgreSQL it correctly does not allow the insertion into the table if the text is too long.

For the past couple of days I have been doing some light searching trying to figure out a way to have a RDBMS specific database migration, and I once I did some pecking in the ActiveRecord::Migration class I was able to figure this out pretty easily. I figured that I would share it below since it took me a little while to find it. Now normally I do not believe in migrations being platform specific, but in this case because I wanted to actually have the application work on two types of platforms (in this case, two RDBMS).

class AddLongtextToPostgresql < ActiveRecord::Migration
  def self.up
    case ActiveRecord::Base.connection.adapter_name
    when 'PostgreSQL'
      execute "CREATE DOMAIN longtext as text"
      execute "ALTER TABLE chapters ALTER COLUMN html TYPE longtext"
      execute "ALTER TABLE chapters ALTER COLUMN body TYPE longtext"
    else
      puts "This migration is not supported on this platform."
    end
  end
 
  def self.down
  end
end