My Awesome Console

I’ve been using cmd.exe with Console2 for a few years now. I haven’t spent much time trying to optimize the experience. Actually the only reason I’m using Console2 is for my copy/paste needs.

Until my friend showed me a screenshot of his new Powershell. It had nice Git integration with colors and auto-complete. My own console was stupid and colorless. Time to geek out.

The steps below requires that you already have Git installed and configured.

Install Console2

If you haven’t already go install Chocolatey.

Next, install Console2:

choco install console2

You can now run Console2 by hitting Win Key+R and enter console.

Install PowerShell Git integration

Posh-git is Git integration/highlight-coloring-stuff for Powershell. Again we use Chocolatey:

choco install poshgit

It’s plug and play. Nothing more to do.

Configuring Console2

If Console2 is already running please restart it. We need the post-git modules imported. Next, go to Edit -> Settings.... Select Tabs. Select Powershell and press the Move upbutton until it’s in the top.

Mark the Use default checkbox. If you like you can set your Startup dir (mine is C:\code).

In the same Settings window now select Hotkeys. Find Paste and change the hotkey to CTRL+V. You can now paste text into the commandline using CTRL+V!

Set up Powershell scripts

I’ve got two going on. The first is the best. Powershell scripts is “installed” by referring to psm1 files in your so called $profile. Jump to Powershell and enter $profile. It will return something like C:\Users\jhovgaard\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1. To include a script simply append a new line to the file like this:

Import-Module "C:\PATH\TO\YOUR\SCRIPT.PSM1"

Search and open .sln file in current folder

My script is available here: https://gist.github.com/jhovgaard/8a91441e621094544a17

Save the file to your machine and add a reference in your $profile.

Open new Google Search from Powershell

My script is available here: https://gist.github.com/jhovgaard/9dad2a49a441a83a5874

Save the file to your machine and add a reference in your $profile.

Please notice all changes made to $profile requires restarting your console.

Last, here’s a nice wallpaper for your screens!

http://www.hdwallpapers.in/walls/blurry_abstract-wide.jpg

Do you still manage your web server through remote desktop or IIS Manager? Try Servant.io today!

Drag n' drop deployment on IIS

Hi guys!

Do you know that special feeling some features can give you? Things that only can be described as neat. I think we just made one of them on Servant. Check out this GIF:

Yeah, I just used drag and drop to deploy a website to my IIS. I don’t wanna brag but I really think it’s awesome!

Behind the scene we use the browser to pack and compress your files into one zip archive. Then we upload this zip to a hidden URL. The zip is only stored in memory and it’s automatically wiped after 5 minutes. Now we tell your Servant Client (meaning your web server) to download the zip, extract it to the specific site (into a new folder) and change the site’s disk path to the new location.

By deploying to a new folder we also remove the seconds of downtime you normally experience when using the same-folder-strategy. The new folder name will include a timestamp.

We will extend this deployment feature with history, auto warm-up and error detection with automatic roll-back (no ETA yet).

What do you think? Cool and useful or a complete waste of time? Leave a comment!

Do you still manage your web server through remote desktop or IIS Manager? Try Servant.io today!

Servant.io available in public preview

What have changed?

Some of you may already know about Servant for IIS - a lightweight web interface for IIS (Which is still available at GitHub of course). Servant.io is the next step in making management of web servers even easier and much more awesome.

What we have done is simply move Servant to a hosted cloud environment like you know it from Boundary, New Relic and services like that. We have developed a small client/agent to be able to communicate with your servers (the source is open and available for everyone).

Servant.io brings new features

We’re working like crazy apes to bring new features. Below I’ll list the features we have pushed live so far.

• Web farm support: One of the biggest feature requests on Servant for IIS was multi-server/web farm support. Servant.io now fully supports IIS web farm setups. You simply select one server to be your primary configuration, and Servant will take care of keeping your sites in sync.

• Deployment: We bring automated deployment to both single servers and web farms. You upload a zip file containing you site, and Servant will extract the site on every server. Servant always extract to a new folder when deploying, and it doesn’t change the path until the site is completely ready. This dramatically reduces downtime on deployment.

• Plug and play: One super important thing for us is that it won’t be annoying to install the Servant Client. To overcome firewall issues we communicate entirely on port 443 (HTTPS). We use WebSockets (SignalR actually) to send commands to your server so you don’t have to open for incoming traffic. All communication is of course securely done via SSL.

• Security: Everyone knows that no software is completely secure. We do a lot to keep Servant super safe, but if something bad happens we introduced a completely automated and silent updater. This makes us able to push security fixes instantly to your server. Everything is happening without any effort required by you. Your Servant Client will always be up to date.

The future

We have endless numbers of features that we want to introduce, but right now this is what we have in the official pipeline.

• Drag and drop deployment: Simply drag a folder from your disk onto your site in Servant, and we will handle zipping and deploying.

