0 Comments

ko-logoKnockout is awesome, but as a Knockout beginner, it was hard for me to debug. After reading a lot about Knockout, I found a Stackoverflow thread about how to debug KO. This post about Knockout Strategies is a must read! The SO question I mentioned earlier inspired me to create my first snippet.

I prepended some HTML to display the output on the left side of the screen. Here is the code:

<div style="position: absolute; top:0px; left:0px; height: 100%; width: 400px; overflow: auto; background-color: rgba(255,255,255,0.8);color: black; background-image: url(http://knockoutjs.com/img/ko-logo.png); background-repeat:no-repeat; background-position: top center; padding-top:125px;">
    <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
</div>

And here is the snippet code:

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <CodeSnippet Format="1.0.0">
    <Header>
      <Title>
        Knockout Debug
      </Title>
      <Author>JP Hellemons</Author>
      <Shortcut>Kodbg</Shortcut>
    </Header>
    <Snippet>
      <Code Language="html">
        <![CDATA[
        <div style="position: absolute; top:0px; left:0px; height: 100%; width: 400px; overflow: auto; background-color: rgba(255,255,255,0.8);color: black; background-image: url(http://knockoutjs.com/img/ko-logo.png); background-repeat:no-repeat; background-position: top center; padding-top:125px;">
          <pre data-bind="text: ko.toJSON($$data, null, 2)"></pre>
        </div>
        ]]>
      </Code>
    </Snippet>
  </CodeSnippet>
</CodeSnippets>

The dollar sign needs to be escaped. You can download the snippet and open the ‘Code Snippet Manager’ in Visual Studio with CTRL+K, CTRL+B and import the snippet file.

The shortcut is Kodbg (and then tab)

 

Good luck!

 

kick it on DotNetKicks.com Shout it

Post on LinkedIn
0 Comments

CSS media queries are common these days. So I googled an example which I could modify to my needs for a nice cross browser, cross device compatible web application. I came up with:

@import url("/css/desktop.css") only screen;

/* Smartphones (portrait and landscape) ----------- */
@import url("/css/smartphone.css") only screen and (min-device-width : 320px) and (max-device-width : 480px);

/* Smartphones (landscape) ----------- */
@import url("/css/smartphone-landscape.css") only screen and (min-width : 321px) and (max-width : 800px);

/* Smartphones (portrait) ----------- */
@import url("/css/smartphone-portrait.css") only screen and (max-width : 320px);

/* iPads (portrait and landscape) ----------- */
@import url("/css/ipad.css") only screen and (min-device-width : 768px) and (max-device-width : 1024px);

/* iPads (landscape) ----------- */
@import url("/css/ipad-landscape.css") only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape);

/* iPads (portrait) ----------- */
@import url("/css/ipad-portrait.css") only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait);

/* iPhone 4 ----------- */
@import url("/css/iphone4.css") only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5);

This looks great, but… it didn’t work in IE8. I have spend a long time searching the web, why it didn’t work. I added a

body { margin-top: 0px; }

as was suggested in this StackOverflow thread. But that didn’t work either.

 

 

ie8-css-import

I verified that the css was linked correctly. I was loaded, only the import wasn’t. There was also a resource online which said that the CSS imports should be first in the document for Internet explorer. But that also did not matter.

After browsing for a while, I stumbled upon an MSDN page.

http://msdn.microsoft.com/en-us/library/ie/ms530768%28v=vs.85%29.aspx

and there it was. –evan— pointed out that according to the w3 organization.

So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media types after the URI.

source: http://www.w3.org/TR/CSS2/cascade.html#at-import

So this is in CSS 2 which became a recommendation in 1998. it was started in 1997 and Internet explorer 8 was released on 19 March 2009. That is over 10 years later!

So removing the ‘only screen’ from the CSS I posted earlier fixed it!

Thank god for standards!

Post on LinkedIn
3 Comments

couchCouchDB is a non-relational, no-sql database which is build relying on the HTTP stack. It’s from the apache foundation.

