A Shiny New Me

Bridging The PhoneGap: Twitter Plugin

Mon, 02 Apr 2012 17:53:00 -0400

In the first part of this epic and questionably long series, I did a very quick introduction to the ChildBrowser plugin for PhoneGap. In this post, i’m going to expand the application I built in the first post to leverage the deep Twitter integration in iOS 5.

The Twitter Plugin

Why

You may come to a point in your application when you want to allow people to share what they have found or created via your application, with the rest of the internet via Twitter. There are a variety of ways to accomplish this.

You could roll your own where you authenticate the user to Twitter via their OAuth mechanism. If you like that sort of pain, this can work just fine. However, you have fringe issues that you will have to address immediately, which include shortening links and the nightmare that is trying to share images by uploading them to Twitter’s sharing service.

Someone once Tweeted that sharing on the internet is in fact broken, because OAuth makes it so darn painful. Oh wait, that was me.

In the case of my application, I could rely on the pages that I link to having share buttons, but then you have to navigate the page, click on the tiny twitter button and sign in if you haven’t already signed in on your phone since the last time you cleared the cache. That’s a terrible user experience though. Case in point below…

Note that this is not a problem with the author’s site, its simply a usability issue that mobile doesn’t handle very well. The button is tiny and when you click on it, you are redirected to yet another window to post to Twitter. On the web, this is fine. On a phone, not so much.

What you may or may not know, is that iOS has deep integration with Twitter. It’s actually built right into the OS and will take care of shortening links, uploading images - the whole 9. But as with many PhoneGap situations, there is no way to use this with PhoneGap out of the box.

What

Luckily for us, Randy McMillan has built a nifty plugin for PhoneGap that allows us to take advantage of the native Twitter sharing and it’s darn easy.

As with most PhoneGap plugins, the trickiest part about the plugin is getting it installed correctly and running. Once you do that, the API is dead simple and Randy has done a great job of making sure that all scenarios are covered. Let’s take a look at how to use the Twitter Plugin for PhoneGap.

How

Download the PhoneGap Plugins if you haven’t already.

Inside the iOS folder, you will find the Twitter Plugin. I’m simply going to extend the Reddit Browser Application that I built in the ChildBrowser Plugin post to allow users to tweet a Reddit story directly from the application using the really nice Twitter integration in iOS 5.

Inside the Twitter folder, you will find an native folder in which you will see a native folder. This is the folder that you want to add to your project.

Right-click the plugins folder in your project and select Add Files. Browse to that ios folder and select it. Remember to choose “Add groups for any added folders”. This will create a yellow folder under plugins. If it creates a blue one, you did it wrong. Delete them and do it again.

Add the entry to your Cordova.plist file. The entry key is com.phonegap.twitter and TwitterPlugin for the value.

We are going to need to add Account and Twitter references to our build phases. To do that, select your project name, in the side bar that appears next to it select Targets and your project name. Then select the Build Phases tab and add Twitter and Accounts to the Link Binary With Libraries section.

Add the TwitterPlugin.js file to your www folder and don’t forget to add the reference to your index.html.

If you get some errors when running your project, check the weak linking issue at the bottom of the plugin GitHub page. I had to make this change to my project in order to get the plugin to work.

Now I can tweet one of the Reddit stories simply by calling the plugin and the composeTweet method.

The method takes 4 parameters.

The function to call on success of the Tweet.
The function to call on Tweet failure (note that this fires when the user clicks Cancel as well).
The text of the tweet.
An object parameter that can take an image, several images, a URL or some combination of all three.

In this case, I am just passing the title of the story along with the URL.

$("#popular_news").on("click", ".tweet-button", function(e) {
    var title = $(e.currentTarget).data("title"),
    url = $(e.currentTarget).data("url")

    window.plugins.twitter.composeTweet(
        null,
        function(e) {
            if ($(e).trim().toLower() !== "canceled") {
                navigator.notify.alert("Failed sending Tweet..." + e);
             }
         },
         title, {
             urlAttach: url
         }
    );
});

I’m not doing anything in the above success function so I just pass null. But the failure function is necessary in case the user tries to Tweet without a connection. This function returns a string error. It returns Canceled if the user simply cancels out of the dialog. In that case, we don’t want to pop up a notification. Only in actual failures do we want to show something.

But there is one thing here that we are assuming, and that is the fact that the user has iOS 5 which supports Twitter integration their Twitter account linked to their phone. Like I said, Randy thought things through so we have some functions to check for that.

In the case that they are not on iOS 5, I’m going to hide the tweet button via a boolean value. In the case that they have Twitter integration, but they have not linked their account, I’m going to prompt them to go do that.

$("#popular_news").on("click", ".tweet-button", function(e) {
    var title = $(e.currentTarget).data("title"),
    url = $(e.currentTarget).data("url")

    // is twitter setup? If not, tell the user to go do it  
    window.plugins.twitter.isTwitterSetup(function(r) {
       if (r === 1) {
            // twitter is setup, compose a new tweet
            window.plugins.twitter.composeTweet(
                null,
                function(e) {
                    if ($(e).trim().toLower() !== "canceled") {
                        alert("Failed sending Tweet..." + e);
                    }
                },
                title, {
                    urlAttach: url
                }
            );
        }
        else {
            navigator.notification.alert("Please setup Twitter under Settings to use this feature", 
            null, "No Twitter :(");              }
    });

    e.preventDefault();
});

And here is a short video demonstrating the Twitter Plugin leveraging the Twitter Integration is iOS 5.

I hope this rundown on the Twitter Plugin has been useful for you. This plugin does more than just tweet, including getting Timeline and Mentions. As always, you can grab the source code off of my GitHub repository.

Bridging The PhoneGap: ChildBrowser Plugin

Fri, 23 Mar 2012 12:58:00 -0400

This is the first post in a series that I have been meaning to write for a while. PhoneGap (now called Cordova) is the defacto platform for building native applications with HTML5. In the past few years we have seen quite a few JavaScript frameworks pop up to help you with your UI, which has always been the toughest part.

To name a few we have…

…and several more.

We’ve just about got this nut cracked. PhoneGap provides a fantastic wrapper for deploying your applications and taking advantage of native device features.

But there are places where we still have a gap. Fortunately enough, there is a GitHub Repo dedicated to bridging this gap with plugins for PhoneGap that provide missing or extended functionality to the base PhoneGap install.

In this post, we’ll take a look at one of these plugins called The ChildBrowser Plugin. I’ll go over the (Why, What, Where, How) WWWH for each of these plugins.

All of my demos will be done in iOS. Note that the process for doing this on Android may be different than what you see here.

The Child Browser Plugin

Why

PhoneGap wraps your application in a mobile Safari window. But what if you want to open a new window? While we are doing HTML/JavaScript development in PhoneGap, some things do not work. For instance, you cannot simply call…

window.open("http://google.com")

or

<a href="http://www.reddit.com">View On Reddit</a>

Spawning new windows or redirecting to other content is not OK and doesn’t work they way it does on the web. The reasons for spawning a new window in a web application vary, but consider the following scenarios…

You want to let a user browse a link in your application without actually having to leave your app.
You want to popup a window so they can login to a 3rd party (read Facebook, Twitter) without having to leave your application.
You want to display a PDF document for them to read.

What

The Child Browser Plugin was created just for this scenario. It allows you to open a new window and even has events to capture responses from the spawned child window.

The ChildBrowser is part of the PhoneGap Plugins Project.

Once you download it, you need to install it. I’m going to create a sample application that lets you pull in Reddit Stories and then click on a link to view the article full screen in the child browser window if you so choose to do so.

In my first pass at this, I create a link for each item with the href set to the url of the article.

What happens when I click on the link?

Hmmmm, thats weird. It took us to the right web page and we didn’t leave the application, but now my application is gone and we have a website instead with no back button. Not what we wanted.

Let’s try it again and set the target of the href to _blank.

That works too, but it opened up mobile Safari and my app went away. It’s going to be a pain for users to click on links, go to Safari, come back to my app and then repeat over and over again. We need a way to let them browse web content without leaving our app.

We’ve seen enough of the What and Why, let’s look at the How.

How

The first step is of course to download the ChildBrowser plugin. You can download the whole repo of plugins, which contains a version for every platform. As I mentioned earlier, I am going to be targeting iOS.

It’s important to mention here that if you haven’t downloaded PhoneGap (Cordova) recently, you need to do it again. It recently switched to being called Cordova and all the namespaces changed. The plugins will throw errors if you don’t have Cordova.

For my UI, I am using the new Kendo UI Mobile.

Once you have downloaded the plugins, browse to the iOS directory and then to the ChildBrowser folder. Inside that folder, drag ChildBrowser.js or ChildBrowser.min.js to the www folder of your application. You can delete the FBConnect example.

Now in XCode, right click on the Plugins folder and select Add Files. Browse to the ChildBrowser folder and select it. When you click Add, make sure you have the Create folder references for any added folders selected. You also want the Destination checkbox checked, but it should be by default.

Now we need to tell PhoneGap (Cordova) about this new plugin by opening up the Cordova.plist file and making an entry in the plugins section. The correct key/value pair entry is ChildBrowserCommand on both sides.

Add a script reference for the ChildBrowser.js or ChildBrowser.min.js to your index.html file in the www folder.

<script src="ChildBrowser.js"></script>

Once the script reference has been added, I can call the ChildBrowser plugin from JavaScript. The following function will be called when an item is clicked. It open a child window and sets the url of the window. Notice that we have to install the plugin first and make sure it is in fact installed before trying to use it.

