MVC & <text> Gotchas

Noticed a few of this lurking around in my teams code base recently, very easy to go unnoticed. Without HTML Validation, anyway.

  1. @helper MyHelper(string foo)
  2. {
  3.     //Good
  4.     @foo
  5.     //Not ‘bad’, just not required as the @foo will just render out. <text></text> is only needed when Razor can’t auto-detect
  6.     <text>@foo</text>
  7. }
  8. <div>
  9.     @* Good *@
  10.     @MyHelper(“Some Nice Message”)
  11.     @*Bad – The <text></text> gets rendered as HTML to the browser*@
  12.     <text>@MyHelper(“Some Nice Message”)</text>
  13. </div>
Share

dotLess CSS with .NET 4.0 & MVC3 Setup

Very simple. Download dotLess.Core from here… http://www.dotlesscss.org/

Inside your MVC3 project, open the web.config (not the web.config inside your Views folder).

Find a section that looks like this, we want to add to the end of it.

    <pages>
      <namespaces>
        <add namespace="System.Web.Helpers" />
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <add namespace="System.Web.WebPages"/>
      </namespaces>
    </pages>

Add these lines, after the closing pages tag.

    <httpHandlers>
      <add type="dotless.Core.LessCssHttpHandler,dotless.Core" path="*.css" verb="*" />
    </httpHandlers>

I have it set there, to process all CSS files. So I don’t have to mess around with .less files in VS 2010.

Now, put some test content into any of your projects CSS files…

@brand_color: #4D926F;
 
#header {
  color: @brand_color;
}
 
h2 {
  color: @brand_color;
}

Browse that file on your web server, and it should have executed correctly and your #header and h2 class have the relevant colour assigned to them.

Share

Subversion Externals – Specific Revision

Recently, i needed to change one of my externally loaded projects in SVN to a specific revision, turns out this is very easy.

Normally, an svn:external could look something like this…

^/trunk/MySolution/MyProject MyProject

To get the MyProject folder at a specific revision, you just need to add @<RevisionNo>.

^/trunk/MySolution/MyProject@1234 MyProject

Will check out the copy of MyProject at revision 1234.

Fantastic.

Share

Linux/Unix Watch command

Got a log file? Want to have a nearly-live stream of it into a console window? Simples.

# watch tail -n30 server.log

Change 30, to however many lines you want to show, and Server.log to the file you want to view. By default watch updates every 2 seconds.

Share

Amazon AWS Vs. Cloud VPS

I’ve been swapping servers for yonks, always trying to make my outgoings less and less. I recently moved back to a VPS from a Dedicated Box, because i wasn’t utilizing the power available and it wasn’t worth the price i was paying for it.

So on my hunt, i found the cheapest VPS hosting company around, which did exactly what i wanted. As I build a lot of websites/applications, I like to have the ability to create a new machine, let the customer play, then kill it. With as little fuss as possible.

Obviously, when I had a dedicated box this was easy. Clone a VM, job done. Very few (reasonably priced) companies have this functionality and it does seem mostly geared at big companies with lots of money to spend. I am not a big company nor do i have lots of money to spend.

Along came VPS247, based on the UK. Their prices were reasonable, and the product was fairly flexible. You could buy extra ‘blocks’. For example, buying a Single Block would give you 256MB Ram, 1 CPU and 250gb Bandwidth all for a fiver. That’s a fantastic deal. Good luck running anything that requires a database on that however. So, 2 blocks then. 512MB Ram, 1 CPU, 500GB Bandwidth. Would have liked more ram but 512MB will do. That’ll be a grand total of £10 a month (before VAT, so £12 all in), which is fantastic. I’ve been paying ~£50 for too long for essentially this service.

I could have bought another block, which would have given me 768MB of ram, but also extra disk space, extra bandwidth. All of which I don’t want, which I’m obviously paying a premium for. I know it’s only £5, but I don’t need it that bad. I don’t like paying for stuff I don’t use.

So I signed up with VPS247, migrated my entire server to them (this website included), very easy, very simple. Job done.

Then my server went offline, for 27 hours. Randomly. VPS247 had a DDOS attack and it took my server out. Was there any hint of an apology, or compensation? Not a little bit. Time to move onto another host then, one I can trust a little more. It became immediately obvious why this service was so cheap. I should have known better, buy cheap, buy twice.

Once the server was back up and stabilized again, I decided I would move over to someone else. That’s where Amazon came into it…

I always considered Amazon’s hosting a bit of a joke (so very, very, wrong). Amazon sell stuff, and take 8 months to deliver it. Surely they can’t be in the hosting game? Or if they are, they can’t be doing very well…

Turns out, they’re pretty good. You could say, established. You essentially get a VMWare Server-esque control centre, where you do all your config for your machines (instances), and anything else you require from Amazon. These guys aren’t just doing Virtual Machines, they are doing online Storage, DNS, Database servers, you name it. And with data-centres all over the world, I was very impressed.

As soon as I found out how impressive it was, I headed on over, and started to read up about it. It confused the living shit out of me. There was so much information (good information), but the best bit, their pricing model.

You pay for exactly what you use. You have 5 Virtual Machines Turned Off? You don’t pay for them. Turn them on, and pay by the hour. Turn them on and off at your will. Great idea, if you need power-house to number crunch once or twice a week, only use it for that, then only pay for that usage.

