Jon Galloway

Free online training event: Developing ASP.NET MVC 4 Web Applications Jump Start (Sep 17)

This course is now available online: Developing ASP.NET MVC 4 Web Applications Jump Start

Join me and Christopher Harrison (@geektrainer) for a free, full day online training event on Developing ASP.NET MVC4 Web Applications! There's still space available, so register now.

MVA - ASP.NET MVC 4 Jump Start

Microsoft Virtual Academy (MVA) runs great, high quality live training events. Earlier this year, I had the opportunity to participate in the Building Web Apps with ASP.NET Jump Start with Scott Hanselman and Damian Edwards. For that event, we overviewed the Microsoft web platform, including a lot of new and preview features.

For this upcoming event, we're going to be sticking closer to the curriculum for the Developing ASP.NET MVC 4 Web Applications certification exam (70-486) curriculum. Christopher is a full time, professional instructor (MCT, MCPD, MCITP) who's helped people prepare for this exam, and we're going to be basing the Jump Start content on what you'd learn in a 70-486 certification course.

Here's an overview of what we're planning to cover:

  • Overview of MVC
    • What is MVC?
    • How is MVC different from Web Forms?
    • Why use MVC?
  • Developing ASP.NET MVC 4 Controllers and Models
    • Creating Controllers
    • Adding Actions
    • Creating MVC Models
    • Working with Code First
  • Developing ASP.NET MVC 4 Views
    • Razor Syntax
    • HTML Helpers
    • Partial Views
  • Integrating JavaScript and MVC
    • Using AJAX
    • Using jQuery
  • Implementing Web APIs
    • Developing Web API Controllers
    • Calling HTTP Services from Client-Side Code
  • Deploying ASP.NET MVC Site Walkthrough
    • Creating a site on Windows Azure Web Sites
    • Deploying an ASP.NET MVC Application with Visual Studio Web Deploy
  • What’s Next and Resources
    • Sneak peak at Visual Studio 2013 (Preview) and ASP.NET MVC 5 tooling
    • A look at real-time communications with SignalR
    • Resources for keeping up with new ASP.NET releases

Note that this is a Jump Start to help you get started preparing for the certification exam, but with a one day event we're only covering a portion of the content that's on the exam. Don't expect to watch this and breeze through the exam... but it's a start.

And if you're just new to ASP.NET MVC and want a full day (free!) day of training, this is a great opportunity. We're working off some of the certification content, but you don't need to be working towards the certification to take or benefit from the class.

To get you warmed up for it, here's the one hour introduction to ASP.NET MVC 4 from the Building Web Apps with ASP.NET Jump Start this past February.

ASP.NET MVC Routing - Intercepting file requests like Index.html, and what it teaches about how Routing works

Easy: Including an HTML file in an ASP.NET MVC site

I got an interesting question recently on routing, which lead to an even more interesting question on how to do the opposite. This turns out to offer a pretty good look at some important details of how routing works under the hood.

First, here's the question:

I have a scenario where I’ve got an MVC application and I need to put a static HTML file in the root of the site (to work with a third party). Is there a way that I can specify in an MVC app that I want to not reroute requests to the html page? i.e. suppose I have myfile.html in the root of my MVC app, how do I make it so the MVC magic doesn’t try to redirect my request?

Note that while the question was about a file with a .html extension, this applies to other files that are normally mapped to static content, like XML or SWF or what have you.

Fortunately, this is pretty easy:

The easiest way is to do nothing. MVC routing won't touch requests with an extension it hasn't been mapped to, and the IIS static file handler will pick it up. Try creating a new MVC project and drop myfile.html in the root and browse to it, you’ll see the HTML file is served. If you think about it, this is kind of necessary to allow for an MVC site to be able to serve up images, JavaScript, favicon, etc. files without trying to route those requests.

If you really want to make sure that routing doesn’t handle it if it happens to see it, you can add an IgnoreRoute rule to your RegisterRoutes method (used to be in Global.asax.cs, now in App_Start/RouteConfig.cs):

routes.IgnoreRoute("{file}.html");

A little tougher: Routing .HTML Requests To An MVC Route

This made me want to show an example of how to do the opposite - intercept a request to myfile.html even if there's a myfile.html on disk. That turns out to be a bit more work. It's not rocket science, but there are a few steps.

Step 1. Mapping the file extension to TransferRequestHandler

IIS 7 Integrated mode uses HTTP Handler mappings which point path / verb combinations to an HTTP Handler. For example, there's a default handler mapping which points path="*.axd" verb="GET,HEAD,POST,DEBUG" to the appropriate ISAPI module for the .NET runtime version the site's running under. The easiest way to see the default handlers under IIS Express is to run a site under IIS Express, right-click the IIS Express icon in the system tray, click "show all applications", and click on a site. The applicationhost.config link at the bottom is linked, so you can just click on it and it should load in Visual Studio.

