edible code | Ian Routledge

Zebra striped tables in pure CSS for IE7 and IE8

Ian Routledge — Tue, 24 Jul 2012 13:54:59 +0000

Zebra striping, as it is called, is a common technique used to distinguish rows in an HTML table. The technique basically makes tables easier to read.

It *should* be something that’s easy and straightforward to build, however, as always with CSS and HTML there are a number of different ways to achieve the same goal which have differing outcomes in different browsers. Below are the most common techniques and then I’ve outlined a technique that works for IE7 and IE8 too. Here are the normal techniques:

Add a class of ‘odd’ to odd numbered tables rows on the server side when the table is generated/rendered. Makes the markup slightly less clean and involves extra work on the server.
Add an ‘odd’ class to odd numbered rows with jQuery, something like: $(“tr:odd”).addClass(“odd”);. Requires javascript.
Use the CSS3 nth-child pesudo-selectors to style odd and even rows separately. Doesn’t work in old browsers.

As you can see, none of these methods are perfect, so here’s another non-perfect technique. It makes use of both the CSS2 adjacent sibling combinator and the CSS3 general sibling selector (the ~). Fortunately, IE7 supports both selectors, even support is buggy. This solution does have 2 problems though, which are:

It is really fugly.
It only works for tables up to a finite length (and requires you to extend the CSS for as long as you need it).

Basically it looks like this:

tr+tr
 , tr+tr+tr+tr
 , tr+tr+tr+tr+tr+tr
 , tr+tr+tr+tr+tr+tr+tr+tr { background: Red; }
 tr+tr~tr
 , tr+tr+tr+tr~tr
 , tr+tr+tr+tr+tr+tr~tr
 , tr+tr+tr+tr+tr+tr+tr+tr~tr { background: White; }

Which makes a lovely red and white striped table up to 9 rows high that works in IE7 and IE8 as well as modern browsers. You can easily extend the CSS to work with more rows, which does admittedly make your CSS look even uglier.

Also, you can easily adapt it to work for other elements, not just rows. For example an unordered list where you wanted to float odd items left and even items right.

Testing: The application relative virtual path ‘~/’ is not allowed here.

Ian Routledge — Wed, 28 Mar 2012 13:37:12 +0000

If you’re running unit tests in an ASP.NET web app on code accessing settings from the web.config, then you might have some code like:

System.Configuration.Configuration config = WebConfigurationManager.OpenWebConfiguration("~/");
HttpRuntimeSection section = config.GetSection("system.web/httpRuntime") as HttpRuntimeSection;

That will work fine when you run the project, but your test will fail and give you the error ‘The application relative virtual path ‘~/’ is not allowed here.’. Fortunately, there is the HttpRuntime.AppDomainAppVirtualPath property you can use for the path, which works in tests as well as when running. (In tests this value is null.) So you code would then look like:

System.Configuration.Configuration config = WebConfigurationManager.OpenWebConfiguration(HttpRuntime.AppDomainAppVirtualPath);
 HttpRuntimeSection section = config.GetSection("system.web/httpRuntime") as HttpRuntimeSection;

And your test will work.

Display your latest foursquare checkin in .NET

Ian Routledge — Fri, 10 Feb 2012 17:09:18 +0000

This is something I wanted to do for the new version of my portfolio (coming soon). It will essentially be a one page portfolio built of modules, some being projects, others being social feeds, e.g. latest tweet, Flickr photos and my last foursquare checkin.

Twitter is straight-forward, and can be done right from JavaScript without the need for an API key, for example:

$.getJSON('https://api.twitter.com/1/statuses/user_timeline.json?exclude_replies=true&trim_user=true&screen_name=ediblecode&count=1&callback=?', function (data, textStatus, jqXHR) {
// Loop through data
});

Flickr and foursquare no the other hand need to have an API key to be able to access your photostream and checkins. Here’s how to do it for foursquare.

First of all, you need to have an API key, or an OAuth consumer as foursquare calls it. Go to https://foursquare.com/oauth/register and fill in the details. Application name can pretty much be whatever you want, and callback url can be any URL on your site (e.g fs.aspx), you won’t actually need it for what we’re going to do – it doesn’t need to actually exist.

