Steve Hayter's Weblog @stevehayter - Tumblr Blog

Great Azure Platform Overview

If, like me, you find the plethora of Azure platform services a bit overwhelming, then Microsoft have released a great little tool which explains what each one is for. I’m pretty sure even seasoned Azure users will discover a service they didn’t know about!

#azure

C# Interactive, aka “The Immediate Window Done Right”

I’m a bit late to the party here, but if you ever use the Immediate Window in Visual Studio (or find yourself creating numerous Console apps just to test out some code), then the Visual Studio ‘C# Interactive’ window is for you.

It can be found in View > Other Windows > C# Interactive. It will pop up at the bottom of the window, and you can pretty much type any C# code you like into it.

It uses the Roslyn compiler, so is extremely powerful - supporting async, Linq, and the using statement. There’s a walkthrough guide on it, which does a way better job of explaining it than I do.

I recommend giving it a go - it’s extremely useful!

Windows 8 & Boot Camp With Parallels - 'Trying to boot from SATA 1'... And Hangs...

I came across this issue this morning on a brand new Retina Macbook Pro. I installed Windows 8 using Boot Camp, and then tried to setup a VM with Parallels using it. All seemed okay until it booted, and the Parallels boot screen just hung displaying:

Trying to boot from SATA 1...

And progressed no further. No errors. Nothing.

It seems this is an issue Parallels are aware of, and they have a workaround here. I applied the fix, and it suddenly booted to Windows without any problems.

Non-Embedded Resource Files - But Nothing Output On Publish?

There are times when due to client requirements, I still use resource files that are not embedded. Meaning that the physical RESX files are read when the application starts, and they can edited (or more added for different cultures) ad-hoc.

This usually works fine. However, upon a recent deployment to the staging server, I suddenly realised that the App_GlobalResources directory hadn't been output in the publish - and weirdly a global resource DLL had been output in the bin folder. It was like they had suddenly been embedded.

I checked the RESX file properties in Solution Explorer - nope, all good. They were still set as Build Action: Content. I couldn't understand what was going on.

I then twigged that during the last publish, someone had checked the 'precompile during publishing' checkbox and committed the publish settings file to SVN. It turns out that this option embeds the resource files automatically, despite what the build action was set to.

So to avoid it, ensure it is not checked:

I've never used this option before, but I always just assumed it pre-compiled the views into the DLL to improve performance on startup - but it appears it automatically embeds a lot of things!

So if anyone else has this issue, I suggest you check this option :).

Famous... well, kind of.

I just stumbled across this whilst looking through some of my portfolio imagery. I worked with Rovio - the developers of Angry Birds - on a special version of the game for Cheetos last year.

The kindly credited me in the game:

It's not much, but it's the most famous I've become in my development career so far!

Posting JSON To An MVC Action Method (And How To Simulate It With Fiddler)

Posting JSON to an MVC action method (as in a HTTP POST) works out of the box in MVC 3. As long as you pass it in the right format, and set the right content type, ASP.NET's JsonValueProviderFactory will automatically bind the data to your models.