Check out their page for the full details, but the EC2 Hosting is immense. With a range of instance types, ranging from Micro, right upto a ‘High-Memory Quadruple Extra Large Instance’. Stupidly long name, but sums it up.

The Micro server has the following specs.

613MB Ram

1 ECU (Burstable upto 2, this is your processor, Amazon calculate CPU power into ECU Units)

32Bit or 64Bit OS

That’s it, that’s the spec. You pay for Ram and CPU. The servers rapidly get more powerful, but the Micro one will suit me fine. Only when you create an instance, do you get IP’s, Disk Space, etc.

That’s the other thing, you have a look at the extensive collection of pre-built AMI’s (Amazon’s Images) that you can just deploy to your server, and tell me anyone else has something like this.

With EC2, using a Micro Server, you get a ‘free tier allowance’. Which only lasts for a year, but gives you lots of free goodies. For example, 30GB of bandwidth (15in, 15out). Which is enough to last me a month!

There is still, another thing. EC2 have 3 types of instances. On-Demand, Reserved and Spot.

On-Demand, you pay per hour, at a rate of X.

Reserved, you pay a large chunk up front, end reserve your instance for 1/3years. You can make good savings here.

Spot, you bid for the server. For example, an On-Demand Micro Instance, is $0.025 an hour. With a spot instance, you can pay alot less than this. At the time of writing this article, i’m paying $0.009 per hour.

I’ve gone completely against advice, and I’m using Spot. I’ve set a maximum price, of $0.025 an hour, if/when the price exceeds this, my instance will be deleted. Why did I do this?

Well, the data i care about, is stored on a seperate drive, so if the machine goes, it’s a 5 minute job to replace it. But the biggest reason, it’s over 50% cheaper. Buy my current estimates, this server will cost me $9 a month. Which is £5.50 in the current market.

I don’t recommend using Spot for anything you care about (and don’t have backups), but it’s an amazing idea. The chances of my Spot being deleted are slim, looking at the last 3 months of bid pricing, it’s ranged between $0.008 and $0.015, which is still far less than the $0.025 you pay for the on-demand instance.

But what I do recommend, is Amazon and their hosting. Truly amazing, and incredibly flexible.

Share

CSS3 Pie, Instant CSS3 for IE6, 7 and 8.

Reading an article on my commute home this evening about CSS3 and how many super-cool features it had and that it was a shame more developers weren’t using it, purely because of IE6/7/8 and their lack of implementation. Now fair enough, it’s not 6′s fault, or 7′s really, but Microsoft should have implemented this stuff into 8. Either way, they didn’t.

A lot of developers (myself included) refused to use CSS3 because of the lack of support. What is the point in burning several hours/days/weeks(/months in IE6′s case) implementing stuff for the smaller portion of browsers? Yes it might look amazing, but if 80% of your visits are Internet Explorer users, you’ve wasted your time. Until now, or at least July 2010.

Jason Johnston over at css3pie.com has been working hard on a CSS ‘script’ for IE 6, 7 and 8 which helps implement the missing features. There are two versions, a .htc file (best) and a .js file. The JS file does the same job, however it does it once the page has finished, so you will see a flicker between a square box and a rounded box. The htc file, will be loaded and processed during render, in turn minimizing any flicker. Check out css3pie for more information.

Let us see just how easy it is to use. I have a paragraph tag and i would like it to have a red rounded corner border and a drop shadow. This should be fun.

Simple html page, see markup below. All should be fairly clear and obvious.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
	<title>CSS Pie, can IE really work in a reasonable manor?</title>
	<style type="text/css">
	p
	{
		border: 1px solid red;
		width: 150px;
		padding: 5px;
                background: white;

		/*Rounded Corners*/
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;

		/*Drop Shadow*/
		-webkit-box-shadow: black 0px 5px 6px;
		-moz-box-shadow: black 0px 5px 6px;
		box-shadow: black 0px 5px 6px;
	}
	</style>
</head>
<body>
	<p>Will this paragraph, be inside a nice rounded cornered box, with a bit of drop shadow? You bet, in everything except IE.</p>

	<p>This paragraph however, will be pretty (ish) in every browser from IE6 and up. Awesome.</p>
</body>
</html>

Now, let’s run it in IE and Chrome, see which one fails.

As you can see, IE has clearly failed, because it hasn’t implemented the CSS3 rounded corners or drop shadow. This is where CSS3Pie shines through. Let’s add one line into the end of the p CSS rule in. Which will make it appear like so…

	p
	{
		border: 1px solid red;
		width: 150px;
		padding: 5px;
                background: white;

		/*Rounded Corners*/
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;

		/*Drop Shadow*/
		-webkit-box-shadow: black 0px 5px 6px;
		-moz-box-shadow: black 0px 5px 6px;
		box-shadow: black 0px 5px 6px;                

		/*IE Specific*/
		behavior: url(PIE.htc);
	}

Notice the ‘behavior’ rule. This is what tells IE to go and run this script, which will process what it needs to. Now if we re-fresh our page, we can see that IE and Chrome are on a level pegging, both displaying nice rounded boxes, both with a drop shadow on them.

Et voila. Amazingly simple, amazingly easy.

Mega kudos goes out to css3pie.com, go over there and download it already.

Share

Back online!

SpikedSoftware is back online and running! After a recent move from a dedicated server (far too much money!), now running on a temporary VPS with an eye on Amazon’s EC2 which comes with free micro server usage. Interesting.

Share