pub.goToUrl = function(sender) {
  // get url off of data attribute from item that was clicked
  var url = $(sender).data("url"); 

  // install ChildBrowser
  var cb = ChildBrowser.install();
  // if ChildBrowser is installed, open it with target set
  if(cb != null)
    window.plugins.childBrowser.showWebPage(url);
}

Now when I click on an item, a nifty window slides up from the bottom. It allows the user to fully navigate web content, and when they are done, it simply slides down and goes away, bringing them right back to my application. Check out the short YouTube video below showcasing the ChildBrowser in action.

ChildBrowser

The ChildBrowser plugin is a very nice way to display external content or allow your users to read PDF files without them ever having to leave you application. This is a much better experience for the user.

PhoneGap (Cordova) is really great, but you have to know how to bridge the gaps in functionality when they exist.

You can grab the Xcode project used here on my GitHub page. I’ll keep this repo updated with this series of posts, providing the demo projects that I built here. Hop on over and grab the download.

Start developing with PhoneGap. It’s easy, and it’s getting better all the time. There are gaps, but we can bridge those with plugins providing an end to end native experience with HTML5.

Harness The Power Of JavaScript [ Array Notation ]

Tue, 28 Feb 2012 10:16:00 -0500

I’ve been following along with Jeffrey Way (who has a smokin’ hot wife - his words) and his 30 Days To Learn jQuery over on Tuts+. I can’t say enough about this series.

It’s. So. Good.

His understanding of not just jQuery, but JavaScript in general and the ability to create relevant demos and examples is unmatched.

OK. Enough about Jeffrey. I don’t get paid to talk about Tuts+. But maybe I should… Hit me up Jeff.

Rewind

He did something in a recent episode that made me go. “WAIT! WHAT!?! You can do that?”. Touch slider to rewind on iPad. Touch slider…touch slider….Finally - rewind and watch again. Why is it so hard to grab the video scrubber on iOS sometimes?

He showed JavaScript Array Notation. This also commonly referred to as “Square Bracket Notation”. Now this was something that I sort of *knew* about in the back of my mind, but it never clicked really. I never used it.

The concept is simple. You have a JavaScript object. That object has methods. You already know that you can call these methods with the dot notation.

object.method();

Laaaaassssieeee!!!!

Let’s look at a simple demo. In this example I have created an object called Lassie. Lassie has some methods that she can execute. Instead of just logging an event, I used pictures I stole off the internet. Because it’s more fun.

In this rather bad example, I have two buttons. Each time a button is clicked, I can fire a method on the lassie object. Try it out.

That works, but we have 4 methods and we would need a button for each method. It would be better to have a drop down of available actions and then execute the right method based on the selection.

What you might not realize is that JavaScript also allows you to call a method with Array Notation. So instead of calling this…

lassie.bark();

You can call this…

lassie[“bark”]();

Did you catch that? All you need is the string representation of the method name. We could now refactor the above example to use a drop down list instead and then just use the value of the selected option to execute the right method. Dynamically.

A Real World Example

Lets look at another less ridiculous example of array notation.

I’ve been working on an HTML5 application called HTML5 Camera. This site uses bleeding edge WebRTC to capture video from your webcam and play it back through an HTML5 video tag. It then captures the video output to a canvas element. Once the image is on the canvas, I can manipulate the pixels to apply effects to the image.

I’m currently using a forked version of VintageJS from Robert Fleischman. It allows you to apply vintage effects to an image with JavaScript.

In my version, each time I call the vintage() method on an image, I have to pass in an object which contains configuration values. For instance, the standard vintage object looks like this…

Each of the effects presets look like this. I have a JavaScript file that is full of these presets. Now in my case, I will eventually be loading these effects objects from a remote URL and serializing them into JSON objects so my implementation will change slightly. Well, probably a lot.

I need to call the vintage() method on the image and pass in the object containing the presets. Normally, if I knew what preset to pass, I would just pass it.

$(“img”).vintage(effects.presets.default);

What I needed to do was have a drop down list that would display each of the effects dynamically as I add them and put them in a drop down list. I could do that easy enough with a for loop and hasOwnProperty.

Then I can apply the effect by selecting the image, calling the .vintage() method (which is part of the VintageJS jQuery plugin) and passing in an effects object based on the value of the drop down list.

What follows is a working example. You can set the effect on the image of me “raising the roof” by changing the drop down value. There is no list of effects anywhere. This drop down is populated directly off of the effects object and then the effect is applied using JavaScrpt array notation passing in the string value of the selected drop down list item.

And this is the code that both populates the drop down and executes retrieves the appropriate object for based on the user’s selection in the drop down.

So in this last example, I wasn’t calling a method - but rather retrieving an object based on it’s “string” representation.

If you have worked with static languages before, you know that in order to do something like this (pre-dynamics in .NET 4.0 and things like that), you had to use Reflection. And it was not fun. Kind of like the flu is not fun.

There is so much power in dynamic languages. With JavaScript Array Notation, you can execute arbitrary methods or retrieve objects inside of other objects without having anything more than the string representation of the object/method name. And that, is sexy.

Legitimate Uses For Private Browsing Mode

Thu, 16 Feb 2012 12:20:00 -0500

Let’s talk about Private Browsing mode.

You know what it is. It has other names that are less savory as it is generally agreed upon that browsing privately is because you don’t want other people to know what you are looking at. It’s commonly called “Porn Mode”. Well, so much for staying classy.

But we’re all adults here. We can get through this. Stop the giggling.

Mozilla has offered some very eye opening metrics on this subject, including the fact that Private Browsing mode is used usually in a window of 10 minutes or less. Here is a chart offered by Mozilla from their metrics blog on the issue.

Source: Blog Of Metrics - Understanding Private Browsing.

Care to see some more metrics?

None of it is really that surprising. I found myself in an odd conversation at dinner lately about Chrome’s Incognito Mode (FireFox calls it Private Browsing). We all had a good laugh, but I thought about all the legitimate uses that Private Browsing has. Besides buying gifts for your wife.

Shockingly, it is an essential tool in every day web use when you find out what it can do for you. I even polled some other people on this and found that it has quite a few legitimate uses. Here are some of the ones I use myself along with ones that were recommended to me.

So fire up your favorite browser and let’s make a Private Browsing an honest citizen. I will be using Chrome for these examples. On a Mac, that’s cmd + shift + n.

Web App Development

What is one of the single most annoying things about Chrome when you are doing web development? Caching. Chrome will cache certain files, especially if you’re using external templates in JavaScript and loading them in. It persists the cache across window instances as well. Closing the browser and re-opening does not help.

Uhhhh. That’s so annoying.

When you refresh in Private Browsing mode, it won’t read from the cache. Well, that’s partially true. I’ve seen it read from the cache on the initial load in a new tab but not when the tab is refreshed. So just watch the network activity to make sure that you have a fresh copy of your files.

Multiple Gmail Accounts

Ralph Whitbeck pointed out to me that it’s super useful for multiple Gmail accounts. Beyond that, it’s super useful for Google accounts in general. Say you are logged into Gmail in one tab and you want to log in on another tab on a different account. Once you log yourself out in the second tab, it logs you out in the first as well.

This actually happens in Chrome Incognito Mode as well. The trick is to keep one account open in regular browsing mode and the second in Incognito mode. Now you could log in to your Gmail account and a seperate - perhaps “company” - YouTube account at the same time without stepping on yourself.

And guess where else this works….

FACEBOOK!

Yes - that’s right. Once called the “The Birthday Website” by Scott Hanselman, the prolific social network for sharing what you are cooking for dinner and giving people completely disingenuous birthday wishes is a great candidate for multiple accounts.

Scenario: You are a lover scorned. You need to have your regular account open so you can stay up to date on the lives of a bunch of people you hated in high school, but you also need one for your fake account so you can stalk your ex and find out who they are seeing now. You need to be able to do both so you can launch your break with reality at just the right time.

As a point of fact, I have my facebook and my wife’s open right now. Wait, she’s listed as single?!? Hold on. I’ll be right back.

……………………………………

Ok, back. In other news I’m now single.

Going Down The Rabbit Hole

Menno Van Slooten noticed that it’s also great for going down viral rabbit holes. You know, someone sends you a video of a large person falling down and you click on all the other videos of large people falling down. 4 hours and 300 memes later your internet history is shot to hell and you cannot find that article you were reading the other day about legitimate uses of private browsing mode.

Since private browsing does not store your history, it won’t polute your main timeline. Don’t just randomly browse the web in a normal window or your history gets pretty useless pretty fast.

LEGITIMIZED!

From helping you with development to allowing you to unleash your inner psycho on Facebook, it’s great to remember that private browsing mode is good for more than just your sultry late night browsing. Although its really good for that too.

How to know what items in your project actually belong in...

Mon, 13 Feb 2012 09:17:18 -0500

How to know what items in your project actually belong in GitHub.

HTML5 Native Video Streaming With WebRTC

Wed, 01 Feb 2012 18:28:00 -0500

I did a tounge-in-cheek video response to Web Bos this week who sumbitted this epic video for FluentConf showcasing his all around HTML5 video awesomeness. In this video he streams directly to his browser and applies effects on the fly from the console. If this doesn’t impress you, you may be heavily medicated.

Uh - yeah. Like A Boss. Or rather like a Bos.

Now I saw this and had 2 thoughts…

