Introducing MemoryStorage

Web Storage API

web-storage
HTML5 gave us this beautiful thing: consistent cross-browser local storage of ‘vast amounts’ of data on the visitor’s computer in the form of the Web Storage API. The default quota is 5MB, which is huge compared to cookies. I’m using it in the development of Bridal App. It allows the app to respond near-instant to user actions and continue to function even when offline. All modern browsers support it (on desktop as well as on mobile) so life is great. Right?

Continue reading

Enums in Javascript

TL;DR: Enums in Javascript

Define your enum like so:

var SizeEnum = {
  SMALL: 1,
  MEDIUM: 2,
  LARGE: 3,
};

Then use it like so:

var mySize = SizeEnum.SMALL;

If you want the enum values to hold properties, you can add them to an extra object:

var SizeEnum = {
  SMALL: 1,
  MEDIUM: 2,
  LARGE: 3,
  properties: {
    1: {name: "small", value: 1, code: "S"},
    2: {name: "medium", value: 2, code: "M"},
    3: {name: "large", value: 3, code: "L"}
  }
};

Then use it like so:

var mySize = SizeEnum.MEDIUM;
var myCode = SizeEnum.properties[mySize].code; // myCode == "M"


Background information

The format described above is the result of quite some time of thinking about enums in Javascript. It tries to combine the best of both worlds of using primitives as the enum values (safe for de/serializing) and using objects as the values (allows properties on the values). Read further to learn how I came to this format.

Rediscovering enums

I recently stumbled onto a question on StackOverflow that I had answered myself a couple of years back and did some more thinking about it after reading some of the comments and decided that this topic was worth an article.

So what was the question I hear you ask?

What is the best way to write enums in Javascript?

First of all, before answering this question, we have to have a look at what an enum is and what it means to write one in Javascript. So let us look at a definition of enum:

What is an enum?

In computer programming, an enumerated type (also called enumeration or enum [..]) is a data type consisting of a set of named values called elements, members or enumerators of the type. The enumerator names are usually identifiers that behave as constants in the language. A variable that has been declared as having an enumerated type can be assigned any of the enumerators as a value.
Wikipedia: Enumerated type

And a good example often beats a formal definition:

enum WeekDay = {MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY, SUNDAY};

So, summarizing: An enum is a type restricting variables to one value from a predefined set of constants. In the example above, WeekDay is an enum and MONDAY, TUESDAY etc are the constants in the set, also called the enumerators. If we declare a variable as

WeekDay payDay;

..we would be able to assign it any of the constants MONDAY, TUESDAY etc, up to and including SUNDAY, but not something else like 12 or "labour day".

…which brings us to a problem.

Continue reading

Stop writing anonymous functions

Today I want to talk to you about anonymous functions in Javascript and how we can write our code in such a way to get the most out of our development tools. But first:

p_anonymous-function

What are anonymous functions?
In javascript you can create a function in two ways, through a function declaration or through a function expression.

Continue reading

Equals operator not symmetric in IE8?

Today I stumbled on the weirdest bug. It seems that the equals operator (==) is not symmetric in IE8.
Meaning that sometimes, even though a == b yields true, b == a will yield false.
I discovered one such scenario when working on my project Packages JS.

Have a look at my test page. Does your browser handle it correctly?
Please leave a comment here with Browser and OS version and test result. I am curious about other browsers and versions.