Digital Butter recently built a funny-caption-competition app for Animals Asia. Go here to enter and, besides supporting a worthy cause, you'll stand the chance of winning a t-shirt or cute stuffed bear. :D

The app was built during Social Media Week (which ran until February 17) by James and Jude, as they attempted to recreate the hacking/ drinking-game scene in The Social Network. With Jo having done the design groundwork before the event, our dynamic duo set out to get Animals Asia's app done in 45 minutes flat... while downing a shot every 5 minutes. They managed it too – hideous (and infinitely correctable) typos notwithstanding. ;)

Social Media Week is a global event - this being the second year of its running in Hong Kong (with Butter's own Glen Chu on the organizing committee). Besides the drunken app-making debacle, the week gave Butter the chance to showcase an idea we're pretty excited about...

PopZeen: Sharing Gets Creative

It was StartupsHK’s pitch night (think a less-terrifying version of Shark Tank), and five startups had five minutes each to pitch to five expert judges. We did alright... Okay, we did awesome – beating out the other startups to win three of the four prizes! Aside from bringing in investment dollars (courtesy of Ameba Capital) and free hosting (courtesy of Rackspace), the judges’ reactions gave a huge boost to our belief that we might actually be on to something.

The app is called PopZeen, and with any luck, you’ll be using it this year. That’s the plan anyway (and yes, it will be free). We all regularly share stuff online – sometimes via other people. But it seemed to us there was something missing in terms of being able to personalize and enrich the stuff we’re sharing. I mean, isn’t that something we’d all like to be able to do?

PopZeen is designed to be, essentially, a social magazine (hence the name ;)) – pulling in premium articles and photography in real time, and making it easy for users to reimagine and recreate that content as they share it. The editing tool enables you, for example, to draw arrows at Katy Perry’s simply divine shoes (“Where do I get these??”), or circle her weird-ass bag (“WAT!?!”). Or, for that matter, discuss a recent sports game – what went wrong, and how it could’ve all been different… (“Just look at that offside!”)

The plan is to launch PopZeen later this year. Sign up here to be kept abreast of developments, or you can watch the video below to see Mr Zeen (Eddie) in action.

Butter is proud to announce the publication of our first scientific paper. Called "Mining Parallel Documents Using Low Bandwidth and High Precision CLIR from the Heterogeneous Web", this article deals with matters that interest nobody but the authors and was featured at the 5th International Joint Conference on Natural Language Processing!

It's a 10 hands job, signed notably by Dr. P, our new French addition to the Digital Butter team. He brings smelly cheese to our fridge, megatron-like coding ability to fully-blown aid us and lots of useless research knowledge we don't understand. Bring it on DP!

In this post, we're going to take a look at five on-page SEO factors and how to make the most of them with MODx Revolution. Because MODx allows us complete control over our templates, markup, URLs, and allows us to create template variables to our hearts desire, it is perfect for creating optimized websites. I'm not going to focus too much on the purpose or content of each factor, as there are many other resources written by people far more knowledgeable than myself, but rather how to quickly and easily implement the basics in Revo.

What are on-page SEO factors?

SEO factors generally fall into two categories: on-page and off-page. On-page factors are things you can change within your website to make it more optimized for the search engine crawlers, and off-page factors are the things that aren't actually on your website, but do help move you up in the SERPs for example getting quality links from other websites.

Meta Tags

A few years ago, these were one of the most important on-page factors. These days, with the exception of the title tag, they're largely believed to be ignored by the crawlers (especially Google). However, having a well written description can improve your click through rate, which ultimately will improve your ranking and optimizing the <title> element is one of the simplest and most effective ways to improve your position.

To handle the meta tags in the CMS, we create three TVs named metaTitle, metaDescription and metaKeywords. It is possible to use some of the built in modResource fields such as Description, Title, Longtitle or Summary (introtext), but we found it was much easier for the end user to have all these settings in one place, and it also allows you to set defaults (highly recommended) and character limits on the TVs if you wish to.

Now we just need to place the following in the <head> section of our templates.

Friendly URLs

Each resource in MODx can have a fully customized alias or URL, making it extremely easy for us to follow SEO best practices for URLs. First of all, you can configure all the Friendly URL settings in System Settings by selecting the Friendly URL area. To enable friendly URLs, make sure the "Use Friendly URLs" and "Use Friendly Aliases" settings are set to Yes. It's also a good idea to enable "Use Friendly Alias Path", this will follow your site structure so that child resources use /parent/child.html style URLs (as opposed to child.html being available on the root of the website). You may also want to set automatically generate alias, which will convert your Page Title to an alias unless the alias is otherwise specified. Your settings should resemble the below.

View the MODx Guide to Using Friendly URLs for more info.

In terms of best practices, stick to under five 5 words in a URL (if you must have more than five, try to get your primary target keywords in the first five), dashes (hyphens) are better than underscores, URLs are case sensitive so it's always best to stick to a lower case URL and MODx will convert all aliases to lower case for you.

Worried about your URLs looking "spammy"? SEOmoz has a very useful tool that will evaluate a URL and screen for spam words, hyphens, domain length, digits etc and return you a score. SEOmoz URL Spam Detection Algorithm