When you’ve created your consumer you’ll get a generated a client id and a client secret. Follow the instructions at https://developer.foursquare.com/overview/auth to obtain an access token. The access token (or oauth token) is then used to access data from the fourquare API. Here’s a quick summary of how to get the acces token:

Visit https://foursquare.com/oauth2/authenticate?client_id=YOUR_CLIENT_ID&response_type=code&redirect_uri=YOUR_REGISTERED_REDIRECT_URI in your browser.
This will redirect you to YOUR_REGISTERED_REDIRECT_URI?code=YOU_CODE e.g. http://ediblecode.com/fs.aspx?code=XYZ. This will probably give a 404 because we just used anything when we wet up the consumer.
The code querystring value is the bit you want, copy this and then construct a new URL in the format. https://foursquare.com/oauth2/access_token?client_id=YOUR_CLIENT_ID&client_secret=YOUR_SECRET&grant_type=authorization_code&redirect_uri=YOUR_REGISTERED_REDIRECT_URI&code=YOUR_CODE
The response from this URL should then be a bit of JSON that looks like {“access_token”:”YOUR_ACCESS_TOKEN”}. This access token is the key bit that you then need for accessing the foursquare API.

Once you’ve got your access token (or oauth token) then you can pass it to foursquare for getting details of your profile including checkins, for example https://api.foursquare.com/v2/users/self.json?oauth_token=YOUR_ACCESS_TOKEN. You can do this directly from jquery as the foursquare API supports JSONP, so you make a call to getJSON with a URL of https://api.foursquare.com/v2/users/self.json?oauth_token=YOUR_ACCESS_TOKEN&v=YYYYMMDD&callback=? and jquery will do its usual thing of appending a random callback function to allow cross domain JSON calls to work. However, what this does is expose your access token to anyone who views the source of your web site, and it would be a good idea to hide it.

So, to solve this, create a generic handler in your web site called foursquare.ashx, this will make a call to foursquare and return the JSON back to your web app. This has 2 benefits, you access token isn’t exposed to anyone and there is no need for cross domain JSONP – the jquery getJSON call can be direct to the foursquare.ashx handler you just created. The contents of foursquare.ashx would look something like:

public void ProcessRequest(HttpContext context)
{
 context.Response.Cache.SetCacheability(HttpCacheability.ServerAndPrivate); context.Response.Cache.SetExpires(DateTime.Now.AddDays(1));
 context.Response.ContentType = "application/json";
 context.Response.ContentEncoding = System.Text.Encoding.UTF8
 WebClient client = new WebClient();
 string json = "{\"error\":true}";
 try
 {
 json = client.DownloadString("https://api.foursquare.com/v2/users/self.json?oauth_token=YOUR_ACCESS_TOKEN&v=20120129");
 }
 catch
 { }
 context.Response.Write(json);
 context.Response.End();
}

Notice the use of the v querystring parameter. This is used for versioning and tells the foursquare API that ‘the client is up to date to the specified date’. This is in the format YYYYMMDD, e.g. 20120210 for Feb 10th, 2012. More information can be found at https://developer.foursquare.com/overview/versioning

Fixing ‘An error occurred. Please try again later.’ with Facebook apps in IE

Ian Routledge — Thu, 09 Feb 2012 12:41:02 +0000

I’ve been making quite a few simple apps and page tabs on Facebook recently. There’s loads of documentation available at https://developers.facebook.com/docs/guides/canvas/ and at a simple level, its relatively easy to create a simple app, if you’ve got knowledge of HTML, JavaScript and CSS. Especially so, since Facebook deprecated FBML last year so apps have to be made with iFrames. In fact as of June 2012 Facebook will start removing FBML support all together.

I generally quite like the Facebook platform and the power it gives you for integration, however, there are quite a few intricacies that you really don’t find out about until you’ve built some stuff. In fact, I think this is where the documentation falls down – the basic examples are quite good, but as soon as you do anything more complicated you run into cross browser issues and more that are difficult to identify, solve and/or find in the docs. If you can find them at all.

