We recently moved to a great new office near Spike Island, the SS Great Britain and plenty of water. The space has worked out brilliantly for us, here’s a quick look at what we’ve done with it so far. Still a bit of painting to do!

This post will take a scenario which might be useful for small businesses and shows a possible solution.

Keywords: FBML, FBJS, profile tab, fan page tab, landing page

FBML stands for FaceBook Markup Language. It is a modified subset of HTML.
FaceBook has two main types of environments: FBML and iframe. These environments require different way of programming and offer different services, so poorly speaking your FBML solution will not work in an iframe environment and vice versa.

FBJS stands for FaceBook JavaScript, which is a JavaScript-originated language specific to FaceBook. FBJS will work only within FaceBook. JavaScript and its derivatives like jQuery will not work inside and FBML environment.

This post focusing on FBML environment only.

Scenario

‘Our client would like to add a new tab to their fan page. This tab has to be the default tab when someone navigates to the page. The tab should contain a form with a JavaScript validation. Use FBML environment.’

Follow the quoted instructions to get to a point where you need to insert your markup to finish with your new shiny tab.

[ Extract of: "HOW TO: Build a Facebook Landing Page for Your Business" ( source: http://mashable.com/2010/02/22/build-facebook-landing-page/ ) ]

The tabs at the top of your Facebook Fan Page are apps.

The app you need for your custom page is called “Static FBML,” located here:

http://www.facebook.com/apps/application.php?id=4949752878

Add it to your Page.

It is essentially a blank canvas where you can add whatever content you want, including custom graphics and links via standard HTML.

The app can function in two ways: As a set of boxes, or as one dedicated profile tab.

Once you’re in tab mode, go back to your settings and click the “Edit” link under the Static FBML app. This opens a standard text field where you can add your content.

“Box Title” will be the name of your tab.

The main text field is where your content goes, and you can add standard HTML.

Make it the default landing page: head back over to your page settings and edit your “Wall Settings.” There is an option for “Default Landing Tab for Everyone Else.” From that menu, select your new tab.

Example of a static FBML markup with FBJS validator

For privacy reasons FaceBook restricts access to certain user-data in FBML environment, like e-mail, date of birth.
If we need these data we have to ask the user to type it in manually in this specific environment.

Form validation using FBJS:

<script>
<!--

function checkForm(form)
{
	 var params=form.serialize();
 	 var errorFlag = false;

     	 var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	 var address = params.email;
	 var emailError = true;
	 if(reg.test(address) == false) {
	   emailError = true;
	 }
	 else
	 {
		emailError = false;
	 }

	if ( params.email == "" || params.email == null || emailError )
	{
		document.getElementById('ulEmailError').setStyle('display','block');
		document.getElementById('ulEmailError').setStyle('width','311px');
		document.getElementById('ulEmailError').setStyle('margin','0 0 0 104px');
		document.getElementById('ulEmailError').setStyle('color','white');
		document.getElementById('ulEmailError').setStyle('backgroundColor','#CC3333');
		document.getElementById('ulEmailError').setStyle('clear','both');
		document.getElementById('emailError').setTextValue('Please supply your valid email address');
		errorFlag = true;
	}
	else
	{
		document.getElementById('ulEmailError').setStyle('display','none');
		document.getElementById('emailError').setTextValue('');
	}

	if ( errorFlag )
	{
		return false;
	}
	else
	{
		return true;
	}

}
//-->
</script>

<form name="entryform" id="entryform" action="http://www.simpleweb.co.uk/" onsubmit="return checkForm(this)" method="post">
	<fieldset id="personalDetails">
		<h3>Personal details</h3>
		<div id="email-label">
			<label for="email">Email address</label><br />
			<input type="text" value="" id="email" name="email">
			<ul id="ulEmailError"><li id="emailError"></li></ul>
		</div>
	</fieldset>
	<div>
		<input type="image" name="image" title="Enter" src="http://www.simpleweb.co.uk/images/btn-submit.png" />
	</div><!-- /.action -->
</form>
<fb:share-button href="http://tinyurl.com/2e8jzfm" />

Notes on the source code

Styles have to be added using FBJS, as we hide the empty error containers by display:none.

A powerful tool can be a share button on your tab:

<fb:share-button href="http://tinyurl.com/2e8jzfm" />

We used a URL shortener to avoid this known bug.

Here at Simpleweb we’ve got a rack of commodity servers in The Bunker up in Reading.

Each server just has a single, standard SATA disk. But, the mean time between failure (MTBF) on a SATA disk is at best a year or two. (Believe me, I’ve learnt this the hard way.)

So how do we protect against inevitable disk or hardware failure?

Enter FreeBSD and ZFS — FreeBSD is a rock solid UNIX OS which is reasonably familiar to those who are used to using Linux (certainly compared to Solaris), and ZFS is Sun’s incredibly awesome filesystem which allows you to take near-instantaneous snapshots of filesystems and send binary differentials between any two snapshots from one server to another.

One other thing to mention is that ZFS snapshots play nicely with FreeBSD jails. The FreeBSD jails system provides “OS-level virtualisation”. What that means is you get a full FreeBSD system image running “within” a host FreeBSD environment. However, there’s no dirty virtualisation going on here. Because the “virtualisation” is done within a single FreeBSD kernel, you get the same raw performance and stability of FreeBSD on the metal, just with additional logical separation.

The really big win is gained when combining Jails with ZFS snapshots. Simply by putting each jail in its own ZFS filesystem, you can instantaneously snapshot an entire jail (we have jails running Apache, MySQL, Twisted, Solr, you can put any application in one) and send *only the parts of the filesystem that have changed since the last snapshot* over to whichever server is backing up your files.

Now, our backup architecture in the rack is such that the machines are (logically) connected in a ring, so that each machine backs up to the “next” machine in the ring. This means we can cope with the failure of any machine by quickly spinning up the jails on the failed machine from a backup which is less than an hour old.

MySQL is a special case because in order to get a consistent point-in-time snapshot of a MySQL data file, you need to first run FLUSH TABLES WITH READ LOCK on that database. No problem! This is built into our backup script.

Incidentally, this is a simplified version of the technique I use in my scalable redundant web cluster ;)

Here at Simpleweb we use Python and the lovely event-driven network framework Twisted for some core applications which power our social media searching suite MediaGenius.

from collections import defaultdict
from twisted.internet.defer import Deferred

a = defaultdict(lambda: 0)
a[10] += 1
print a[10] # => 1

on_mount = defaultdict(Deferred)

# ... I want to do something if filesystem abc ever gets mounted...

def hooray(arg):
	print "My favourite filesystem got mounted - %s" % str(arg)

on_mount['abc'].addCallback(hooray)

def mount_handler(filesystem):
	on_mount[filesystem].callback(True)
	on_mount[filesystem] = Deferred() # reset the deferred

We have recently been looking at various technologies to scale one of our most resource hungry search applications. We have gone over quite a few options including Cassandra, Hadoop and Distributed Solr. One that quite got my attention was “Elastic Search” which was amazingly easy to use. No schema definitions, automatic node discovery, very simple REST API and very good documentation on its website. This is an excerpt:

So, we build a web site or an application and want to add search to it, and then it hits us: getting search working is hard. We want our search solution to be fast, we want a painless setup and a completely free search schema, we want to be able to index data simply using JSON over HTTP, we want our search server to be always available, we want to be able to start with one machine and scale to hundreds, we want real-time search, we want simple multi-tenancy, and we want a solution that is built for the cloud.

“This should be easier”, we declared, “and cool, bonsai cool”.

And it is exactly as it says! After I started using it I immediately became a fan boy. However, after fiddling with it for a few days, the crashes started. This is a very new product, it has just been launched in February 2010 and currently, there are only 2 other contributors in its Github page other than its main developer kimchy.

The other thing is that the architecture of the system is heavily based on network gossip for data partitioning, both for reads and writes – at least more than other solutions like Cassandra, which is based on Dynamo. I’m not sure if heavy network usage goes hand in hand with high availability, correct me if I’m wrong but I always had the impression that the network is the most expensive resource to use.

Overall it seems like an amazing product to play with, but if you have paying customers then you don’t want to develop on buggy products unless you have the time and expertise to dive into the code and fix them.

For more, visit http://www.elasticsearch.com/

We  love it when we get an amusing captcha…. perhaps it’s just our childish sense of humour!

I had a fun trip out of the office yesterday to go and install our new servers in to their new home in ‘The Bunker‘.

We have so far had excellent help and support both from The Bunker and Cogent our IP Transit provider. Not only during the sales and setup process but also with our first support query. Within a few minutes of submitting a ticket they had resolved the issue.

I took Simon from Samba Consulting along to help me install the gear as he has far more experience racking equipment. He said he normally spends a good 4 hours talking to transit providers while they get all the necessary config info together. It was a doddle with Cogent, this is what they gave us:

(I’ve blanked out all the IPS and our OrderID but you get the idea)

*** Here are the IPs addresses and config parameters :
- Order ID / Technical reference number : xxxxxx
- Connected address block (LnkNet) : 000.000.000.000/30
- Cogent Router port IP :  000.000.000.000 255.255.255.252
- Simpleweb Router port IP:  000.000.000.000
- Ip Block /27 assigned to your connection :  000.000.000.000/27
- Static route configured on Cogent router : 000.000.000.000  255.255.255.224  “next-hop” 000.000.000.000

The good thing about racking gear with Simon is that he’s as anal as me about cabling.

Generally, moving to our own equipment has been a joy. Here’s a few things we’ve learnt though:

• Find out exactly what the Data Center is supplying. It’s wrong to assume they will be doing the routing for you as we had to provide our own Layer 3 device.
• Not all switches are created equal! If you need Layer 3 rather than Layer 2, the cost difference is significant.
• Make sure you connect on the correct duplexing and negotiation. We initially got throughput problems where cogent were on fixed 100mbit full duplex and we were on auto half duplex.
• Racking always takes longer than you think, no matter how well it goes. Things went very smoothly with us and it still took 3 hours to get all the gear in and connected up.
• Make sure you ask what sort of power will be provided to you. Will there be a PDU at all? Will it be IEC connectors or normal 3 pin sockets?

We’re looking forward to delivering a much better and faster service for Media Genius and the soon to be released Cloudmanaged.

We’ve just launched a competition for one of our favourite clients LoveHoney.co.uk

They’re giving away tickets to the most popular UK festivals this summer.

Our Link2Win platform that promotes sharing on social networks is powering the competition. The premise is quite simple, you enter, share and then anyone that enters from your page will give you more entries in the prize draw.

Check it out! Oh, and help me win ;)

