A slug is a way to represent a title with a limited charset (only lowercase letter and dash) to be inserted in the url. Even if it is a common function there is no good enough implentation when you Google for it.

Here are the features I needed:

  • No multiple dashes. ---- is converted to -
  • No wrapping dashes. -title- is converted to title
  • Basic support for internationalization. Coût d'éclat is converted to cout-d-eclat Don't look at the spelling mistake!
  • Basic support for common signs. 13$ & 12€ is converted to 13-dollar-and-12-euro

Demo

You can try the demo and see if it fits your needs.

Code

var keys = keys || function (o) { var a = []; for (var k in o) a.push(k); return a; };
 
var slug = function (string) {
//  var accents = "àáäâèéëêìíïîòóöôùúüûñç";
  var accents = "\u00e0\u00e1\u00e4\u00e2\u00e8"
    + "\u00e9\u00eb\u00ea\u00ec\u00ed\u00ef"
    + "\u00ee\u00f2\u00f3\u00f6\u00f4\u00f9"
    + "\u00fa\u00fc\u00fb\u00f1\u00e7";
 
  var without = "aaaaeeeeiiiioooouuuunc";
 
  var map = {'@': ' at ', '\u20ac': ' euro ', 
    '$': ' dollar ', '\u00a5': ' yen ',
    '\u0026': ' and ', '\u00e6': 'ae', '\u0153': 'oe'};
 
  return string
    // Handle uppercase characters
    .toLowerCase()
 
    // Handle accentuated characters
    .replace(
      new RegExp('[' + accents + ']', 'g'),
      function (c) { return without.charAt(accents.indexOf(c)); })
 
    // Handle special characters
    .replace(
      new RegExp('[' + keys(map).join('') + ']', 'g'),
      function (c) { return map[c]; })
 
    // Dash special characters
    .replace(/[^a-z0-9]/g, '-')
 
    // Compress multiple dash
    .replace(/-+/g, '-')
 
    // Trim dashes
    .replace(/^-|-$/g, '');
};

Bonus

If you are bored, here is a little exercise for you. Can you find a and b such as

a >= b && a < = b
// true
 
a == b
// false

Working on the World of Raids Guild Recruitment I needed to make sure the user was really member of the guild he claimed to represent. Since there is no official API and we don't want to ask for the user login and password, we had to find an other way.

The idea is to take advantage of the official Armory. When the user logs off the game, his character profile is updated on the website. To make sure the user is who he pretends to be, we are going to ask him to make a change on his character, wait for the armory to update and verify.

Since it's a tool that can be useful to anyone, we decided to make it a standalone service with an open API. If you have a World of Warcraft website and feel the need to verify that your users are genuine, this is your chance!

It has been in activity since the launch of the recruitment tool. So far 100 conflicts have been automatically resolved thanks to this tool.

Check out WoW Genuine.com.

BinaryReader is buggy and no longer maintained. Check out jDataView for an up to date version.

With WebGL coming in, it is important to be able to deal with binary data files like the models. Since there is no such thing on the internet right now I decided to make my own. The javascript BinaryReader library tries to mimic the C# BinaryReader.

The code is mostly based on the binary-parser class from Jonas Raoni Soares Silva. I've added the position management and re-factored the code to remove the with syntax.

In order to load a file into a string, you have to add req.overrideMimeType('text/plain; charset=x-user-defined'); in the Ajax XMLHttpRequest. To read more about this technique, see the Mozilla Developer Center. Here is an overview of the compatible browsers.

  • Chrome 4.0.295.0: Works
  • Firefox 3.5.7: Works
  • Safari 4.0.4: Works
  • Internet Explorer 8: Does not work. Doesn't have the overrideMimeType method.
  • Opera 10.10: Does not work. Have the overrideMimeType method but doesn't take it in account.

I hope this will help you to parse binary files!

BinaryReader is buggy and no longer maintained. Check out jDataView for an up to date version.