• Deploy from Visual Studio/IDE: We’re developing support for deployment (server + web farm) via FTP. This will enable you to deploy to all your servers directly from Visual Studio/your IDE.

• Powershell/command line access: You will be able to execute commands and powershell on your server directly from the Servant.io web interface. Executing commands on every server in a farm will also be possible.

Pricing

Servant.io is currently in public preview which is completely free for everyone. When we feel like the product is worth paying for, we will introduce a price model.

I promise prices will be fair and will match the size of your organization. Also we will have a discount for students + completely free for open source organizations!

That’s all for now. I hope you’re as excited as we are. We want to bring the best web server manager ever.

Please leave a comment, I love feedback :-)

Do you still manage your web server through remote desktop or IIS Manager? Try Servant.io today!

How to use PJAX with Nancy

What is PJAX and why?

Today most web applications use a layout page, because we need to maintain the same HTML code over multiple pages. This HTML could be the header, footer and so on.

When the user clicks around our application they need to download this header and footer again and again and again.

Some developers use AJAX to download data from the server, and then manipulate with the DOM using Javascript to show this new data. Some use big Javascript frameworks and call their application a SPA. This is clever, but isn’t compatible with search engines and non-javascript users. So developers is forced to support two “versions” - a AJAX version and a pure HTML version. Cumbersome and expensive if you care about SEO.

PJAX fixes this issue. When enabled it will tell the server if it should include the layout HTML or not. If Javascript is enabled (not a crawler) there’s no reason to include the layout. If not, the server returns the complete HTML.

Quote from https://github.com/defunkt/jquery-pjax: pjax works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax’d html. It then updates the browser’s current url using pushState without reloading your page’s layout or any resources (js, css), giving the appearance of a fast, full page load. But really it’s just ajax and pushState.

So to get to the point: PJAX is a plug-and-play plugin that reduces bandwidth usage, increase performance and is fully compatible with non-javascript users.

Also, please notice that PJAX is also part of the YUI library: http://yuilibrary.com/yui/docs/pjax/, however I will use the standalone version in this demo.

Setting up the demo

I’ll go through setting up the demo application real quick, since this article isn’t about Nancy, but PJAX. If you’re new to Nancy I suggest you start by reading my getting started on Nancy blog posts.

Required Nuget packages for the demo is the following:

install-package nancy.hosting.aspnet
install-package nancy.viewengines.razor
install-package jquery
install-package jquery.pjax

After installing Nuget packages I move the script folder into another folder called “Content” only to follow Nancy conventions.

A HomeModule containing a set of actions:

using Nancy;

namespace NancyPjaxDemo
{
    public class HomeModule : NancyModule
    {
        public HomeModule()
        {
            Get["/"] = p =>
            {
                return View["Index"];
            };

            Get["/first/"] = p =>
            {
                return View["First"];
            };

            Get["/second/"] = p =>
            {
                return View["Second"];
            };
        }
    }
}

A _Layout.cstml view:

@using System
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
	Layout loaded: @DateTime.Now
    <div id="container">
        @RenderBody()
    </div>
</body>
</html>

A Index.cshtml view:

@{
    Layout = "_Layout.cshtml";
}

<h1>Index page</h1>

<ul>
    <li><a href="/first/">First link</a></li>
    <li><a href="/second/">Second link</a></li>
</ul>

And at last a First.cshtml and Second.cshtml:

@{
    Layout = "_Layout.cshtml";
}

<h1>Welcome to second page!</h1>

<a href="/">Go back to the index page</a>

My solution explorer now looks like this:

Setting up the Javascript

Perfect, our demo is ready. Time to set up PJAX. First, let’s update the layout page to include jQuery and the PJAX library. I’ll add the following two lines just before my </body> tag:

<script src="~/Content/Scripts/jquery-2.1.0.min.js"></script>
<script src="~/Content/Scripts/jquery.pjax.js"></script>

Next I’ll tell PJAX to use my #container element which you can find in my _Layout.cshtml page:

<script>
    $(document).pjax('a', '#container', { timeout: 1000 });
</script>

This tells PJAX that whenever a user clicks a link, the content should be loaded into #container. The exact same behavior as Razor’s @RenderBody().

To summerize, my _Layout.cshtml page now looks like this:

@using System
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
    <body>
        Layout loaded: @DateTime.Now
        <div id="container">
            @RenderBody()
        </div>
    
        <script src="~/Content/Scripts/jquery-2.1.0.min.js"></script>
        <script src="~/Content/Scripts/jquery.pjax.js"></script>
        <script>
            $(function() {
                $(document).pjax('a', '#container', { timeout: 1000 });
            });
        </script>
    </body>
</html>

Now when I click through my application I will see that PJAX now sends each request using AJAX instead of regular pageloads.

You’ll also notice the X-PJAX: true header (marked with yellow). This tells our application that this request should not contain the layout HTML, only the new HTML for the requested page.

