Category: JavaScript

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!

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:

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).

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

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.

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.

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

There have been some interesting developments recently in the field of CSS pre-processors. CSS pre-processors work around the very limited syntax of CSS by allowing you to create your stylesheets using a more powerful, expressive syntax which then gets turned into plain CSS for consumption by all the main browsers. A couple of ones that I’ve come across are SASS and LESS. LESS is the one I’ve felt most comfortable with because it’s simply an augmentation of the CSS which allows you to incrementally introduce its syntax into your stylesheets.

…mixins, operations on colors and size, etc. Check out the lesscss.org homepage for more.

LESS was originally a Ruby gem, but now also has implementations on ASP.NET (dotlesscss.org) and PHP. LESS has now (inevitably) been re-implemented in JavaScript by Alexis Sellier (github.com/cloudhead/less.js). As well as supporting pre-processing *.less files into *.css via the command-line, it can also be actually run live, directly in your browser!

I’m not sure I’m quite ready to take the plunge running it live, in-browser on sites just yet, although maybe I shouldn’t be according to Dmitry Fadeyev:

Wouldn’t live processing lag? Not really. Two reasons for this. One: Less.js has been written from the ground up for great performance, so even browsers with poor JavaScript implementation should still run it very well (Less.js is about 40 times faster than the Ruby implementation—so suffice to say it’s a lot faster.). Two: On modern browsers that support HTML5, Less.js will cache the generated CSS on local storage, making subsequent page loads as fast as pure CSS.

Running on Windows

The command-line compiler lessc is targeted to *nix-based platforms and requires node.jswhich, the last time I checked, doesn’t run on Windows (UPDATE: it runs fine under Cygwin, there’s a nice simple standalone version here). But Windows has had the ability to run JavaScript directly since the 1990’s using Windows Script Host. So I took the latest distribution copy of less.js from GitHub at https://github.com/cloudhead/less.js/tree/master/dist/ and included it via a *.wsf file and stubbed/faked/implemented a few things like window, document and XMLHttpRequest that less.js assumes will be present (which are presumably provided by node.js?), and added a bit of command-line argument handling.

If you don’t specify an output.css the result is written to standard output. The -compress option minifies the output. I’ll look into implementing the other command-line arguments supported by lessc in due course.

I’ve added a couple of test files, so you can see if it’s working like so:

Future

I may look into hooking this into Visual Studio’s T4 support so that the *.css files are generated as soon as you save the *.less files in Visual Studio. (UPDATE: See Phil Haack’s T4CSS that does this, instead using the .NET port of LESS. Thanks to David De Sloovere for pointing this out.)

Update

Mark Lagendijk has created a nice little Windows GUI for the script. Check it out at http://winless.org.

It appears that with some later version of ADSI ADsDSOObject (or to give it its full title, the “OLE DB Provider for Microsoft Directory Services”) the query syntax strictness has been relaxed. In any case “Unspecifed error” appears to mean “Syntax error” in this case.