All posts by James

Visual Studio – Add Controller dialog has empty Model Class and Data Context Class drop-downs

Update: I’ve just had a reoccurrence of the issue described below, and the steps I mention resolved it.

A very lengthy and precise title, but this one has been a bit of a pain in the arse. Google hasn’t helped much, so hopefully the next poor git who encounters this issue might stumble upon this post.

So, the problem is this – the ‘Add Controller’ dialog box in Visual Studio 2013 sometimes doesn’t populate he ‘Model Class’ and ‘Data Context Class’ dropdown boxes when you’re tried to add a new scaffolded controller to an MVC project.

Everything was working fine for me initially, and then it mysteriously stopped working. Googling seemed to suggest a simple rebuild of the project would do the trick (it didn’t).

It’s now working, and whilst I’m not sure it’s down to the fiddling I’ve down or just pure chance, here’s a list of the actions I took to attempt to resolve this very irritating problem:

– Unload the .csproj file
– Manually look through the .csproj for any dodgy references. I found VS had added to the web.config entry for no apparent reason. Everything else looked ok.
– Reload the the .csproj file
– Clean the solution
– Rebuild the solution

I’ll update if it breaks again and update the steps to resolve accordingly. I can’t seem to find any information that explains the datasource of that dialog – where it gets the model lists from.

Link to similar issue:
https://connect.microsoft.com/VisualStudio/feedback/details/809839/visual-studio-2013-pro-add-view-does-not-show-a-referenced-data-access-class-library-model-in-the-model-class-drop-down-list

Azure – some thoughts

I’ve been building a site recently using ASP.NET MVC. I thought it would be a good opportunity to have a proper play around with Windows Azure, which is Microsoft’s cloud service – as I haven’t used it for anything more than trivial demos and the like.

It’s been slightly more of a pain in the backside than I’d hoped – which I’ll explain in more detail in a subsequent post, as some of the problems I’ve encountered were not easy to solve using Google.

Here are some high-level thoughts, though:

– Azure doesn’t allow you to put a spending cap in place for ‘normal’ accounts. Only special accounts (such as the free credits you get with an MSDN subscription) have an automatic spending cap of zero, so that you can ensure you don’t go over your free credits. This is stupid, and rules out Azure for smaller websites / businesses. Any type of DOS attack or other types of non-legitimate / non-revenue generating traffic could end up with you footing a massive bill with little to no warning.

– You can deploy to Azure directly from Visual Studio 2013. It’s really easy to do and works quite nicely!

– Azure’s web interface is slightly over-complicated but it offers a lot of flexibility in terms of scaling / pricing.

– Multiple databases don’t transition that well from local development to Azure, unless you’ve got the appropriate incantations in place to make it work.

HTML Canvas – torch / lightbeam

I’ve been playing around with the HTML Canvas tonight, and having a think about how I’d go about implementing a torch / light beam type effect in a platform game.

There are loads of ways to do this kind of thing, but where I usually start is with the most simple, basic (and shitty) implementation and go from there. I did some searching around the internet and found next to nothing for someone who doesn’t want to use a library, so here’s a starting point.

What I was after was the ability to draw a scene, as you normally would, and then have only a small section lit (or visible) at any one time. The lit section of the scene would be determined where the player’s torch was pointing. To me, the most basic and simple way to achieve that would be to draw the scene on one canvas, then draw a clipping mask on a separate, temporary canvas and then overlay it over the main scene canvas.

Sounds workable in theory, and a starting point at least, but the question is how? There’s a few options – you could draw a masked image over the top – a PNG with a solid background colour and transparent section representing the torchbeam – but that seemed a bit restrictive to me. I want to be able to wobble the torchlight around as the player moves and runs.

In the end, the best solution seemed to be to use the excellent compositing operations offered by the HTML Canvas:

lightCanvas.fillRect(0,0,lightCanvasWidth,lightCanvasHeight);
lightCanvas.globalCompositeOperation = 'xor';
lightCanvas.arc(100, 100, 100, 0, 2 * Math.PI);
lightCanvas.fill();

What does that code do?

It first fills the ‘lighting canvas’ with solid black, entirely. It then performs a ‘xor’ (or ‘exclusive-or’) global composite operation.

wat