Download

API

Constructor

  • new BinaryReader(data: String) - Create a BinaryReader with the specified file.

Read Methods

  • BinaryReader.readChar()
  • BinaryReader.readString(length: Number)
  • BinaryReader.readInt8()
  • BinaryReader.readUInt8()
  • BinaryReader.readInt16()
  • BinaryReader.readUInt16()
  • BinaryReader.readInt32()
  • BinaryReader.readUInt32()
  • BinaryReader.readUInt32()
  • BinaryReader.readFloat()
  • BinaryReader.readDouble()

Position Methods

  • BinaryReader.seek(pos: Number) - Go to a specific position (in Byte) in the file
  • BinaryReader.getPosition() - Returns the actual position (in Byte) in the file
  • BinaryReader.getSize() - Returns the size (in Byte) of the file

Exception

  • Error("Index out of bound") - When you try to read something that is beyond the end of the file.
BinaryReader is buggy and no longer maintained. Check out jDataView for an up to date version.

Example - Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// Code from https://developer.mozilla.org/En/Using_XMLHttpRequest#Receiving_binary_data
function load_binary_resource(url) {
	var req = new XMLHttpRequest();
	req.open('GET', url, false);
	// The following line says we want to receive data as Binary and not as Unicode
	req.overrideMimeType('text/plain; charset=x-user-defined');
	req.send(null);
	if (req.status != 200) return '';
	return req.responseText;
}
 
// Load the file
var file = load_binary_resource('author.gif');
 
// Create the Binary Reader
var reader = new BinaryReader(file);
 
// Read some informations
var tag		= reader.readString(6);
var width	= reader.readUInt16();
var height	= reader.readUInt16();
 
// Move around the file and try to read what is there
reader.seek(parseInt('FA', 16));
var random	= reader.readFloat();
 
console.log(
	tag,	// GIF89a
	width,	// 16
	height,	// 16
	random	// 66.01171875
);

Existing Dispatch Methods

Dispatch is the process of mapping a function call to a specific function based on its arguments. Most of the time this is done at runtime through the binding phase, however it usually lacks of modularity.

Dispatch by Type

The first way dispatch has been implemented is through function overloading. Two functions share the same name and depending on the type of the argument, a choice will be made to call the right one.

int   sqr(int i)   { return i * i; } // int version
float sqr(float i) { return i * i; } // float version

When entering the Oriented Object world, there is a more powerful way to dispatch that is not only based on the type but also the type hierarchy. You can allow an object of type A to use the method implementation of one of its children.

class A { public: virtual void print() = 0; };
 
class B : public A { public: void print() { std::cout < < "B" << std::endl; }; };
class C : public A { public: void print() { std::cout < < "C" << std::endl; }; };
 
void doPrint(A& a) {
  // A doesn't have a definition of the print method
  // There is an implicit dispatching to determine which of the B::print or C::print 
  // will be called. This is done at runtime
  a.print();
}

This is a single dispatch since we could see the print function this way: void print(B this) { ... }. In C++ we are limited to only one dispatch, even if Stroustrup proposed a way to support multimethods in C++. The main problem is that it's being limited to types.

Dispatch by Constant Value

There are ways to use other criteria in order to dispatch, for example the use of numerical constants. In C++ the way to do it is to use templates.

// General case
template < int N >
struct fact {
  enum { value = N * fact< N - 1 >::value };
};
 
// Specialization for n = 0
template <>
struct fact< 0 > {
  enum { value = 1 };
};

You have a code that will run differently depending on the parameter. We can now write functions that work for specialized types and that takes in account their type hierarchy and for specialized cases represented with numerical constants.

If you want to do fancier things, you are stuck! Your only way to achieve the result you expect is to write custom branching yourself. This is where Full dispatch comes in action.

Full Dispatch