The Wiki of CouchDB provides this info about the windows version.

Installation of CouchDb on Windows

The current release (at the moment of writing) is 1.1.1 and it’s up on Github.

Their wiki gave me this download file:

CouchDB for windows download

As Dave pointed out in the comments, you should download 1.2 now from https://couchdb.apache.org/#download. Thanks Dave!

You can open it and keep all the default settings.

After the installation completes, you can visit http://127.0.0.1:5984

You would see this:

CouchDB on windows installation succes

The management tool, Futon, can be reached in subdirectory _utils.

So just click on this link to see the CouchDB’s version of “PhpMyAdmin”

http://127.0.0.1:5984/_utils/ 

CouchDB Futon

So you are good to go!

More details about CouchDB on Windows can be found on the Quirks page.

But that’s optional.

Setup CouchDb

With the default installation, you will see this message:

image

It is recommended to create one Admin user. You can create a database afterwards by clicking on the top left link.

image

You can set the security of the CouchDb if you have added some more users, but we will skip that for the moment and start using the database from our Asp.Net WebForm web application.

Asp.Net and CouchDb

There are a lot of options to access CouchDb. You can do everything manually, since it is just a combination of JSON and REST. But there are also a lot of wrappers available which support streaming and/or POCO etc.

Lots of benefits which differ from wrapper to wrapper. The official documentation of CouchDb recommends the following:

 

When you look for Nuget packages with the keyword CouchDb you will only find LoveSeat and DreamSeat at the moment. Both are using Json.Net a.k.a. Newtonsoft.Json. NuGet will pull that reference in, so don’t worry. I just mentioned it, so that you know that you can use that library to parse objects to JSON.

If you look for resources for CouchDB, you will see a lot Unix oriented. A lot requires CURL. You can get it for windows, or (recommended) get Git for windows and get curl for free http://superuser.com/a/483964/24642

You can read more about that on the run curl commands with windows thread on superuser.

This is my DreamSeat code. The blog object is a test object with comments etc. just to fill the database with a JSON serializable object with related objects.

private void TestDreamSeat()
{
    var blog = GetBlog();
    var client = new DreamSeat.CouchClient();

    var db = client.GetDatabase("southwind");
    DreamBlog dream =(DreamBlog)blog;

    dream = db.CreateDocument<DreamBlog>(dream, new Result<DreamBlog>()).Wait();

    DreamBlog myObj = db.GetDocument<DreamBlog>(dream.Id);
    Response.Write(myObj.Name);
    db.DeleteDocument(myObj);
}

And this is my LoveSeat test

private void TestLoveSeat()
{
    var blog = GetBlog();
    var client = new LoveSeat.CouchClient();

    var db = client.GetDatabase("southwind");

    string blogAsJson = JsonConvert.SerializeObject(blog);
    var doc = new Document(blogAsJson);
    doc.Id = new Guid().ToString();
    doc = (Document) db.CreateDocument(doc);

    Blog myObj = db.GetDocument<Blog>(doc.Id);
    Response.Write(myObj.Name);
    db.DeleteDocument(doc.Id, doc.Rev);
}

I used the

System.Diagnostics.Stopwatch
class to measure the differences and I was planning to test all the libraries that I have found and mentioned earlier. But I believe that the best solution is to stick with the libraries that are in the NuGet repository, because other libraries might be outdated.

Get the sample code from:

https://github.com/jphellemons/CouchDbFromDotNet

Good luck coding!

kick it on DotNetKicks.com Shout it

Post on LinkedIn
1 Comments
Sinatra Framework Logo

As web developer you might have heard of Sinatra. Not the famous artist, but the Sinatra framework! It is a framework/Domain Specific Language (DSL) for Ruby to quickly create web applications with minimal effort.

Nancy is a lightweight framework which is inspired by Sinatra. It has been around since November 2010 and a few days ago there was the Nancy 0.12 release.

So it's time to give this a try and make my own first Nancy web application.