Because PJAX detects that we are returning the Layout HTML again, it fires a regular pageload. What we need to do is tell Nancy to forget about the Layout page if we see this header.

Setting up Nancy for PJAX

First, we need to provide all views a bool indication whetever the request is coming from PJAX or not. I’ll do this by using the Before hook in Nancy in my HomeModule:

Before += ctx => {
    ViewBag.IsPjax = Request.Headers.Keys.Contains("X-PJAX");
    return null;
};

This will make my HomeModule look like this:

using System.Linq;
using Nancy;
	
namespace NancyPjaxDemo
{
    public class HomeModule : NancyModule
    {
        public HomeModule()
        {
            Before += ctx =>
            {
                ViewBag.IsPjax = Request.Headers.Keys.Contains("X-PJAX");
                return null;
            };

            Get["/"] = p =>
            {
                return View["Index"];
            };

            Get["/first/"] = p =>
            {
                return View["First"];
            };

            Get["/second/"] = p =>
            {
                return View["Second"];
            };
        }
    }
}

Great, now ViewBag.IsPjax can tell is if the request is coming from PJAX. Now we simply need to add an if-sentence to our Views, to make them able to ditch the layout if request is coming from PJAX:

@{
    Layout = ViewBag.IsPjax ? null : "_Layout.cshtml";
}

I’ll do this everywhere I set the Layout in Razor. In my demo it will be Index.cshtml, First.cshtml and Second.cshtml.

Now when I click around my application, I’ll see that the “Layout loaded” timestamp doesn’t change, but the content and URL does! If I disable Javascript, everything still works as any other regular webpage.

We’re done!

That’s it, one complete PJAX application. You should notice that when you write Javascript for PJAX application it is very important that all events is attached to the #container object. For example to handle a click event on some button, you should NOT do this:

Wrong way:

$('#MyButton').click(function() {});

Right way:

$('#container').on('click', '#MyButton', function() {});

The reason is that PJAX will inject the content of your pages into the existing DOM. The “wrong example” only hooks up to instances of my #MyButton on intilization, but PJAX injects #MyButton after initilization.

I hope you see the power of PJAX. I really do think this is the next big thing. I already use it in production and it is a huge timesaver and have really changed the way I do web applications. To be honest I tend to write much more C# than Javascript now, after PJAX. Simplicity at it’s best. PJAX have my vote for the no. 1 web technology of 2014.

The full source of this demo is available at GitHub: https://github.com/jhovgaard/nancy-pjax-demo.

Please leave a comment, I love feedback :-)

Do you still manage your web server through remote desktop or IIS Manager? Try Servant.io today!

Nancy.Security.Csrf.Enable(pipelines);

using Nancy;
using Nancy.Bootstrapper;
using Nancy.TinyIoc;

namespace NancyCsrfDemo
{
    public class Bootstrapper : DefaultNancyBootstrapper
    {
        protected override void ApplicationStartup(TinyIoCContainer container, IPipelines pipelines)
        {
            base.ApplicationStartup(container, pipelines);
            Nancy.Security.Csrf.Enable(pipelines);
        }
    }
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
    <body>
        <h1>Welcome to Nancy CSRF Demo, @ViewBag.Name</h1>
        <form action="/" method="POST">
            Name:<br/>
            <input type="text" name="name" value="@ViewBag.Name" />
            <input type="submit" />
            @Html.AntiForgeryToken()
        </form>
    </body>
</html>

<input type="hidden" name="NCSRF" value="AAEAAAD/////AQAAAAAAAAAMAgAAAD1OYW5jeSwgVmVyc2lvbj0wLjIyLjIuMCwgQ3VsdHVyZT1uZXV0cmFsLCBQdWJsaWNLZXlUb2tlbj1udWxsBQEAAAAYTmFuY3kuU2VjdXJpdHkuQ3NyZlRva2VuAwAAABw8UmFuZG9tQnl0ZXM+a19fQmFja2luZ0ZpZWxkHDxDcmVhdGVkRGF0ZT5rX19CYWNraW5nRmllbGQVPEhtYWM+a19fQmFja2luZ0ZpZWxkBwAHAg0CAgAAAAkDAAAAOrVPNrYs0YgJBAAAAA8DAAAACgAAAAI4qmisW7sYu2FlDwQAAAAgAAAAAsdnVjuuU1fzpb58LEjF1pcK98u9ENMjG0viyxLpvlv/CwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="/>

using Nancy;
using Nancy.Security;

namespace NancyCsrfDemo
{
    public class HomeModule : NancyModule
    {
        public HomeModule()
        {
            Get["/"] = p =>
            {
                return View["Index"];
            };

            Post["/"] = p =>
            {
                try
                {
                    this.ValidateCsrfToken();
                }
                catch (CsrfValidationException)
                {
                    return Response.AsText("Csrf Token not valid.").WithStatusCode(403);
                }
                
                ViewBag.Name = Request.Form.Name;
                return View["Index"];
            };
        }   
    }
}