Simon's Software Stuff

Yahoo YUI compressor and .Less with Visual Studio

Simon Harriyott — Tue, 05 Jul 2011 02:50:30 PDT

CSS is great and everything, but it isn't that programmery. Less, and the .NET port, .Less add some useful things, like variables, operations, functions and mixins.

The basic workflow in Visual Studio is to edit the .less file, run it through the parser in the post-compile step, and include the generated CSS output in your HTML head as normal. More on this later.

There's a bit of an art deciding when to use these features and when to use CSS properly, so I've been using them cautiously at first. Variables are great for colours, as you can give them readable names; I for one can't tell what colour #BAD455 is without seeing the output. Ah, it's a sludgy colour. I can call my variable 'sludge' and use it throughout my stylesheet.

Mixins are super handy for the HTML5 / CSS3 items with multiple browser prefixes:

.box_shadow(@params){
	-webkit-box-shadow: @params;
	-moz-box-shadow: @params;
	-o-box-shadow: @params;
	box-shadow: @params;
}

This can then be used anywhere you want a box shadow:

header, footer, #main {
	.box_shadow(0px 3px 5px #888);
}

Minification

Javascript and CSS minification is all the rage, and is quite simple to do in .NET, thanks to the YUI compressor for .NET. It can be found with NuGet, as YUICompressor.NET. The setup details are on codeplex.

The idea is that the .js and .css files are compressed as a post-build step, with the files to be compressed listed in YuiCompression.targets, which is an MSBuild script included in your main .csproj file, thus:

  <Import Project="YuiCompression.targets" />
  <UsingTask TaskName="CompressorTask" AssemblyFile="$(OutputPath)Yahoo.Yui.Compressor.dll" />

And in YuiCompression.targets:

  <Target Name="CompressorTask" AfterTargets="AfterBuild">
    <ItemGroup>
      <CssFiles Include="$(ProjectDir)Content\site.css" />
      ...
      <JavaScriptFiles Include="$(ProjectDir)Scripts\MyApp.js" />
      ...
    </ItemGroup>

Any files listed in the item group will be squished together and minified into a single .js and a .css file, which can then be included in your HTML.

It can be a nuisance trying to debug compressed Javascript / CSS in development, so in my master page, I conditionally include the originals for debugging, and the compressed file for release versions:

@if (HttpContext.Current.IsDebuggingEnabled){
  <link href="@Url.Content("~/Content/style.css")" type="text/css" rel="stylesheet" />
  <link href="@Url.Content("~/Content/fonts.css")" type="text/css" rel="stylesheet" />
  <link href="@Url.Content("~/Content/layout.css")" type="text/css" rel="stylesheet" />
  <link href="@Url.Content("~/Content/site.css")" type="text/css" rel="stylesheet" />
} else {
  <link href="@Url.Content("~/Content/final.css")" type="text/css" rel="stylesheet" />
}

// do the same for javascript at the end of the file

Also a nuisance is editing .Less files. With plain CSS, I would edit the file, save it, and press F5 in the browser. With .Less, the CSS file must be regenerated. Rebuilding the whole Visual Studio solution is so much slower, but fortunately unecessary. Phil Haack's T4 script rebuilds just the .Less file. The cunning bit is how, when run, the file marks itself as unsaved. T4 scripts are run when saved, so every time the file is saved, .Less generates the CSS files again.

Using that feature, you can open T4CSS.tt in Visual Studio along with the .less file you're editing, and leave it open. Now, when saving the .less file, instead of pressing Ctrl-S, press Ctrl-Shft-S, which is saves all open files. This will save the T4 script (thus regenerating the CSS), and the changes will appear when you refresh the browser. Once setup, the only change to the edit / save / view cycle is pressing Shift when saving.

New industry standard for naming oojits

Simon Harriyott — Thu, 10 Feb 2011 05:37:00 PST