My first Nancy web app

Launch visual studio and File -> New project -> ASP.NET Empty Web application

File new Asp.Net empty web app project

Right click on the project in the solution explorer and select ‘Manage NuGet packages’

Solution explorer

Type in Nancy.Hosting.Aspnet This NuGet package depends on Nancy 0.12 which is automatically installed when you hit the Install button

Nancy Nuget package

Add a new class HelloNancy.cs

Make it inherit NancyModule

type in the default constructor

Get["/"] = parameters => "Hello World";

And don’t forget to add

using Nancy;

Your full code of HelloNancy.cs should look something like

using Nancy;

namespace MyFirstNancyWebApp
{
    public class HelloNancy: NancyModule
    {
        public HelloNancy()
        {
            Get["/"] = parameters => "Hello World";
        }    
    }
}

And hit F5 to build

This gives you a nice and clean hello world:

hello world in firefox

If you add (below the previous Get…) this line:

Get["/hello/{name}"] = parameters => "Hello " + parameters.name;

 

And go to /hello/yourname

hello world in firefox with parameter

Nancy is build for the web in a developer friendly way. Now you use HTTP GET requests, but you can also use the POST and DELETE. The routing can work with regular expressions and is very powerful.

But besides the query string, you can also accept JSON, XML etc. out of the box with a single line of code!

But this sample does not contain any HTML! Well you can do that by adding a view. So add a folder called views and add a products.html file.

When you add this line:

Get["/products"] = parameters => View[new ProductsModel()];

and this class to your solution:

public class ProductsModel
{
    public string Code { get; set; }
    public string Name { get; set; }
}

Nancy will look in the views folder for a view called products.

When you use @!Model.Code in your products.html you can show the bound value of the productsmodel object in html.

Get["/products"] = parameters => View["products.html", new ProductsModel(){Code="C1009", Name ="Product name here"}];

You can read more about it here:

https://github.com/NancyFx/Nancy/wiki/Documentation

You can also download my small sample project from Github.

Nancy is open source under an MIT license and available on GitHub. So you can fork it and make pull requests etc.

Good luck coding!

 

ps. if you want to see some octocat’s (Github logo) check out this Octodex!

kick it on DotNetKicks.com Shout it

Post on LinkedIn
1 Comments

This blog will show you how to download a JSON string and parse it to POCO objects with Asp.Net C# in Visual Studio 2012 with an extension and nuget package and only 3 lines of code.

For this example I am using the Visual Studio achievements. You can install the extension in Visual Studio 2012 and/or Visual Studio 2010. It uses FxCop and is a lot of fun. So I have installed this extension and have several achievements.

The url for your personal page is:

http://channel9.msdn.com/niners/USERNAME/achievements/visualstudio

I have found the API of the achievements on  and it is using JSON. In my web project I added this NuGet package to work with JSON.

NuGet

To make life easier, I have installed Mads Kristensens Web Essentials 2012.

So I have copied the output of

http://channel9.msdn.com/niners/CapSoft/achievements/visualstudio?json=true&raw=true

and in Visual Studio 2012 I right clicked in the code behind:

image

Paste JSON As Classes!

That gives you (without coding)

public class Achievement
{
    public string Name { get; set; }
    public int CurrentNumber { get; set; }
    public DateTime DateEarned { get; set; }
}

public class Parent
{
    public string Name { get; set; }
    public string FriendlyName { get; set; }
    public Achievement[] Achievements { get; set; }
}

To use it, you can use a webclient object to download the JSON string and parse it using newtonsoft.json.

All that with just 3 lines of code!

protected void Page_Load(object sender, EventArgs e)
{
    WebClient wc = new WebClient();
    string json = wc.DownloadString("http://channel9.msdn.com/niners/CapSoft/achievements/visualstudio?json=true&raw=true");
    var a = JsonConvert.DeserializeObject<Parent>(json);
}

Good luck coding!

kick it on DotNetKicks.com Shout it

Post on LinkedIn