Line length

Basic wrapping

Call me Ishmael. Some years ago, never mind how long precisely, having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.

Formatted text

Javascript Source

The javascript source, should work in any ES5 compatible browser:

function prettyPrint(text, lineLength) {
    var words = text.split(' ');
    var lengths = words.map(function(w) { return w.length; });
    var opt = [];
    var index = [];
    for (var j = 0; j < words.length; j++)
    {
        // Let i be the index that minimizes the expression slack(i, j) + opt[i – 1]
        var minIndex = -1;
        var minError = Number.MAX_VALUE;
        for (var i = 0; i <= j; i++)
        {
            // Sum the lengths of words from i to j
            var len = sum(lengths.slice(i, j + 1).map(function(n) {return n + 1; })) - 1;

            // Slack is the distance from the end of the line
            var slack = lineLength - len;

            // If it is negative, we have picked up too many words
            if (slack < 0) continue;

            // Error is equal to the slack squared plus the previous optimal error
            var error = slack * slack;
            if (i > 0) error += opt[i - 1];

            // Save only the lowest error
            if (error < minError)
            {
                minError = error;
                minIndex = i;
            }
        }
        opt[j] = minError;
        index[j] = minIndex;
    }

    // The minimum slack will be in opt[n – 1]
    // To reconstruct the lines:
    var x = words.length - 1;
    var lines = [];
    while (x >= 0)
    {
        // Add line consisting of words from index[x] to x
        lines.unshift(words.slice(index[x], x + 1).join(' '));
        x = index[x] - 1;
    }
    return lines.join('\n');
}

function sum(numbers) {
    var s = 0;
    for (var i = 0; i < numbers.length; i++) {
        s += numbers[i];
    }
    return s;
}

window.onload = function() {
    var pre = document.getElementById('formatted'), 
        text = document.getElementById('raw-text'), 
        length = document.getElementById('line-length');

    var ts = function() {
        text.setAttribute('cols', length.value);
        pre.innerText = (prettyPrint(text.value, Number(length.value)));
    };

    ts();

    length.onchange = length.onclick = text.onchange = text.onkeyup = text.onclick = ts;
};

var toTranslate = this.$element.find('.translatable').not('.translated');

The purpose of the code is to find elements that can be translated, but haven’t been already. My suspicion was on the .not() addition, and lo and behold, inlining the clause into the first selector dramatically increased performance:

var toTranslate = this.$element.find('.translatable:not(.translated)');

But, don’t take my word alone for it; check out this jsPerf testing jQuery CSS3 :not vs .not(). The creator of the test summed it up nicely:

So the outcome is that it’s faster to use a CSS3 selector in virtually all browsers (except IE8), by a factor of around 2-3.

Where performance isn’t critical, however, heeding this advice about readability from the jQuery :not() Selector documentation would be wise:

The .not() method will end up providing you with more readable selections than pushing complex selectors or variables into a :not() selector filter. In most cases, it is a better choice.

Example:

text = “The theory of the big bang was proposed in…”
query = “Big Bang Theory”
result = “The <b>theory</b> of the <b>big</b> <b>bang</b> was proposed in…”
result as html = The theory of the big bang was proposed in….

C# version:
(note: you may want to return an HtmlString instead to make it easier to call from a view.)

string HighlightSearchTerms(string text, string query)
{
    var terms = query.Split(new[] {' '}, StringSplitOptions.RemoveEmptyEntries).Select(s => s.Replace("|", "\\|"));
    var regex = new Regex("(" + string.Join("|", terms) + ")", RegexOptions.IgnoreCase);
    return regex.Replace(text, "<b>${0}</b>");
}

Javascript version:
(note: Array.prototype.map is in ES5 and may require a shim.)

function highlightSearchTerms(text, query) {
    var terms = query.split(' ').map(function(s) { return s.replace('|', '\\|'); });
    var regex = new RegExp('(' + terms.join('|') + ')', 'gi');
    return text.replace(regex, '<b>$&</b>');
}

TypeScript version:
(just the JS version with type annotations)

function highlightSearchTerms(text: string, query: string): string {
    var terms = query.split(' ').map(function(s) { return s.replace('|', '\\|'); });
    var regex = new RegExp('(' + terms.join('|') + ')', 'gi');
    return text.replace(regex, '<b>$&</b>');
}

Download the "SyntaxHighlighter Evolved: TypeScript Brush" plugin

Here is an example:

declare var jQuery: any;

module Sayings {
    export class Greeter extends BaseGreeter implements IGreeter {
        private greeting: string;

        constructor (message: string) {
            this.greeting = message;
        }

        public greet() {
            var s = "Hello, " + this.greeting;
            return s;
        }
    }
}

Note: you can try out the TypeScript language easily, in your browser, with the TypeScript Playground.

Classes and modules

Per the language specification:

TypeScript syntax includes several proposed features of Ecmascript 6 (ES6), including classes and modules.

Modules can export classes, functions, and variables, and classes can have static and instance members. Classes members can have private or public scope, which is enforced by the compiler. As an example:

export module Sayings {
    export class Greeter {
        private greeting: string;

        constructor(greeting: string) {
            this.greeting = greeting;
        }

        public greet(): void {
            alert(this.greeting);
        }
    }
}

Inheritance

Classes can extend a single base class to inherit and optionally override all its members. Overridden methods in the derived class must have a compatible signature to the base class implementation.

class A {
    x() { alert('a.x'); }
    y() { alert('a.y'); }
}

class B extends A {
    y() { alert('b.y'); }
}

new A().x(); // prints 'a.x'
new A().y(); // prints 'a.y'
new B().x(); // prints 'a.x'
new B().y(); // prints 'b.y'

Lambdas

Lambdas are not only shortened syntax for the function keyword, but also capture the this variable automatically if you are inside a class.

class Greeter {
    greeting: string = 'hello ';

    public makeGreeter(): (name: string) => string {
        return name => this.greeting + name;
    }
}

Interfaces and Structural Typing

Interfaces are simple to use with internal and external code, and is checked using structural typing. Classes can implement interfaces to enforce checking, and interfaces can extend other interfaces.

class Greeter {
    greet() { alert('Hello'); }
}   
interface IGreeter {
    greet();
}

var greeter: IGreeter = new Greeter();
greeter.greet();

Type inference

TypeScript has extensive type inference. In the following example, the function greet will be typed (number) => string:

class Greet {
    greet(x: number) {
        var s = ' greetings';
        return x + s;
    }
}

Static and member vars, return types, local variables, all are type inferred.

Javascript is TypeScript

TypeScript is a superset of Javascript, so converting you codebase is instant. Once you are using the TypeScript compiler, you can begin adding type annotations to enable more robust type checking.

• $linq - http://jscriptlinq.codeplex.com/
• jLinq - http://hugoware.net/projects/jlinq
• from.js - http://fromjs.codeplex.com/
• linq.js - http://linqjs.codeplex.com/
• LINQ to JavaScript - http://jslinq.codeplex.com/
• JSINQ - http://jsinq.codeplex.com/
• Underscore.js - http://underscorejs.org/#chaining

I’d love to hear about any others!

public virtual ActionResult Login(ActionResult redirectAction = null)
{
    ...
}

The goal was to have an T4MVC style helper for passing in an ActionResult instead of an untyped path. This was a bad idea, as ActionResult is an abstract class. When I hit http://localhost:2995/Account/Login, the MVC framework tried to instantiate ActionResult to fill in the default value for redirectAction. I simply reverted the parameter back to a string, and all was well.

public virtual ActionResult Login(string redirectPath = null)
{
    redirectPath = redirectPath ?? Url.Action(MVC.Home.Index());
    ...
}

d:\temp\2pirqzul.5yz\temp\root\898a687c\8681620c\App_Web_jfuizczv.0.cs(27): error CS0234: The type or namespace name 'Models' does not exist in the namespace 'DealBoxy' (are you missing an assembly reference?)

While normally a straightforward error, this one was confusing, because I was certain that I had referenced the DealBoxy project correctly.

It turns out that DealBoxy was compiling to an exe, and apparently ASP.NET won’t load exes the same way it will dlls. Changing the Output type to Class Library in the Application tab of the project settings did the trick.

using Jurassic;

public string PrecompileHandlebarsTemplate(string name, string template)
{
    var engine = new ScriptEngine();
    engine.ExecuteFile(@"handlebars-1.0.0.beta.6.js");
    engine.Execute(@"var precompile = Handlebars.precompile;");
    return string.Format("var {0} = Handlebars.template({1});", 
        name, engine.CallGlobalFunction("precompile", template).ToString());
}

The function can be used as follows:

PrecompileHandlebarsTemplate("greet", "<div>{{hello}} world!</div>");

And will output a javascript function as a string, something like this:

var greet = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
  helpers = helpers || Handlebars.helpers;
  var buffer = "", stack1, foundHelper, self=this, functionType="function", helperMissing=helpers.helperMissing, undef=void 0, escapeExpression=this.escapeExpression;


  buffer += "<div>";
  foundHelper = helpers.hello;
  stack1 = foundHelper || depth0.hello;
  if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
  else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "hello", { hash: {} }); }
  buffer += escapeExpression(stack1) + " world!</div>";
  return buffer;});

Which you can then use easily in the rest of your javascript (after including handlebars.runtime.js):

$('body').append(greet({ hello: 'Bonjour' }));

You can find a working example at JS Bin.

using System;
using System.Threading.Tasks;
using RestSharp;

namespace RestSharpEx
{
    public static class RestClientExtensions
    {
        private static Task<T> SelectAsync<T>(this RestClient client, IRestRequest request, Func<IRestResponse, T> selector)
        {
            var tcs = new TaskCompletionSource<T>();
            var loginResponse = client.ExecuteAsync(request, r =>
            {
                if (r.ErrorException == null)
                {
                    tcs.SetResult(selector(r));
                }
                else
                {
                    tcs.SetException(r.ErrorException);
                }
            });
            return tcs.Task;
        }

        public static Task<string> GetContentAsync(this RestClient client, IRestRequest request)
        {
            return client.SelectAsync(request, r => r.Content);
        }

        public static Task<IRestResponse> GetResponseAsync(this RestClient client, IRestRequest request)
        {
            return client.SelectAsync(request, r => r);
        }
    }
}

They can be used easily in the Async CTP or .NET 4.5 as follows:

var client = new RestClient("http://example.org");
var request = new RestRequest("product/42", Method.GET);
var content = await client.GetContentAsync(request);

Enjoy!