Comet with node.js and V8

http://amix.dk/blog/post/19484

A presentation (slideshow, no audio or video) on node.js, a JavaScript web-server running on Google’s V8 engine. Very interesting concept – using an event-based system vastly simplifies the code needed to serve data. There’s plenty of discussion about node.js on the interwebs at the moment – hopefully it will grow and become more than just a curiosity.

Gallery of Processor Cache Effects

http://igoro.com/archive/gallery-of-processor-cache-effects/

Interesting blog post about the effects that processor caches may have on performance. Examples are in C#, but really apply to any language.

Microsoft’s Creative Destruction

http://www.nytimes.com/2010/02/04/opinion/04brass.html?pagewanted=1&ref=opinion

Opinion piece from the NYTimes regarding Microsoft’s recent lack of innovation (at least, in the area of shiny gadgets). Written by an ex-vice-president of Microsoft.

How Many Passes?

http://blogs.msdn.com/ericlippert/archive/2010/02/04/how-many-passes.aspx

Summary article from Eric Lippert describing the differences between the C# compiler and a “traditional” compiler, and listing the various passes made over the symbol tree.

A Deadlock Holiday

http://www.theregister.co.uk/2009/12/10/verity_stob/

Very funny tongue-in-cheek article about the current state of parallel / multicore coding techniques, from Verity Stob of The Register.

A Maturity Model for Source Control

http://lucas-ward.blogspot.com/2010/02/maturity-model-for-source-control-scmm.html

Semi-opinion piece assigning levels to types of source-control systems – from “No SCM” through “Clunky” to “Speedy, Invisible, and Highly Capable”.

I’m sure most web developers know about image rollovers (using separate images for normal and “hover” states of anchors). Hopefully also the use of “CSS Sprites” is becoming better known – combining the normal and rollover images into a single physical image file to speed up load times and reduce flicker. I won’t cover those techniques here.

However, if you want the anchor or button to size to its contents, it’s more difficult to make use of these techniques. Here’s one way.

(The final result – view demo).

Start With Markup

Before diving into fancy techniques, get the markup down as you would like it, if you didn’t have to style anything.

<a href="..." class="rollover">Button Text</a>

Ideally we want the markup to be clean and not compromised by styling requirements.

Handle Degradation Gracefully

My technique is going to make use of JavaScript, so let’s handle the case where the user has it disabled for some reason. Here’s some very basic CSS to give the button a simple style:

a.rollover
{
  background-color: #00f;
  border: solid 1px #000;
  color: #fff;
  font-weight: bold;
  padding: 4px;
  text-decoration: none;
}

a.rollover:hover
{
  background-color: #008;
}

Add Styling Naively

Next, I’m going to add some rollover styling – but in a way that isn’t complete. Firstly I created a simple rollover image, but made it very wide – it needs to be at least as wide as the widest button is ever going to be:

I’m going to define my rollover styling against a class selector of “extra” – you’ll see where that comes from in a moment.

a.rollover.extra
{
  background: url(buttons.png) repeat-x left 0;
  border: none;
  height: 27px;
  padding: 23px 40px 10px 40px;
  position: relative;
}

a.rollover.extra:hover
{
  background-position: left -57px;
}

Note that we’ve had to undo some of the styles applied previously, such as border.

We’re kind of getting there, but our buttons won’t look correct on the right-hand-side.

Use JavaScript To Add Styling Markup

To fix the right-hand end-caps, we need to modify our markup. However, I really don’t want to have to do that on my pages – afterall, I might change my mind about the site styling.

Here I recommend using JavaScript to tweak at runtime the markup to what we need. I’m going to use jQuery for this:

$(function() {
  $('.rollover')
    .addClass('extra')
    .append('<div class="cap"></div>');
});

Basically, when the pad is ready, I find all elements with class “rollover”, add another class (“extra”), and append into the rollover button an empty span element which has a class of “cap”.

That class “extra” triggers the image rollovers. The “cap” span can be styled as follows:

a.rollover.extra .cap
{
  background: url(buttons.png) no-repeat right 0;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
}

a.rollover.extra:hover .cap
{
  background-position: right -57px;
}

And voila!

If you’d like to see this technique in action, please view the demo.

Stage One: No Access Control, Massive Pollution

My first JavaScript files looked a lot like this:

function myPrivateMethod()
{
  ...
}

function myPublicMethod()
{
  ...
  myPrivateMethod();
  ...
}

My functions were just dumped straight into the global context, “polluting” it, and there was no kind of access control – all methods could be called from anywhere.

Stage Two: Coding-Convention Access Control, Minimal Pollution

My next strategy for defining function was to create a single object in the global scope, then add functions as properties of that object. I still hadn’t figured out access control, other than by using a naming convention:

if (typeof MyNamespace == 'undefined') {
  MyNamespace = {};
}

MyNamespace._privateMethod = function() {
  ...
}

MyNamespace.publicMethod = function() {
  ...
  MyNamespace._privateMethod();
  ...
}

While this is better than before, it’s still not true access control.

Stage Three: Access Control, Plus Namespaces

The latest way I’ve discovered for arranging code gives namespaces and true access control.

var MyNamespace = window.MyNamespace || {};

MyNamespace.MyModule = function() {

  var privateMethod = function() {
    ...
  };

  return {

    publicMethod : function() {
      ...
      privateMethod();
      ...
    }

  };
}();

I’d seen examples like the above back when I first started coding JavaScript, but I don’t like cargo-cult-copy-paste code: if I don’t understand code, I don’t use it. It’s taken me this long to understand every line in the above. Now that I do, I can start to refactor my existing code where necessary to use this pattern.

The interesting points in the above code example are:

• The first line is a much more compact way of determining whether the single global variables is defined already (for example from another code file), and if it’s not, creating it.
• The ‘module’ property is assigned from the immediate invocation of an anonymous function. This anonymous function returns an object whose properties are the functions we want to make public.
• The private functions are created as inner functions of the outer anonymous function. The public functions retains access to these private functions via the magic of closures.

It continually amazes me how the JavaScript langauge manages to allow a developer so many features (in this article I’ve covered public/private and namespaces), without needing to include them as first-class keywords in the langauge.