Full Dispatch instead of redirecting to the right function based on hard-coded parameters such as the type or the equality of the argument with some constant, allows you to provide a function for each argument.

This way, you will be able to dispatch the function based on the criterion you want. You are no more stuck with a special subset of the language.

You would like to write something like this:

int fact(int n : n == 0 || n == 1) { return 1; }
int fact(int n) { return n * fact(n - 1); }

Implementation

To dispatch, we have to know two informations for each overriding method: the actual function and a list of boolean function to test against the parameters.

I've chosen to store it as an array of overriding method, where the overriding is stored as an array containing in first element the actual function followed by the argument conditions.

The dispatching function is trivial to write, you just have to walk through that table and if all the arguments match the conditions then call it.

function fullDispatch(arg, list) {
  outer: for (var i = 0; i < list.length; ++i) {
    if (list[i].length - 1 !== arg.length) {
      // Arguments length is different than number of conditions, no need to continue
      continue;
    }
 
    for (var j = 0; j < arg.length; ++j) {
      if (typeof list[i][j + 1] === 'function' && !list[i][j + 1](arg[j])) {
        // Condition fail, try next overriding function
        continue outer;
      }
    }
    // Execute the right function
    return list[i][0].apply(this, arg);
  }
  output.error('no dispatch found');
}

And here is the code to use it for the factorial function:

var fact = function () {
  return fullDispatch(arguments, fact.list);
}
 
fact.list = [
  [function (n) { return 1; },
    function (n) { return n === 0 || n === 1; }],
 
  [function (n) { return n * fact(n - 1); },
    null]
];

Helper functions

Most of the time, the condition functions will be trivial to write and will make the code unreadable because of the verbose way to declare an anonymous function.

The first step to make this cleaner was to allow null to be used when you don't want to impose any condition on the argument. It means "always return yes" and avoid a useless function call.

Then, we want to avoid to write basic conditions such as "is zero" or "is negative". Using the power of lambda function in association with closure, it's possible to write generics helpers to make these with no effort.

var helper = {};
 
// Combination
helper.or = function (f, g) { return function (x) { return f(x) || g(x); }; };
helper.and = function (f, g) { return function (x) { return f(x) && g(x); }; };
helper.not = function (f) { return function (x) { return !f(x); }; };
 
// Primitives
helper.Value = function (n) { return function (x) { return x === n; }; };
helper.StrictNegative = function (x) { return x < 0; };
 
// Primitive Combinations
helper.Zero = helper.Value(0);
helper.Negative = helper.or(helper.StrictNegative, helper.Zero);
helper.StrictPositive = helper.not(helper.or(helper.Zero, helper.StrictNegative));
helper.Positive = helper.not(helper.StrictNegative);

Of course, the shown primitive combinations could be written directly but this shows you how to construct and use complex functions based on few bricks.

Final Result

This is an example of the ackermann function written with the Full Dispatch method and the little helper functions.

var ackermann = function () {
  return fullDispatch(arguments, ackermann.list);
}
 
ackermann.list = [
  [function (m, n) { return n + 1; },
    helper.Zero,
    null],
 
  [function (m, n) { return ackermann(m - 1, 1); },
    helper.StrictPositive,
    helper.Zero],
 
  [function (m, n) { return ackermann(m - 1, ackermann(m, n - 1)); },
    helper.StrictPositive,
    helper.StrictPositive]
];

Write Less, Do More

The current version works well but is the syntax is too heavy. In order to make this work we have to copy each time the fullDispatch call which isn't good. We can use a function generator to do the work.

We want to put the conditions first, since they will tend to be smaller, they will appear nicely in one line just before the function definition. And having a setter could be interesting, this would allow to check the input and hide the structure from the user.

Applying these modifications, we would have a code that look like this:

var ack = FullDispatch();
 
