Musings from an east coast software developer, writer and reader.

From the Blog

Jan
29

After a few years of iPhone ownership I made the mistake that has become signature of clumsy Apple owners as of late. The seemingly innocent mishap where your phone slides out of your hands and contacts with a surface, creating a spider-like hairlike crack across the glass screen, but rendering your phone still usable until you poney up the benjamins to replace the screen. At the point that this happened my phone was already two years old, I was eligible for another contract extension, but I refused to sign my life away to the behemoth that is AT&T for another two years. I got a really good deal on an Android phone, off contract, so I went down that route and for the first few months fought many battles that, I thought, were eventually won.

Most smart phones nowadays have battery problems. Even the brand new iPhone is plagued with issues regarding the battery life draining away that Apple is trying to solve with software patches. But I feel that because of the large differences in software stacks that are shipped with phones it is much harder for Google, and the device manufacturers, to solve these problems across the board. Every single Android device that I have ever seen has some kind of battery issue. Luckily this is solved quite well with the JuiceDefender application that is available from the market place.

Another issue that I’ve run into is that some of these standard, “best of the breed” Google applications, just plain old fucking suck. There are at least three different mapping applications that shipped with my phone that I can count. This may be a result of the bundled software that HTC installed, but from what I’ve been able to ascertain Google owns at least two of them. What the hell is the difference between Locations and Maps? I have never had an instance when I wanted a map where I did not want to find the fucking location of a business and get walking, subway or driving directions.

My phone came with a Navigation application that Google maintains. In my opinion this has to be the best navigation software that ships standard with a phone that I have ever seen. When it works it is much more accurate than any GPS navigation unit that I have ever owned. The turn by turn directions are almost aways spot on, and the features that come out of the box work as advertised. There is one catch. Often it can take five to ten minutes to pick up a signal with the GPS satellite, and by that time you’ve probably turned around several times because you lost your fucking way. Often rebooting the phone and launching the application again will solve this problem.

By far my largest complaint is the fact that Google can’t seem to hire proper employees that can actually design a framework to make these generic applications flow. It feels like the workflow of the applications were all thrown together without any foresight into the context of where I may have been before it launched. The speed of launching new applications is generally slower than the iPhone counterpart, and responsiveness of the system needs to be beefed up. My phone is by far not a slug, but why am I waiting for Google’s own applications to chug along, hang, and finally open up another application because the mapping application doesn’t actually incorporate the navigation software?

Google needs to work on the cohesiveness of the user experience across the whole system. The software is top notch. I love being able to synchronize my contacts, calendar, and e-mail between all of my Google services seamlessly. But I can’t turn a blind eye to the fact that someone over there doesn’t seem to understand that we need to have synergy between the workflow and the interface. The fact that this doesn’t exist and the software is plain old fucking slow is making me want to go back to Apple.

I purchased a screen replacement for my iPhone 3GS and plan on spending some time this week to bring it back to working order. I think my experiment with Android is done for now. You can release hundreds of phones a year with your software, get thousands of activations every day, but if you can’t make the software and the hardware work seamlessly what is the fucking point?

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.

May
30

I have finally begun my five-years-in-a-making web project and I decided to throw a simple countdown splash screen to give myself a little motivation to get it finished. Something that has always ticked me off about the Internet is the fact that despite all the standardization that we attempt to put forth with the W3C, Acid, and the HTML 5 movement it is still fucking impossible to pick a decent font that you can guarantee will be on (most) platforms. As a programmer, I absolutely loathe web design, in fact that is usually the barrier to entry for most of my web projects – I can not figure out the damn design – but through trial and error I generally am able to produce something which is at least a little pleasurable to look at.

This brings me to the topic at hand. The Google Font API (and the Google Font Directory) was announced at the Google I/O conference and detailed in this Google code blog post. What Google has basically done is created a repository that makes fonts freely available to web designers (and programmers) with a simple HTML stylesheet include. Before I even finished their blog post I was immediately cursing Microsoft because Internet Explorer 6 is usually the reason why technologies such as this do not get adopted quicker, but I was amazed even more, Internet Explorer 6.0 and up are supported!

As you can see on typealoud.com it is really as simple as these two lines of HTML/CSS.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Reenie+Beanie"> 
<style>
h1 { font-family:'Reenie Beanie', serif; }
</style>
<h1>123 days until launch.</h1>

Go take a look at Google’s blog post on the matter and start using the Font API in your own projects. Happy coding!