1. That’s awesome. My video now sucks.

2. How the heck did he do that?

In the name of education and also to increase my own chances of getting picked up for FluentConf, I made an HTML5 video video of my own. Video video.

My video wasn’t nearly as good, but I really enjoyed working with the new methods for capturing native video with nothing but a browser. No plugins, just Chrome and JavaScript.

WebRTC

First lets do a little primer on WebRTC. This is a project that was open sourced by Google last year in an attempt to enable Real Time Communication within a browser, handled natively by the browser. Hence the RTC name.

Apparently, WebRTC has been around for a while and according to the WebRTC site is:

“Already integrated with best-of-breed voice and video engines that have been deployed on millions of end points over the last 8+ years.”.

- http://www.webrtc.org/faq#TOC-What-is-WebRTC-

It appears that now Google is attempting to make this the defacto standard for real time communication in the browser.

WebRTC provides a layer of abstraction which allows developers to use whichever supported “signaling” protocol they wish. Additionally WebRTC has a broad range of codecs for audio and video as well as networking support for buffering and to prevent against packet loss.

There’s a whole site dedicated just to WebRTC and I encourage you too read up on it here. Especially if you are having trouble sleeping.

Browser Support

WebRTC is currently supported in the dev branch of Chrome along with Canary - which you can think of as the bleeding edge of Chrome. I use the stable branch of Chrome along with Canary for one main reason. You can run Canary side-by-side with your existing stable Chrome install without any adverse affects. They use different profiles.

Once you have downloaded either the dev or Canary builds, you have to enable WebRTC. There are two ways to do this. The documentation says to enable it by launching it with the “—enable-media-stream” switch. This is to complicated for me, so intead just launch Chrome and go to chrome://flags. That will take you to a GUI page where you can scroll down an enable WebRTC support.

Who gives you amazing screenshots with unnecessary arrows? It’s just what I believe in.

Streaming The Video

Streaming the video to your browser is dead simple. First you have to have a webcam for obvious reasons.

Start with a simple HTML5 video tag in your page. Remember, if the video tag is not supported by the browser, you will see the text in between the open and close video tags.

It’s time to drop down into the JavaScript and fire up the webcam.

The method we are going to be looking at is found off the navigator object which comes along for the ride with a supported browser. The function we will call is webkitGetUserMedia(). This is incredibly Chrome specific at the moment, but it’s the bleeding edge of HTML5.

This method takes in 3 arguments. The first is a string denoting the type of media we are going to get - in this case “video”. The second is the callback for when the stream is acquired and the third is a function that executes if there is an error while getting the stream.

Note that the error function does not work if WebRTC is not supported. If the browser doesn’t support it, it dies silently but you can see it under the covers in your dev tools.

Assuming that your browser supports WebRTC and you got the stream, you enter the callback for success. The success callback is where you need to select the video tag on your page and assign it the stream from the navigator.

The complete code for a page that displays your beautiful face via the webcam looks like this…

That’s pretty darn simple code for what you get. Now the cool thing is that this video is an HTML DOM object that you can manipulate however you want! In my video, I just shrunk it down to 0 by 0, delayed and then brought it back to size using jQuery animate functions.

If you are viewing this blog on a supported browser, you should see yourself below. If you see nothing, it’s because you aren’t supported. I could wrap in a try catch but it’s late and I’m lazy.

In Wes’s video, he does some really cool stuff by adding effects to the stream. I would write a blog post on that, but you should come to FluentConf and check out Wes’s session instead.

A special thanks to Wes Bos for reviewing this post and pointing out that Opera does in fact have support for getUserMedia as well.

A CoffeeScript Revealing Module

Wed, 18 Jan 2012 15:21:55 -0500

This past week I had the pleasure - and it was a pleasure - to visit the fine city of Sandusky, Ohio. Now up until this point, all I’ve known about Sandusky is this…

We were at the Kalahari Resort for CodeMash. This is a fabulous place by the way. Not only is it a fantastic indoor water park, but they have several restaurants, a wicked awesome candy shop and an arcade that will blow your mind. And your wallet.

CodeMash itself was epic. Unfortunately, being at an indoor water park does not mean you actually get to GO there. We spent almost all of our time at the conference, and since I was actually helping to proctor the event, I stayed pretty busy and didn’t get to attend many sessions.

I did make it to one session though that had a major impact on me.

Brandon Satrom did “CoffeeScript Is For Closers”. Brandon recorded a version prior to CodeMash and you can find the video here. I highly recommend watching it. The session is outstanding.

I had tried CoffeeScript in the past and found it frustrating. I found it frustrating for a couple of reasons.

1. How exactly do you use it with your project?

I get it. It’s a small language that compiles to JavaScript. It removes curly braces and semicolons. Great. Now how do I get it into Visual Studio or my Rails project? I had tried some third party plugins which I found disappointing because I couldn’t figure out how to use them.

2. My favorite patterns aren’t working anymore

I tend to develop using the same sort of JavaScript patterns over and over again. These patterns essentially stopped working with CoffeeScript because I couldn’t figure out how to structure them. No matter what I did, I couldn’t get CoffeeScript to write the JavaScript that I wanted. So I figured, why not just write the JavaScript myself?

#1 SOLVED

If you have this problem, watch Brandon’s video as he will show you what to do. That’s not the point of this post.

#2 WAT

What I learned about CoffeeScript is that it enforces some JavaScript best practices on you. If you aren’t prepared for this, it can be just a tad bit confusing. When I got home, I gave CoffeeScript another try and here is what I learned about how to recreate my favorite pattern in JavaScript, which is the Revealing Module.

Revealing Module

This is my absolute favorite way to structure my applications. The idea here is that you declare a variable which you set to a function. That function returns a variable which has methods. Each of these methods is public. Any functions not returned on that variable are private.

Let’s take a look at a sample revealing module.

JavaScript

This simple module is a logger. When it is intialized, I pass in a jQuery object representing the DOM element on the page where I want content to be logged. The init() and log() functions are public. The write() function which actually does the work, is not.

Additionally, I pass in the jQuery library to the main function and set that to $. It’s a good idea to not just assume that $ is always jQuery. But it should be.

CoffeeScript

My first run at this with CoffeeScript was a disaster. This is what I did…(CoffeeScript is on the left and JavaScript is on the right)

There is so much wrong with this, I just don’t know where to start.

Let’s start with the fact that when you run this, pub is undefined. What? I thought in CoffeeScript you just started rocking with variables without having to declare anything.

Yes, but in this case that you are referencing a variable on a variable that does not exist, you need to first define the variable. Ok, I can do that…

Now pub is defined, but if you look at the JavaScript that’s getting generated, the last thing returned is the Write function. That’s the ONLY thing I don’t want returned. You can see how this gets frustrating.

To fix this you can just return pub - or if you want, just type the word pub. CoffeeScript returns the last thing by default. Fine, pub.

Best Practices. Pffffftttt.

Now the right thing is being returned out of the function. But here comes the “Best Pratices”.

Normally, we would reference this logger variable as logger.init() and then logger.write(). After we have loaded the JavaScript file, it should be available. But it’s not. Why not?

Notice that CoffeeScript is enclosing this whole variable logger in an anonymous function. It then executes call(this). What this basically does is protect the global namespace, and make sure that this = this. It can be tricky to keep up with exactly what this is equal to in JavaScript because it may be changing with the current scope. CoffeeScript is ensuring that this is in fact the global this when the function executes.

This is where I learned an important lesson. CoffeeScript protects the global namespace at all costs. It’s basically saying “You’re mom doesn’t live here. Don’t leave your crap lying around”. In “JavaScript, The Good Parts”, Crockford recommends prefixing variables that are going to go onto the global namespace with something like MYAPP. I don’t like that, but the point is that you aren’t just shoving things that could overwrite each other onto the global scope. CoffeeScript is protecting the global namespace by wrapping my variable declaration in a closure. As soon as the function is exited, it’s no longer available.

Now that we have talked about why you shouldn’t put things in the global namespace, let me show you how to put something in the global namespace.

Let’s take a page right out of Jeremey Ashkenas own playbook. He wrote CoffeeScript btw.

Having a look at Underscore.coffee, you can see that the first thing he does is assign root to this. Then, he assigns his underscore variable to the root. This makes the _, and all of it’s functions available off the global namespace.

Passing in jQuery becomes different as well. Since the whole thing is wrapped in an anonymous function, we don’t need to pass in jQuery like we would with JavaScript. Instead, we can use the CoffeeScript do, which will create a closure around the logger function, allowing us to pass in jQuery there.

Here is what the revealing module looks like all finished.

Now that I know what CoffeeScript is going to do, I’m much more inclined to use it. I’m actually looking forward to using it because it makes code much easier to read. Go look at underscore.coffee and see how easy it is to follow. It’s brilliant how this works really. Not only does it compile down to JavaScript, but it teaches you quite a bit about JavaScript in the process.

A special thanks to Dan Mohl who gave me input on this article and contributed to some of the content, including cleaning up the final example.

EDIT

This is what I love about blogging. Steve Howell provided us with a super sexy and more terse example in this gist from his comment below. Thanks Steve!

JsFiddle Tips And Tricks

Mon, 02 Jan 2012 09:45:00 -0500

I did a quick 15 minute presentation on JsFiddle Tips And Tricks and I was surprised at how many people had not even heard of JsFiddle. I think 3 or 4 hands went up in a room of nearly 100.

