The product of a web developer with a little too much caffeine

Posts Tagged ‘Html

Teaching Software Development With Games

with 6 comments

Since an early age I was always interested in doing game development. I’ve made several efforts at developing games doing both the art and the code. I can honestly say that it was my interest in games that led me to become a software developer as a career.

Games have always been a great way to teach. You can see it applied to many different topics and to many different age groups.

So this last week I started on a project to do just that using Canvas and Javascript. The general idea behind the game is to build a better ‘bot’ to pilot your ship. The ships fight it out and the last one standing is the winner.

The logic for the ships, how they move, when they shoot, are all actually written by developers and then plug into the game.

Sounds complicated? Well that is up to the developer. In order to create a ship you only need to create a simple Javascript class.

var yourBotName = function() {
    //a visual name for your bot = "Display name";

    //the preferred weapons for your bot
    this.weapons = ["lazer", "burst", "tracker"];

    // a method to update your bot
    this.update = function(gameState, botState) {
        //do something here

And there you have it! Your bot is ready to go!

The developer is passed game and bot state information that they can use to determine how to behave. This means a developer can write their code to behave anyway they like. That means if you write good code then your bot will do great – if you write bad code (the kind that causes exceptions or tries to cheat) then your bot is penalized.

I have some more work to do to get the game in a web ready format (meaning people can upload their own bots, challenge others, etc…). But so far the game is coming along great.

Below is a quick video showing how the game works and what you can expect. Enjoy!

[Watch the preview video]

Written by hugoware

October 31, 2010 at 11:23 pm

Using jLinq With JSON APIs

leave a comment »

I’ve had a few e-mails asking how to perform a query on JSON data from an external source, for example Flickr Services. This post we will go over accessing Flickr data but also performing a secondary query on the information returned.

You can download a .zip file at the end of the post with the files used in the examples.

Let’s take a look at what we’re going to create…

You can see we’ve included a search box along with a few additional check boxes with options we can use for the secondary query. These options aren’t available for the API call, but we can intercept the records and apply additional filters before we use them on the page.

To start, we need to create an extension method for downloading the data from the Flickr APIs. jLinq allows you to create extension methods and plug them directly into the framework.

//extend jLinq to search Flickr = function(search, action) {
    search = escape(search);
        function(data) {
            var query = jlinq.from(data.items);

This example creates a method named flickr that resides with the rest of the jLinq library. The method accepts a keyword to search with and an anonymous function that will be used to work with the data. This is because we have to wait for the server to return a response.

This means you would use the function with a search phrase and a jLinq query to perform.

//start a new jLinq query"cake", function(query) {

    //perform a normal query and use the data
    query.contains("title", "red")

At this point we need to wire up all of the UI elements on the page. I won’t go into detail on this part but you can always refer to the example for help if you get stuck.

So lets take a step back and take a look at how the filtering is done for the records. You’ll notice that we can selectively perform certain parts of the query depending on which check boxes are selected.

//sample.js - line 31     - - - - - -
//if excluding titles with digits
if (":checked")) {
    query.notMatch("title", /\d/g);

//if requiring a photo to have a title
if (":checked")) { 

//if requiring sorting of titles
if (":checked")) { 


You’ll notice that you don’t have to chain the entire query together. You can do sections at a time. This means you can decide when certain parts of the script run and when they are skipped.

Now, we can write queries against Flickr and also perform our own secondary queries using jLinq. In this case we are sorting data and filtering out records that wasn’t part of the query to the server.

Of course, this is a simple example but is does show some of the neat ways you can you can use jLinq to help you work with JSON data.

[Sample Files]

Written by hugoware

August 26, 2010 at 1:12 am

Using Code Behinds For MVC Templates

with 2 comments

I’ve done quite a few posts about using WebControls in MVC mostly as experiments to see if it was possible to bring WebForm functionality into a MVC application. It wasn’t really that I wanted to use WebForms in MVC but rather I still really like Controls having logical functionality. Sometimes a View is a little more complicated than simply inserting a value into the correct location on the page.

In my last blog post I gave an example that seemed impossible to do all within the render phase of the page but was easy to accomplish with a few WebControls. My controls didn’t have to dump out horrible markup or use the ViewState – They we’re simple and easy to use controls the rendered exactly the content I wanted to display.

So I’ve been working on a templating framework for MVC that can fit into an existing project without needing to start over that makes use of CSS Friendly Control Adapters – Remember those things?

Here is an example – (this is just some demo code and is missing some parts)

using System;
using System.Reflection;
using System.Web.UI;
using System.Web.UI.Adapters;

namespace MvcControlAdapters {

    /// <summary>
    /// Handles rendering controls to the page without IDs 
    /// and ensuring that DataBinding takes place on the page
    /// </summary>
    public class MvcControlAdapters : ControlAdapter {

        //perform data binding for the control
        protected override void OnLoad(EventArgs e) {
            (this.Control.Parent ?? this.Control).DataBind();

        //create the HTML output for this control
        protected override void Render(HtmlTextWriter writer) {

            //clear this ID from view
            this.Control.ID = null;

            //check for an 'actualId'
            AttributeCollection attributes = this._GetAttributes();
            if (attributes is AttributeCollection) {
                attributes["id"] = attributes["_id"] ?? null;

            //perform normal rendering


        //finds the attributes for a control (if any)
        private AttributeCollection _GetAttributes() {
            PropertyInfo property = this.Control.GetType().GetProperty("Attributes");
            return property is PropertyInfo
                ? property.GetValue(this.Control, null) as AttributeCollection
                : null;



Don’t compile and run just yet – You need to also add this XML to a new Browser File in your App_Browsers folder.

    <browser refID="Default">
            <adapter controlType="System.Web.UI.HtmlControls.HtmlControl" 
                adapterType="MvcWebControls.MvcControlAdapter" />
            <adapter controlType="System.Web.UI.Control" 
                adapterType="MvcWebControls.MvcControlAdapter" />
            <!-- snip... -->

The general idea behind this code is to attach an adapter onto any WebControl on the page and then either remove or replace the ID property with the correct value. This allows for the element to be referenced from the code behind but prevents the excessive ID from being displayed.

Keep in mind this is just a sample and won’t work exactly the way you’d like (for example, this doesn’t do anything about ‘name’ attributes on input tags).

In order to use this code we’re going to want to add a ViewPage that has a code behind that we can work with. You could add a script marked as runat=server at the top of the page but I don’t recommend it (which I’ll explain more of in a moment).

So here is a sample of what a page would look like now…

<%@ Page Language="C#" 
    Inherits="MvcAdapters.Views.Home.Index"  %>

        <h1 runat="server" id="section" />
        <div runat="server" id="description" _id="desc" />
        <a runat="server" id="link" title="Check out the products!" >Learn More!</a>

And then the code behind…

using System;
using System.Web.Mvc;
using MvcAdapters.Models;

namespace MvcAdapters.Views.Home {
    //the view for the page - STILL uses a Model
    public partial class Index : ViewPage<Product> {

        //prepare the content for the page
        protected override void OnLoad(EventArgs e) {

            this.section.InnerText = this.Model.Name;
            this.description.InnerHtml = this.Model.Description;
   = this.Url.Action("Details", "Products", new { id = this.Model.ID });




And is finally rendered as…

        <h1>Cheese Crackers &lt;3</h1> 
        <div id="desc">The best cheese crackers <strong>you've ever tasted</strong> - GUARANTEED!</div> 
        <a href="/Products/Details/18924" title="Check out the products!">Learn More!</a> 

Which means we can assign the values for the model to the correct element on the page. We use properties like InnerText which will save us from calling Html.Encode or make logical changes to styles and attributes for elements without a mess of server side code blocks.

This might seem like an excessive amount of setup to populate content onto a page but it does have its advantages.

  1. Refactoring is easier – If a model is changed then the modification can be easily pushed into the rest of the project without requiring you to dig though server code blocks. (yes, you have precompilation but you’re still the one who has to change them.)
  2. View logic is cleaner – It is easier to write code to handle View logic outside of the view itself. For example, using a Visible property instead of an if-then statement wrapping HTML elements.

Of course, this might not make sense for every View, but the nice thing about this approach is that is works without needing to make a lot of changes to a project. This might make more sense in larger more complex views. Fortunately, an approach like this doesn’t require that you File->New Project to get it started.

Anyways, I’m still trying to decide what makes the most sense in this project so I’ll post more code as it moves along. Enjoy!

Written by hugoware

April 15, 2010 at 12:46 am

Yet Another jsshell Update

with 4 comments

I’m pretty psyched about jsshell right now. The user count is growing, I’ve had a lot of good reviews — I’ve even noticed that my blog is being hit with search for it.

I’ve also been getting feedback of ideas and suggestions which I’ve implemented and uploaded to the extension website (so you can go download the new version now).

More Intellisense

The intellisense now includes jQuery commands, jLinq commands and jsshell commands, each labeled with their own color. Additionally, there is now a slight delay before the intellisense is polled. This time limit is 100 milliseconds (so really if you aren’t typing a fast or even pause for a moment you should see it).

Automatic jQuery Help

I received this interesting suggestion from a user. Automatically open the jQuery website with the correct help information for the word that the caret is currently over. Brilliant!

Now, when you press CTRL+? or CTRL+F1, whatever word you have the caret will be opened on the jQuery website. If you don’t have the whole thing typed out, it will take a guess at what you meant. If it can’t even find a command by that name in jQuery then no window is opened.

Import and Export Settings

I’m not entirely certain what happens from version to version for Chrome extensions, I’ve added an export and import option for settings. Right now it just returns a string that you can import back into jsshell. In the future I’ll be adding an interface to do that for you. For now you might want to save any built in commands before you upgrade versions.

If you have any other feedback, please let me know!

Written by hugoware

January 27, 2010 at 11:03 pm

Simple External jQuery Templates (Update)

with 5 comments

In my previous post I made some code available that would allow you to access external templates all in the same jQuery chain. Unfortunately, I discovered a few bone-head mistakes in the code the next day while I was using it.

The new code has been uploaded and the bugs (the ones I found) have been fixed. If you have anymore feedback, please let me know.

Written by hugoware

January 26, 2010 at 11:09 pm

Simple External jQuery Templates – Part 2

with 4 comments

In my last blog post I wrote about an interesting way to work with server side templates and avoid using callbacks to work with the elements you created. I worked on the concept some more and added some simple templating capabilities along with the ability to apply inline or external data. I’m posting this plugin to the jQuery website for downloading (along with parts of this blog post)

If you remember in the last post, the main problem was having to define callback methods to handle making changes to your jQuery object after it had been created. Instead, we used method forwarding and method queueing to allow direct access to the final object even before it had been created.

So instead of using callbacks your jQuery would look something like…

//loads an external resource but returns a placeholder to
//capture additional jQuery commands
    .css({ color: "#f00" })
    .animate({ height: 400 })
    .click(function() { alert('clicked'); });

Interesting concept but requires some more work…

Important: This plugin simply helps avoid using callbacks to keep track of external templates.

What Is New?

Activation and Replacement Commands
The previous method worked pretty well if you’re adding to a page but if you needed to replace something then you were back to using callbacks to handle removing content from the page. This version adds a couple extra new functions to work with the document after the template has finished loading

  • fill(selector): Empties the target and then fills the container with the current jQuery object. (accepts a string or a jQuery object as a selector)
  • replace(selector): Removes the target and then puts the current jQuery object in its place. (accepts a string or a jQuery object as a selector)
  • ready(delegate(element) { ... }): Simple way to perform any action that you want immediately following the external resources being loaded and processed.

All of these commands can be used along with the rest of the existing jQuery commands (like styles, animations, events, etc) because they follow the same queueing rules that the rest of the methods use. So for example, you could write the following command…

    .ready(function() { $(document.body).css({ background: "#00f" }); })

Templating Engine

Another thing that was missing from before was a quick, automated way to populate the template after it was loaded. This version introduces a simple engine that allows you to pass in an object or a URL to the source to JSON data you want to use and then populate the template automatically.

Here is a simple example of using a template with a data source…


<div class="customer-list">
	<a href="javascript:void(0);" class="refresh" >Refresh</a>
	    <li each="%%customers%%" class="%%odd:'alt-row'%%" >
	        <h4 class="%%first:'top-customer'%%" >%%name%%</h4>
	            <li each="contacts" class="%%first:'preferred'%% %%odd:'alt'%% contact-%%type%%">%%value%%</li>
	        <hr if="%%!last%%" />


{"title":"Customer List",
"description":"Customers and their contact methods.",
    { "name":"Mark", "contacts":[
        { "type":"email", "value":"" },
        { "type":"email", "value":"" },
        { "type":"phone", "value":"555-1254" }
    { "name":"Susan", "contacts":[
        { "type":"email", "value":"" },
        { "type":"phone", "value":"555-9811" }
    { "name":"Jamie", "contacts":[
        { "type":"email", "value":"" },
        { "type":"phone", "value":"555-4322" },
        { "type":"phone", "value":"555-1077" }


var list = $.template({
	template: "template.html",
	externalData: "data.json"
.ready(function() {
	$(document.body).css({ background: "#ffc" })
	.css({ color: "#f00" })
	.css({ color: "#00f" });

The final rendered result would look like the following sample…

I suspect that a templating engine written in the duration it takes me to finish a Starbucks coffee isn’t going to be high enough quality for everyone so you can easily replace it with a custom one by using the following command.

$.template(function(params) {
    /* perform formatting in this block (or send it to another templating engine)
     * params.html: The text provided by the template from the server
     * The JSON data provided for rendering (if any)

    //must return a jQuery object
    return $(params.html);

This will replace the template formatting method for the duration of the page, however you can replace the formatting on a per request basis (but I’ll explain that later)

How To Use

There are a few ways you can use the template command.

$.template(function(params) { ... });
Replaces the template formatting method with a custom method. The argument passed in contains a html property that contains the string of HTML to use for the template. The argument also contains a data property that contains the JSON data to populate the template with (if any). This should return a jQuery object when finished.

Simply downloads the HTML from an external path and then returns the jQuery object after it has finished loading. This option does not support templating.

$.template({ options })
Allows a lot more control over the request. The argument accepts the following properties.

  • template: The URL that points to the template file. You can optionally pass in an object that contains the same parameters as the $.ajax command so you can have full control over the request.
  • externalData [optional]: The URL that points to the JSON content for the template. You can optionally pass in an object that contains the same parameters as the $.ajax command so you can have full control over the request.
  • data [optional]: A JSON object with data to populate the template with.
  • complain [optional]: Determines if an exception should be thrown if the template and the data do not cooperate with each other (such as missing information).
  • error [optional]: A delegate that handles any connection errors. The first argument will tell where the error took place (external data or the template).
  • format [optional]: A delegate that performs formatting for a template. This won’t replace the default formatting. Requires the same delegate type as the example for replacing the default version.

Source Code

For now I’m simply uploading the code for downloading but I’m going to post it to the jQuery website shortly. I’d like to get some feedback and check for bugs before I save anything to the site.

Also — If anyone can come up with a clever, buzz-wordy sort of name of the plugin, please clue me in! I’m terrible at naming applications or plugins.


Download template.js (full source code)


Written by hugoware

January 24, 2010 at 10:38 pm

Render Partial — But With Arguments!

with 6 comments

One thing that I haven’t really liked about MVC was using RenderPartial instead of an actual UserControl. Its not that you can’t use them but that there is a disconnect between the control state and the render phase which makes it pretty much impossible to really work with them inline.

I say ‘pretty much’ because I’ve done a lot of work to let people use WebControls inline with MVC code.

Using the existing RenderPartial requires that you pass in the name of the UserControl that you want to render. You can also provide an object argument that is passed in as the ‘Model’ for the partial view. The UserControl can access the passed in object via the ‘Model’ property — even cast it into the correct type directly.

Personally, I use a lot of Models in my projects now. I used to suggest that you pass around objects using a wrapper for anonymous types but I’ve found that if you plan to move it from a Controller to a View or from a View to a UserControl then you ought to define a class.

Using RenderPartial Without Really Using It

So instead of calling RenderPartial directly, what about using the Model that we have in place to make the call for us. Not only that, we can even define our class to accept arguments directly. Here is an example of a simple dialog box…

using System.Web.Mvc;
using System.Web.Mvc.Html;

namespace MvcTest.Models {

    //simple dialog box example
    public class DialogBox {

        //rendering the dialog box
        public static void Render(ViewPage insideView, string title, string message) {
                new DialogBox() {
                    Title = title,
                    Message = message

        public string Title { get; set; }
        public string Message { get; set; }



Then we could simply use our code inline by calling the DialogBox.Render instead of the RenderPartial method.

<% DialogBox.Render(this, "My Title", "This is the message to display."); %>

You could also use an approach like this to make creating UserControl templates easier.

using System;
using System.Web.Mvc;
using System.Web.Mvc.Html;

namespace MvcTest.Models {

    //simple product list example
    public class ProductListing {

        //rendering the list of controls
        public static void Render(ViewPage insideView, List<Product>, Action<Product> renderRow) {
                new DialogBox() {
                    AllProducts = products,
                    RenderRow = renderRow

        public List<Product> AllProducts { get; set; }
        public Action<Product> RenderRow { get; set; }



And then you could call your method inline and provide the template action.


<!-- snip -->
<% DialogBox.Render(
         (item) => { %><li><% =item.Name %></li><% }
         ); %>
<!-- snip -->


<%@ Control Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<MvcTest.Models.ProductListing>" %>

<h3>Featured Products</h3>
    foreach (Product item in this.Model.AllProducts) {

The above example is probably over simplified but you probably get the idea. This may not be a big gain, but if you plan to use the same UserControl often, then this might help simplify the call.

Written by hugoware

October 26, 2009 at 11:38 pm

Outlook Web Access via iPhone

with 14 comments

You may have seen my post a little while back about how I was starting to do some iPhone development for my job. For the most part the app is nothing more than a nice pretty front end to a handful of Web Services (hint: last blog post was along the same lines)

In any case, I’d rather my first attempt at iPhone development be a throw away project since I’m going to probably going to have to start over several times.

Learning Through Development

Whenever I offer up advice to a new programmer on what is the best way to learn programming I always say – “write a program that does something you want — you’ll learn a lot along the way and have motivation to finish it.”. Learning Objective-C was no exception for me.

Even though we use Exchange for our e-mail server at work, we don’t have the “Active Sync” enabled so you can’t link up with the iPhone through the built in e-mail application. So, instead, I decided to go a different route — use the existing Outlook Web Access and parse the HTML.

Picture 1

So with a couple of nice Regular Expressions and some HTTP calls we have a nice clean display of all the e-mails in my mailbox. Yep, that’s right — screen scraping via HTML… a little cheesy, but not bad since it works even if Exchange isn’t configured to allow it!

This was a perfect example of writing an application that met my need and allowed me to learn a new language at the same time… of course I’m not suggesting that I’m an Objective C expert or anything but at least now I can ditch my BlackBerry! 🙂

Hey, Who Puked On My Screen… Oh Wait, That’s Objective C

I’m definitely a spoiled programmer. Using .NET and C#/VB has definitely shielded me from some ugly languages out there. Objective-C is the kind of stuff that makes babies cry.

Developing iPhone is WAY different that anything that you have ever done in .NET. You’re adding all sorts of weird things like IBOutlet and IBAction so you can link them around all over the place — it is definitely a new experience. I’m going to have to write a ‘C# Developers Guide To iPhone Development’ to maybe save some other poor guy a lot of grief.

Still a .NET Guy

Getting into new languages and technologies on different platforms is always a good idea. You gain added perspective while increasing your skill sets (not to mention you look better on paper for your next job). Even if you don’t want to buy a Mac and play with the iPhone you can always tinker with a myriad of other languages on any number of free operating systems — Go do it!!

Don’t think that I’m converting – If anything using a Mac this much has solidified why I’m still die-hard Windows/ASP.NET/PC…

…But then again… MonoDevelop for Mac is looking kinda slick…

Written by hugoware

October 1, 2009 at 7:54 pm

WebForms : FrontPage For Programmers

with 9 comments

Yeah – I said it. I called WebForms FrontPage for programmers – whadaya goin’ to do?

Now before people start throwing hate mail at me its worth pointing out that up until MVC I used WebForms for all of my web development. In fact, I really do like WebForms. I think that they are especially great for whipping out quick internal projects that normally draw away from the time you could use developing something useful.

But, as much as I like WebForms, I think that too often they spew out more crap than value. If FrontPage was the way for a non-technical person to make a website then WebForms is the way for a non-web developer to make a website.

A Simple Example

(It’s worth noting my measurements are based on uncompressed HTML – I’m mostly pointing out the differences between output created by the developers – not the content that is compressed down the wire.)

Well here is a page that really rubs me wrong…



Why? Nothing bad about it – the page looks pretty good… until you look under the hood at the source code. Once you start digging into it you find that the page is a whopping 123K and of that 28K is in the ViewState — clearly something that could have been done away with. You can also tell that ASP.NET gave a bunch of the elements on the page a unique ID even though they aren’t going to be referenced by any sort of Javascript. How about the id ctl00_BaseBody_FadingHeroEmbeddedSliverlight1_FadingHeroEmbeddedSL_ HeroBottomTitleShortDescriptionDivID (I had to put a break in the middle).

ASP.NET really does an incredible job abstracting the web so that a desktop programmer can jump right into web development, sometimes even using drag-and-drop controls *shudder*. It seems to me that web development ought to be done by people that understands the model.

Here is an example where you can tell that web developers had constructed it. It pains me to show it but I think it is relevant here since they are direct competition.



Yeah, it’s the website of the enemy. But if you go over the page there is roughly the same amount of information (if not more) but their page is only 25K (smaller than the ViewState alone on the previous example). Even if you compare all of the resources on the two pages, the Apple site loads about 30K less in stylesheets and scripts than the Microsoft site. It is worth mentioning that the Apple site does load more images but their entire pages is full of large, high quality images — which is something that grabs attention much better than text. Not only that, but the Apple site actually does stuff!

Why? If you look at the source code you can an immediate difference between the two. The source code on the Apple page is cleaner, better designed and smaller. There is no ViewState or unnecessary ids for elements on the page. Everything (appears) to have been placed onto the page through careful consideration and not generated by some Page Lifecycle that injects code and markup into your page without you even knowing it.

So What Is My Point

Both these examples are two high profile sites. They are from two very competent technology companies — however, one looks a little less skilled to the other – at least from a web development perspective. It seems to me that extra time and effort should have been placed by the Microsoft developers to trim out all the fat and make it as web friendly as possible.

I might be nit-picking at the HTML output but I do think its relevant. That code – even if it is compressed – is the final rendered output from a WebForms page. As soon as the page opens there is immediately markup errors, unmatched tags, extra body elements. It’s clearly not the best it can be. I’m not trying to make Microsoft look bad either – personally, I want to work for them some day, but the point is that in order to improve then you must first be honest with yourself and those around you.

WebForms are a powerful tool – don’t get me wrong – but it seems to me that they have abstracted web development too far. I always thought it was really cool about .NET the way you could go from web, desktop, console, mobile or whatever development you wanted to and it was still like second nature! It allowed you to focus on solving problems and less on how each area was supposed to work.

I’m not saying people can’t develop great applications with WebForms. In fact I still use them from time to time when I need to hack out a quick application that only the internal eyes of my company are going to see. However, when I’m browsing the web and come across a website that is packing a 50K ViewState or is littered with wasteful, pointless 40 character long ids, I just can’t help but feel that WebForms is starting to hurt the web a little.

That’s why I recommend that if you haven’t already, go try out ASP.NET MVC. It doesn’t take long to break away from WebForms and you’ll probably feel more comfortable within a few days.

Written by hugoware

August 28, 2009 at 2:12 am

New Site

with 11 comments

For the longest time now has basically been the home for jLinq. Lately, I’ve been working on a new version of my site — one that represents all of the stuff I do and not just one of my projects. After working on the site for about a week I’ve updated with a brand new look and grouped all of my projects together into one site.

I’d love to get some feedback — so use the ‘Contact Me’ section to tell me if you think something could be improved.


And of course, there is my Twitter Bird (he’s open source as well :))


There isn’t much to talk about with the new site. Basically it is an ASP.NET MVC site with personal information and projects on it.

However, I’m always interested in hearing feedback. If you think something about the site is missing or could be improved, please let me know!

Written by hugoware

August 14, 2009 at 2:53 am