At the end of last year we invested heavily in to moving our hosting to the cloud with EC2 and Rightscale. Not a ‘cheap’ option by any stretch but we hoped it would provide a really good foundation to all of the exciting stuff we have planned for SWM and Media Genius.

Unfortunately, it has been nothing but a disaster. Poor performance, poor reliability and huge cost. There will be a more in depth post about our cloud experience to follow.

We’ve now taken the decision to move to our own hardware based in the UK. We just took delivery of 5 new 1u servers built by the very helpful people at http://sentralsystems.com/

Eventually, these servers will be running a cassandra/solr cluster for us. For now though, they’ll be running our SWM site and Media Genius product.

Servers are specified as follows:

SENTRAL PRODUCT NAME: SuperMicro
CHASSIS/CASE: 1U 14″ Depth chassis with 260W PSU + RAILS
CPU(s): Intel E5300 (2*2.6GHz 800FSB 2MB cache)
MEMORY: 4GB DDR II 667 (2*2048)
HD: 2TB SATA II Western Digital 7200 32MB cache

We’re moving the servers to the new rack space next week and keeping one of them back in our rack in the office. We figured it’s good to have a development machine internally with identical hardware.

Here’s a pic of Luke getting them setup, he’ll do a more in depth post in the future on how we are setting them up from a software/backup point of view.

Despite what he might say, Luke is never happier than when he’s shut in a small room with linux servers to play with!