Avoid HTML Escaping in an ASP.NET MVC WebGrid Column Format

I ran into an issue with the new ASP.NET MVC WebGrid.  I had difficulty finding any information out there on a good way to do this, so I thought I would post my solution.  The WebGrid easily generates paged and sorted tables automatically. You can find more information on the ASP.NET MVC WebGrid here.  In my case, I am listing some data for the user and I want to show any new rows in bold to make it more noticeable. Adding any HTML tags to the format property as a string will result in the tags being escaped. See the following example:

@grid.GetHtml(
        columns: grid.Columns(
            grid.Column("Text", format: (item) => item.New ? item.Text : "<strong>" + item.Text + "</strong>")
        )
    )

Notice that item.New is a Boolean value.  This results in the following encoded HTML output within the table cell:

<strong>Sample Item Text</strong>

Not exactly the intended effect.  However, if you pass in a new object of type MvcHtmlString with the string in its constructor:

@grid.GetHtml(
        columns: grid.Columns(
            grid.Column("Text", format: (item) => item.New ? item.Text : new MvcHtmlString("<strong>" + item.Text + "</strong>"))
        )
    )

Voila!  This will result in the properly bolded text:

Sample Item Text

This method will work for any of the other Html Helpers as well, though my example specifically references WebGrid.  In other cases, the Html.Raw method can be used to print HTML, but inside of the grid column it will still be escaped.  I’ve tested multiple ways of adding the grid column format using “@:”, but none of the documented methods seem to work within a ternary operator.

BitTorrent Sync and the Future of Peer-to-peer

In recent years, Peer-to-peer networks have matured greatly.  They have most commonly been used as a means to transfer files indirectly without needing a centralized host, but peer-to-peer networks are increasingly being used for more intensive and private processes.  They are many services that use peer-to-peer networks to stream media content.  Spotify uses them to assist their servers to stream music to their users and Skype uses them for video chat.  However, Bitcoin has attracted the most attention to the peer-to-peer evolution.  It’s changing the way we think about currency and the capabilities of secure peer-to-peer data transfers.

The newest addition to the crowd is BitTorrent Sync, a solution for securely sharing and updating files across multiple devices.  BitTorrent Sync places a focus on security; all data transfer is encrypted with a 256-bit AES encryption key, so your files are kept private.  If you want to send files to another user, there is a public key-like process available.  This process relies on keys called “secrets” that are directly linked to the permissions that can be performed by a user on the synced files.  You can provide users with full control, write or read-only access using a “secret” and BitTorrent Sync allows the proper level of control.  You can also

BitTorrent Sync is not a replacement for Dropbox, Google Drive or any other cloud storage.  It only syncs files across your devices; it does not back them up to the cloud.  If you upload a file to cloud storage, it is available whether the devices that you are using are connected or not.  With BitTorrent Sync, the file you need to retrieve would not be available on your laptop if your main PC is shutdown, unless you have it synced to another device.  Still, BitTorrent Sync is a great way to create an automatic offsite backup or sync large files.  It may at some point even rival single use, expiration based file sharing services such as YouSendIt.  Best of all, it won’t cost you or your company a dime.

BitTorrent Sync is currently available on Windows, OS X  and Linux.  One could speculate that iOS and Android versions are likely in the pipeline as well.

Using jQuery 2.0 and supporting IE 8?

jQuery 2 has been released and the most talked about addition is actually the removal of a feature.  Notably, support for Internet Explorer versions 6, 7 and 8.  The jQuery blog notes that Android 2.x browsers are the next on the chopping block.  You may think that the new features in jQuery 2.0 would have to be substantial to encourage developers to use it and leave IE 8 behind, but at this point the APIs of jQuery 1.9 and 2.0 are identical.  In other words, they provide the exact same set of features, they just support different browsers.  In addition, both the 1.x and 2.x versions of jQuery will continue to be supported side-by-side for the foreseeable future.  jQuery 1.10 is will be released in the coming months with bug fixes from the 2.0 cycle.

The only noted benefit of the change to jQuery 2.0 is a decrease in size of the JavaScript file from 93kb to 83kb.  Some developers may see this change as negligible and continue to use jQuery 1.9, where those who support systems with much higher traffic may see a benefit in the reduced file size.  Why choose when you can serve the larger file to the browsers that need it and save the bandwidth for those that do not?

How To

