Working LESS with WebMatrix
I’ve been doing some CSS work recently and wanted to try out some of the newer utilities that are supposed to make managing CSS files easier. LESS is a popular one as it allows you to use variables, mixins and a few other constructs to make your CSS coding more enjoyable.
With the WebMatrix v2 release, support was added for working with LESS. When adding a new file to a web site, we have a LESS file template as well as syntax highlighting and intellisense in the editor. Goodness all around.
Knowing nothing about LESS, I went to their website to see how to set it up and of the two options listed on the Usage page, running it client-side or server-side, I chose the former because it was first in the instructions and the latter only talked about it in the context of a Node.js site and I’m using WebPages.
So I added my LESS file to my site, added the stylesheet link to it in my markup as well as a link to the LESS js file. Then, I started run my site and saw zero CSS styling. Using the browser tools in Chrome, I could see the client side request for the “.less” file failed. I made a direct request for the file via the browser and this returned:
Bummer.
Fortunately, this error was descriptive enough to point me towards the culprit – a missing MIME map for the “.less” extension. Simply adding this to the IIS Express “applicationHost.config” file did the trick.
With this working, the other question to ask is whether or not processing the LESS file to generate CSS on the client is the best design. I haven’t thought through all of the pros/cons of this versus a server side processing approach, but my gut tells me doing this server side is probably a better choice.
So can we get the server-side design working? Well, with WebMatrix we’re in luck, because a nice extension has been written to automatically produce a corresponding CSS file whenever a change to a LESS file is saved, and here’s a write-up on How to Use LESS CSS in WebMatrix that explains this. If you’re going to be actually using LESS in your web site, this is the way to go. In this post I just wanted to point out the one roadblock you would run into if you were simply trying the client-side approach.
Hope this helps,
Mark
Debugging Azure Worker Role Startup Issues
I’ve deployed a number of systems to Azure and one of the most painful experiences for me continues to be debugging role startup failures. Often, I’ve often made configuration mistakes (e.g., wrong Azure storage account credentials) which prevent my worker roles from successfully returning from their “OnStart()” method and this only surfaces when I deploy the system to Azure. Unfortunately, the current version of the Azure portal doesn’t offer a lot of direct help here beyond telling you that a role has failed to start. In the screenshot below, I’ve captured my worker role in the “Recycling” state which means it’s failed to start the first time and Azure is trying to restart it again.
So how do we debug debug this? Poking around the web a bit yielded a number of recommendations. I could:
- Enable Remote Desktop for the worker role and login to the box when it was starting up to see if I could debug the issue. This seems kind of tricky for my scenario as I’d have to catch it before it exited the “OnStart()” method.
- I could wrap my code in the “OnStart()” method with a try/catch and log the exception to SQL Azure, Azure Table storage or write it to queue. That wouldn’t be too bad, but it does require me to update my code.
- I could leverage the built-in Visual Studio IntelliTrace feature to record the execution history of my worker role and view this data all from the comfort of my local box.
I’m lazy so #3 sounds like a winner to me.
To configure this, you right click on your Cloud Project in Solution Explorer and choose “Publish”. Then, on the Advanced Settings tab, you can “Enable IntelliTrace” and further configure settings around how much data you want to collect. When you’re done, click “Publish” and away you go.
As Visual Studio goes through it’s publishing process an activity log is provided showing you the steps being executed. I’ve captured this below and though you can’t see the local time on my computer, I’ve been at that final step with the worker role being “busy” for a good while.
Time to look at that IntelliTrace data!
Using the Server Explorer window in Visual Studio, I can now view the IntelliTrace logs by expanding the Windows Azure Compute section and locating my worker role.
This triggers a download of the data to your local machine and once the download completes, Visual Studio pops open the IntelliTrace Summary in a new window. Now I can see the list of exceptions that were generated and where they occurred.
The screenshot below shows the dummy exception I intentionally added to cause my worker role to fail to start.
At this point, I can take things one step further by clicking the “Start Debugging” data to see the exact state of my worker role when the exception was triggered, fix up my bug and redeploy.
Hope this helps,
Mark
Viewing Azure Blob Storage Containers
Each week the new Azure portal seems to provide some new piece of functionality. As I was working on integrating the new WordPress plugin for putting media assets in Azure Blob storage (see previous post), I noticed the portal has been updated with UI to allow you to view your Azure Blob storage containers and blobs as well as allowing you to delete this data. I’ve been waiting for something like this for a while. Previously, the only ways I knew of for interacting with Azure Blob storage was either writing your own code or using a 3rd party app of which there are a few. Let’s quickly check out this new UI.
In the portal, click on the Storage section and then a storage account. You’ll see a new “Containers” menu option (circled in red in my screenshot).
Clicking on the link will give you a list of all containers for the storage account and at the bottom of the screen a button to delete a container and all associated data.
You can then drill down into an individual container, look at the individual blobs in the container and delete them if desired.
Hopefully we’ll one day have the ability to also add containers and blobs, but for now, I’ll take what I can get.
Mark
Storing WordPress Blog Images in Azure Cloud Storage
Put your mouse over the image below, and take a look at the URL for the image.
The URL is http://cloudydeveloper.blob.core.windows.net/images/2012/09/AzureHomePage.png.
If you look at the domain in the URL, you’ll notice it’s not www.cloudydeveloper.com. The image is not hosted on the same box running this WordPress site. Instead, it’s hosted in my Azure storage account thanks to the new Windows Azure Storage for WordPress plugin. This plugin allows images and videos to be stored in Azure “blob” storage which is super cheap. While I’m nowhere near hitting the storage limit for this Azure web site, I like the idea of getting larger media assets in a more suitable location and at $0.12 a GB a month, I’m not concerned about breaking the bank in the near future.
Here’s how I set this up:
- Install the plugin.
From the WordPress admin console, I just searched for the plugin “Windows Azure Storage for WordPress” and installed it.
- Configure the plugin.
In the settings tab of the WordPress admin console, click on “Windows Azure”. You’ll first need to create an Azure storage account to hold your media assets and have the name of the storage account and access key handy. In the screenshot below, I’ve already set this up and created a “container”, which is like a folder for storing blobs, named “images”, but if I hadn’t already done this, you’d see the ability to create a new container from this screen.
- Enable XML-RPC publishing in WordPress.
Again, in the WordPress admin console, go to Settings –> Writing and enable this.
And that’s it.
I use Windows Live Writer to create my blog posts and I just include images just like I did before and on publish, the plugin uploads the images to my Azure storage account and generates the correct URL. No extra work needed on my part. Awesome.
Mark
Azure Web Sites With Custom Domains for Ten Bucks a Month
Some recent improvements to Azure have made it possible to host a web site with a custom domain for just under ten bucks a month. This is a big improvement over the previous options of either staying with the “Free” web site mode and this sub-optimal domain masking trick or moving to the more expensive “Reserved” web site mode. There’s now a new web site mode called “Shared” and this level allows you to map your custom domain name (including a naked domain) to your Azure web site.
Here’s the updated Azure portal UI with the new “Web Site Mode”:
I’m currently configured to use the “Reserved” mode but you can see the new “Shared” mode in the middle and details about the mode in the pop-out.
I won’t walk through the details of setting this up as the necessary steps are well outlined in the following posts:
- Configuring the new “Shared” hosting option
- Configuring a custom domain for a Windows Azure web site
Hope this helps,
Mark