Of course, you do have to account for the 75% of people who just don’t answer questions in a group setting. That’s cool. I’m that guy sometimes. Especially if I haven’t been paying attention to what you are saying.

So assuming 25% of you haven’t heard of JsFiddle, that’s unacceptable.

JsFiddle is a browser based application created by Piotr Zalewa for creating snippets of HTML/CSS and JavaScript that you can version and share with others. It’s good for so many things and I use it pretty much every day. I have a fluid application setup just for JsFiddle. I also made an icon for it. Which I copied from Google. Ok, so I didn’t “make” it - I resized it. Which coincidentally is about the extent of my design skills. Just right-click that nifty JsFiddle PNG to the left there and save it. You will get the full PNG with transparency.

With JsFiddle, you have no need to create scratch or throwaway projects just to build a POC or prototype some idea. The syntax highlighting and auto-indentation support is really impressive for a web based application. In fact, the text editing capabilities are what really set it apart. It’s got a lot of obvious features, but some of the nicer ones aren’t as obvious.

Tips And Tricks

1. Use JsFiddle With StackOverflow

StackOverflow is such a great way to get answers and help others out. It’s really redefined how we get solutions to our problems with some parameters around the validity of an answer. One thing that will really scare people away from trying to answer your questions, is you post something with 250 lines of code. It’s just too much for the eyes. However, you can create a simple fiddle in JsFiddle and it’s much easier for people to not only debug your code, but also give you an answer by forking your code and then providing the link to the fix.

I hope that StackOverflow will consider direct JsFiddle integration. It’s a subject that’s already been broached on meta.stackoverflow.com

Tip 2 - Create Templates

Once you create an account and login to JsFiddle, you can create templates by adding in resources under the “Manage Resources” section - like external js/css libraries.

Drag the link to the fiddle to your toolbar in your respective browser and when you need to write a new fiddle with those same references, you just click the link, fork the fiddle and go. I created several templates a while back for some commonly used resources and UI libraries.

Tip 3 - Embedding Fiddles

You can embed fiddles from the “share” menu on JsFiddle. You can then share them directly in your posts. I do that ALL the time both here and on kendoui.com/blogs. The embedding is pretty simple and clear.

Hit the “share” menu and then select embed and copy the code. Then just paste the code into your site or blog post. That’s pretty simple.

Then it will look something like this in your page.

Once you have it in the page, you can adjust the tabs that the user sees by adding certain variables after the “embedded/”. You can add “result”, “js”, “html and “css”. Each of these is delimited by a comma. For instance…

…/burkeholland/JwDZN/embedded/result,js

would show only the results and js tabs in that order.

Tip 4 - Clear The Clutter

Sometimes the clutter of the JsFiddle windows interferes with debugging because you have to take the whole UI in the browser tools. You can get rid of all that by appending /show on the end of your fiddle. This will show you just the result and make debugging and inspecting elements a whole lot simpler.

Edit

Piotr has pointed out in the comments below that the “show” is not a good idea as it’s vulnerable to cookie stealing. Instead, he recommends using the “draft” feature. The only drawback to this is that you have to be a registered user. This is something you should do anyway. Once you have done this, you can clear away the jsfiddle interface by running jsfiddle.net/draft which will show the last executed fiddle without the jsfiddle interface.

Tip 5 - Mock Your Ajax

JsFiddle actually contains built-in functionality for mocking ajax requests. This is good because developing in JsFiddle means you probably can’t get at your data. Even if you could, it’s going to be cross domain. You can solve that by doing some ajax mocking. While JsFiddle does contain it’s on mocking tools, you have to post the data that you want back. A better option for me has turned out to be using MockJax from AppendTo in your fiddles for Ajax Mocking. Here is a sample fiddle where I am mocking some Ajax. Here is also a great article from AppendTo on how to use this library.

Tip 6 - Use DropBox For A Personal CDN

If you have a massive JavaScript library that you wrote and want to include, instead of pasting everything in the JavaScript pane, just create a public link in DropBox and reference the URL in the “Managed Resources” pane. You can use your DropBox as a CDN by sticking stuff in the public folder. I have a folder in mine called CDN where I stick all of the large libraries that I need to reference from JsFiddle. These would be libraries that aren’t already hosted by an official CDN.

Check out cdnjs for a complete list of hosted JS libraries. Chances are that if you need it, they have it.

JsFiddle Can Be Frustrating

JsFiddle is great, but does come with some frustration as it gets laggy during peak times because EVERYONE is using it. It’s that good. And it’s free. You will find times when it takes so long to render that you are better off just using a scrap application. I realize though that this is one person’s project and speed means more servers and more servers means more cash. I just appreciate it for what it is and I use it as much as I can when it’s not under heavy load.

Highly Recommended

JsFiddle is a fantastic tool for quick and rapid prototyping, sharing, and troubleshooting. I use it frequently and find myself only newing up projects on my local box when I’m actually working on a real project, not the random code question in an email.

HTML5 Boilerplate In Visual Studio 2010

Fri, 16 Dec 2011 14:40:09 -0500

All this talk of HTML5 and where to begin? It’s such a loosely defined and weird world we live in these days. Since we can’t wait until 2020 to get moving, where do you start? Is there anything out there that just bundles the “fundamentals” of HTML5 up for you in a nice complete package. Something like a template.

Or maybe….A BOILERPLATE!?!

Well yes in fact there is.

You have probably already heard about HTML5 Boilerplate. It’s got all the goodies you need to start your HTML5 development included in a “template” of sorts. The problem is, it’s not specifically targeted at Visual Studio users and thusly kind of a bear to implement. It comes with all sorts of Ant Build and other confusing things that just don’t make a whole lot of sense to ASP.NET developers.

When I was headed up to TechDays Vancouver, I wanted to do a session on using the boilerplate and I thought I would create a project template. But somebody beat me to it! Which is great because they probably did a better job that I would ever do. So let me present you with Mother Effin HTML Site created by Jacob Gable. I don’t know much about Jacob except that his handle on ASP.NET Is jacob4u2. I’m guessing he’s a U2 fan, so Jacob - this one’s for you.

This is a Visual Studio 2010 project template, so all of you 2008 / 2005 (God forbid 2003?) people are out of luck. Also, it’s MVC. Webforms is just as good for HTML5 as MVC, it just happens that this is an MVC project template.

My recommendation on this is for you to first watch Paul do his thing on Boilerplate for the San Francisco UG. He’s going to explain what pretty much everything in the index and CSS is for. It’s a really good lecture and explains a ton.

I am going to run down through this project structure and the _layouts (master page for you webforms people out there), but it’s really just a rehash of what Paul has already said in the video above. You didn’t watch it!?!?

So when loaded, the solution explorer will look like this…

Let’s step through this thing and explain what each of these folders are. Some need no explanation because you would expect you might see them (App_Data), and others are going to be completely foreign.

App Data
Controllers
- Just your standard MVC Controller folder
css
- 3 guesses as to what goes here and the first 2 don’t count. A quick explanation of what’s inside this folder.

media.css - contains boilerplate css for mobile responsive design, as well as clearfixes and visually / hidden element styles. Some things you want visually hidden but still accessible for SEO. Others you want completely invisible to everyone.
normalize.css – contains all of the style fixes for cross-browser wierdness like legends and other HTML elements that render just slightly differently depending on your browser.
site.css – this is the standard MVC style sheet that you get out of the box with a standard project.

demo – deleted in the current version of boilerplate so I just delete it too.
img – fer yer images
js
- My favorite folder in all of the boilerplate. It’s got some subfolders so let’s have a look

libs
- This is where you might put things like jQuery. Or Kendo?
mylibs
- Where you would put your custom built common libraries
plugins
- Any jQuery plugins you may have
script
- The bootstrap script for your application
Lib
- This is the home of SquishIt. This is the CSS linking/minifying magic for ASP.NET MVC from Justin Etheredge. Here is a good read on SquishIt, but I’ll go over how to use it quickly anyway later.
Models
- Standard MVC Models folder.
Test
- Another folder that appears to have been removed in the current version of boilerplate, but why? It has your qUnit tests for testing your JavaScript. Jonathan Creamer has a pretty good article here on setting that up with MVC.
Views
- MVC Views folder

Alright – moving on.

Lets pop open the _layouts.cshtml folder under Views/Shared and have a look.

The first thing you will see is some conditional IE hacks.

This looks like a mess, but it’s pretty simple. All this is doing is applying a style of ie6, 7 or 8 to your html element. Oh – and it defaults it to no-js. What in the world.

The idea here is that you can default something to no-js and if js isn’t running in the browser, you can handle that appropriately through CSS. You can also handle if it’s IE 6, 7 or 8 in your CSS in the same way. For instance, you might do this…

.ie6 {
      display: none;
}

I’m TOTALLY kidding.

Next you will see some meta tags…

Oh golly, meta tags. The first one is something that IE wants. It has something to do with cross site scripting in utf-7 and the validator will complain if you don’t have it in the first 54 bytes of the file. Listen to Paul explain it because he does a much better job than me. Just leave it alone and forget about it. IE needs it.

On a side note, I’ve always wondered if this is related to the issue Rob Connery was experiencing here.

The next one is pretty cool because it does 2 things. First it tells IE to use the 8 or 9 rendering engine if it is in fact IE 8 or 9. That’s to stop that whole compatibility mode nonsense that falls back to the IE 7 rendering engine and effectively breaks everything. By the way, compatibility mode is the default for apps in the intranet zone. This overrides that.

