Use Powershell to download files (from DefinitelyTyped) [5 minutes]

Powershell gives us dotnet power to the commandline. I wanted to be able to easily download Typescript definition files from the awesome DefinitelyTyped project on GitHub and put together a short script for that reason:

Function GetDts ($lib)
{
  $url = "https://github.com/borisyankov/DefinitelyTyped/raw/master/" + $lib + "/" + $lib + ".d.ts"
  (New-Object System.Net.WebClient).DownloadFile($url,$pwd.path + "/" + $lib + ".d.ts")
}

To use it : add the code to your powershell, for example at your Visual Studio project location:

1) Right click folder in VS Solution Explorer, click Open Folder in File Explorer

2) Type “Powershell” in the Explorer address bar

3) Paste the code above

4) Hit enter once or twice to get out of the >> prompt

5) Change to your definitions path (if you have one):

cd definitions

6) Go ahead and download your d.ts’es:

GetDts jquery
GetDts jasmine
GetDts whatever

7) The script downloads the files to your current path

GetDts

Some comments
This code defines a function that lives as long as you have your powershell script open. It disappears when you end the session (close the window), and you have to re add the function again. If you like to keep the script you will need to save it.

The code assumes that the definition file is to be found in the url https://github.com/borisyankov/DefinitelyTyped/raw/master/{library}/{library.d.ts}).

CORS BasicAuth on ServiceStack with custom authentication

I learned a lot from trying to get a ServiceStack authenticate remote ajax requests. (Alternative text: “I spent a lot of hours in frustration…”)

In the end the solution is simple and does not require many lines of code.