Through the use of conditional comments, a site can use jQuery 1.9 to support just the IE 8 and lower users, and use jQuery 2.0 for all others, taking full advantage of the bandwidth savings when possible.  Conditional comments are commonly used to create IE-only stylesheets for those pesky quirks that only seem to occur in Internet Explorer.  However, there is nothing preventing them from being used for JavaScript as well.  See the following code example:

<!--[if lt IE 9]><!-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<!--<![endif]-->

The first line checks to see if the requesting browser is lower than IE 9.  If it is, then we load jQuery 1.9.  The second line checks if it is greater than or equal to IE 9.  If it is, then we load jQuery 2.0.  Since the 1.9 and 2.0 APIs are identical, the rest of the calls to jQuery on the page will work properly with no additional changes required.  Take note that there are some additional comment tags included to make these checks visible to non-IE browsers such as Chrome or Firefox.

Conclusion

Many developers considered jQuery’s support for a wide range of browsers to be a significant benefit for choosing it over other alternatives.  Often a project’s targeted audience or the client themselves will determine what browsers need to be supported, leaving the developer out of the decision entirely.  With the newest version shifting from that support, the door may be left open for a competitor product to gain usage in the developer community.  At this point, there is no cause for alarm since the jQuery 1.x line will continue to be supported in the future.  However, if jQuery 2.0 begins to add features that are not available in 1, developers may demand a version of jQuery 2 with support for older browsers, or just move on to something new.  Only time will tell.

Pitfalls of JavaScript Game Development with HTML5

A few months back I completed development on a promotional game for a client that I wrote entirely in JavaScript using the HTML5 canvas. The game was similar in nature to Breakout but instead of deflecting the ball with the pad at the bottom of the screen, the player needed to catch objects falling at random from the top of the screen. The requirements were that it needed to run smoothly in all modern browsers and on touch based devices such as phones and tablets. The iPad was specified as a target device, so using Flash was out of the question.  With that known I set my sights on an HTML5 canvas based game.

The game play was very simple, so I wrote the game engine from scratch. The core game was easy to implement, but reinventing the wheel by not using an existing JavaScript game engine presented some issues with cross-browser compatibility.  Here are some of the issues I ran into and how I either got around them, or didn’t:

Graphics and Presentation

The client was keen on supporting Internet Explorer 7, if possible, but deemed supporting the iPad to be more important.  I looked around and stumbled upon a plugin called explorercanvas, which allowed the usage of the canvas element within older versions of IE.  To my surprise, I dropped the script in and everything worked properly.

Controls

After some trial and error, I ended up relying on jQuery to attach the events for player control.  Each of the browsers handle events differently and expose different values for mouse coordinates.  jQuery exposes the same values no matter which browser you are running, so that you can be sure of whether will be receiving an x and y value in reference to the entire window or just the canvas’ bounds.  Capturing key presses are also slightly different among browsers, so jQuery can help with that as well.

Touch controls are an entirely different monster.  At the moment, jQuery does not support binding to touch events.  Luckily, at this point most mobile browsers support the same spec for adding event listeners to touch events for touchstart, touchend, touchmove and touchcancel.

Audio

Sound effects and music are a piece of cake to implement with HTML5 audio.  Preloading and playing sounds on cue from script takes only a single function call.  Unfortunately, this is where older browsers like Internet Explorer 7 fall short.  The only way to play sound without using Flash in these browsers is to append an embed tag on the page using JavaScript when the sound needs to be played.  This presents two potential problems.  First, the embed tag plays the sound using the codecs that the user has installed.  If they have no codec to play sounds in your format of choice, you’re out of luck.  Second, the sound must load the first time it is played, so it is out of sync.  I occasionally ran into issues with syncing sound even once it had loaded.

Conclusion

This particular project was simple, so it didn’t suffer from being written from scratch, but if I had to do it over, I would choose one of the JavaScript frameworks already available.  The best choices right now seem to be LimeJS and ImpactJS.  Though ImpactJS provides additional tools for profiling and level editing, it’ll cost you, where LimeJS is free.  The popular iOS game development framework Cocos2D now has a flavor available for JavaScript and HTML5 as well.

As a developer who is against reinventing the wheel whenever possible, these frameworks provide simple solutions for all of the common problems with developing games using HTML5 canvas and JavaScript.  They can help separate your game from a small game to a full fledged experience that user forgets they are playing in their browser.