The second says “If you have Chrome Frame installed, use it”. That’s the chrome=1. It won’t prompt the user for an install, but does use the frame if it’s there. A nice to have.

Adding a description and author to your site is just good SEO.

The viewport business tells it to scale the app to the mobile device viewport. That’s all.

Alright, cross off the meta, and moving on.

Now this is some really cool stuff. This is SquishIt that we talked about earlier. It’s Justin Etheredge and it works great. Simple specify what CSS files you want to include here. As long as you have debug = true set in the web.config, you will get all the files separate. As soon as you set debug = false in the web.config, it’s going to combine and minify your CSS and give it a random name. I love SquishIt. Well done Justin. You will see SquishIt again down at the bottom.

Next is a Razor tag that includes custom head content on the fly if you have a partial or something else you want thrown in the header. This is MVC specific, not boilerplate.

This next section is pretty much explained by the comments:

These are two JavaScript libraries that we need ASAP, hence they are in the header. Modernizr is feature detection for your browser and when you run your application, your html tag will look something like this…

…and that frankly is pretty daunting the first time you see it. It’s just adding classes to your html showing you what features you support so you can respond appropriately in your CSS. Notice that no-js was replaced by js? We have to default to no-js because if JavaScript is turned off, Modernizr can’t run.

That screenshot is from Chrome. If you have IE 6, 7 or 8 it will look similar but with a “no-” in front of pretty much everything.

And now the body…

Nothing fancy here. Just a standard MVC layout with a logindisplay that you will probably delete straight away. The @RenderBody renders the views into the contents of the main div.

Notice the semantic HTML5 tags? Header? Footer? <Cartman>Sweeeeet</Cartman>

There is some super interesting stuff happening in these jQuery include tags. The first of which is a protocol relative URL. It’s basically saying that if the site is running on http, use that to fetch from the CDN. If it’s running on https, then use an https prefix.

The other thing here is that second script tag which basically does a test to see whether jQuery exists. It’s a fallback in case the CDN is down. CDN’s don’t go down I’m pretty sure. I personally don’t think this is necessary, but people much smarter than me do. If jQuery wasn’t loaded from the CDN, it writes a script include to a local copy. A neat idea, but I just don’t think it’s practical.

ANYWHO.

Some more SquishIt for your JavaScript and a render section in case you want to render in some scripts on the fly with a partial view.

And the grand finally – a Google Analytics script block for you to uncomment and stick your own UA ID in.

Whew – we made it through the master page! Only a few more things of note…

There is a humans.txt file which is similar to a robots.txt file except it’s for humans. Put your personal information in there so people can find it and read it. It’s for fun.
There are a bunch of icons. These are favicons and other icons like the one that will show up if you bookmark the page on iOS.
There is a 404 page with a bunch of styles and hacks in it. A good jumping off point for a decent 404. Please have a decent 404. The standard IIS error message is not going to do.
You may notice if you haven’t already that when you drag and select text, the highlighting is hot pink. That’s how you know its HTML5 Boilerplate. Anytime you see that custom text highlighting, it’s most likely boilerplate.

So that’s the HTML5 Boilerplate in Visual Studio. It’s a bit out of date and a bit ported. Well, a whole lot ported but still a great place to start your HTML5 development if you are using Visual Studio and MVC.

If you want to see the application we built at the session in Vancouver, you can see that here.

HTML5 Resources Revised For TechDays

Fri, 18 Nov 2011 11:23:00 -0500

Wow! What an amazing trip I had this past week to Vancouver. I learned about Poutine, Japadogs and the shared disdain for Nickelback that we all have. I really enjoyed the beautiful city of Vancouver and all the really nice people that I met there.

I had the privalege - and it really was a “privilege” to attend the Make Web Not War event that Microsoft puts on. If you aren’t familiar with Web Not War, it’s a meetup that Microsoft puts together where all web technology is dicussed, regardless of what technology you are using. Everyone just gets together and talks about the cool stuff they are doing on the web. I love to see Microsoft supporting the web community at large. It was great to be a part of something where we were not .NET or PHP developers, but simply web developers. It honestly felt like we were one big team. A great sense of comradery. If you missed Web Not War, I highly recommend you make it your priority to attend the next event.

As promised, here is a revised list of HTML5 resources as well as the sample project we built in the second session and the deck from the first session.

Who has two thumbs and hooks up Canadians with sweet HTML5 resources? This guy!

Here we go….

The Deck From TechDays Is Here. The deck from the second session isn’t posted because, well, there really wasn’t one. It was all demo baby.

Learning Resources

HTML5Rocks
HTML5 Doctor
HTML5 Cheat Sheet : A PDF cheat sheet of what’s new in HTML5

Tools

Kendo UI : A complete UI framework for HTML5 development including all your mobile needs. It’s the reason I do what I do.
Modernizr : The JavaScript library which tells you what features are available in the user’s browser.
Polyfills : A comprehensive list of Polyfills. Forgot what a polyfill is?
CSS3 Generator : A tools to create your style rules and even creates those browser prefixed ones for you! Work smarter, not harder.
HTML5 Boilerplate : Your starting point for a new HTML5 application.
MotherEffin HTML5 Site : HTML5 Boilerplate in a Visual Studio 2010 MVC 3 Project template. Pure goodness.
Mothereffing HSL : Generates your HSL color style rule for you.
Mother Effing Text-Shadow : Generates that super long style rule for CSS3 text shadows.
Adobe Kuler : Generates a complete color scheme for your site. Create a new one, or pick an existing one.
HTML5 Video For Everyone : This generates the HTML and embedded SWF object for your video. This is a complete polyfill for falling back to browsers without video support.
Can I Use : Will tell you what the browser you are currently using is capable of.

Demo’s

Chrome Experiments WebGL : So rad. Nothing else you can say here.
IE Test Drive : Some cool demo’s of what’s possible in IE. Make sure you do the Paintball demo and check it across browsers.
Visualizing Yahoo Mail : A fantastic example of SVG animations.
Trip Wire Magazine : This is a buffet of HTML5 demo’s, tutorials, tools, generators - you name it. Holy crap this is good.

App Harbor

Dead simple and free Azure hosting for your .NET web applications from App Harbor . These guys put the “cious” in delicious. No more excuses. Write that killer app and deploy with no cost to you. That’s how it should be.

Our HTML5 MVC Project

We built a pretty rockin demo application using Geolocation and some nifty CSS3 concepts. You can download that entire project here. Remember that it’s built on the MotherEffin HTML5 Site, so you may need to install the .vsix first.

Get Started!

What are you waiting for!?! Seriously, stop reading this and start building some HTML5 awesomeness. It’s super easy and getting easier. I enjoyed meeting all of you and look forward to hearing about what you are doing with HTML5.

Please feel free to follow me on Twitter, or email me directly.

HTML5 Resources

Fri, 11 Nov 2011 10:35:00 -0500

Thanks to everyone who came out last night the Nashville .NET User Group meeting to hear my talk on “HTML5 And CSS3 Techniques You Can Use Today”. We had difficulty with the internet a bit, so I wasn’t able to show all the delicious demo’s I had. But fear not, as I said your mind will be blown and your world transformed when you view the goodness that is HTML5. Here is a comprehensive list of resources that should help you continue your HTML5 exploration. Please feel free to contact me if you have questions or suggestions on these resources. Maybe something you have found that should be included in this list?

First off, all of the demo’s we did can be found here. If you want to see the source, just use the developer tools or do a right-click/ view source. This is all HTML, JavaScript and CSS.

htmlui.com

HTML5 Learning Sites

HTML5Rocks.com

html5doctor.com

Mondernizr - feature detection for HTML5

modernizr.com A comprehensive list of pollyfills can be found here as well (Thanks for the tip Elijah Manor).

HTML5 Boilerplate is a base project for getting you a fully cross browser site that contains all you need to start building your HTML5 app. This is essential for going down the HTML5 road and will ease your legacy IE pains quite a bit.

htmlt5boilerplate.com

HSL is one of the new color declaration schemes we talked about. It’s super easy to do in your head and here is a site that will do it for you.

mothereffinghsl.com

Also be sure to check out Adobe Kuler which will generate your website color scheme for you. It’s a great way to make sure your site is consistent and beautiful.

www.adobe.com/kuler

HTML5 Video For Everyone will generate a code block for you that will use either HTML5 video or fall back to a plugin for a legacy browser.

http://camendesign.com/code/video_for_everybody

Speaking Microsoft And IE Check out what Microsoft is doing with their HTML5 labs.

http://html5labs.interoperabilitybridges.com/

And you can download and play with IE 10 (safely) here…

http://ie.microsoft.com/testdrive/

Want to know what features your browser right now can use? Caniuse.com will tell you exactly what you (or your browser at least) is capable of supporting.

http://caniuse.com/

Lastly, be sure to check out Telerik’s HTML5 web development platform, Kendo UI. It contains everything you need to do HTML5 development today without having to worry about whether or not your application will work in older browsers, or with touch devices.

kendoui.com

The one thing that I really wanted to convey to everyone last night, is that the fact that HTML5 is an evolving specification in no way bears weight on shying away from it today. Especially with the recent announcement from Adobe. The HTML5 train has already left the station. Will you be on it?

Tips For The International Traveler

Mon, 31 Oct 2011 10:02:00 -0400