Canonical Element

Over the last few years there's been a lot of fuss in the world of webmasters surrounding a so called "duplicate content penalty". I'm not going to get into that in this post, as it's largely irrelevant and quite possibly doesn't even exist. The outcome is that the search engines provided an element that allows us to specify the preferred URL for accessing a page. This is particularly important when using a system such as MODx, where a page can be accessed by multiple URLs.
For example:
http://www.yourdomain.com/home.html,
http://www.yourdomain.com/index.php?id=1,
http://www.yourdomain.com/1
and even http://yourdomain.com/1/
all point to the same resource, but are all seen as different URLs. Now we can tell Google that we prefer our pretty, keyword rich, friendly URLs (http://www.yourdomain.com/home.html) and that's the one we want to see in the result pages.

Lets take a look at the element.

Now lets take a look at it in a MODx template or chunk.

Simply place this in the <head> section of your templates, and that's all there is to it! The link tag will dynamically generate the nice friendly URL for our page, and place it in the canonical element. While the canonical element does support relative URLs, I like to use &scheme=`full` (this will generate the full URL including your domain name) just to be safe. You can see an example of this in action by viewing the source of this page.

One final thing to note here, is that http://www.yourdomain.com/home.html and http://yourdomain.com/home.html can also be perceived as different pages. It's best to choose which you would prefer, www. or no www. and redirect anything else with a 301 (permanent) redirect. Again, the MODx team have made this very easy for us, but we will have to get our hands dirty and edit the .htaccess file.

If you view your default .htaccess file, you should be able to see the below code right under "RewriteBase /"

	# Rewrite www.domain.com -> domain.com -- used with SEO Strict URLs plugin
	#RewriteCond %{HTTP_HOST} .
	#RewriteCond %{HTTP_HOST} !^example-domain-please-change\.com [NC]
	#RewriteRule (.*) http://example-domain-please-change.com/$1 [R=301,L]
	#
	# or for the opposite domain.com -> www.domain.com use the following
	# DO NOT USE BOTH
	#
	#RewriteCond %{HTTP_HOST} .
	#RewriteCond %{HTTP_HOST} !^www\.example-domain-please-change\.com [NC]
	#RewriteRule (.*) http://www.example-domain-please-change.com/$1 [R=301,L]

As you can see, MODx have provided us some rewrite rules to handle this problem. All we need to do is edit the domain name, and remove the #s in front of the condition that we want to use. For example, if you would like to forward http://butter.com.hk/ to http://www.butter.com.hk/, you would have to update the domain and remove the hashes from the second block as below.

	# Rewrite www.domain.com -> domain.com -- used with SEO Strict URLs plugin
	#RewriteCond %{HTTP_HOST} .
	#RewriteCond %{HTTP_HOST} !^example-domain-please-change\.com [NC]
	#RewriteRule (.*) http://example-domain-please-change.com/$1 [R=301,L]
	#
	# or for the opposite domain.com -> www.domain.com use the following
	# DO NOT USE BOTH
	#
	RewriteCond %{HTTP_HOST} .
	RewriteCond %{HTTP_HOST} !^www\.butter\.com\.hk [NC]
	RewriteRule (.*) http://www.butter.com.hk/$1 [R=301,L]

NOTE It is very important that you do not remove the hashes from both blocks, as this will cause a 500 Error.

If you would like to read about the duplicate content penalty, here's an old post from the Google Webmaster Central blog

Google Sitemap Snippet

I found a quote from Google's Conversion University that I think explains the sitemaps purpose better than I ever could.

Let's start off with a quick look at what Google Sitemaps is – and isn't. Google Sitemaps is a service that allows you to submit ALL of your pages to the Google index. It's particularly useful for making sure that dynamically generated URLs or pages that are not adequately linked to on your site get indexed. By submitting your URLs in a Sitemap, you help Google's web crawler do a more complete and efficient job of crawling your site.

This sitemap is an XML file that lives at www.yourdomain.com/sitemap.xml. Luckily for us, Shaun McCormack (aka splittingred) has put together a very simple snippet that will generate and maintain this for us. All we need to do is download the snippet from package management, create a new resource on your site root with a Blank (empty) template, you can set the page title to anything, but it's best to set the alias as sitemap. Set the Content Type to XML under page settings, and call the snippet with , and that's all there is to it!

There's heaps of configuration options for the Google Sitemap snippet, you can view more on the MODx documentation.

Once you have this URL up and running, it's best to submit your sitemap to Google using the Google Webmaster Tools.

Content

The most important thing to remember, is you should be writing your content for your users and not the search engines. Once upon a time "keyword stuffing" was an effective technique to increase your ranking, today it's generally counter productive and makes your site look "spammy" to both the user and the search engine crawlers. It's a far more effective long term strategy to focus on having high quality, unique content that will engage your users, and keep them browsing your site. In saying that, having keyword phrases in your H1, and to a lesser extent h5 tags is largely believed to increase your rankings. There's a lot of debate over how much this will effect your rankings, but it is widely agreed that it does have some effect.

Depending on how your template is structured, you may need to enter your H1 tag into your page content in the CMS. We generally place an H1 right before any content that contains the Home template variable. This allows a user to specify the first (arguably the most effective) H1 on the page with a keyword rich heading.

Another tip is to make sure to include keywords in your internal site links. The search engines use the "anchor text" or the words in a link as a factor in determining what the page you're linking to is likely to be about. For example if your anchor text contains the words "MODx Tutorials", the search engine will assume you're probably linking to a page about MODx Tutorials. Something like Click here for MODx Tutorials, would be much better written as Click here for MODx Tutorials. This also applies to links you have coming in from other sites. If you use the above technique and set keyword rich Page Titles on your document, these Page Titles will also be used for the anchor text when using a snippet such as Wayfinder or getResources to build your site navigation. If the Page Title is too long, or doesn't quite suit you can always override it with the Menu Title field.

Further Reading

Here's a list of some of my favorite resources for learning about SEO and the behavior of Search Engines.

• SEOmoz
  SEOmoz offers excellent lessons and tools for SEO. They also have an awesome blog for keeping up to date with the world of SEO.
• Matt Cutts' Blog
  Matt Cutts is the head of Google's Webspam team, and has a great blog about Google and SEO.
• Affilorama
  While Affilorama is targeted at affiliate marketers, the free lessons on SEO are perfect for beginners, and can be applied to any kind of website.

We're pretty big fans of Sencha ExtJS here at Digital Butter - that said, almost everyone here aged a couple of years going through the brutal learning curve that comes with such a powerful framework, and like many others we considered joining this group at one time or other. Getting over that initial learning curve starts to feel great when you can build out full rich UI's for managing epic amounts of data in hours and minutes rather than days and weeks.

So we decided we would start a tutorial series for ExtJS, specifically as it relates to building components for the MODX manager. I'm hoping this page serves as a kickstarter for all the MODX developers out there who 'plan to' make MODX Revolution components but just don't know where to start.

What the hell is MODX?

Seriously? Leave the blog please.

What the hell is ExtJS?

ExtJS (in my opinion) is by far the best javascript web application/ui framework - this comment is based not just on capabilities, but on available documentation (when you look hard enough), community participation and roadmap. ExtJS allows you to build rich user interfaces in the web browser that are primed for handling large amounts of complex data. Think paginated datagrids, large tabbed form panels, 'application style' window prompts etc - all talking to the server using AJAX and trading data in JSON format.

In a few meetings I have had with other developers where I try to show it off, the same question keeps coming up before I can pique any interest in them. Is it as good as jQuery? Well, the answer is that that's not really a valid question in the context of building content management system control panel components.

It's a javascript library/framework as is jQuery but it's not meant to acheive the same things. jQuery is amazing as a front end javascript toolkit - you might use it for basic form validation, for animations and effects etc. Typically, jQuery enhances your interface, whereas ExtJS can actually build it. And as we all know, a javascript rendered interface is no good for SEO but in this context, we don't care - we're building components for a security restricted control panel that will never meet googlebot (the MODX manager).

As far as I am aware, there are other frameworks with a similar intention, although I can't comment on any of them, because I've never delved deep enough into them.

• http://www.sproutcore.com/
• http://cappuccino.org/
• http://mochaui.org/

How does it fit into MODX?

ExtJS is used to render the majority of the MODX Revolution manager interface. All those datagrids, forms, tab panels, quick update windows etc - those are all ExtJS components being put to good use. MODX also provides a wrapper to ExtJS - MODExt.js. This puts together a load of ExtJS components that can be extended in your own third party components, with a whole load of excellent default behaviours that come in useful for typical usage. In the examples later in this series we're going to talk mostly about how to use the MODExt components rather than the 'raw' ExtJS components.

So here's a list of what we're planning to publish, hopefully within the next two weeks:

• Intro/Basic concepts: Components, Nested Components and error messages
• Datagrids: When and how to use them
• Data sources: A little more info on how to plumb your JSON stores with MODX
• FormPanels & Windows: Updating and adding data
• Advanced Stuff: We'll be passing over to Ed the Nodeler to talk about XTemplates and Pivot Grids

If anyone has any ideas for tutorials/examples - let us know in the comments below.

And... if there's any 1337 ExtJS geeks out there that want to contribute (*cough cough* Mark Hamstra) - get in touch - iamamotherfuckingextjsninja@butter.com.hk

- The Ninja

If you haven't yet heard about Chef ("Infrastructure Automation for the Masses") then get out from under your rock! It is a neat tool for easily deploying servers with your desired configuration in one line of code. In a nutshell, instead of configuring a server (yawn), you actually code your desired server configuration into something called a recipe. Once you have these recipes in order you can simply ask chef to spawn new servers for you. Chef will take care of everything, it will start your cloud servers, bootstrap them with your required packages and dependencies, deploy your applications and kick up your services. Chef also has cool names for everything, from the tool you use (knife) to the type of coding you are doing (devops), which not only helps make you feel like a l33t haxor, but also turns configuring servers from being a massive pain into something that is almost fun (almost). Read on over at the TikiBooth blog by clicking read more below... TEASER: We have a MODX recipe almost finished =)

Read more