[ Edit : see also this gist https://gist.github.com/4518393 ]

When you try to access a remote resource with ajax you will get an error saying:

Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin

Enable CORS

That is easy to deal with in ServiceStack just by adding a plugin in your AppHost Configure method:

Plugins.Add(new CorsFeature());

Add Custom Authentication

If you like to use custom authentication you add a CustomCredentialsAuthProvider just like in the example in this page : https://github.com/ServiceStack/ServiceStack/wiki/Authentication-and-authorization. And then enable it with this code in Configure:

Plugins.Add(new AuthFeature(() => new AuthUserSession(),
 new IAuthProvider[] {
 new CustomCredentialsAuthProvider() //HTML Form post of UserName/Password credentials
}
));

Now you should be able to try login using the default url :

/auth/credentials?username=foo&password=bar

Require authentication

To make a resource require authentication, just add the authenticate attribute on the DTO, on the service class or on the service method:

[Authenticate]

“Basic access authentication”

Fine! But how do we enable this over a remote ajax request? We cannot use cookie based authentication since we cannot use cookies from another domain, but we can use a web standard called Basic access authentication, which is nicely supported by ServiceStack out of the box. Here’s a jQuery ajax request using Basic access authentication:

function make_base_auth(user, password) {
 var tok = user + ':' + password;
 var hash = btoa(tok);
 return "Basic " + hash;
}
$.ajax({
 dataType: "json",
 cache: false,
 url: "http://theservice.domain.com/secure?somevalue=X",
 beforeSend: function(xhr) {
  xhr.setRequestHeader("Authorization", make_base_auth("foo","bar"));
 },
 success: function (data) {
 console.log(data);
 }
});

(window.btoa() converts a string to a encoded data (using base-64 encoding) string.)

A problem with “Preflight”

If we run it, we will get an error (seen in Chrome dev tools/network), cryptically telling us:

Load cancelled (method OPTIONS)

Method “OPTIONS”, I never asked for that? The reason is, whenever an ajax request includes headers the browser sends a “preflight request” to the server asking if it allows that headers. So we need to handle an OPTIONS request specifically, without authentication. Also we need to return a value (not void or null) since otherwise the response will not contain the allow headers information:

public class SomeSecureService : Service
{
 public object Options(RequestSecure request) { return true; }
 [Authenticate]
 public object Get(RequestSecure request)
 {
  return new Secure { SomeResult = "Respond to " + request.SomeValue };
 }
}

Allow the “Authorization” header

Now we get passed the Preflight, but we get another error:

Request header field Authorization is not allowed by Access-Control-Allow-Headers.

Ok, it turns out the “Authorization” header is not allowed by default in the CORS plugin, so we need to allow it:

Plugins.Add(new CorsFeature(allowedHeaders: "Content-Type, Authorization"));

Getting late. Next error message:

No configuration was added for OAuth provider 'basic'

That’s solvable by making the custom credentials class inherit from BasicAuthProvider instead of CredentialsAuthProvider (BasicAuthProvider inherits from it, no need to change any other code):

public class CustomCredentialsAuthProvider : BasicAuthProvider

Result (now time is 5.30 am):

Object {SomeResult: "Respond to X"}

Touchdown!

Problem is now solved, and it was an interesting excercise. To solve it I downloaded the ServiceStack source and debugged my service with the full source available. It is quite a big framework, but I found the code very straight forward and quite easy to find my way through, good to know if I need to dive into the framework source in the future.

Update : what to do when logged in?

When the user is logged on I store the session id locally:

$.ajax({
            dataType: "json",
            url: this.baseUrl + "auth/credentials",
            data: {
                username: username,
                password: password
            },
            success: function(data){

                localStorage.sessionId = data.SessionId;
                this.logService.log("logged in " + data.UserName);
            }

And use that on the following requests:

$.ajax({
            dataType: "json",
            contentType: contentType,
            processData: true,
            type: "get",
            async: true,
            url: baseUrl + resource,
            data: senddata,
            beforeSend: function (xhr, data) {
                xhr.setRequestHeader("Session-Id", localStorage.sessionId);
            }
        });

Stay focused in front of the computer

I work alone. In front of my computer. Mostly from home. I’ve often found it a bit problematic to stay focused on one task at a time (most often a browser, a search engine and/or an interesting blog post is involved in splitting my mind).

I have been using task timers before, but was never perfectly happy with them. They were either too automatic (recording every opened program and url) too structured (requiring me to create customer, project and tasks) or too annoying (popping up every 15 minutes). And I was using them for the wrong reason. I used them as a tool for billing. And billing is never as easy as “one minute work – bill that minute” which meant I often lost focus from the real task because of the task timer.

Now I found one that works the way I like it, and I’m using it primarily to stay focused – I don’t mind the timer that much.

So I start by making up my mind about what I should do, then I write a very short task description and click Start.

I see the task (i.e. “write blog post about tasktimer”) with time ticking in a small bar, always in eye sight. It reminds me to keep doing that task, or change to another if necessary.

When the day or the week ends, I spend time to go through the recorded times and create a document for billing (and see how much time I spent on non-billable tasks…).

Image

I use “Grindstone” (Windows & free for single user). I’m sure there are others out there that works equally well.

* Can be running in a small “bar” floating on top on every other window.

* Easy to add new tasks, just by writing a small description.

* Stops when I’m away from the computer.

* Asks what I’m up to when I get back.

* Easy to change time if I forgot to set the timer on the correct task.

* Simple reporting features.

Podcasts for web developers

New shows weekly (or almost so):

Herding code

Hosts:

K. Scott Allen (OdeToCode)
Kevin Dente
Scott Koon (Lazycoder)
Jon Galloway

Site: http://herdingcode.com/

Rss: http://feeds.feedburner.com/herdingcode

Javascript Jabber

Hosts:

Charles Max Wood @cmaxw

et al

Site: http://javascriptjabber.com/

Rss: http://feeds.feedburner.com/JavascriptJabber

DotNetRocks

“.NET Rocks! is a weekly talk show for anyone interested in programming on the Microsoft .NET platform. The shows range from introductory info”

Hosts:

Carl Franklin

Richard Campbell

Site: http://dotnetrocks.com/

Feed: http://dotnetrocks.com/feed.aspx

The Hanselminutes Podcast

“Technology talk that doesn’t waste your time.”

Host: Scott Hanselman

Site: http://hanselminutes.com/

Feed: http://feeds.feedburner.com/HanselminutesCompleteMP3

Yet Another Podcast

“Intelligent Technical Conversation”

Host: Jesse Liberty

http://jesseliberty.com/podcast/

Feed: http://feeds.feedburner.com/JesseLibertyYapcast

Others

“Top 15 Podcasts All Web Developers Should Follow”

http://net.tutsplus.com/articles/web-roundups/top-15-podcasts-all-web-developers-should-follow/

http://webdesign.tutsplus.com/articles/roundups/13-podcasts-all-web-designers-should-subscribe-to/

Easy data handling using Massive [a first look]

Massive is a nice ~400 LOC’s C# class that wraps your SQL tables and gives them a set of nice dynamic functionality. It’s written by Rob Conery (the creator of Subsonic among other things).

I made my first attempt using it the other day for a current project of mine and I came to like it a lot very quick – and I can already say I will probably use it for most of my data needs in the near future.

Here’s some notes from my first experiences with it. The official source of information about Massive should of course be with the author himself: WekeRoad: Rob Conery’s blog

Git’ting the source

To begin using it within an asp.net web application, you need to drop a copy of massive.cs from the Massive repository at GitHub into your App_Code folder.

Connection string

Having the cs in your App_Code you need to set up a connection string in web.config. Here’s one for an Sql CE 4 database:

<connectionStrings>
  <add name="MyConnectionString" connectionString="data source=|DataDirectory|MyDatabase.sdf"  providerName="System.Data.SqlServerCe.4.0"/>
</connectionStrings>

Getting some data

After doing so you can start getting data out of your database like this:

// Create a DynamicModel agains the db defined in a connectionstring and a named table
var tbl = new Massive.DynamicModel("MyConnectionString", "[MyProductTable]");
// Get all rows in the table filtered by a where expression
var products = tbl.All(where:"Category=@0", args:"MyCategory");
foreach (var item in products) {
    <div>@item.Name</div>
}

The above creates a T-SQL “SELECT * FROM MyProductTable WHERE Category=’MyCategory'” and runs it on the database, retrieving the resulting rows as IEnumerable<ExpandoObject> where the row objects has got all the columns dynamigacally mapped as properties – item.Name, item.Price and so on.

Massive assumes you are using “id” as the primary key column. If you’re not you need to define it:

var tbl = new Massive.DynamicModel("MyConnectionString", "[MyProductTable]", "myId");

You can also add column selection, orderby and limit:

var products = tbl.All(where:"Category=@0", orderby:"Name", columns:"Name, Category", limit:10, args:"MyCategory");
foreach (var item in products) {
    <div>@item.Name</div>
}

Add more parameters to the Where:

var products = tbl.All(where:"Category=@0 AND Date>@1 AND Deleted=0", args:new object[]{"MyCategory", myDate});

The result is an IEnumerable<dynamic> and you can run Linq-stuff on it (but remember it’s most efficient to filter the data with the SQL as above):

var products = tbl.All().Where(p => p.Price> 1000).OrderBy(p=>p.Name);
var grid = new WebGrid(products);
@grid.GetHtml()

Inserting new data

An insert can look like this:

tbl.Insert(new {Name="New product", Category="MyCategory"});

Or like this:

dynamic newProduct = new ExpandoObject();
newProduct.Name="My Product";
newProduct.Price=1200;
newProduct.Category="My Category";
tbl.Insert(newProduct);

Updating data

A single update can look like this:

// Get single row with id = 193
var product = tbl.Single(193);
if (product!=null)
{
 product.Price = 190;
 tbl.Save(product);
}

Or like this:

// Get single row with productname = "MyProduct"
var product = tbl.All(where:"Name=@0",limit:1,args:"MyProduct").SingleOrDefault();
if (product!=null)
{
 product.Price = 190;
 tbl.Save(product);
}

Or like this which is using Id (the primary key) to make Massive understand it’s supposed to be an update:

dynamic existingProduct = new ExpandoObject();
existingProduct.Id=100;
existingProduct.Name="My Product";
existingProduct.Price=1200;
existingProduct.Category="My Category";
tbl.Save(existingProduct);

If you try to save a non existing record (with id=something) you will get an exception. However if you leave out the id the Save will work as an Insert.

Updating multiple records at a time

Update multiple records within one transaction:

// Get all products with price 180 and make them to an array to be able to edit them
var products = tbl.All(where:"Price=@0",args:180).ToArray();
foreach (var product in products)
{
 product.Price = 190;
}

// Save all in one DB transaction:
tbl.Save(products);

Delete

// Delete record with id = 999:
tbl.Delete(999);

or

tbl.Delete(where:"Category=@0",args:"MyCategory");

POCOs

In the next part we’re going to look at how to use common classes together with Massive.

Current issues (2011-03-11)

If you get an error on saveing an update. cannot modify name = Id” it might be because Massive is case sensitive on pk-column when it’s trying to create an update query. Fix that by defining your id-column yourself, “Id” and then use that exact caseing in your code: myrow.Id = 1;

Also there’s a small issue with the pager: https://github.com/robconery/massive/issues/16#comment_852654

Using a document database (RavenDb) from within Umbraco

I wanted to experiment with a document database and hopefully make use of it in a project of mine. Living in a .Net context and reading many good things about RavenDb the choice was pretty easy to make.

The thing that made me want to try a document database in the first place was the very comfortable way of storing common objects right in the DB without defining tables and fields. Just like this:

public class Product
{
    public string Id { get; set; }
    public string Name { get; set; }
    public decimal Cost { get; set; }
    public DateTime CreateDate { get; set; }
}
public void StoreNewProduct()
{
    var product = new Product
    {
        Name = "Car",
        Cost = 100000,
        CreateDate = DateTime.Now
    };
    using (var DbSession = MyDb.Store.OpenSession())
    {
        DbSession.Store(product);
        DbSession.SaveChanges();
    }
}

And that is indeed all that is necessary to store an object into a RavenDb database. The Id field is mandatory and is filled automatically by Raven, it will contain something like “products/2041”.

Basic querying of the database is as easy as Linq (here in a Razor script):

var products = from product in session.Query<Product>()
                     where product.Cost>10000 select product;
<table>
@foreach (var p in products)
{
 <tr>
   <td>@p.Id</td>
   <td>@p.Name</td>
   <td>@p.Cost</td>
   <td>@p.CreateDate.ToShortDateString()</td>
  </tr>
}
</table>

For more advanced queries, and with a lot of documents in the DB its adviced to query using Lucene which comes with RavenDb. See for example http://ravendb.net/tutorials/hello-world . (Note that there’s a typo in that sample, the Lucene query should be made with “session.Advanced.LuceneQuery”).

If we later decide to add another field to the Product class, that’s no problem, objects will be retrieved with the data available.

Now how do we setup this in Umbraco?

Download and start RavenDb server

I did it the quick way and run RavenDb as a service in my own server. It’s as easy as downloading the RavenDb package and running one single command (/Server/Raven.Server.exe /install) and it serves the Db on http://localhost:8080.

There’s also a web ui at that url from which one can administer the database and documents.

Initialize the database within the Umbraco application

For RavenDb to run In Umbraco it’s best to initialize a global instance of DocumentStore on ApplicationStart. For this test I made that happen with a simple class file in App_Code:

using Raven.Client.Document;

namespace joeriks.raven
{
    public class MyApplicationBase : umbraco.BusinessLogic.ApplicationBase
    {
        public MyApplicationBase()
        {
            MyDb.Store = new DocumentStore { Url = "http://localhost:8080/" };
            MyDb.Store.Initialize();
            MyDb.IsInitialized = true;
        }
    }
    public class MyDb
    {
        public static DocumentStore Store;
        public static bool IsInitialized = false;
    }

Binaries

The final thing that’s necessary is to add the RavenDb client dll’s to the Umbraco /bin directory. And then voila – all good to start using raven for example from within razor macros.

References

http://ravendb.net/tutorials/hello-world
https://github.com/ravendb/ravendb

Razor Inline helpers in Umbraco Juno (Full sitemap sample)

Now inline helpers works in Umbraco Juno

Edit : There’s more discussions and samples of Razor in http://our.umbraco.org/forum Like for example in this thread. with more approaches to the sitemap and filtering of nodes.

Edit: Umbraco 4.7 syntax
Here’s one way of creating a Razor sitemap sample:

<h1>Full sitemap</h1>
@traverse(Model.AncestorOrSelf(1))

@helper traverse(dynamic node)
{
 var cc = node.Children.Where("umbracoNaviHide!=true");                        
 if (cc.Count()>0)
 {
  <ul>
  @foreach (var c in cc)
  {
  <li>
   <a href="@c.Url">@c.Name</a>
   @traverse(c)
  </li>
  }
  </ul>
 }
}

Result

Simple website 
  Installing modules 
  Go further 
  Getting started 

The Razor renderer makes a good job dealing with the mix of C# code and HTML. It’s however not always so easy to know exactly what’s considered as either one and the compiler might complain because of that. In those cases it’s often good to use @{ } to make it clear you’re doing C#. That’s what I needed in my sample – even though the code is in a helper function and should not need it (I thought).

Test your Razor macros

Macro engine macros does not have the nice Visualizer as Xslt ones has. One way to test your macro is to simply call it from a template. That can be a bit tedious to go in and change that template for each new macro you like to test. I have previously made a combo of a template with just a call to a generic macro that gets a macro name from the querystring and renders it.

It’s packaged as “Rndr url macro renderer” and it’s now using a Razor macro (instead of a Python one) as the controlling macro. With it you can easy test your macros by calling them this way:

http://www.mysite.com/rndr?macroalias=mymacro&pageid=1063

http://our.umbraco.org/projects/website-utilities/rndr-url-macro-renderer