I'm working on a domain model at the moment, and I'm struggling to name a thing. A piece of text data can be one of three types; a label, a code or a group. The (C#) class to represent this is simple

public class TextData
{
    public string Data {get; set;}
    public TypeOfData DataType {get; set;}
}

Only thing is, I dislike the name of the second property. I named it badly for emphasis, but there are two problems:

Firstly, it isn't a data type, because data type means int or double or string or other such thing. Secondly, just calling something a type makes it sound like a .NET Type, so it is automatically ambiguous when coding, even if it is in the domain model.

So if we can't call anything a ‘type’, how about a ‘sort’. As in, “what sort of data is it?” Fairly obviously, sort usually means to arrange things in sequential order. What about ‘class’? Ahem.

Thesaurus time. Classification? Too long; too pompous. Breed? To animalish. Category? Hmm. Not sure why not, other than it sounds too big for this purpose. Genre? Also too big. Genus? Species? Again, animals. Kind?

Kind. I like that. It doesn't mean anything else in code. DataKind. That could work. Well, perhaps it wouldn't on a dating website, as it would also be an attribute of a potential date. Well, for me it would. Wouldn't want to date anyone unkind.

What else is there? Ilk. That's a nice word. Ilk. Yes, I like ilk. It isn't ambiguous in any way. It definitely means what I think it does. I don't often hear it used, and when I do, it generally pertains to people (men of that ilk). It sounds a bit odd, but I think that's good. It will stand out as meaning the type of thing, the sort of thing, the class of thing, the kind of thing, but without the ambiguity.

So, I propose Ilk as the new industry standard for the name of an informal classification of things. It may not sit well with you now, but if we start using it regularly and it becomes ubiquitous, then it will sound no less out of place than dongle, widget, mash-up, tweet, blogosphere and other words of that ilk.

Oh alright, so not blogosphere.

[Lively discussion encouraged]

Error starting site in IIS

Simon Harriyott — Wed, 04 Aug 2010 03:40:23 PDT

I got the following error message when trying to start a site on port 80 in IIS

Internet Information Services (IIS) Manager

The process cannot access the file because it is being used by
another process. (Exception from HRESULT: 0x80070020)

Following the instructions here, I:

Ran netstat -aon | find ":80" from a command prompt
Found the PID for the process using port 80
Used Task Manager to find out what program owned this process. It turned out to be Skype.
Closed Skype. Lo, I can now start the site in IIS

Strange, kind of sad, big old error.

Simon Harriyott — Thu, 29 Jul 2010 03:29:46 PDT

Strange Visual Studio 2010 error message today, with absolutely nothing on Google.

VsTextViewAdapter initialization failure: Trying to create a text view without an available text buffer, current state:Sited

The project is ASP.NET MVC 2.0, and any views that were open when the project was closed are being reopened, but nothing is being rendered, even in code view. Trying to open a C# file produced this error:

Internal error occurred. Additional information: ''.

Thanks for that. Pressing F5 to run the solution in debug mode just crashes VS without any error.

After trying a few other files and projects, I rebooted, and it was all fine.

Dynamic numbered map pins with ASP.NET MVC

Simon Harriyott — Wed, 02 Jun 2010 07:42:00 PDT

A mapping project I've recently been working on needed to have coloured, numbered pins to correspond to the numbered items shown in the list below the map, e.g.

I wanted the images to be created dynamically, as the numbers could reach into the hundreds, and I didn't fancy spending several days with Photoshop. I started with empty pin images (red, green, blue and black).

To improve performance, I decided to write the image to disk once I'd generated it, which I could just return in future calls. I also wanted to cache the image path, so I wouldn't have to access the disk to see if the image had been created already.

I added an ImageController class, and an Index action that took the colour as a string and the number as an integer:

public ActionResult Index(string colour, int number)

This would correspond to the url http://domain.com/image/green/23.png. I put the png extension so everything would know it was a png file. So after checking that an existing image for the colour and number didn't exist, one needed to be generated. I've not used the graphics classes in .NET before, so I was super excited about it. The first step was to load the correctly coloured image:

using (var stream = new FileStream(imageRoot + colour + ".png") {

   image = Image.FromStream(stream);

}

Now to draw the number on top of the image:


var g = Graphics.FromImage(image);

g.TextRenderingHint = TextRenderingHint.AntiAlias;

var stringFormat = new StringFormat

  {

    Alignment = StringAlignment.Center,

    LineAlignment = StringAlignment.Center

  };

g.DrawString(

  number.ToString(),

  SystemFonts.DefaultFont,

  Brushes.Black,

  new RectangleF(0f, 0f, image.Width, 33f),

  stringFormat);

This is just setting up the text style, defining a rectangle in the right place, then drawing the string into the rectangle. (I still can't help thinking of Speedos.) Then it was a simple case of saving the image for next time and returning it as a FilePathResult:

image.Save(imagePath, ImageFormat.Png);

return File(imageUrl, "image/png");

New blog platform

Simon Harriyott — Tue, 25 May 2010 14:12:33 PDT

Due to blogger.com discontinuing FTP publishing support for domains (thanks Google), I couldn't update my blog. Not only that, nobody could post a comment either.

Blogger.com has server me well for nearly 7 years (84 in internet years), so there's bound to be a suitable .NET blog platform to suit my basic needs, i.e. no database (as my cheapo host doesn't support SQL Server and I don't want to change host as well.

It turns out that there wasn't a .NET blog platform to suit my needs, so I'm writing one. This is the first post with it, and very happy I am with it too. Each blog post is stored as an XML file in blogml format. I'm using disqus for the comments

Adding SEO fields to N2 MVC example

Simon Harriyott — Wed, 13 Jan 2010 06:43:00 PST

I've been using (a copy of) the MVC example from the N2 trunk. By default, there is no SEO tab. To add this, copy SEODefinitionAppender.cs and TitleAndMetaTagApplyer.cs from the N2.Templates.Mvc project (Services folder) to the example project. Then add the line

engine.AddComponent("n2.templates.seo.definitions",
   typeof(SEODefinitionAppender));

to the end of Application_Start in global.asax.cs.
The SEO tab and fields should now appear on the edit page.

The next step is to get the SEO fields into the master page. If there's no code-behind class for the master page, then add one, and derive the class like so:

Site : ViewMasterPage<IItemContainer>, IItemContainer<ContentItem>

Add the following to the class:

protected override void OnInit(EventArgs e)
{
 _titleApplyer = new TitleAndMetaTagApplyer(this.Page, Model.CurrentItem);
}

public ContentItem CurrentItem
{
 get
 {
  return Model.CurrentItem;
 }
}

Derive AbstractPage from IItemContainer, and implement the CurrentItem getter by returning "this". Make sure all view pages' view data is derived from AbstractPage or IItemContainer.

Setting up N2, the open source, ASP.NET (with optional MVC) CMS

Simon Harriyott — Wed, 06 Jan 2010 01:51:00 PST

Here's what I did to get started with N2, the best CMS I've used to date. I've not set up one of these for a while, so I thought I'd document the process:

Check out the latest source from the subversion trunk - http://code.google.com/p/n2cms/source/checkout
Ran Prepare_Dependencies-vs2008.bat in the root folder
Ran Build_Everything-vs2008.bat, also in the root
Made a copy of examples/Mvc to use as a new project
Loaded the solution in VS2008
Created the database, and ran the script
Built and ran the project
Navigated to /edit/install to see how I was doing

Not very well. I got a "No component for supporting the service N2.Web.Mvc.IControllerMapper was found" error. Google told me very little, except that someone else had the same problem and posted it on the forum. I posted too, and within half an hour, Steve Mason (who I worked with at Cubeworks, and is a contributor to N2) had replied asking for a stack trace. I provided one, and Steve provided the fix. Back on track.

I then checked /edit/install again, which prompted me to upgrade to version 2 of the database, by simply clicking a button. It then told me to add a root page, which I did. Now I'm up and running.

After copying a page or two, I kept getting a StackOverflowException thrown. Thanks to Joel and Jeff, these are harder to google for, but eventually I worked out that I needed to override TemplateUrl in the Model class (derived from AbstractPage).

NHibernate.MappingException

Simon Harriyott — Tue, 03 Nov 2009 14:57:00 PST

Just got this error message and had no relevant results on Google:

System.TypeInitializationException : The type initializer for 'MyApp.Repositories.NHibernateHelper' threw an exception.
----> NHibernate.MappingException : An association from the table MyTable refers to an unmapped class: MyApp.Domain.MyClass

Schoolboy error; I'd forgotten to mark the hbm.xml files as embedded resources.

Windows Installer 4.5 Installation Error on XP

Simon Harriyott — Mon, 02 Nov 2009 11:41:00 PST

While attempting to install Windows Installer 4.5 from the WindowsXP-KB942288-v3-x86.exe file, an error occurred prompting me to select a debugger. The error was to do with update.exe.

After a couple of attempts, I realised that it was still at the unzipping stage of the install, so I loaded up WindowsXP-KB942288-v3-x86.exe in 7-zip and extracted the files. I was then able to run the installer from the extraction.