Archive | HTML5 RSS for this section

Create object in JavaScript using named parameters

The following code should look familiar, we’re creating an object and assigning a property.

function Person(id) {
	var self = this;
	self.id = id;
}

var instance = new Person(1);

One challenge with this approach is that as you add properties remembering their order can become a mental task.

function Person(id, firstName, lastName, phoneNumber) {
	var self = this;
	self.id = id;
	self.firstName = firstName;
	self.lastName = lastName;
	self.phoneNumber = phoneNumber;
}

var instance = new Person(1, 'Bill', 'Gates', '212-555-1234');

An alternate approach to consider is to use jQuery’s extend function (or Underscore, AngularJS, etc) which enables passing named parameters.

function Person(data) {
	var self = this;
	$.extend(self, data);
}

var instance = new Person({
	id: 1,
	firstName: 'Bill',
	lastName: 'Gates',
	phoneNumber: '212-555-1234'
});

A nice by-product of this approach is that it makes it simple to serialize/de-serialize the object, for example to store it to Local Storage.

var jsonString = JSON.stringify(instance);
// write to storage
// ...
// read from storage
var instance = new Person(JSON.parse(jsonString));

Setting Facebook meta tags

A goal for many of the sites we build is for them to be shared on Facebook. The least we can do is make sure they look good when it happens.

The first thing you’ll want to do is run your site through the Facebook Debugger.

I’m currently setting this up for Invoice Ninja. You can see below what our site looked like before setting the meta tags. In the “Open Graph Warnings That Should Be Fixed” section there are a number of properties which are inferred.

Facebook Debugger

To set the metadata (and resolved the warnings) you just need to add the following meta tags to the website, filling in your own values for the content fields.

<meta property="og:url" content=""></meta>
<meta property="og:title" content=""></meta>
<meta property="og:image" content=""></meta>
<meta property="og:description" content=""></meta>

It’s worth noting that after your site gets 50 likes the title becomes fixed.

For a listing of all available tags and options check out the Open Graph documentation at http://ogp.me/.

%d bloggers like this: