21 Comments

When presenting on JavaScript or jQuery I'll typically spend a lot of time in the Chrome Developer Tools window at the console. The problem is that, depending on the projection facilities and the resolution the fonts can be too small to read.

The Chrome devtools themselves are built out of HTML and CSS so I started digging for how I could edit the stylesheet. You can view the default devtool stylesheet by navigating to chrome-devtools://devtools/devTools.css. You can't easily edit this though (it's probably buried as a resource within Chrome), but you can override its styles using the standard custom user stylesheet Custom.css!

Custom.css lives at:

  • Windows: C:\Users\<user>\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets
  • Mac OS X: ~/Library/Application Support/Google/Chrome/Default/User Stylesheets/

The style(s) to add and override in Custom.css are:

body.platform-mac .monospace, body.platform-mac .source-code {
    font-family: Monaco, monospace;
}

/* Keep .platform-mac to make the rule more specific than the general one above. */
body.platform-mac.platform-mac-snowleopard .monospace,
body.platform-mac.platform-mac-snowleopard .source-code {
    font-size: 11px !important;
    font-family: Menlo, monospace;
}

body.platform-windows .monospace, body.platform-windows .source-code {
    font-size: 12px !important;
    font-family: Consolas, Lucida Console, monospace;
}

body.platform-linux .monospace, body.platform-linux .source-code {
    font-size: 11px !important;
    font-family: dejavu sans mono, monospace;
}

A nice touch is that the styles update automatically as you save Custom.css so you can tweak it on the fly to get the right font-size for your audience.

Chrome DevTools with a larger font-size

Hope that helps!

12 Comments

As documented in recent posts, I've been tinkering getting the LESS and CoffeeScript compilers running on Windows Script Host. I've now got round to wrapping these up as ASP.NET HTTP Handlers so you can easily use them in ASP.NET-based websites. You simply reference the *.less and *.coffee files and they get served up as CSS and JavaScript directly. For example:

<link href="content/style.less" rel="stylesheet">
<script src="content/site.coffee"></script>

No need to install add-ins into Visual Studio or add build steps to your project. The main downside is that it won't run on non-Windows platforms under Mono (although I'm tempted adapt it to use Mozilla's SpiderMonkey JavaScript Shell).

If you're running Visual Studio 2010 then simply use the LessCoffee NuGet package.

PM> Install-Package LessCoffee

If you're using Visual Studio 2008 you'll need follow these manual steps:

  • Copy LessCoffee.dll to your web application's /bin directory
  • Add the following entries to your web.config file:
    <system.web>
        <httpHandlers>
            <add path="*.coffee" type="DotSmart.CoffeeScriptHandler, LessCoffee" verb="*" validate="false"/>
            <add path="*.less" type="DotSmart.LessCssHandler, LessCoffee" verb="*" validate="false"/>
        </httpHandlers>
    </system.web>

    <!-- IIS 7 -->
    <system.webServer>
        <validation validateIntegratedModeConfiguration="false"/>
        <handlers>
            <add path="*.coffee" type="DotSmart.CoffeeScriptHandler, LessCoffee" verb="*" name="DotSmart.CoffeeScriptHandler"/>
            <add path="*.less" type="DotSmart.LessCssHandler, LessCoffee" verb="*" name="DotSmart.LessCssHandler"/>
        </handlers>
    </system.webServer>

If you're using Windows 2003/IIS 6 then you will need to map the file extensions *.less and *.coffee to aspnet_isapi.dll.

The source is on GitHub, obv: https://github.com/duncansmart/LessCoffee

2 Comments
tl;dr: You can compile CoffeeScript on Windows with zero third-party dependencies.

A while back I did a post on running the LESS.js compiler on Windows using the venerable and ubiquitous Window Script Host (WSH: providing JavaScript console scripting since Windows 98... when John Resig was still in 8th grade). At the time I tried something similar to generate JavaScript from the wonderful CoffeeScript language, but I couldn't get it working due to what I assumed were shortcomings in WSH's JScript engine. There are plenty of other options out there for compiling CoffeeScript, but incur various third-party dependencies as detailed in this StackOverflow question.

But on a whim the other day I revisited it and thankfully now it does work on plain old WSH without any coaxing (not sure what changed, or what I was doing wrong last time). I took the full browser-based coffee-script.js and wrapped it with a simple *.wsf and batch file to handle command-line options.

Download

It's on github, natch: https://github.com/duncansmart/coffeescript-windows

Usage

To use it, invoke coffee.cmd like so:

coffee input.coffee output.js

You can also pipe to and from it if you are so inclined via stdin/out. Errors are written to stderr.

In the test directory there's a version of the standard CoffeeScript tests which can be kicked off using test.cmd. Note that the test just attempts to compile the standard set of  *.coffee test files but doesn't execute them.

Hope it helps; comments appreciated!

4 Comments

With the release of IronJS 0.2, the code below is the result of a 30-minute play I had this morning, which shows how easy it is to embed a fully .NET JavaScript runtime in your application by simply referencing IronJS.dll.

It’s changed quite a from prior versions and I think you’ll see it has become much easier to host since  Dan Newcombe’s experiments last year.

//reference IronJS.dll
using System;
using System.IO;

class IronJsDoodles
{
    static void Simple()
    {
        var context = new IronJS.Hosting.CSharp.Context();
        object result = context.Execute("1 + 2;");

        Console.WriteLine("{0} ({1})", result, result.GetType());
        // "3 (System.Double)"
    }

    static void InteractingWithGlobal()
    {
        var context = new IronJS.Hosting.CSharp.Context();

        context.SetGlobal("a", 1d);
        context.SetGlobal("b", 2d);
        context.Execute("foo = a + b;");

        double foo = context.GetGlobalAs<double>("foo");

        Console.WriteLine(foo);
        // "3"
    }

    static void AddingHostFunctions()
    {
        var context = new IronJS.Hosting.CSharp.Context();

        // Effectively the same as context.CreatePrintFunction() :-)
        var print = IronJS.Native.Utils.createHostFunction<Action<string>>(context.Environment,
            delegate(string str)
            {
                Console.WriteLine(str);
            });
        context.SetGlobal("print", print);

        context.Execute("print('Hello IronJS!')");
    }
}

Hope it helps you get started.

10 Comments

I created a very simple Google Chrome extension that:

  • Allows you to search Amazon UK with a right-click
  • Switch back and forth between the UK and US versions of a page

Install it from the Chrome Extensions site.

The latter feature I find myself using all the time. If you follow, say, a book recommendation link to the .com site, but you want to buy  it on the .co.uk site. Alternatively, you may be reading a handful of reviews on the UK site, but over on the US site, there are lots more. When you’re on the Amazon.co.uk/.com site a “page action” icon will appear which, when clicked, will simply replace the amazon.co.uk in the URL with amazon.com or vice-versa.

It was incredibly simple to create. (It took longer to create the icons than write the code!) Extensions are essentially web pages that run in the background and have access to an API for interacting with Chrome: e.g. chrome.contextMenus, chrome.tabs, etc

For example: the search menu was created like so:

chrome.contextMenus.create({
    title: "Search Amazon.co.uk for '%s'",
    contexts:["selection"],
    onclick: function (info, tab) {
        var query = info.selectionText;
        chrome.tabs.create({
            selected: true,
            url: 'http://www.amazon.co.uk/s/ref=nb_sb_noss?url=search-alias%3Daps&amp;field-keywords=' + encodeURIComponent(query)
        });
    }
});

To look at the rest of the source go to the install page, right click the Install button, save the CRX file and unzip it.

In future, I may add an options page so it’s not hard-coded for the UK/US sites and to selectively enable/disable the features.

Hope you find it as useful as I do.