11 transparent GIFs every webmaster should know

Transparent gifs. I hear you sigh as your mind wanders back in time, to days long gone, when there where only 2 browsers and both of them had layout quirks that demanded the use of transparent 1×1 pixels gifs. every. where.

11-transparent-gifs-every-webmaster-should-know

The return of the GIF

GIF was huge in the early days of the web. It was the one format that could be used to send images over slow connections and still have an acceptable page load time. It could do animations! And most of all, as web developers, we used them to artificially inflate our table cells so IE and Netscape would leave them as we intended them.

Then, some company claimed ownership of the format and people called for the banning of GIFs from the internet. Browsers grew up and the 1×1 transparent GIF faded away…

Or not?

Continue reading

3 reasons to use a CDN

A CDN, or Content Delivery Network can improve your website’s performance while at the same time save you bandwidth. Here’s 3 reasons to use a CDN.

cdn

1: CDNs help to improve caching

The fastest way to get data to a client is by not sending it at all. If the client already has the data in his local cache, we can save ourselves the overhead of a data transfer and the latency that comes with the associated request / response cycle.

Continue reading

How Java’s text Formats can subtly break your code

Today at work we found a subtle issue that will sometimes break your code in very difficult to find ways. Read this if you don’t like days of bug hunting for mysterious issues only occurring on high-load production machines.

Ever wrote code like this?

private static final DateFormat FORMAT = new SimpleDateFormat("yyyy-MM-dd");

prevent-debugging-headache
Most of us did. It’s the most intuitive way to use a DateFormat to format some Date object as a human-readable String.

Unfortunately, it’s wrong.

When used in a multi-threaded context (e.g. in a Servlet), this will end up breaking. Sometimes. When you least expect it.

Continue reading

Change the facebook button color

Yes, it can be done!

Changing the color of Facebook’s Like and Share buttons is something that web page designers wish for, but up untill the rise of HTML5 was practically impossible. But today, thanks to SVG filters, it can be done. It’s still not very easy and, as usual, Internet Explorer is lacking support, but it is definitely possible.

Impatient? Just do it

For the impatient, check out the facebook button colorizer tool I built. You just copy-paste your button code, fiddle with the controls keeping an eye on the live preview until you like the result and then just copy and paste the colorizer code to your website. Couldn’t be easier.

screenshot

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