ack.add([Zero, null], function (m, n) { return n + 1; });
ack.add([StrictPositive, Zero], function (m, n) { return ack(m - 1, 1); });
ack.add([StrictPositive, StrictPositive], function (m, n) { return ack(m - 1, ack(m, n - 1)); });
ack.add([null, null], function (m, n) { return 0; });

Which is a pretty nice result. This is not as short as the haskell code but this doesn't use any syntaxic sugar from the language and can be used with any kind of argument conditions.

ackermann 0 n = n+1 
ackermann (m+1) 0 = ackermann m 1
ackermann (m+1) (n+1) = ackermann m (ackermann (m+1) n)
ackermann _ _ = 0

To make this work we create a function that is going to to the real dispatch and augment it with the setter and the function list.

var FullDispatch = function () {
  // Create the function that does the real dispatch
  var object = function () {
    return fullDispatch(arguments, object.list);
  };
 
  // Give the setter to the function
  object.add = function (conds, func) {
    object.list.push([func].concat(conds))
  }
 
  // Initialize the function list
  object.list = [];
 
  return object;
};

Demo

The code demonstrated here can been seen working in a demo.

Follow-Up

This little library is working well as it is. There is still some work to do in this field. First, we have to find uses for this pattern. I haven't thought yet of any uses of it and the example provided do not show the real benefit of such a tool. I am pretty sure now this is known and implemented some of you will find how to use it!

The second point is performance issues. Having such a modular dispatch system is great for expressiveness but come at a price. The overhead is pretty huge. One dispatch of a call costs at most n * m where n is the number of overriding functions and m is the number of arguments.

Functions can be added a way that only one (or two) conditions are tested each time. By mimicking the way you would write a branching using if-then-else, the overhead is one function call per condition (and per argument).

It's certainly enough to avoid when performance is required, however I am confident this is acceptable in most conditions compared to the flexibility it gives. Benchmarks would be more than welcome.

CSS development is a hard land where you have to struggle with many browser incompatibilities and not so easy to use structures. Here are two extremely useful techniques that allow you to get around common float problems.

List of items without floats

Problem

It is common to display a list of items that flow horizontally. Common examples are tabs or cloud tags. A common way to write it is to use the float property.

<style>
  li { float: left; }
</style>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

However, you are going to struggle with the way floating elements flow in the document. You have to clear them, you will have strange behaviors with multiple floats ...

Technique

There is a better way to do it: display: inline-block;. The element will behave inline (as a span) when being positioned in the flow and as a block when styling it. Exactly what you want.

The code is nearly the same, but the float is now gone!

<style>
  li { display: inline-block; }
</style>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

However, this code does not work in ie7 (and of course ie6). But ... There is a simple trick to make it work! Every time you do a display: inline-block, just add the two associated lines. The magic is explained by Ryan Doherty from Mozilla.

li {
  display: inline-block;
/* The following 2 lines do the magic */
  zoom: 1;
  *display: inline;
}

You can read more about the zoom property and its strangeness on the On Having Layout article.

Benefits

  • No more floats and all the problems involved
  • Cross browser (even ie6)
  • You can now center elements using text-align

Demo

  • One
  • Two
  • Three
  • Four
  • Five

No more clear to get around floating elements

Problem

When working with floating elements, you are probably going to do something like this:

<div>
  <div style="float: left;">Left Menu</div>
  <div style="float: left;">Another Menu</div>
  <div style="float: right;">Content</div>
  <br style="clear: both;" />
</div>

The problem is you have to use a <br /> which takes vertical space, completely destroy your padding/margin organization ...

Technique

There is one easy technique described by PPK that is solving all the problems and has no side effect!

<div style="width: 100%; overflow: auto;">
  <div style="float: left;">Left Menu</div>
  <div style="float: left;">Another Menu</div>
  <div style="float: right;">Content</div>
</div>

The trick is to add width: 100%; overflow: auto; to the parent box and it just works! The parent box now wraps around all the floating elements and you can properly style it. It works will all browsers, even with ie6.

Demo