TypeScript Console is a bare-bones Chrome extension that allows one to execute TypeScript to the console.  It is split into two Ace editors — TypeScript on the right, JavaScript on the left. Typing into the TypeScript editor automatically interrupts it to JavaScript. Hitting ‘CTRL+Enter’ executes the code.

As usual — the code and the extension itself are on my GitHub. Once I add a few more features (history, smart indent) I’ll be adding it to the Chrome Store.

The post Chrome Extension: TypeScript Console appeared first on Sepier.

One small problem. Downloading them all is painful…really painful with all the clicking of the ‘Add Comic’ and ‘Next’ buttons. Don’t fret — there is an easier way. Just open a JavaScript console in your browser and run the following.

// Loop through all the pages (Next)
for (var page = 1; page < 20; page++) {
	//Trigger the click event on the 'Add Comic' button
    jQuery.each($('.addComicLink'), function (i, val) {
        if ($(val).text() == "Add Comic") {
            $(val).click();
        }
    });
    // Goto the next page of all sections
    for (var sec = 1; sec < 20; sec++) {
        GoToNextAdHocPage(sec);
    }
}

The post Download All Comixology Digital First Issue Comics: JavaScript Fun appeared first on Sepier.

The Katana Project is a server implementation of the Open Web Interface for .NET (OWIN) specification. In simple terms: It is a web server that implements an agreed upon standard for communication between the host (server), middleware  and your application .

For my current project, I needed a way for Katana to serve files directly from an assembly via embedded resources. Since Katana was designed to be very extensible – it is trivial to add the functionality that I needed. Katana provides a StaticFile middleware out of the box, so by injecting a custom FileSystemProvider we can serve files directly from an assembly.

We’ll start out by telling the StaticFile middleware to use our custom ResourceFileSystemProvider.

app.UseStaticFiles(options =>
{
    options.WithFileSystem(new ResourceFileSystemProvider());
});

For the actual ResourceFileSystemProvider – we need to implement IFileSystem. IFileSystem is an interface of just two methods, one to get information about a directory and the other to get information about a specific file. Both of these methods return a bool with an out parameter of type IFileInfo.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using Microsoft.Owin.FileSystems;

namespace Metrical.Providers
{
    public class ResourceFileSystemProvider : IFileSystem
    {
        public bool TryGetDirectoryContents(string subpath, out IEnumerable<IFileInfo> contents)
        {
            throw new NotImplementedException();
        }

        public bool TryGetFileInfo(string subpath, out IFileInfo fileInfo)
        {
            var flatPath = subpath.Replace('/', '.');
            var assembly = Assembly.GetExecutingAssembly();
            var assemblyName = assembly.GetName().Name;
            var path = String.Format("{0}{1}", assemblyName, flatPath);
            var resourceNames = assembly.GetManifestResourceNames();
            if (resourceNames.Contains(path))
            {
                fileInfo = new ResourceFileInfo(path);
                return true;
            }

            fileInfo = null;
            return false;
        }
    }
}

IFileInfo encapsulates information about a file (or directory). It also exposes a stream of the file contents. As you can see we just pass in a reference to the currently executing assembly and return the ManifestResourceStream.

using Microsoft.Owin.FileSystems;
using System;
using System.Reflection;

namespace Metrical.Providers
{
    public class ResourceFileInfo : IFileInfo
    {
        private string _filePath;
        private Assembly _assembly;

        public ResourceFileInfo(string file)
        {
            _filePath = file;
            _assembly = Assembly.GetExecutingAssembly();
        }

        public System.IO.Stream CreateReadStream()
        {
            return _assembly.GetManifestResourceStream(_filePath);
        }

        public bool IsDirectory
        {
            get
            {
                return false;
            }
        }

        public DateTime LastModified
        {
            get
            {
                return DateTime.Now;
            }
        }

        public long Length
        {
            get
            {
                using (var stream = CreateReadStream())
                {
                    return stream.Length;
                }
            }
        }

        public string Name
        {
            get
            {
                return _filePath;
            }
        }

        public string PhysicalPath
        {
            get
            {
                return _filePath;
            }
        }
    }
}

The post Extending Katana for fun and profit appeared first on Sepier.

A simple way to add the custom template is to move it out to it’s own JavaScript function. Not only does this help readability, if there is an exception, it will be easier to debug.

To do so, move your template out to a separate JavaScript function,

<script>
function exceptionTemplate(value) {
 if (value == "Flex")
   return "Flex";
 return "Service";
}
</script>

and then call it from within your Grid definition:

$(document).ready(function() {
        kendo.culture("en-US");
        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "OData/Entities.svc/ErrorEvents"
                },
                schema: {
                    model: {
                        fields: {
                            Timestamp: { type: "datetime" }
                        }
                    }
                },
            },
            columns: [ {
                    field: "Exception",
                    title: "Type",
                    template: '#= exceptionTemplate(Exception) #',
                    width:150
                }
            ]
        });
    });

The post Custom Kendo Grid Template appeared first on Sepier.

I love data. I love data visualizations more. As I throw more and more metrics, logs and data at Splunk, I need better ways of consuming this data and making it work for me.

One of the ways to visualize IP addresses is through their physical location.  A lot of web sites provide IP to geo-location tools, like IP-Address.org.

Although these physical locations are not perfect (a user may use NAT or a VPN) they give us a general location that can aid in answering some questions. Questions like:

• When is the ‘best’ time for schedule maintenance based on my users time zones?
• What is the average latency of my users in the UK?
• How many visitors do I have from China?

If you are storing your logs in Splunk, generating the geo-location information and plotting them on Google Maps couldn’t be easier. SPP has created a community Splunk application to handle all the hard work. To use it, it is as simple as installing the application, navigating to it in Splunk and piping in data.

The Google Maps application adds a new command ‘geoip’.  A simple query,

sourcetype="iis" | dedup dest_ip | geoip dest_ip

will generate the geo-location fields and if you are within the Google Maps Splunk application, it will also plot them on the map.

The post IP Geo-Location: Splunk & Google Maps appeared first on Sepier.

TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

In other terms, TypeScript is a source-to-source compiler with it’s output being proper JavaScript.

An example application in TypeScript [1] would compile to [2] in JavaScript.

function Greeter(greeting) {
this.greeting = greeting;
}

Greeter.prototype.greet = function() {
return "Hello, " + this.greeting;
}

var greeter = new Greeter({message: "world"});

var button = document.createElement('button')
button.innerText = "Say Hello"
button.onclick = function() {
alert(greeter.greet())
}

document.body.appendChild(button)

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();
var greeter = new Greeter("world");
var button = document.createElement('button');
button.innerText = "Say Hello";
button.onclick = function () {
    alert(greeter.greet());
};
document.body.appendChild(button);

As you can tell, the code between TypeScript and JavaScript, although look similar, are different. Even statements are on different lines. Although this example is small, with “application-scale” TypeScript the difference between the original code and JavaScript can be immense.

Since JavaScript is the code that actually runs in the browser, trying to manually decipher which variable or line goes with the original TypeScript, when actively debugging in a browser, can be a chore. This is where source maps comes into play.

A source map is a file that maps JavaScript back to it’s original state. A tutorial on source maps can be found on HTML5 Rocks.

If you are using @mkristensen‘s Web Essentials plugin to Visual Studio, you can enable sourcemaps via ‘TOOLS -> OPTIONS -> Web Essentials -> TypeScript’ and setting ‘Generate Source Map’ to true.

If you are using TypeScript on the command line, you can just in pass the “-sourcemap” switch.

Now that we have the actual source map, we will now need to enable source map usage in Chrome. With Developer Tools open, click the bottom settings gear. Under the General tab you will see a check-box for ‘Enable source maps’.

Now that we have source map usage all setup — when we reload the page in Chrome, our Developer Tools should show both *.ts files and *.js files in the Sources tab. Setting a break point in the JavaScript source will automatically set a breakpoint in our TypeScript file. Even watching variable and the Call Stack is available in our TypeScript file.

The post TypeScript & Source Maps appeared first on Sepier.

• NLog and Log4Net providers
• Exceptional state handling if the Splunk server goes down
• Local storage if the AppDomain that Nulunk is running in, is recycled/collapses

I’ll be working on Nulunk continually as the Splunk SDK for C# matures and adds features.

The post Nulunk now on GitHub appeared first on Sepier.

Splunk now occupies a special place in my toolbox. What is Splunk?

Splunk is software to search, monitor and analyze machine-generated data by applications, systems and IT infrastructure at scale via a web-style interface. Splunk captures, indexes and correlates real-time data in a searchable repository from which it can generate graphs, reports, alerts, dashboards and visualizations.

Although is has some downfalls (ie, it is pricey past the free tier), the ability to run ad-hoc queries, send alerts on custom events, and customize reports has earned itself a place in my toolbox. I only had one problem with adding Splunk to my toolbox; my toolbox was getting a bit full. I had tools of all types, even some specialty tools that did one job, and one job well. Graphite/Statsd was one of these tools.

StatsD is a network daemon that runs on the Node.js platform and listens for statistics, like counters and timers, sent over UDP and sends aggregates to one or more pluggable backend services.

and Graphite:

Graphite does two things:

1. Store numeric time-series data
2. Render graphs of this data on demand

What Graphite does not do is collect data for you, however there are some tools out there that know how to send data to graphite. Even though it often requires a little code, sending data to Graphite is very simple.

In simple terms, Statsd is the communication mechanism to send events (time series data) whereas Graphite is the backend. I used Graphite & Statsd to send & store time-series events/counters with the ability to view the aggregated values in graphs. Those tools helped answer questions like ‘How many users have logged in, in the preceding 5 minutes?” or even “How many exceptions has the services hit in the past 20 minutes?” in real-time.  Any question I had, I could add a few lines of code to app and have Graphite answer it.

At the same time, I was sending almost the same data to Splunk. Splunk was only used as a log store. A place to aggregate all the logs from Apache, Rack, Ruby, IIS, and Event-Log. A great abyss that was only used “after-the-fact”, not in realtime.

With the introduction of JSON being a first class citizen in Splunk 5.0, their commitment to their REST API and more robust real-time support, I set out to replace Graphite and Statsd with Splunk. Splunk easily replaced Graphite as the backend. Just send Splunk data and it will consume, index and allow you to query it. The only problem I faced was replacing Statsd. I could easily write the counters/events to a log file and have Splunk parse it, but this wasn’t elegant. So I turned to their REST API.

Splunk’s REST API and SDKs (language specific wrappers around their REST API) seemed elegant.  Thus I began to write Nulunk and Rulunk. Both of these solve the same problem, only with Nulunk solving it for .NET and Rulunk solving it for Ruby. They both solve the problem of structuring time-series and counter data, buffering it and then sending the data to Splunk to be stored and queried. With Splunk doing the heavy lifting Nulunk/Rulunk just have to sort out the small details on the application side.

Although I have been using both in my web applications — the ability to use Splunk as a Backend has replaced a few tools in my toolbox and opened the door for more uses. I’ll be open sourcing both Nulunk and Rulunk over Christmas. They are both pre-1.0 so I wouldn’t recommend using them in production.

The post Splunk as a Backend: Nulunk & Rulunk appeared first on Sepier.

The post Web Essentials & Typescript 0.8.1 appeared first on Sepier.

One of the few hiccups I’ve noticed with Visual Studio 2012 and Entity Framework 5 is a very noticeable hang when compiling. When the solution is rebuilt, a 5-10 second hang happens before the build even starts. The same project in Visual Studio 2010 and Entity Framework 4 didn’t have this problem. To isolate the problem from either EF5 or VS2012; I unloaded the EF5 project from the solution, rebuilt and guess what? No more unresponsive hanging. First time was a charm. With that knowledge, it was time to narrow it down to either the main model (EDMX) or one of the T4 templates. Excluding these files one at a time from the project and rebuilding lead me to the problem file; the main model (EDMX) file. Knowing that it was the EDMX file — my first guess was model validation. I was right.

Model validation, amongst many other feats, provides compile time checks against your model. I am using ‘DB-first’ models, so I can disable model validation without many ramifications. Even if you are using ‘code-first’ models, I recommend turning this off if you are not actively developing your models or migrating your DB. After I disabled model validation, my 390+ EF models and the rest the code compiled without a hitch.

Disabling Model Validation within Visual Studio 2012 and Entity Framework 5

1. Open the EDMX in design view.
     

   

2. In the EDMX properties, set ‘Validate On Build’ to false.
   
   

The post VS2012 & EF5: Hanging on build appeared first on Sepier.