2013-08-29_14h12_10

If you scroll to the bottom, you'll see that there's a catchall StaticFile mapping for path="*" verb="*" which points to "StaticFileModule,DefaultDocumentModule,DirectoryListingModule". That's what will handle your .html request if you do nothing. So the first step is to add a handler in your web.config that will point *.html requests to the TransferRequestHandler. TransferRequestHandler is the handler that takes care of the extensionless URLs you're used to seeing in MVC routes, e.g. /store/details/5.

Adding a handler mapping is really easy - just open up your web.config and add it to the <system.webServer/handlers> node.

<add name="HtmlFileHandler" path="*.html" verb="GET" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />

Note that you can make the path more specific if you'd like. For instance, if you only wanted to intercept one specific request, you could use path="sample.html"

Step 2. Configuring the route

Next, you'll need a new route. Open up App_Start/RouteConfig.cs and it to the RegisterRoutes call. My complete RegisterRoutes looks like this:

routes.MapRoute(
    name: "CrazyPants",
    url: "{page}.html",
    defaults: new { controller = "Home", action = "Html", page = UrlParameter.Optional }
);

You can make your route as complex as you want. For instance, here's one by pilotbob which uses a constraint to map several legacy filetypes to a controller:

routes.MapRoute(
    "Legacy"
    , "Html/{*src}"
    , new { Controller = "Home", action = "Html" }
    , new { src = @"(.*?)\.(html|htm|aspx|asp)" }                     // URL constraints
    , new [] { "WebApp.Controllers" }
);

Step 3. Route Existing Files

That almost covers it, but there's one more thing to take care of - overriding requests that match an existing file. If you've got an actual file called myfile.html, the routing system won't allow your route to run. I forgot about this, ended up with an HTTP 500 error (recursion overflow) and had to ask Eilon Lipton for help.

Anyways, that's easy to fix - just add routes.RouteExistingFiles = true to your route registration. My completed RegisterRoutes call looks like this:

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.RouteExistingFiles = true;

    routes.MapRoute(
        name: "CrazyPants",
        url: "{page}.html",
        defaults: new { controller = "Home", action = "Html", page = UrlParameter.Optional }
    );

    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
}

That's it.

I tested by adding this controller action:

public ActionResult Html(string page)
{
    ViewBag.Page = page;
    return View();
}

and I threw in this view:

@{
    ViewBag.Title = "Html";
}

<h2>Yo yo yo, I'm the HTML Controller!</h2>

<p>Requested page: @(ViewBag.Page).html</p>

▶ Adding an audio play indicator to your page's tab with a few lines of Javascript

It's really annoying when one of your browser tabs is making noise and you can't tell which. Lately, sites have been using an informal convention of showing a play indicator (▶) in the tab title. It's a simple solution that really helps out your users.

If you're using HTML5 audio or video, it's really easy to add this to your site with a few lines of JavaScript. Now that Wordpress 3.6 includes an HTML5 based media player by default (by shipping mediaelement.js), this is kind of a no brainer for any Wordpress site that includes media. Like, say, a podcast site.

You can try this out live on the Herding Code site.

Audio playing indicatr

Super Simple Approach That Mostly Works

The super simple way to do this, which would cover most cases, is to watch the pause, ended and play events and toggle the document title.

The problem here is that it doesn't work well if you've got more than one audio element on the page: start two playing, pause one, and the play indicator goes away even though one of them is still playing.

Still Pretty Simple Approach That Actually Works

This just watches for a change in state on any audio element on the page, then checks to see if any of them are playing. If any of them are playing (not paused) it sets the play indicator and exits out since there's no need to keep checking. That's it.

Note: If you're using Wordpress 2.6, just grab that chunk of code and add it to the footer of your site inside a script tag.

Slightly More Details

Most of the JavaScript I looked at on media sites that were setting play indicators used a lot of event hooks and state machines and magnets and such. I think that's overkill. You can just ask an audio element if it's playing by checking the paused property. If it's not paused, it's playing. I'd have thought there would be a playing property instead, but no.

You might think that iterating elements to check for something in jQuery is a bit daft, but that's the best I (and my Twitter friends) could come up with. I've used attribute selectors in the past, and was kind of hoping there was a way to select on properties as well. Something like this:

But, like I said, you can only select on attributes. I checked with my friend (and JavaScript genius) Elijah Manor, who said you can write up a pseudo selector for properties if you really want, but it wouldn't make sense here. Here's an example pseudo selector he came up with:

Other Notes Of Interest To People Who Like Notes