What this means in practice, is that it effectively compares what was on the lighting canvas before the operation began (i.e. solid black filling the canvas), and after (i.e. the arc) – and areas where the newly drawn arc overlaps with what was there previously are made transparent.

The end result, is a clipping mask that can be overlaid over the ‘main’ canvas. You can shape the torch beam, you can move it around, you could use gradients to simulate the light faltering – plenty of options there. And a good starting point for playing around with this kind of stuff.

Javascript fundamentals: Scope

Scope, then. Not just the thing on top of a sniper rifle – it’s something that can trip you up in sometimes subtle and seemingly devious ways in JavaScript. This post will get you on your way to understand what it is.

TLDR; Summary

Scope determines which parts of your code can access other bits. This is largely controlled by using the ‘var’ keyword when declaring a variable, and where that keyword is used (inside a function, outside a function et) determines the scope. A variable with ‘global scope’ can be accessed by any part of your code.

That wasn’t particularly short. Got anything shorter?

Scope in JavaScript can be tricky until you ‘get it’. I’ll help you get it.

Go on then, what is ‘scope’. What does that mean?

In JavaScript, you can declare variables. You do it something like this:

var myVariable = "some text";

You might also have seen a variable declared like this – without ‘var’:

myVariable2 = "some more text";

I know that. So what?

That var keyword – that can be the source of lots of pain. Luckily, there are some simple rules:

  • If you omit the ‘var’ keyword when declaring a variable, and there isn’t already a global variable with the same name in your code, that variable will have ‘global scope’ – meaning any part of your code can access and modify that variable.
  • If you do include the ‘var’ keyword, the scope of the variable will be determined by which part of your code you’ve declared it in.

That second bit was… vague.

Luckily that’s also quite simple. JavaScript has ‘function-level scope’. That means that if you declare a variable using the ‘var’ keyword, and you do it inside a function, generally speaking only code within that function can access and modify it. Unless you pass it around to other functions, but we won’t worry about that right now. Fancy some examples?

Yeeaaaaaah boooyyyy.

// Welcome to some code examples.

/* Both of these variables are Global.
 The first one is using the 'var' keyword, but it's not declared in a function.
 This means it's global. */

var myGlobalVariable1 = true;

/* This one hasn't used var, and there isn't a pre-existing variable with the same name.
 This means it's global. */

myGlobalVariable2 = true;

function myFunction() {

  /* We haven't used the var keyword here. There is a pre-existing variable with the same name.
   This means the pre-existing variable just gets updated. */

  myGlobalVariable2 = false;

  /* We've used the var keyword. We're inside a function.
   This means this variable has local scope to this function. */

  var myLocalVariable1 = true;

}

// What happens when you try to access the local variable declared inside the above function?
console.log(myLocalVariable1);
// ...it doesn't work.

That’s the basics. Play around with some code (by far the best way to learn), and bear in mind those rules.

Those of you who might be reading this and thinking “Hang on, you lying bastard, there are plenty of exceptions to what you’ve said above! TWAT” – you’re right. There are. But this is for beginners. If you find a beginner, help them out. When they’ve figured it out, you can bore them to death with the exceptions.

Javascript fundamentals

I thought I’d write a series of blog posts around Javascript. It’s a funny bugger of a language, but I really enjoy using it.

I’ll assume the reader has some knowledge of the fundamentals of programming (variables, functions/methods, C-like syntax).

Something I found quite irritating when I was learning JavaScript is that it’s practically impossible to find a concise, and beginner-friendly explanation for something. Scope, closures, objects – all of those things are explained in millions of different ways, nearly all of which don’t make sense to a relative beginner.

I consider that my challenge – explaining this stuff in an accurate, concise, and easy to understand way. You can let me know if I’ve failed.

I’ll tag these posts (unsurprisingly) as JavaScript.

Evenin’.

Hello! It’s been a while since I’ve blogged, so I thought I’d get cracking again.

If you’re interested in web development, gaming, or dogs, hopefully at various points there will be something to interest you. If there isn’t, well – go and explore. There’s plenty of tubes to find things in.

I’m James, I’m a web developer. I work for a technology company who makes whizzy things. I find blogging to be a good way to remember things I’ve found useful that I’d otherwise forget.

That’s it for now. Bye!