I’m now on the backside of a week long trip to Eastern Europe. I flew from Nashille to Houston, Houston to Amsterdam, and Amsterdam to Bulgaria. This was my first trip where I was flying for nearly 13 hours in total and crossing 8 time zones. I learned a few very valuable lessons from this trip. Some of them were simple observations, and others were borne of absolute misery. Here are a few tips for the international traveler.

Buy a neck pillow

Yeah, they look stupid. Probably somewhat on the same level as a fanny pack. You aren’t going to get dates with a neck pillow, but who cares. You will use that neck pillow more than you can possibly imagine. When you sleep (of course). When your butt hurts after sitting for 9 straight hours you can sit on it. When you are resting between flights you can lay down on the floor with it. You can use it as a barrier between you and the less than savory person you are stuck next to on the plane. The uses are endless. Buy one at Target. If you forget, buy one at the airport. It’s still worth the money.

Comfortable Earbuds And White Noise

Traveling abroad is a highly stressful event. Airports are nurseries of chaos and nobody gives a crap about your comfort. The sheer sensory overload can be nausiating. The contant talking. Someone near you with a creepy laugh. Buy yourself a set of really comfortable gel earbuds and get some white noise. If you have an iPhone, you can pick up “SleepMaker Storms” free edition and listen to hours of rain that will drown out everything else. You will literally forget where you are. It will help you sleep and allow you to close your eyes and escape when you need to.

Tranquilizers

Not like horse tranquilizers. You don’t need to be like Will Ferrel shot in the neck on “Old School”. Just a low dose of Xanax will do fine. Take the proper precautions and talk to your doctor. Obey all the proper safety precautions about taking too much or becoming dependent. Get your doctor to give you say just 3 or 4 low dose pills for your trip. These are better than sleeping pills because if you can’t fall asleep, you won’t feel nearly as bad.

Please don’t hear me advocating use of controlled substances. I’m just saying that there are situations which call for this kind of medication, and long distance travel definitely qualifies.

Hoodie

Pretend you LOVE node.js and buy yourself a hoodie. The deeper the hoodie, the better. They provide some semblance of privacy when you are crammed into the sardine-can-of-an-airplane, and they are soft. International flights are also cold. Its -40 degrees outside that aircraft at 32 thousand feet. It’s bound to get a tad chilly inside.

Comfortable Pants

Pajama pants or some sort of soft nylon pants work great here. Do not wear shorts. Definately do not wear jeans. No matter how good your butt looks in them. The key here is comfort. You are going to be sitting for a LONG time.

Water

It seems like you could get water on the plane, and you can, but it’s in tiny cups and you have to wait your turn. Airplanes get extremely dry inside and you will get very thirsty. You will have to buy the water after you get through security, but go for it. You will be glad you did.

Global Entry

You can go down to your local airport prior to your trip, and they will take some blood samples, do an interview and confiscate your first born child. Then you will be part of the “Global Entry” program which means no waiting in line at customs. This will be of utmost importance when you get back to the states and you just want to go home. Let everyone else stand in line with the Canadians. You get to walk straight through like a rock star.

Be Prepared. Be Comfortable. Look Stupid

Remember, it’s not about looking good, it’s about making it through the next 20 - 30 hours and being abe to arrive at your destination in good spirits. Your trip will be better and more memerable. If you prepare accordingly, you may actually enjoy the experience of traveling and you will be much more inclined to do it again.

So show up at the airport in pajama pants, with a hoodie and a neck pillow. You may get some odd looks, but that’s just because people don’t realize that you are a professional.

JsFiddle Project Templates

Tue, 18 Oct 2011 07:59:00 -0400

I use JsFiddle. A Lot. In fact, I called it an IDE the other day. I realize that’s a stretch, but it’s not an unrealistic one. The more I use JsFiddle, the more I love it. There is no better way to write samples of HTML5 and share them. It’s constant versioning is really great as well. Just click the “Update” button and save your Fiddle. Want to revert? Just lower the version number in the URL.

One thing that I find myself doing over and over is creating my JsFiddle project template. Adding in all of the resource CDN URL’s. It’s honestly kind of a pain. What I have started doing is creating what I call “Project Templates” for JsFiddle. They are pre-built Fiddles that have the included resources already, and I can just save the link in my bookmarks bar and then fork the Fiddle and start rolling. No need to go look up CDN URL’s.

I have decided to put together several “Project Templates”. Feel free to link to these and fork them to accelerate your development time and cut out the “googling” for CDN locations.

jQuery Plain http://jsfiddle.net/burkeholland/ZcSEh/	Kendo UI http://jsfiddle.net/burkeholland/mRdxe
Kendo UI With Backbone http://jsfiddle.net/burkeholland/yfqvM/2/	Kendo UI With Knockout http://jsfiddle.net/burkeholland/UtQuG/
Backbone http://jsfiddle.net/burkeholland/TAgMH/	jQuery UI (Base Theme) http://jsfiddle.net/burkeholland/N8kR4/
jQuery UI (Base Theme) With Knockout http://jsfiddle.net/burkeholland/URcqn/	jQuery UI (Base Theme) With Backbone http://jsfiddle.net/burkeholland/Y9Ppq/
jQuery UI Mobile http://jsfiddle.net/burkeholland/JYSLm/	Knockout http://jsfiddle.net/burkeholland/UBswD/

If you would like to contribute any, leave it in the comments. You can just leave the name of the libraries you need and I’ll look up the URL’s.

Edit

I updated all the references to base projects and aded MockJax to each template.

Coder's Remorse

Tue, 11 Oct 2011 17:54:00 -0400

A flash of lightning illuminated the object, and discovered its shape plainly to me; its gigantic stature, and the deformity of its aspect more hideous than belongs to humanity, instantly informed me that it was the wretch, the filthy daemon, to whom I had given life.

Frankenstein, or the Modern Prometheus by Mary Shelley

It is a common feeling for developers to mourn the software that they release on the innocent. They will say to themselves, “I should have constructed differently. Better. I fought with so much of me to make this beautiful, and instead I have created Frankenstein.

Jeff Atwood wrote in his article Version 1 Sucks, But Ship It Anyway:

At the end of the development cycle, you end up with software that is a pale shadow of the shining, glorious monument to software engineering that you envisioned when you started.

Oh the remorse! How did this happen? By the time that you realize what you “should” have done, you are already in way too deep. Then comes that pressing anxiety to refactor. WE HAVE TO REFACTOR. RIGHT. NOW. You talk with each other about it. About all the things you didn’t know or weren’t around when you started. It permeates your conversations at lunch and over IM when you are working at night.

ZOMG. This is so bad.

I know it broseph.

should have used Backbone. Have you seen Backbone?

Backbone is def where it’s at!

Or Knockout. Prolly even better than Bizone.

Knockout is for real awesome!

Or even better Angular! Angular is nasty good. Think everyone is going that direction.

skadoosh!!

If this sounds like you, don’t sweat it. It’s epidemic.

How do we build applications that shine, when what’s shiny today is a rust bucket tomorrow? As surely as I write this post, someone is cooking up the next JavaScript MVC Framework, or CoffeScript. Dart came out just this week and it’s THE FUTURE OF THE WEB.

Breath

You can’t keep up so stop trying. All of your endeavors to learn the next “miracle of programming” are not going to numb your developer’s remorse. Remember these two things.

Be Realistic

Developers are usually obsessed with the details. I don’t mean the pixels necessarily, but definitely the structure of the code. We can get hung up on things like “don’t use var” and “I don’t like Hungarian Notation”. OOP only exacerbates this problem. Writing fully OO code is a exercise in inadequacy. Should this this class be static? Is this DRY? Does this object have only 1 responsibility? You can refactor your code trying to get more and more OO and you will refactor yourself into oblivion.

The truth is that good code is a mix of pattern and anti-pattern. The term “pragmatic” has become overused. Now it’s just an excuse not to understand or learn a pattern. But take a look at the actual definition of pragmatic.

prag·mat·ic/pragˈmatik/

Adjective:

Dealing with things sensibly and realistically in a way that is based on practical rather than theoretical considerations.

If you take nothing else from that definition, read and understand “realistically”. In the end, no pattern, best practice or awesome framework is going to help you determine what is realistic. Only you can do that. And what’s realistic is often going to clash with what’s recommended. All the theory in the world never shipped a single bit. Neither has any development methodology. Software is shipped by the sweat the brow. The relentless drive to keep going each day until the product materializes and someone has the guts to ship and back it up.

At the risk of infringing on mad copyright, Dilbert on Agile.

Ship. Improve. Rinse. Repeat.

You see, good software is iterative. Nobody ships v1 and says “It’s Perfect!”. Beyond that, version numbers are completely arbitrary. Call it v.09 until you like it enough. Leave the beta tag on it forever so no matter what happens you can just say “It’s in beta bro” (Gmail anyone?). If Chrome has proven anything, it’s that version numbers don’t matter at all. What matters is that your product is constantly improving.

The iterative cycle will reveal what’s wrong with your project. Because let’s be honest, if you think you know all the ways your software has fallen short, you are fooling yourself. You don’t know the half of it. You can’t until people start using it and telling you all the ways that it sucks. Or is awesome. It’s usually the former though. Take Apple for example. They re-invent the mobile phone and still had people telling them things like “Your notifications are terrible”.

As a side note, notifications on iOS are terrible.