Note: you could also do the same thing with HTML5 video elements, too. They've got a paused property as well.

Note: If you're using a plugin like Flash or Silverlight, it'll take you a bit more work, but I think your users will appreciate it - in Silverlight you'd use the Silverlight HTML Bridge (example); in Flash it looks like you'd use ExternalInterface (example).

Note: It looks like there's a feature in the works to add this to Chrome as a native browser feature, which is neat. In the meantime, this JavaScript solution works everywhere HTML5 audio works.

Note: Yes, I punked you by setting the title of this post to include a play indicator. It's the new RickRoll. ▶ on ▶er

Posted by Jon Galloway | with no comments

8 Windows Live Writer tips

Windows Live Writer really is an amazing application. It does one job really, really well. I've been using it on several blogs including this one (running on Community Server, Herding Code podcast (running on Wordpress). I've also used it to manage content in a variety of ways, including posting content to "hidden" blogs which were really content repositories for consumer facing sites.

Scott Hansleman's post last week (Download Windows Live Writer 2012) reminded me that I've been meaning to post some of my favorite tips I've picked up along the way.

1. Change Editor Font Size with a Simple CSS Edit

When I'm working on a post, I really want to focus on the content. WLW has a feature that pulls in your site's theme (hello Temporary Post Used For Style Detection), but I don't use that most of the time. You can toggle it on and off if you want, by the way - go to the Blog Account tab and click on Blog theme.

I've been wanting a way to change the text size in WLW forever - something like the Zoom feature in Office or Visual Studio would be nice, or even just a Text Size option. Alas, it's not there. I spent while trying to write a plugin or otherwise override the zoom for the editor area, but it wasn't happening.

It turns out there's an easier way: just edit the template CSS. If you're using the default theme, you can find that here:

"%ProgramFiles(x86)%\Windows Live\Writer\template\defaultstyle.css"

Note: You'll need to open whatever program you're using to edit the CSS as an administrator, since saving to \Program Files\ requires admin permissions.

I add the following to the end of the defaultstyle.css:

body 
{
    font-family: 'Segoe UI';
    font-size: 16pt;
}

h1, h2, h3, h4, h5, h6 { font-weight: 900; }

It's up to you - add whatever is most readable while you're editing. You can toggle the blog theme back on when you're done if you need, but I rarely do.

If you want to tweak the detected blog theme, you can do that too - it just takes a bit more hunting. I found my blog theme's CSS here:

"%APPDATA%\Windows Live Writer\blogtemplates\9e1a3813-9fca-411f-8bdb-346d0b3d4671\style.css"

It'd be quite a coincidence if you've got the same GUID, but that will hopefully get you pointed in the right direction.

2. Sync Your Drafts With SkyDrive

One of the main reason to use WLW over the simple in-page editors is the use of offline drafts. I have tons of drafts. I'll frequently find out something interesting but not have time to blog it at the moment, or noodle on something I'm not ready to post just yet, etc., so I'll just throw links and an outline in a WLW draft until it's go time.

I work with a large, revolving cast of computers: a main desktop computer that gets upgraded every few years, as well as a bunch of different laptops. You probably do, too. So I'll frequently take some notes on my desktop computer one day and decide to write the blog post on my laptop that weekend. This is where draft sync comes in handy.

I used to use Windows Live Mesh, and I really liked that you could choose to sync any folder on any computer. SkyDrive went another way: you get one SkyDrive folder and that's that. But there are a couple of workarounds.

The high geek score approach is to use the mklink command to create a symlink - a fake subdirectory in your SkyDrive folder that points to another directory somewhere else.

But it turns out there's an easier way. There's a registry setting you can use to point the WLW posts folder wherever you want. Add a PostsDirectory key to HKCU\Software\Microsoft\Windows Live\Writer as shown below:

Windows Live Writer - SkyDrive

Larry Henry has this written up in more detail, including a utility that will make the setting for you.

And of course, this will work with other sync systems like DropBox, too.

3. Export Your Settings as a Reg File

While we're talking registry - and who doesn't love to talk registry - I like to export my HKEY_CURRENT_USER\Software\Microsoft\Windows Live\Writer\Weblogs node or hive or whatever it's called to a reg file. I keep it in my SkyDrive blog folder, so I don't need to go through setting up all my blogs on a new computer. The WLW default run still expects you to set up one blog, so I do that, then close WLW and run my reg file to add all the others.

4. Look Up Your Blog Password Using the WLW API

If you happen to forget a blog password but it's stored in WLW and it's slow or difficult to retrieve it from the blog site, Javier Lozano wrote up a nice little console app to decrypt the password from where it's stored (encrypted) in the registry. It's an old post that's not up to date with the current API, but fortunately an anonymous blog poster published some updated code:

5. Enable HTML5 Features

The WLW editor uses a Web Browser Control, but it defaults to IE 7 document mode. That means it won't understand any CSS3 styles or other modern HTML5 goodies.

Fortunately, Rick Strahl figured out how to make a simple registry setting that sets the browser version to something more modern. The short story version if you're running a 64 bit version of Windows:

HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION

Key: WindowsLiveWriter.exe
Value: 9000 or 10000  (IE 9 or 10 respectively) (DWORD value)

But go read Rick's post, because he's got some nice pictures and some better explanation.

As an example, after changing my mode to IE10, the following SVG and HTML5 Audio tags are shown in the editor:

IE10 mode in WLW

6. Use (And Write) Plug-Ins

After local / offline drafts, the other killer feature of WLW is plugins. I just use two (Flickr4Writer and PreCode Snippet), but it's of course up to you - what you're posting and how the editor can better support it.

I like Flickr4Writer because I host my blog photos on Flickr and Flickr4Writer makes it easy to insert them into posts.

I like PreCode because it cleanly formats source code in <pre> tags with support for a lot of code formatting JavaScript systems. (note: if you're inserting screenshots of code into posts, stop doing that)

I've also written some Plugins over the years (note to self: clean up and publish that code snippet to Gist plugin). The Windows Live Writer SDK does take a bit of work to figure out, but it's pretty powerful and you can find some good sample code to get you going.

I've found that most of what I've wanted to extend has required a Content Source Plugin. There are two kinds: simple (which just insert things into posts) and smart (which support live two-way editing, sidebars, resizing, etc. I tend to stick to the simple ones when possible, because full editor support is complex. Both Flickr4Writer and PreCode Snippet are open source, so check them out to see how it works.

7. Post Drafts To Your Blog

In the past, I've made some stupid mistakes in publishing Herding Code episodes. I've published incorrect or broken MP3 links, wrong guest information, you name it. It's worse publishing bad podcast info because podcast clients don't always pick up corrections later, plus there's a lot of caching on the site. It's better to get it right the first time.

So lately I've been making a lot more use of the "Post draft to blog" publishing feature. Lots of blogging engines - including Wordpress - support this. It lets me post the draft so it's live on the site but only visible to me while logged in as an admin. I test that the audio plays, the download link is right, it looks okay in the browser (funny how viewing in the browser makes mistakes more obvious), etc., then publish it for real.

2013-08-09_17h23_39

8. Installers

Okay, one more. Scott Hanselman just posted the link to the Windows Live Writer installer. Hooray for that, because it's not easy to find. Here are a few ways I cope.

Install using Chocolatey

Best: Install Windows Live Writer using Chocolatey. Part of the joy of Chocolatey is that you don't need to download installers anymore. This is the easy button.

c:\> cinst WindowsLiveWriter

Use the easy (but secret) URL

This is easy, right? http://writer.live.com

Sadly, hard to find. You can see it linked on the Wikipedia page, though.

Keep a backup

I don't know what's going on with Windows Live Writer any more than you do. I like it and hope for many more wonderful years of WLW bliss. In case it's ever unavailable, though, it's good to keep a copy of the offline installer around: http://windows.microsoft.com/en-us/windows-live/essentials-install-offline-faq

Removing background noise in Audacity by differencing stereo channels

While at NDC13 this June, K Scott and I (joined by Rob Conery as honorary guest host) recorded a lot of Herding Code podcasts in a cool podcast booth. It was an interesting audio challenge. The conference provided us some great audio equipment - nice microphones and a good mixing board. However, the booth was open on top and in the middle of the conference room floor at an indoor stadium, so there was a lot of background noise. On the one hand, that's just part of the fun of live podcasts at a conference, but I wanted to minimize it.

Herding Code at NDC Oslo

Normally we record our podcasts via Skype and the worst background noise we get is usually a consistent hum - air conditioning, for instance. Audacity's Noise Removal effect does an amazing job with that - you train it with a short section of the audio that's just background noise, then run it on the whole track (or a selection) and it's all set.

Audacity - Noise Reduction

That doesn't work quite as well when you've got a lot of variable background noise. There's no consistent profile, and the sounds you'd want to remove are often also human voices. Noise reduction still works, but you end up with some noticeable artifacts. I still like it, but it needs to be combined with some other tricks.

So with that in mind, here's the "best effort" system I decided on: subtract the stereo signal and mix it with a compressed, noise-reduced track. Here's how I did that.

Recording

First, I tried to get the guest on one stereo channel and the hosts on another. It wasn't exact since we had several people having a conversation around a table, but I did what I could without disrupting things.

Both channels have the same background noise, but one has most of the speaker's voice. The other channel has some of the speaker's voice too - remember, mics recording around a table - but the difference between the two channels was that the speaker's voice was louder. To say that another way:

Removing background noise from a stereo recording

L: 80% speaker + background noise

R: 20%: speaker + background noise

So if we subtract R from L, we get 60% speaker with very little background noise. Theoretically, at least.

Differencing stereo signals

While trying out an effect, I like to work with a duplicate so I can quickly undo if it's not working. I duplicated (Edit / Duplicate or just Ctrl+D) the track, then split stereo to two mono tracks.

Removing background audio from stereo recording

Now, the trick for differencing the two sides is to invert one and sum them together. I select the Left track and use the Invert effect.

Inverting a track

Then I select the Left and Right tracks and sum them using Tracks / Mix and Render. Important note: both channels were quiet enough that I could mix them without fading them down, but if yours are louder you need to make sure to turn them down before mixing them.

The result still has some background noise, but it's a lot tighter. The voices are clearly distinct from the background. Much better, but there's still work to do.

Mixing with standard noise reduction

We want to take out some of that background noise, but I still can't use aggressive noise reduction because you'll hear weird artifacts as the background rumble kicks in when people talk and cuts off when they stop. While that lowers the overall level, it's more noticeable when it starts and stops. I could wing it and pick a dry/wet effect mix when I apply noise reduction, but that's hit and miss. Since Audacity's effects aren't realtime, the simplest way to get this right is just duplicate the new track, effect the new copy, and mix the two to taste.

Once I've duplicated the track, I train it as shown above and run the noise reduction. Like I said, it's wicked smart - notice how the left (should be silent) part of the lower track is so much cleaner.

Noise reduction

But that track by itself does sound a little weird - while people are talking bits of other people talking in the background pop out. So now I need to adjust the level on the upper track until that's not so obvious - in this case the non-effected track ends up at -20db and the effected one is at +0db. It's subtle but very obvious if the original track's completely muted. Normally I'd use a Dynamic Compressor at this point, but with a lot of background noise it can pull it right back up so we'll let that go.

To be clear, it's still obvious these recordings were done in a crowded room, and that's okay - they're just understandable now.

From here on out, it's standard editing - cutting out the pauses, etc. That's the time consuming part - while I spelled the above out in gory detail it takes less than two minutes in real life.

Posted by Jon Galloway | with no comments

Last chance to back the AGENT watch Kickatarter, first chance to play with the code (bonus extra credit: custom device emulator with screen scaling)

The Kickstarter funding period for AGENT (The World's Smartest Watch) ends Jun 20 at 1 PM. The project's almost at 10x the funding goal, so I really see this as a last opportunity to get an amazing watch for $100 off the $249 MSRP.

In addition to being a great gadget, this is a really cool thing for the open source .NET community. They're so so close to a million dollars, why not help them get there and get an amazing watch at the same time?

Hello AGENT

Like a lot of amazing gadgets, I first heard about AGENT from Pete Brown. AGENT is a smart watch that runs the (open source) .NET Micro Framework, so you can program applications and watch faces using C# code in Visual Studio. It will also immediately and irrevocably turn you into an athletic NYC hipster with lots of friends, as illustrated in the following video presentation.

I used to love watches, but stopped wearing them some time in the last decade when all the batteries ran out and I realized I just didn't care - I'd rather just read the time on my phone. They looked neat, but they didn't do anything useful.

Today's current crop of smart watches is useful. They connect to your phone via Bluetooth, so they can bring modern smartphone processing power, internet connectivity and app ecosystem to your watch without the hassle or expense of running another internet connected device. I've been keeping an eye on the Pebble, iPod Nano based watches, and other neat stuff. But I wasn't completely sold. They only worked with a few phone platforms, the battery life was just a few days, and the dev platforms did not look like a fun party at all.

The AGENT stood out to me for few reasons:

  • It supports the .NET Micro Framework, which does not make you "include ancient_goofy_language_lol.h"
  • It's got a really cool dual processor design which can get up to 30 days battery life (disabling Bluetooth when power gets low)
  • It supports Qi charging, so I can throw it on my Lumia charger every few weeks to power up
  • With Kickstarter prices in the $149 - $199 range, it's pretty affordable
  • The peppy promo video made me feel like I'd just lived through a Mentos commercial
  • It's by Secret Labs, the same wonderful people who have made the Netduino for years, so I have confidence in them actually shipping a quality product on time

The project founders have already shown amazing community focus over the past almost-a-month, with seven updates including announcements for additional international font support, included weather data and an app store.

Customizing a watchface

Unlike certain fabulous internet celebrities, I don't have early access to the AGENT emulator. Fortunately, it doesn't really matter. I looked at some code linked in the over 2000 comments and built some stuff using the .NET 4.3 Micro Framework and the built-in sample emulator.

Note: The official emulator's going to be released at the end of the Kickstarter period, so some of the below is just impatient playing around. I'm going to assume it gets even easier - but! - you can customize things quite a bit as well, so that's cool.

Another Note: The real display is 128x128 but it uses a really nice looking Sharp Memory display. Don't let my ugly emulator screenshots below deter you.

I started with Rob Chartier's sample code. He's doing some pretty cool things and his code is cleanly factored for multiple watch face support. But for whatever reason, I was getting a blank watchface in the emulator.

I next looked at Jeff Lefebvre's sample code. It's pretty simple, which is probably fine for getting started. Here's an example:

In order to run Jeff's code - or do any AGENT coding - you'll need to install the .NET 4.3 Micro Framework. It's a small download and installed pretty quickly.

Loading new fonts

I thought I'd start simple, by modifying his "fuzzy time" watchface to use some cool (free) fonts. I started by grabbing a few I liked from some of Smashing Magazine's recent free font roundups (disclaimer: before shipping any of these I'd double-check the licenses, etc.). I picked Digitica, Titilica and Deibi. The point is that I'm showing a single font, but you can bring in any you like as long as you make sure you've got the distribution license.

.NET Micro Framework uses .tinyfnt font files, as "the .NET Micro Framework uses the .tinyfnt file format to work with fonts. The .tinyfnt format uses a fixed-point bitmap-based font system for a simpler way to render fonts." You can convert standard fonts to tinyfnt format using the TFConvert file that's shipped in the SDK as "%programfiles%\Microsoft .NET Micro Framework\v4.3\Tools\TFConvert.exe". That involves creating font definition files, a few commandline options, and some trial and error. Fortunately Jan Kučera created the Tiny Font Tool GUI which lets you adjust the conversion parameters visually. I found that made a lot of difference in the quality. Each font is rendered at a specific size, so I created multiple Tiny Fonts for each font I wanted to use.

Next I added these as additional font resources to a copy of Jeff's Fuzzy face project.

Then I just updated the code references to bring in my new fonts and position them correctly.

This gave me the following watch faces (above code tweaked to turn on different fonts, of course):

  

Extra Credit: Building a Custom Device Emulator with Screen Scaling

Let's be honest, those screenshots don't look all that great. I'm going to blame most of that on the default emulator, which has some quite extremely tiny pixels. The built-in emulator doesn't let you scale at all, but since the whole thing is open source it's easy to build a new emulator with custom scaling. I opened the Emulator sample in %documents%\Microsoft .NET Micro Framework 4.3\Samples\SampleEmulator\SampleEmulator and made a tweak to the OnPaint method to scale up by 50%. The previous code looked like this:

I changed it to this:

Disclaimer: This is a very simple scaling approach, it's possible to resample and do wonderful graphics tricks when scaling up.

Building the emulator code automatically registers it in the .NET Micro Framework emulators list on the project properties dialog (you can see I also built an Awesome device which I'm not going to show you).

Now when I run this I get a much bigger watch face output which is both easier to develop with and looks more like the real device output.

So much more fun to be had

These are some really samples. I also played with a pong clock and the start of a hunt the wumpus theme. What will you come up with?

Other great stuff to read (after you've backed the Kickstarter!):

Delaying product key / activation when building a Windows 8 virtual machine

I've been building a lot of Windows 8 virtual machines lately, and I've noticed that the product key / activation steps have changed from Windows 7 to Windows 8. With any of the Windows 8 ISO's I've used, there's an install wizard step that you can't pass until you've entered a valid product key. For most cases, I think that's an improvement. If I'm really installing Windows (and I count 9... wait, 10 Windows machines in my house right now), then sure, let's get that product key thing done once and for all.

But sometimes I rebuild a VM several times while testing daily builds of pre-release software, or I want to make sure something's going to install first. It's at those times I miss being able to defer activation a bit.

Fortunately, you can (in a legal, documented manner) delay activation a bit. Again, I don't recommend this for a "real" Windows 8 install - you're going to get frequent "Activate Windows" prompts and some minor bits of functionality will be disabled until you activate - but it's really handy on a virtual machine.

Keep in mind that this takes a few minutes, but once you're done you'll have an ISO that doesn't require the product key during installation, and you can use that over and over.

Extract the ISO

We'll need to modify the contents of an install ISO file, and to the best of my knowledge that required three steps: extract it, add our file, and write it back to a new ISO file. I use 7zip to extract ISO's - it's free, lightweight, extracts every compressed file I encounter regularly, and it's available from Chocolatey (cinst 7zip). Right-click your ISO, select the 7-Zip submenu, and select extract to (folder name).

Add EI.cfg

It turns out that the install process looks for a simple /sources/EI.cfg text file, and you can pretty easily modify the install media to add that. The EI.cfg (and PID.txt) files are documented on Microsoft TechNet here.

The following selects Professional edition, Retail (vs. OEM) install and indicates that this is not a Volume License. Open a simple text editor (like Notepad), paste the following in, and save it as EI.cfg into the /sources folder of the ISO files you just extracted.

[EditionID]
Professional
[Channel]
Retail
[VL]
0

EI EI CFG

Burn an updated ISO

It's irritating that you can't edit files in an ISO file directly, but fortunately burning files to a new ISO is really easy. I installed ImgBurn (also available on Chocolatey - cinst imgburn) in seconds, then opened it and selected the "Create Image File From Files/Folders"

ImgBurn

Next, select the folder with the modified ISO contents and select "Make Image Bootable" and click the burn icon in the lower left.

ImgBurn - Creating Bootable Image

After that, I ended up with a update ISO that will allow skipping the product key / activation step during install:

Skip Product Key

You'll get frequent prompts to Activate, but you can skip them and go to the Start screen by pressing the Windows key.

Another option: Enter a product key but don't immediately activate

If you prefer, you can install using a valid Windows 8 product key but without an internet key. In this case, the product key is validated but isn't activated, so it's not "used up" until you activate. You'll get frequent prompts to activate, but until you do the product key hasn't really been used.

References:

SuperUser: Install Windows 8 without a Product Key

SuperUser: Is Windows 8 Pro usable without activation?

TechNet: Windows Setup Edition Configuration and Product ID Files (EI.cfg and PID.txt)

If you want to use Windows commands like oscdimg: How to create a Bootable DVD (Windows 7 or Windows Vista)

Getting up to speed with Katana

You may have heard some talk about OWIN and the Katana Project over the past few years. Let's get the (kind of boring and abstract) definitions out of the way, then talk about why they're exciting and how you can learn more.

OWIN (Open Web Interface for .NET) defines a standard interface between .NET web servers and web applications. The goal of the OWIN interface is to decouple server and application, encourage the development of simple modules for .NET web development, and, by being an open standard, stimulate the open source ecosystem of .NET web development tools.

The Katana Project provides a set of OWIN implementations for Microsoft servers and frameworks.

In case it's not immediately obvious why those things are actually useful, let's throw some colorful pictures at the problem. Here's how ASP.NET has always worked:

Traditional ASP.NET Hosting Model

In this model, you work in a sandbox that provided you some known extension points. Creating a new ASP.NET application creates a special .NET project which has been tightly wired to the ASP.NET runtime, which in turn is pretty tightly wired to IIS. ASP.NET can be extended via with handlers and modules and the various ASP.NET frameworks (ASP.NET Web Forms, ASP.NET MVC, ASP.NET Web API, etc.) provide hooks that let you override or configure the way things work (IIS provides some extensibility points as well) but you're always aware that you're being hosted by ASP.NET and IIS.

OWIN defines a flexible, pluggable stack with a lightweight interface for web applications.

ASP.NET hosting under OWIN and Katana

Each component in the stack just needs to implement a function which accepts a dictionary (holding the application state) and returning a task. This flexible interface between layers provides a lot of benefits:

  • Fast - This is a really lightweight interface that doesn't need to bring along the whole ASP.NET / IIS party to every request, so it's really tight and can run really, really fast.
  • Pluggable - The middleware section in the above diagram shows more than one component. You can easily plug in lightweight components which modify your how your application runs. Middleware can handle all kinds of scenarios, including authentication and security, optimization, response modification, etc.
  • Flexible - You can mix and match anything that implements the OWIN spec, meaning you could drop ASP.NET applications with Katana on another server or host as well as host other .NET web frameworks (e.g. NancyFx, ServiceStack, Fubu, etc.) on any OWIN compatible server, with the flexibility to use any OWIN compatible middleware.

The Katana team is working to enable several really exciting scenarios, including hosting ASP.NET applications on OWIN hosts and plugging in OWIN middleware to existing ASP.NET applications.

Interested?

Great, because I've got a bunch of fresh, new recommendations on where you can find out more.

Whitepaper: An Overview of Project Katana

We just published a new whitepaper by Howard Dierking on the ASP.NET site: An Overview of Project Katana

Howard goes into a lot more detail about why Project Katana was started, how Project Katana implements OWIN, and how you can get started with Project Katana (complete with a nice walkthrough).

Video overview on Web Camps TV

Brady Gaster and Cory Fowler just interviewed Howard on Web Camps TV (Channel 9) last week. In this 45 minute video, Howard talks about Katana Project, builds out an application showing OWIN self hosting with an ASP.NET Web API application, and explains what's next for Project Katana.

The Katana Project - OWIN for ASP.NET

Podcast

We just interviewed Louis DeJardin (Principal SDE on the Katana team, @loudej, blog) on the Herding Code podcast last month. Detailed show notes are available here.

Download / Listen

Herding Code 164: OWIN and Katana with Louis DeJardin

What are you still doing here?

Go read, watch, and listen!

Posted by Jon Galloway | 4 comment(s)
Filed under:

Interesting Things Circa March 2013

Back in 2008 I had a blog series going where I did occasional blog post / news recaps with lists of interesting things. (Fun note: I ran that using ma.gnolia.com and stopped around the same time, but not necessarily because, they bit the dust.). I used that to post interesting things I'd been reading about, and given unlimited time would write long, insightful blog posts about.

I've noticed lately that I've been declaring browser tab bankruptcy quite often, and that these interesting things deserved a home. Around that same time, I've started enjoying Scott Hanselman's fun, "no worries, have some links!" style newsletter posts lately. So, for an unspecified amount of time, I am reinstituting the "here's some neat stuff" series. I will intend to follow up with long, insightful posts about some of these things, but probably will not. On with the show!

Working from home

Yahoo recently required remote employees to stop being remote or stop being employees. As a remote employee since 2005, I can definitely see both sides. It works for some companies, some employee, and some roles. When it's good it's great, but I've seen it abused.

Goodbye Google Reader, what's ahead for RSS?

Google announced they're shutting down Google Reader. I used to follow 1500+ individual RSS feeds (actually read them all), but lately haven't quite so much. Still, sad to see this go and hope those who predict this will help rather than exterminate RSS as a technology are right.

Glimpse 1.0 Ships

Glimpse is a great web debugging aid which provides in-browser information about what's happening on the server. They recently released versions 1.0 and 1.1. We interviewed them on Herding Code in February.

Semantic Release Notes

The Glimpse developers also just released the Semantic Release Notes proposal: Semantic Release Notes (SRN) is a text-to-object-to-html conversion tool for application authors. SRN specifically aims to produce semantic release notes from a Markdown document. This allows authors to write using an easy-to-read, easy-to-write plain text document, convert it to a structured data format (typically JSON or XML) and from this format, convert it into any styled representation (typically html) or to consume the information programatically within 3rd party applications.

http://www.semanticreleasenotes.org/

scriptcs - Living on the edge in C# without a project on the wings of Roslyn and NuGet

Glenn Block and friends have spun up a neat project which allows you to write .NET apps with your favorite text editor, NuGet and the power of Roslyn!

CoffeeScript releases

Some cool new features in the recent CoffeeScript releases, including Literate CoffeeScript and Source Maps support.

Icon Fonts and SVG

As a long time fan of replacing web bitmap images (gif, jpg, png) with vector based formats when possible, I've been happy to see both the emergence of icon fonts as well as renewed interest in SVG for high-DPI display support.

Angular, Ember, brain hurt

Miscellany

Things I'm doing or involved with

Announcing Web Camps Spring Tour 2013

Whew! Seems like we just got back from the Winter tour, and we're off again! We've got eleven international events coming up in March and April. Some are already sold out, so register today! And let your friends and co-workers who don't read blogs know, too, because there

Web Camps are free, no fluff, lots of code events where you can get learn what's new in the Microsoft web platform and how you can put it to use right away. They're by developers for developers - no marketing, just building web apps.

Upcoming events

Here's the list, with speakers:

ASP.NET and Web Tools 2012.2 Content

We've updated this content to include the new ASP.NET and Web Tools 2012.2 release, including the new Visual Studio web tools updates, ASP.NET Web API features, new ASP.NET MVC templates. We organized the content so we start with tools and frameworks (e.g. ASP.NET MVC, ASP.NET Web API, Visual Studio, ASP.NET 4.5 Web Forms features), then dig into some specific scenarios for modern web application development. Here's the agenda:

  • Keynote: The ASP.NET Web Platform in Context
  • What’s new in ASP.NET 4.5 and Visual Studio 2012
  • Building and deploying websites with ASP.NET MVC 4
  • Creating HTML5 Applications with jQuery
  • Building a service layer with ASP.NET Web API
  • Leveraging your ASP.NET development skills to build apps for Office
  • Building and leveraging social web apps in ASP.NET
  • Building for the mobile web
  • Real-time communications with SignalR
  • Leveraging Windows Azure and Windows Azure Web Sites

Go on, register! And let your web dev friends and co-workers who don't read blogs know, too, because this is a great way for them to get a recap on what's going on with ASP.NET, Visual Studio 2012, HTML5, JavaScript, and more.

More Posts « Previous page - Next page »