This error is one of them.

I had a competition app on Facebook, so that when you click the form submit button it asks you for permission – the standard ‘Request for Permission’ popup window, that is so we can keep track of users who have entered etc. This all worked fine in Chrome, Firefox but didn’t in, yes you guessed it, Internet Explorer. This is the error I was seeing, ‘an error occurred. Please try again later’:

Pretty generic right? And not very useful. I spent a while searching, and came across a few suggestions, none of which worked. For example, http://stackoverflow.com/questions/6365531/facebook-apprequests-dialog-error-an-error-occurred-please-try-again-later didn’t shed any light, no wonder the answer has been marked down, ‘all parts have to be exactly as facebook wants it, or it will not work.’.

So I tried all sorts of things from the various suggestions around the interwebs. Some of them seemed pointless (and I’m pretty sure will have no effect), but I had to try something. You’re reading this, so here are some things to try

Use XHTML instead of HTML5.
Check xmlns:fb=”http://www.facebook.com/2008/fbml” is an attribute on the html tag.
Validate your HTML.
Calling FB.init() inside the window.fbAsyncInit function.
Try using xfbml: false as part of FB.init();
Try manually calling FB.XFBML.parse();
Try loading the SDK synchronously

None of these worked, and it came down to the channeUrl parameter passed to FB.init. Facebook says in the docs ‘Specifies the URL of a custom URL channel file. This file must contain a single script element pointing to the JavaScript SDK URL.’ (see https://developers.facebook.com/docs/reference/javascript/FB.init/). The are however, some more details on the blog at https://developers.facebook.com/blog/post/530/.

It does explain a few key things though:

The contents of the channel.html file must be refer to the connect.facebook.net/en_US/all.js file with the same protocol as the containing page, so the easiest way is to use the double slash at the start rather than using http or https explicitly.
The channel.html must be hosted on the same (sub)domain as the canvas url. E.g. don’t mix up yourdomain.com and www.yourdomain.com.
The protocol of the channel url reference must match the protocol of the containing page. E.g. channelUrl: ‘http://www.yourdomain.com/channel.html’ won’t work over https. Using the double slash technique here won’t work either. So, using ASP.NET MVC3 and the Razor view engine, my channel url looked like: channelUrl: ‘@(Request.Url.Scheme )://yourdomain.com/sevendials/channel.html’.
The channel.html file must be within the canvas url of your apps. By this I mean if your canvas url points to a sub folder on your domain, then the channel.html must reside somewhere under that sub-folder, and not in the root.

These last 2 points were the key ones for me, and fixing them got it to work with and without SSL in all browsers including Internet Explorer.

stage.stageHeight is 100px too small in Flash CS3

Ian Routledge — Mon, 14 Feb 2011 09:39:04 +0000

I’ve recently been making a flash game with one of our clients. It’s a (pretty awesome if I may say so myself) side-scrolling flash game. Anyway, you can play it on Windows Live Messenger – just look for ‘Trolley Challenge’ in the game section and you should find it.

I was doing the fairly standard thing of positioning items relative to the stage, rather than hardcoding them. I mean, if I want a character at a certain position it would be positioned at stage.stageHeight – 200 for example. The idea, being that if you need to resize the game to use on a different platform then it’s straightforward – just increase the stage size and everything repositions and redraws.

That all works find, until you get in to Flash CS3 and publish the SWF. And what happens?! Well, everything is 100px higher than you’d expect. It turns out that it’s a bug in CS3 where this value is too small if you’re using the bandwidth profiler. There’s an easy fix though – simply press CTRL + B to get rid of it and stage.stageHeight goes back to being what you’d expect.

Problems Automatically Upgrading WordPress on IIS?

Ian Routledge — Fri, 14 Jan 2011 13:57:27 +0000

WordPress version 3.0.4 was released at the end of December. It contains an important security fix (XSS vulnerabilities in the KSES library whatever that means). Basically, that means you really should upgrade if you haven’t already. If you’re running WordPress 2.7+ you can do it automatically, which I tried but this is where I cam across the following problem. The update ran but gave me the following error:

Downloading update from http://wordpress.org/wordpress-3.0.4.zip…

Unpacking the update…

Could not copy the files.

Installation Failed.

Now that looks like a permissions error straight away, so i had a quick read of the WP docs at http://codex.wordpress.org/Updating_WordPress. Unfortunately, the docs only talk about PHP, and mine runs on IIS on a Windows box. However, there is one line in bold, ‘your files all need to be owned by the user under which your Apache server executes’ which says that the server needs permission to be able to overwrite the files. The same of course applies on a Windows server so it’s just a case of applying those permissions.

You need access to the server to do this, so if you’re on a managed hosting environment, you may need to contact support to it for you, or just go down the manual route. Here are the steps to fix it:

Find the folder than contains the WP files.
Right-click and go to the security tab.
Click ‘add’ under the group or user names section, as we need to give a new user permissions to this folder
Click ‘advanced’ under the names text area, so we can find the correct user.
Click find now on the right, which populate the search results below.
Double click on the internet guest account (IUSR_MACHINENAME) to select it.
Now click OK. This will add it to the list of users for that folder.
Finally, tick ‘modify’ in the ‘allow’ column when IUSR_MACHINENAME is selected

And there you go, WP should now be able to install the update automatically.

A First Stab at Some Generative Art

Ian Routledge — Thu, 06 Jan 2011 21:19:11 +0000

You may well have heard of a certain Grant Skinner, the Flash guru. I saw him speak at FOTB back in September last year, and one of the things he talked about was what he calls ‘passionate procrastination’. Basically, by that he means spending some time that you’d usually just waste on building something interesting. He goes for the technique of spending 20 minutes a day on passionate procrastination butn reality it’s never that easy. If you can fit it in, you’ll be pleasantly surprised by what you can come up with.

I spent some free time a little while ago looking at ‘generative art’. I’m no artist but code really can produce some beautiful things – just look at look at work of the likes of Joshua Davis and Erik Natzke. My attempts were merely a scratch on the surface of what you could achieve and didn’t do anything new, but I learned a lot and I enjoyed it. Here’s a few notes from my experience:

Have a goal, don’t just code. My goal was two-fold: to produce some nice looking spiral generative art with I could make a print and to adapt it to generate in response to sound and music as a data visulatisation.
Be influenced and inspired. There are some great people out there who’ve done some really, really cool stuff so have a look around and be inspired.
Enjoy it. It’s called passionate procrastination for a reason, there’s no point doing it if it’s a chore.
Learn from it. Try something new, get out of your comfort zone! Use it as an excuse to learn object-orientated Actionscript if you don’t already; learn HTML 5 and canvas, try processing – there are so many new technologies and things to try.
Use SVN. Sounds simple but it’s a great way of storing progress as you develop your ideas and adapt your code.
Show them and be proud. Put them up on Flickr, Deviant Art, your portfolio and tweet them. The more feedback you get, the better and visibility is always good.

I’ve created a set on Flickr of some of my favourites. Let me know what you think. I haven’t got to putting it to music yet, but fingers crossed I’ll get to that one day.

Lastly, here is some absolutely awesome inspiration from Robert Hodgin (Flight 404):

How not to do in-app mobile advertising

Ian Routledge — Mon, 20 Dec 2010 22:30:06 +0000

Advertising has been around for years, in fact Wikipedia reckons the Egyptians used papyrus for making advertising so that’s certainly a bloody long time. We’ve learned a lot over the years, not only about how to do it but also how to fail – just search for ‘advertising failures’ on Google and you’ll find some pretty hilarious stuff. We’ve seen it change dramatically, especially over the last century, what with different styles and media: print, radio and TV and in the last 15 years or so this thing called the interwebs.

The last few years has seen the mobile industry grow massively: gone are the days of WAP with pure text pages and slow loading. The iPhone and 3G networks have had a large part to play in this and will no doubt continue to do so. But it’s the likes of Android and other platforms that are driving prices down and giving consumers choice, making high speed internet on smartphones available to every man and his dog (can dogs use touch screens?). And to go with this, every platform now has its own app store, surely tempted in (for better or worse) by the 300k+ apps 7 billion+ downloads in the Apple app store.

This is great news for developers, being able to make millions from creating an app in your bedroom sounds like a dream come true. I’m a developer and I own a smartphone and I’ve been pretty tempted by apps, as there a couple of choices for monetization: free and ad/sponsor supported or paid. Both work quite nicely depending on the type of app, but the ad-supported model is interesting as consumers are willing to download a free app to try it without much thought. A combination of these 2 business plans is being fairly widely used, and if the free app with advertising and then a paid app with more features.

Waffle over: what bugs me about all this is that all the advertising I’ve seen in-app has been truly terrible. It’s like we’ve gone back in time 10 years and people are just discovering flash banner ads for the first time. Not one has even nearly made me want to click on it – the creative and messaging have both been rubbish. Is it too much to ask for someone to spend more than a few minutes on a decent, clever bit of creative for these ads? I’m talking mainly about the static pre-game ads as there’s more screen real-estate to play with rather than the little ads.

I’ve seen one full on video ad as a pre-roll before a game in Solitaire on the iPhone and this has 2 massive problems: first it froze my game for 20 seconds whilst it downloaded and it played on full volume whilst I was having a nice quiet game on the tube, making me look and feel like a right idiot. All this for Olay! I appreciate they can’t target ads so I’m willing to sit through or skip an ad about moisturiser, but the autoplay gave me such a strong negative feeling towards the advertiser (Transpera in this case) and the brand, totally defying the point of advertising in the first place. That and also I’m quick to skip the ads now before they even start that it’s a waste of the brand’s money and surely results in a tiny click-through-rate.

So there we go, that’s how to not do in-app advertising. Get some decent creative and don’t be intrusive.

New Portfolio!

Ian Routledge — Tue, 30 Nov 2010 21:57:35 +0000

Welcome to my new portfolio and blog (kind of). It has been a really, really long time coming. I ‘designed’ it myself, and I’ll certainly be the first to admit that I’m no designer but I think it does the job. It’s coded in HTML5 and is all standards compliant – fingers crossed. Finally, the blog part is powered by WordPress instead of BlogEngine.NET. I find WordPress a lot more powerful and easy to customise and that combined with the fact that it’s been on my list of things to learn for a while maide it a no brainer.

So, here it is. It’s not finished and probably never will be, so bare with me…but then again, which designer is 100% happy with their portfolio?

Fixing ‘multiple types were found that match the controller named’

Ian Routledge — Tue, 12 Oct 2010 09:58:00 +0000

ASP.NET MVC introduced the concept of ‘areas’ within a web app.
They’re a great way to split a large app into different sections that handle different logic, for example you might have an admin area that has some authorization and handles all of the back end content management for the app. You can think of them almost as ‘sub-projects’, as they have their own controllers and views.

It isn’t unlikely that you might have the default controller called Home in the root, and also another controller called Home in a separate area.
However, because of the fact that MVC works as pre-compiled web application (rather than a web site), all the controllers get compiled into the assembly and you get the following error:

Multiple types were found that match the controller named ‘Home’. This can happen if the route that services this request (‘{controller}/{action}/{id}’) does not specify namespaces to search for a controller that matches the request. If this is the case, register this route by calling an overload of the ‘MapRoute’ method that takes a ‘namespaces’ parameter.

The request for ‘Home’ has found the following matching controllers:
EdibleCode.Web.Controllers.HomeController
EdibleCode.Web.Areas.Admin.Controllers.HomeController

So, despite the fact that the controllers are in different namespaces, the app doesn’t know which one to use. Fortunately, there is an easy fix to tell MVC which namespace to use as the default. Open the global.asax.cs file from the root, and find the Application_Start method. It should have two lines in at the moment (AreaRegistration.RegisterAllAreas(); and RegisterRoutes(RouteTable.Routes);). Simply add the following line after these, replacing the namespace in quotes with the namespace of your controllers:

ControllerBuilder.Current.DefaultNamespaces.Add("EdibleCode.Controllers");