Don’t assume that you will understand the perceived quality of the product. How many records have been released that the artist said was “Their Best Record Ever”, only for it be be a clear disaster and have them apologize for it later on. You are consumed with what is behind the beauty, but don’t let that get in the way of your product being beautiful to begin with. This is where the value will be for the user. Nobody is going to care that you implemented the most wicked awesome inheritance model evah if you ship Windows ME when it’s all said and done.

Don’t back pedal, you are almost there. Get to the finish line. Release it in all its disgusting glory, go out and drink several beers and then get back to work. That’s how good software is made.

Make A Simple Game With HTML5 Canvas

Wed, 05 Oct 2011 12:36:00 -0400

At DevLink this year, instead of lunch on the last day of the conference, I had a hackathon with Jim Fleming who showed me the in’s and out’s of writing a simple game using HTML5 canvas. What we ended up with was a very rough implementation of HTML5 pong. Granted we only had two hours to do this. You can check out the working example here.

Canvas Basics

Simply put, the canvas is a bitmap-based rendering surface. It was originally introduced by Apple and is what they use in their “Dashboard” on OS X. You can think of canvas as a blank area that you can draw on using JavaScript. Canvas is supported by all current versions of major browsers, but was not supported until IE 9. Prior versions of IE can support canvas through polyfills such as Explorer Canvas and Flash Canvas. The latter is faster than Explorer Canvas, but uses Flash which in some ways negates the benefits of canvas (specifically it’s ability to be rendered by iOS).

There are some alternatives to the canvas that include SVG and WebGL. The main difference between canvas and SVG is that SVG is vector based and canvas is bitmap based. WebGL is pretty new, but looks promising for replacing canvas in the future for complex scenarios.

Let’s take a look at the markup for canvas.

<canvas width="640" height="480">
ARGGHH! No Canvas Support!
</canvas>

Now if the browser you are using does not support the canvas, you will see whatever text is in between the tags.

So how do we use our canvas?

It’s All JavaScript Now, Son

There is a new API for drawing in 2d on the canvas. If you just visited that link, then you probably got nauseous from all the content. It’s a lot of stuff. Those w3c docs could stand with some reformatting in my opinion. We can use that new API to start drawing to our canvas. Our game is going to be a simple game where balls float up and we click on them and they disappear. Very simple.

I am going to be using jQuery as well for DOM selection, but it’s definitely not required to work with a canvas. Here is what the finished product looks like along with all the code you will need to refer back to.

Create A Draw Loop

All games work in pretty much the same way. We create a draw function that calls itself every so many seconds (framerate). That function just calls itself over and over again updating the drawing surface. The function is nothing special, it’s just where all the drawing occurs. We also need a function that will get our animation frame, or rather wait a certain amount of time before executing the draw loop. I’ve used a pretty standard function here which attempts to use the “requestAnimationFrame” API call which has not yet been standardized. What this function is doing is trying to get the current framerate from the browser for the canvas. If it can’t it falls to a function which sets it to 60. Each one of these functions takes in a callback and a canvas object.

// main draw loop
function Draw() {
     get_animation_frame(draw, canvas);
}

// get the framerate at 60 FPS or whatever the current framerate 
function get_animation_frame() {
     return window.requestAnimationFrame || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame || 
            window.oRequestAnimationFrame || 
            window.msRequestAnimationFrame || 
            function(callback, element) {
                return window.setTimeout(callback, 1000 / 60);
            };
}

Create The Game Elements

Now that we have the core of our game, we are ready to draw some actual game objects. We are going to need a ball so let’s go ahead and create one.

We could draw an “arc” to the canvas which would create us a circle, but it would really be much easier to use a ball image. Since I believe in taking the easiest possible route, let’s go with the image. It’s 45 square and you can download it below…

Adding the image to our canvas is pretty easy. All of our drawing will be done to the 2d context of the canvas, not the actual canvas itself. We can get that context by calling the following.

var canvas = document.getElementById("canvas");

I put my canvas at the top of my document ready function so it’s easier to use later. Notice that I’m not using a jQuery selector to get the canvas. Why not? The jQuery selector will return a jQuery object which will not have the “getContext” method on it. We need to get the actual canvas object, not a jQuery object.

The basic premise of our game is that we have beach balls floating up the screen and we need to try and stop them before the get to the top and float away. To do this, we are going to need to create numerous beach balls and track each one of them. We can start by creating a function which will be called every half a second, create a ball and add that ball to an array of balls. Here is the code and I’ll explain what is happening.

function createBall() {            
    image = new Image();
    image.src = 'http://dl.dropbox.com/u/19593893/CDN/ball.png';
            
    liveBalls.push({ image: image, 
                     x: Math.floor(Math.random()*580), 
                     y: 640, 
                     index: 0, 
                     speed: Math.floor(Math.random()*5) });
}

The first thing that happens is to create a new image and assign the source of that image to our ball png. The second thing that’s happening here is we are creating a ball object inline and adding it to an array called “liveBalls” that we haven’t created yet. The x value is set to a random position that is less than the width of the screen (640) minus some room for the image itself. 580 is just an approximation. Our ball will be created at a random point along the x axis. The y positioning will put the ball just slightly below the canvas and out of view so we can animate it upwards. The index allows us to track the current ball when looping, and the speed is another random number between 1 and 5.

Now add a liveBalls parameter to the top of your document ready function.

var liveBalls = new Array();

We can add a simple “setTimeout” function now to call our “createBall” function every half a second.

Now we can begin drawing the balls on our canvas. In the draw loop, the first thing we need to do is get the “2d” drawing context. Once we do that, we can enumerate through our array of liveBalls and each one to the context. To animate the ball, we simply need to decrement it’s y value by the random speed we set for the ball in the createBall method. We check for the “y” position. If it’s less than 0 – the height of the image (-48), then we need it to add it to an array of objects that we want to delete.

Then we loop through our objects to delete and remove them from the liveBalls array. This will cause them to dissapear. After that we just delete our array of dead balls.

Collision Detection

It’s enough in this scenario to bind the click event of the mouse on the page to a function which will do our collision detection.

$(document).click(function(e){
     detectCollision(e.pageX,e.pageY);
});

The collision detection is not going to be perfect. Our object is a ball, but our collision detection is going to be square. It’s not ideal, but should demonstrate the idea of simple collision detection.

function detectCollision(x,y) {
     // enumerate through the balls and see if any of them collide with our mouse click
     var collisionDetected = false;
     var collisionIndex = 0;
            
     // collision detection is rough here, could be much better.  Basically detecting
     // if the mouse click falls inside a sqaure that's roughly the same size as the ball.
     $.each(liveBalls, function(index, value) {
           if (x > this.x && x < this.x + 64 && y > this.y + 20 && y < this.y + 100) {
                collisionDetected = true;
                collisionIndex = this.index;
           }
     });
            
     // if we detected a collision, remove the object.
     if (collisionDetected) {
         liveBalls.splice(collisionIndex, 1);
     }
}

All we need to add now is a label to track our escape count and add a pretty beach background image to the canvas.

Homework

See if you can do the following things.

1. Add game start / pause screen

2. End game when x amount of balls escape

3. Instead of just removing the ball, have the ball fall back down the screen.

Additional Resources

There are some great additional resources out there for canvas and other HTML5 concepts.

htmlui.com

html5rocks.com

And here is an in-depth discussion of canvas.

http://dev.opera.com/articles/view/html-5-canvas-the-basics/

How To Conquer Your Facebook Addiction

Tue, 27 Sep 2011 21:19:33 -0400

How To Conquer Your Facebook Addiction:

Repeat after me: “Nobody cares what I’m having for dinner”.

I'm Outta Here!!!

Fri, 23 Sep 2011 10:55:00 -0400

No.

This will not be that post. Or this one.

After nearly 4 years, today is my last day with O’Charley’s Inc. I usually don’t specify my employer when I post or speak and that is for their protection. I don’t want something I say to reflect poorly on them.

I feel like it’s appropriate to mention them now as the ride I’ve been on with them has come to an end.

O’Charley’s is one of the few great companies you get to work for. They truly care about their people in way that I have never seen from another employer. The people that I worked with were talented and worked incredibly hard. We did things that teams 10 times our size would have had trouble doing. All of the people I worked with are incredibly unassuming and yet very skilled.

A culture like this starts from the top down. The leadership I worked under was easily the best of the best. I didn’t always agree with decisions that were made, but I always knew that the decision makers had what was best for the company and best for the employees in mind. There was never any doubt. People are a highly valued asset at O’Charley’s.

So why would you quit such awesomeness?

I have a unique opportunity to go to work for Telerik as a Developer Evangelist focused on their jQuery and Device framework - also known as Kendo UI.

I’m very excited about getting out into the community a lot more than I have been able to over the past 7 years. Telerik has some fantastic tools in the emerging jQuery space as well as some incredible things coming down the line. I really hope I can do justice to the amazing work that they have done on Kendo UI .

Thank you’s are in order

I would like to drop a special note of thanks to Jim Cowart who went out of his way to help get me to the Devlink conference when it otherwise would have been financially impossible for me to attend. A special thanks to John Kellar as well who paid for my entire trip and got me into the VIP events. I can not say thank you enough for how much you guys helped me.

My current position is now open, and if you are looking for a great place to work in Nashville, I highly recommend you consider O’Charley’s.

It’s been a great ride. I’m grateful to O’Charley’s for letting me work here and taking such good care of myself and my family. When you get hungry, stop in to an O’Charley’s, Stoney River or 99 restaurant. The food is great and so are the people.

Installing 64 Bit Windows 8 From 32 Bit Windows 7