(And if you're using an older version of MVC, you can download the MVC Futures library which provides the same functionality).

How To Simulate In Fiddler

Simulating posting JSON in Fiddler is just as easy - you just need to ensure you set the right request headers. In Fiddler, go to the 'Composer' tab ('Request Builder' in older versions), select 'POST' from the request type dropdown, and type the URL to your action method.

Let's take a simple MVC action method:

[HttpPost] public ActionResult Test(string name) { return Json(name); }

(Note the HttpPost attribute - as you should only really be sending JSON using POST).

To simulate a request to it, open Fiddler, and in the request headers box, ensure you specify the JSON content type. If you don't, ASP.NET won't detect that you're passing JSON, so won't attempt to bind it:

Content-Type: application/json; charset=utf-8

And then in the request body box, type the JSON that represents the model you are trying to bind to. In my case, it's a simple string parameter:

{ name: "John Smith" }

(Ensure double quotes are used around literal values, or the model binder won't pick them up).

And that's it:

If you click the Execute button, you should see the request completes successfully. In my example, the method returns the parameter back as JSON:

ASP.NET MVC: Simulating A POST Request With Fiddler

Simulating a POST request in Fiddler is actually really easy - you just need to ensure that you set the right header information, and pass the parameters in the correct format.

In my case, it is to test action methods in ASP.NET MVC applications, but the same principle can be used with any other web framework.

So how do we do it? Well, open Fiddler, and go to the 'Composer' tab (it's called 'Request Builder' in older versions). Then select POST from the request method dropdown, and paste the URL you wish to POST to.

Next, you need to add the content type header which tells ASP.NET you're posting form data (or at least 'simulating' it). This ensures the parameters get bound to your model correctly (if you don't specify it, the parameters will be ignored):

Content-type: application/x-www-form-urlencoded

And then type the parameters in query string format (so for example parameter1=value1& parameter2=value2..., etc):

name=John+Smith

(You should ensure characters - for example spaces - are URL encoded correctly).

And that's it. So if my MVC action expects a 'name' parameter, and I click the Execute button, the parameter should be sent and bound correctly:

Disabling Transparent Aero Dialogs In TortoiseSVN

Eargh. In the latest version of TortoiseSVN, someone thought it would be a great idea to enable Aero transparency on the dialogs. Sounds nice doesn't it? The problem is, it doesn't look nice at all. In fact, it looks hideous:

It looks like someone's just enabled it, but not bothered to tidy up the UI or polish it up.

Thankfully, you can disable it. Go to the TortoiseSVN settings, click the General tab, and uncheck the Use Aero Dialogs checkbox:

And they're back to normal (you may have to close and re-open them). Thank god for that.

#Development #TortoiseSVN

"Java SE Development Kit (JDK) Not Found" Error When Installing Android SDK

It's definitely a week for installer weirdness. After my bizarre SQL Server installer error last week, I experienced another weird issue with the Android SDK installer.

When you run it, it normally checks if the Java JDK is installed - which makes sense. I've installed the Android SDK many times, so I always make sure I install the Java JDK first. Except this time, it failed the check, and told me it wasn't installed by giving me the error 'Java SE Development Kit (JDK) not found':

Strange. I double checked it had been installed, which it was. I re-installed it, and checked the usual Java-related settings (like environment variables), and it was definitely there.

After pulling my hair out for an hour trying to figure out why it wasn't working, I by chance clicked the 'Back' button on the installer, and then 'Next' again. And it suddenly passed the check:

I was then free to continue installing. How bizarre. I'm running Windows 7 Professional 64-bit, but I've been running that for a while now.

So if anyone else if seeing this issue, try clicking 'Back' and 'Next' again.

#Development #Weirdness #Android #Java

Your SQL Server R2 Installation Completed Successfully... Or Not?

I must (re)install SQL Server every 6 months or so, and to be fair to the installer, it usually works perfectly. However, when I installed it this morning, I was greeted with a bizarre confirmation screen by the installer:

Yep, it apparently completed successfully, yet there a mystery error icon with no text next to it. So installer, did it complete successfully or not?

I clicked the 'Close' button, and it appears to be working fine, but glitches like this do make me nervous.

I wonder what caused it. Let's hope it doesn't cause any issues further down the line.

#SQL Server #Weirdness

Android Emulator: 'Insufficient Storage' Error When Running An Application

Yesterday the Eclipse console suddenly started displaying an 'install failed: insufficient storage' error when I attempted to install and run an Android application using the emulator:

Installation error: INSTALL_FAILED_INSUFFICIENT_STORAGE

Now I had added some images, so it seemed that these additional files somehow maxed out the emulated device's disk space. And when I removed them, the application ran without any problems again.

After some digging, it turns out that you can override the emulator's disk partition size. In Eclipse, you just need to open the 'Run Configurations' option by clicking the drop-down next to the run icon:

Once that appears, click the application in the list on the left, and then click the 'Target' tab in the right pane. For each emulator you use, add the text:

-partition-size <size in megabytes>

To the 'Additional Emulator Command Line Options' box (you may need to scroll down to see it):

Then click 'Close' to save it, and try running the application again. You should find that the issue is resolved.

Hopefully this will help out anyone else who is having this issue.

Update: Apparently this doesn't work for everybody. I've also seen a solution that forces Android to install applications to the emulator's SD card if it's available, so this might help too.

#Development #Android

Xcode: Can't Run After Upgrading To Mac OS X Lion

After recently upgrading my Mac OS X installation from Snow Leopard to Lion, I was greeted by the error message 'Xcode 4.0.2 requires Mac OS X 10.6 Snow Leopard' after trying to run Xcode:

After fumbling about with the App Store trying to figure out how to install the new 'tools version' like the message box said, it told me my installation was already up to date.

Yes, confusing. After some more digging, it turns out that within the Applications folder folder, there is an Install Xcode icon that will launch the update installer:

Not exactly intuitive to figure out, Apple. But hopefully this will help anyone else out who has come across the same issue.

#Mac OS X #Xcode #Development

Problems & Quirks Using LINQ: Part 1

This is the first post in quite a while. Apologies for this - things have been a bit hectic with starting a new contract, juggling a few personal projects for people, and setting up a few other blogs. But I'm back now, and am now committed to posting more often.

In my current project, I've been using .NET's LINQ extensively in the API as a handy way to sort and filter data. It's extremely powerful, and makes some quite difficult and tedious things quite trivial to implement.

However, you should approach LINQ with caution, as it can sometimes cause some unexpected behaviour. So I've decided to write a series of posts that outline these problems. This is the first one, and more will follow shortly.

I have titled this post 'problems and quirks' to aid other people who are searching for information really. This post doesn't really outline problems or quirks with LINQ per se - more just a misunderstanding that I (and most others) had about how it works and its expected results.

Lets take some relatively simple LINQ code:

// Create an array var values = new string[] { "Black", "Dark Blue", "Light Blue", "Dark Green", "Light Green", "White" }; // A keyword to filter the keywords by var keyword = "Blue"; // Get the filtered values using LINQ var filtered = from v in values where v.Contains(keyword) select v; // Change the keyword keyword = "Green"; // Loop through the filtered values foreach (var f in filtered) { // Write to thr console Console.WriteLine(f); } // Press enter to exit Console.WriteLine("Press enter to exit..."); Console.ReadLine();

Looks relatively straightforward doesn't it? Loop through an array, find any elements that contain a keyword, and output them out to the console. But what if I asked you what values would be output to the console?

If you'd asked me before I started this project, I probably would have said:

Dark Blue

Light Blue

(Having assumed that the LINQ statement would be evaluated, and the results assigned to the filtered variable before Green was assigned to keyword).

This is in fact wrong. If you run the code, you'll get:

Dark Green

Light Green

But why? Well, the LINQ statement is in fact a closure, so is only evaluated when the variable is referenced (such as in the foreach statement later). The closure is also bound to the keyword variable - not its value. So when we assign Green to the keyword variable, the where statement uses this in the foreach statement.

Now it makes sense, right? You still need to be cautious though, as this behaviour can change depending on the LINQ statement itself. I will go through these differences, and explain them in a subsequent post.

#.NET #Development #LINQ

ASP.NET MVC: Upgrade From MVC 2 to MVC 3

ASP.NET MVC 3 has a huge number of improvements over MVC 2. But what if you already have an application developed using MVC 2? How do you port it over or upgrade it to MVC 3?

Well the great news is that Microsoft has released a free upgrade tool that will do most of the work for you:

I've tried it on some of my MVC 2 applications, and it seems to work fairly well.

If you'd rather do it yourself, then there are also instructions to do it manually.

Microsoft hasn't really promoted this tool very much, so most developers are unaware. So spread the word!

#Development #MVC

Centring Content Intelligently Using jQuery

When I originally conceived the design for my hub, I wanted the content to be positioned in the centre of the screen. I thought this gave a far sleeker look than anchoring it to the top.

Now whilst I rate my CSS skills quite highly, positioning elements in this way is not really my forte. So I turned to the Internet for a solution.

Now I found numerous CSS based solutions. The problem was, they either didn't work when the windows was resized, required you to know the height of the content, cut off the content when the window was smaller than the content, or simply didn't work in earlier versions of IE (yes I do want to support IE6). And many of them also resort to numerous CSS hacks, and/or over the top markup to achieve their result.

Now I wasn't going to resort to using a <table> for the solution, so I turned to my new best friend - jQuery. There are, again, plenty of jQuery plugins which try to achieve just this. But like their CSS counterparts, they cut off the content when the window is resized to smaller than the content (due to negative positions in their calculations), like one developed by the brilliant Rick Strahl:

Not particularly useful, as the content to the left and top becomes inaccessible. So I decided to write my own. It's actually extremely simple, and works really well. The content gets centred perfectly in all major browsers (including IE6):

And it even centres when the window is resized, unless the window is made smaller than the content. In this case, the content reverts back to it's automatic positioning, keeping the content anchored to the top left, and allowing the scroll bars to be used to view all the content if needed:

And if JavaScript has been disabled in the browser for whatever reason, it just remains anchored in the top left. To use the plugin, just call the centreInWindow function in the document ready event:

// On DOM Ready $(document).ready(function() { // Centre in window $('#myelement').centreInWindow(); });

How It Works

For those who are curious how to works, i'll briefly explain the concept below. I won't go into the fundamentals of how jQuery plugins work, as there are plenty of tutorials online. The core of the logic is in a centre function:

// Internal function that centres the content in the window function centre() { // Get x and y co-ordinates var xPosition = ($(window).width() - content.outerWidth(true)) / 2; var yPosition = ($(window).height() - content.outerHeight(true)) / 2; // Check the element doesn't off the screen (we do this so if the window // is smaller than the content, the content stays flush with the left of // the window, rather than going beyond it). if (xPosition >= $('body').offset().left) { // Set the left position content.css({ 'left': xPosition + 'px' }); } else { // Go back to normal content.css({ 'left': 'auto' }); } // Same check for the y co-ordinates if (yPosition >= $('body').offset().top) { // Set the left position content.css({ 'top': yPosition + 'px' }); } else { // Go back to normal content.css({ 'top': 'auto' }); } }

First we work out where to position the element by dividing the width and height by 2, and subtracting it from the window's width and height. Then - and this is the important bit - we check the values we have are not less than the position of the body. If they aren't, we set them using CSS. If they are, we set the positions to be 'auto' - meaning the browser will simply anchor it to the top left. This is what ensures the content never gets cut off.

And finally, to execute the function inside the plugin, we make the element absolutely positioned first. Then we call the function immediately, and also in the window resize event:

// Position content absolutely content.css({'position': 'absolute'}); // Wire up to the window resize event $(window).resize(function() { // Call the function centre(); }); // And call it so it runs immediately centre();

Update: I have now added this plugin to the jQuery plugins site, where you can download the source, try out a demo, and report any issues.

#Development #CSS #jQuery #Plugins #HTML

Stopping Repeated jQuery Animations

jQuery makes it extremely easy to add attractive animations to your web pages. However, if use them as a result of user interaction (for example, hovering over or clicking an element), then you may run into the problem of the animation queue building up, and the animation repeating over and over again the queue has been cleared.

Take a simple example. Upon hovering over a <div>, it is faded out, and then faded in again when the hover state is removed:

// On DOM Ready $(document).ready(function() { // Add to hover event $('.hover-block').hover( function() { // Fade out $(this).fadeTo(500, 0.3); }, function() { // Fade out $(this).fadeTo(500, 1.0); } ); });

And this is how it appears in the browser:

.hover-block, .hover-block-fixed { height: 100px; width: 120px; padding: 10px 10px 10px 10px; float: left; margin: 20px 20px 20px 0; color: #FFF; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .hover-block p, .hover-block-fixed p { text-align: center; padding-top: 37px; color: #FFF; text-shadow: none; font-size: 1.3em; } #hover-block-left, #hover-block-fixed-left { background-color: #A5A5A5; } #hover-block-right, #hover-block-fixed-right { background-color: #333; } // On DOM Ready $(document).ready(function () { // Add to hover event $('.hover-block').hover( function () { // Fade out $(this).fadeTo(500, 0.3); }, function () { // Fade out $(this).fadeTo(500, 1.0); } ); // Add to hover event $('.hover-block-fixed').hover( function () { // Fade out $(this).stop().fadeTo(500, 0.3); }, function () { // Fade out $(this).stop().fadeTo(500, 1.0); } ); });

Block A

Block B

If you hover over both boxes repeatedly and quickly, you'll see the problem. The animation runs slower than the mouse movement, and the queue just builds up. Once you stop, the hover functions are still executed, causing an annoying repeat of the animations until the queue is cleared.

So what's the solution? Well, it's actually very simply. Just add a call to jQuery's stop function before the animation as follows:

// On DOM Ready $(document).ready(function() { // Add to hover event $('.hover-block-fixed').hover( function() { // Fade out $(this).stop().fadeTo(500, 0.3); }, function() { // Fade out $(this).stop().fadeTo(500, 1.0); } ); });

So now, if you try it again:

Block A

Block B

You'll see it doesn't happen anymore. The function effectively stops any running animations, meaning upon each hover, the queue is cleared.

Now there are circumstances when the repeat may be required, so I understand why it hasn't been built into the jQuery functions directly. However, I always use it for simply, one-off animations like this, so I've created my own jQuery plugin which automatically wraps up many animations with this function call as it saves code. So you may find it more useful to do the same.

#Development #JavaScript #jQuery

Getting YouTube iFrame Embedding To Play Nicely With Overlaid HTML

YouTube now provides a new iFrame-based technique for embedding videos into HTML. It allows them to serve HTML5 video where it is supported, and fallback to Flash where not.

This is a neat idea. The problem with it is that if it does indeed fallback to Flash, and you have any HTML elements that are layered on top of other elements in your page, by default the Flash will appear to overlap these elements, as it used to on this post from this very blog:

It happens because using this new method, YouTube by default serves the Flash in 'windowed mode', meaning it has a higher z-index than anything else on the page.

The good news is, you can easily override it in the HTML by passing a parameter a wmode parameter set to 'transparent' in the URL:

This tells YouTube to serve the flash in transparent mode. And bingo. No more overlapping.

#YouTube #HTML

Trending Blogs

Recently Viewed Blogs

Steve Hayter's Weblog