Fri, 16 Sep 2011 11:09:00 -0400

After the Windows 8 unveiling on Monday at the BUILD conference in Anaheim, the number one visited site was the blog of Scott Hanselman where he explains how to install Windows 8 to a VHD and boot to that VHD.

I followed his instructions step by step, but I had misadventures early on when the tool to make a bootable USB drive with the x64 ISO failed saying it had copied the files, but it couldn’t make the USB drive bootable.

At first I thought this was because the contents of the .ISO were more than the 8 gigs I had on my USB stick. Turns out the ISO is only 5 gigs when mounted. I had plenty of room free, but I couldn’t figure out why it wasn’t working.

The short answer is you can’t use the Windows 7 USB/DVD download tool to create an x64 bootable USB stick from a 32 bit OS.

I am running Windows 7 32 bit on a 64 bit machine. Why? Because the company I work for does not support 64 bit machines - specifically in the areas of VPN and Corporate Anti-Virus / Patching. I knew my machine was capable of running a 64 bit OS and I really wanted to get my hands on the developer tools.

I set out to make the disk bootable on my own.

Before you do this, you will need a copy of Windows 7 x86 or Windows Vista x86. You are going to need this to make your USB stick bootable.

So instead of running the nifty tool Scott showed in his post, I used DISKPART to format the USB drive, make it bootable using a Windows 7 x86 installation DVD, and then copy the files from the .ISO over.

First, mount the Windows 8 x64 ISO. Right-click the ISO file and select “Mount”.

After you do this, the ISO will appear as a drive under “My Computer” where you can see the contents of the disc. It’s 4.83 gigs total.

Now we need to start working on the USB stick. I had an 8 gig stick. Go ahead and insert your USB stick and fire up a command prompt. We are going to use DISKPART to select the USB stick as a disk and format it.

DISKPART

LIST DISK

SELECT DISK 1 (replace the number with whatever disk number your USB stick shows up as)

CLEAN

CREATE PARTITION PRIMARY

SELECT PARTITION 1

ACTIVE

FORMAT FS=NTFS (This can take a while)

ASSIGN

EXIT

OK, now our USB stick is formatted and ready for us to make it bootable. This is where you will need your Windows 7 or Vista 32 bit install disc. Assuming that your install disc is in drive D and your USB stick is drive F, you will use BootSect to make the USB stick bootable in the following manner…

D:\BOOT\BOOTSECT.EXE /NT60 F:

Now copy over the contents of the .ISO file. Open up the mounted drive, select all and copy over to your USB stick.

That’s it! You’ve just created a bootable USB stick containing 64 bit Windows 8 from a 32 bit version of Windows.

You can now pick up with Scott’s excellent article where he boots to the USB stick.

Twitter Mosaic

Sun, 04 Sep 2011 11:51:18 -0400

And now a mosaic of all the people I follow on Twitter. Get your twitter mosaic here.

InstaBoard

Mon, 29 Aug 2011 18:06:00 -0400

I’ve been wanting to take a hack at the Instagram API for several weeks now. If you aren’t familiar with Instagram, it’s an iPhone application that allows you to take pictures and apply beautiful retro effects to them. Beyond that, it is a social network of images and people. Your stream consists of your pictures and those of people you follow. You can think of it as Facebook meets Twitter meets Flickr.

After sitting in John Sheehan’s Devlink session on webhooks, I learned about AppHarbor. AppHarbor is a Windows Azure hosting service you need to know about. It is a Git based service which allows you to push your entire Visual Studio solution and then it will build and deploy the solution for you. They have free plans so there is no cost to get up and running. I have had a few snags, but for the most part it is a completely painless way to deploy ASP.NET applications. Amazing. This is something the .NET community has needed for a long time.

I used ASP.NET MVC 3 given that I could now deploy to AppHarbor and get my app live with very little effort.

I got a crash course in OAuth and even posted a question to Stack Overflow which I ended up answering myself.

I also began writing an open source wrapper for the Instagram API called InstaSharp which I have posted to GitHub, but I haven’t finished wrapping all the methods. Feel free to download / fork it and add your own methods in the meantime.

In addition to all that, I got slapped around by Chrome and it’s crusade against cross-domain scripting. In short, I couldn’t call the Instagram API directly from my page. I had to call the server which then calls Instagram and then sends the response back. It’s double the amount of HTTP calls, but it works quite well. All of that is part of the InstaSharp wrapper. It still seems that there should be a way to talk to Instagram without having to go through my server as in intermediary.

I built the UI based on the premise that Instagram photos are vintage and vintage photos belong on a wall with vintage wallpaper. I also wanted to see the photos in a grid. The same way that you do in iPhoto. I find scrolling down a linear news feed to be cumbersome.

My other goal for the UI was for it to translate fluently to a touch interface. I was targeting the tablet as much as I was the web experience. This means no “mouse-over” effects or elements in the UI.

I built the interface using the new Kendo UI from Telerik, and straight jQuery.

Kendo UI is a “framework for modern HTML UI”. That’s straight off the Kendo UI site. It’s a comprehensive set of javascript controls/widgets, as well as a framework for databinding, templating and themes - all built on jQuery. It’s kind of like jQuery UI, jQuery Templates, Themeroller and Knockout.js all wrapped up in a nice complete package.

The great thing about Kendo, is that it supports working with other jQuery solutions. So if you decide you would rather use Knockout.js for binding, the UI widgets won’t care.

InstaBoard used the Window control and the Templating peice of the Kendo UI framework.

The templating is straightfoward and works exactly the way you think it would. You declare a script block of the template type and then write your HTML.

There is also currently a discussion thread going on about the syntax in the templating. Some feel that the < feels a bit awkward since HTML itself is based on <>. Kendo UI is still in beta so features are still being finalized and refined. A current proposition is to have a # with an escape mechanism. I like this idea because the only place a # shows up is in anchors.

I used the Window widget to display a high definition version of the thumbnail when a user clicks on it. The Window has some really smooth animation that will remind you of iOS transitions that you are used to. jQuery UI has a modal widget that I like as well, but I found the Kendo Window to be much smoother with a much more professional feel. Where it really shines, though, is on the mobile device. jQuery UI has no support for iOS devices. Kendo UI is fully supported on iOS and Android and is just as smooth on the iPad as it is in Chrome.

This was a huge advantage for me. I said earlier that I wanted my site to translate without issue and Kendo widgets are great on iOS. It even works flawlessly on my iPhone, which was not a platform I was targeting. In addition, the Kendo UI roadmap includes new widgets, as well as enhanced mobile support.

The Kendo team was also very responsive on the various forum threads where I posted with questions or feedback. The fact that the framework is supported by a core team will be an advantage to companies who need product support and can’t gamble a large initiative on community supported open source.

I really like that fact that it doesn’t impose it’s will on you. You can use the parts that you want and replace the parts that you don’t. It’s enhancing your jQuery experience, not locking you in to doing it a certain way. I like this trend for enterprise tools. There is ground for both open source and licensed solutions. The most important thing is that they compliment each other. It should never be an “either-or” situation.

I have a lot of work left to do on InstaBoard. I still need search, popular feeds, enhanced sharing and - of course - infinite scrolling. You can’t show up at the party without infinite scrolling. Maybe I can convince the Kendo UI team to work infinite scrolling into the framework. Off to the forums…

A Shiny New Me

Bridging The PhoneGap: Twitter Plugin

The Twitter Plugin

Why

What

How

Bridging The PhoneGap: ChildBrowser Plugin

The Child Browser Plugin

Why

What

How

ChildBrowser

Harness The Power Of JavaScript [ Array Notation ]

Rewind

Laaaaassssieeee!!!!

A Real World Example

Legitimate Uses For Private Browsing Mode

Web App Development

Multiple Gmail Accounts

Going Down The Rabbit Hole

LEGITIMIZED!

How to know what items in your project actually belong in...

How to know what items in your project actually belong in GitHub.

HTML5 Native Video Streaming With WebRTC

WebRTC

Browser Support

Streaming The Video

A CoffeeScript Revealing Module

#1 SOLVED

#2 WAT

Best Practices. Pffffftttt.

JsFiddle Tips And Tricks

Tips And Tricks

1. Use JsFiddle With StackOverflow

Tip 2 - Create Templates

Tip 3 - Embedding Fiddles

Tip 4 - Clear The Clutter

Edit

Tip 5 - Mock Your Ajax

Tip 6 - Use DropBox For A Personal CDN

JsFiddle Can Be Frustrating

Highly Recommended

HTML5 Boilerplate In Visual Studio 2010

HTML5 Resources Revised For TechDays

Learning Resources

Tools

Demo’s

App Harbor

Our HTML5 MVC Project

Get Started!

HTML5 Resources

Tips For The International Traveler

Buy a neck pillow

Comfortable Earbuds And White Noise

Tranquilizers

Hoodie

Comfortable Pants

Water

Global Entry

Be Prepared. Be Comfortable. Look Stupid

JsFiddle Project Templates

Edit

Coder's Remorse

Breath

Be Realistic

prag·mat·ic/pragˈmatik/

Ship. Improve. Rinse. Repeat.

Make A Simple Game With HTML5 Canvas

Canvas Basics

It’s All JavaScript Now, Son

Create A Draw Loop

Create The Game Elements

Collision Detection

Homework

Additional Resources

How To Conquer Your Facebook Addiction

I'm Outta Here!!!

No.

So why would you quit such awesomeness?

Thank you’s are in order