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 Archives 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

It is a common misconception that all video's with 100,000 view or more were simply ‘found’ by the correct people, then, based on the quality of their content – went viral. More likely, these videos were tagged with popular words not relating to the video at all – the people that posted it were the ones commenting – and industry movers and shakers were paid to push it - but most people do not know the dark side of viral.

Digital Butter Vancouver and Digital Butter Hong Kong have come together to create 3 tips and tricks to help you leverage simple tools available to everyone in hopes of getting your video seen! 

#1 - Strong Content…Not Necessarily Accurate Content.

Is great content key? If you want a video to go to the top 1% of Youtube with 10’s of millions of views then of course you need to have truly epic content – but if you want to hit the viral mark of 100,000 content becomes less important. This is an important point because many people dwell on the next “Charlie bit my Finger” instead of using that effort to spread their video.

A few great key point:

 1.    Give the reader no choice but to watch it by blowing their mind with the title.

• “UFO in New York”

2.    KISS – Keep It Short Stupid

• 15-30sec is optimal. If you must, simply break the video into a number of small clips and create a series.

3.    Keep that Ad to yourself

• If viewers feel like they are being sold they will not  share it.

4.    Judge the book by the cover

• Use fake headers, giving your readers no choice but to investigate “Charlie Sheen meets Chuck Norris”

5.    Sex + Sex = 100,000

• When all else fails, use sex appeal to push your video (psst – check out yoga for dudes)

#2 – Are we there yet?

Okay, this is the carrot at the end of the stick – get on the most view page of Youtube (50,000). Here are the deets:

1. Almost 80,000,000 videos viewed per day
2. Majority come from the ‘Most Viewed’ Tab
3. 20 spots available

Therefore – if we get on that page we get 5% of clicks, in theory – but I like those chances! So how do we get 50K in views?

1. Blogs – Take out your checkbook and pay to embed videos on popular blogs. It is a worth while investment and by no means against the rules
2. Facebook – By continually developing your brand on FB, you put yourself in a position to reach the general population quickly. Share, becomes your middle name – teach people to share like they are in grade 1.
3. Twitter – Use twitter best practices to engage your followers, develop a trend, and get a few powerful tweeters to share your video – checkbook may come into play again.
4. Friends – Every person you know should watch the video and pass it on to one other person, at least!
5. Controversy – Create heated conversations, comments, and arguments using multiple accounts – everybody likes a good old fashioned chicken fight.

Now that you understand the importance of the Most Viewed page, you have 48 hours before it is moved to Most Viewed of the Week…so get going

#3 – T n T

Title and Thumbnail optimization are essential to the success of your video. To build on the momentum developed by reaching the ‘Most Viewed’ Page you, as the publisher, should take advantage of simple and effective tools. On youtube you are allowed to change the title of your video infinitely, which lends itself to using slightly misleading titles. This is fine to generate interest – then change back to a more brand appropriate title. 

Thumbnails follow the same guidelines – using a clear image, to portray video quality, as well as a catchy image – your conversion rates will sky-rocket. Youtube takes three thumbnail images and one of those is from the exact halfway mark. If you can help it – get an image halfway through that will allow your potential viewers to become fans. A few tips – use images with people, a face, and whenever possible a girl.

By switching the thumbnail often, you can keep the video fresh and engaging – this follows the same principle as changing the title. 

Digital Butter wants to know what you think – post a quick tip you have for helping viral become reality.

The Suit

 

Nock Nock.
Who's there?
Exactly.

Nock Nock lets you 'peek' into your favorite bars and clubs and see who's there RIGHT NOW.  Just choose a neighborhood and you'll instantantly see the busiest places, along with who's there.  Now you can "see" the crowd in real time - how cool is that!

You'll need to login to Foursquare to use Nock Nock.  Just use your existing account, or create a new account if you dont have one -- it only takes a minute.

At the moment Nock Nock works in New York and San Francisco, but we're working on adding more cities soon!

Have a peek, and Nock Nock responsibly.

Nock Nock is launching this week - watch this space!

‘Like’ us VANCOUVER!

Digital Butter has brought their talents to the beautiful city of Vancouver!

If you have questions about developing a brand, initiating a digital presence, establishing e-commerce for your business, leveraging social media, creating mobile purposed websites or producing online software - we are here to help.

Email:

info@digitalbutter.ca

We have worked with some of the largest companies around the world including Jardine Matheson Group (Fortune 500), luxury brands, as well as boutique businesses – our goal is to add value to your business using digital mediums.

Let Digital Butter Vancouver be your digital solution and visit our portfolio at: 

www.digitalbutter.ca

We’re producing our new site now – so stay tuned!

At Butter, we are heavilydevoted to being a leading and knowledgeable company with respect to the online applications of web tools in any given industry. Whether they be design trends, best practices in development and programming, new features and functionalities for websites or software development - we strive to stay ahead.

Technology continues to take significant strides and we rely on it more and more in our everyday lives.  Although we continue to integrate technology with our social interaction rely on it to function in our daily lives, the question remains: why is technology and the educationsystem so disjointed? 

I have seen a child just over the age of one interact with an iPad and found myself shocked to see him interact with it; from choosing theapp (he swiped the screen until he found the app he recognized) to using it and understanding the app – it was amazing to watch.

Youth spend plenty of time interacting with technology outside of the classroom, but when will there be a push for technology to be in the classroom and serve as a catalyst and tool for learning?

Your guess is as good as mine - but while building Digital Butter Vancouver, we came across this great video by Salman Khan, that demonstrates how powerful technology can be when used as an educational tool.

Khan simply uses video demonstrations to teach people, and I say people because he does not discriminate based on age or discipline. The tools he has developed allow others to track students progress, focus on areas of difficulty, not to mention allowing people to listen and learn at their own pace without feeling belittled by ‘not getting it’.

Khan goes on to propose that the need to use each other in a ‘one-classroom world’ is essential to achieving our full potential – and we agree. If we can stay more up-to-date with our friends via social media, why wouldn’t the same principle apply to education?  The answer is so obvious because we can.

As a web agency based out of Hong Kong and Vancouver we believe that the lack of technology in the classroom is a global issue and we think there will be more and more suitable solutions offered in the near future, view the TED video below to see for yourself:

http://bit.ly/dYoDiS 

Do you agree or disagree? What tools do you think would improve the global education system?  Would love to hear your thoughts.

The Suit

Inheritance in JavaScript is kind of a touchy subject since it is one of those JavaScript things where it feels like whoever designed the language couldn't really decide how it should have been done (prototypal or classical) and everyone else can't decide what the best practice for it is. This is also compounded by the fact that JavaScript is such a flexible language that if you really wanted to, you could implement a way of re-using code differently in every single project that you do. So... [ read more on the TikiBooth blog ]

Most of you out there working in teams are most probably using a version control system of some sort to manage your files in projects. Once you get used to the workflow and peace of mind it brings - that every change is marked, commented and reversible, it's pretty hard to not like it. This brings us to the long discussed topic of how MODx stores its snippets, chunks and templates (amongst other things) in the database (see http://modxcms.com/forums/index.php?topic=54902.0).

At butter, we've dealt with this need to have version control over our elements by creating an 'include' snippet, which allows us to create elements in the manager that merely serves to include the code from a file.

This Works well until you start to creating a lot of elements, which other team members would have to do the same for each one on their own development platform. Which is why we wrote the File Elements Mirror plugin - to find these files automatically and create the elements for you.

We usually structure our elements in a separate folder like this:

web_assets/
    chunks/
        optional_sub_dir/
            chunk_name.html
    templates/
        template_name.html
    snippets/ 
        snippet_name.php 

The plugin will go through these directories, creating the necessary elements (chunk/snippet/template) for your, as well as creating/assigning it to a category if there's an optional sub directory in the folder structure. Remember to tell the plugin your directory structure:

Unlike our manual approach, these elements are standalone - they don't use include statements to the original file, but the plugin will update these elements everytime its run, effectively mirroring the contents in the files.

Some limitations:

• If you rename or remove your file element, you'll have to manually remove it from MODx.
• The plugin is triggered by the OnHandleRequest event, so you would want to disable the plugin in staging/production environments.

You can get the plugin package here. Happy coding!

- The Ninja

A month ago we dreamed up an idea to build out a front end editor for MODx Revolution to make ours (and our clients') lives easier when managing their MODx sites.

Regular updates to be posted on Saturday 8th January, 2011 here.

Update @ 12:05AM 08/01/2011: Excited for the Jam tomorrow!

Update @ 09:00:  As Billy Joel sang: 9 o'clock on a Saturday, the regular crowd shuffles in...  Beautiful sunny morning here in Hong Kong to accompany our hot coffees and some good tunes.  Time to stretch the fingers for an exciting day.  Let's go!

Update @ 09:55 :  The UPFRONT Panel is in production - turkey's in the oven!

Update @ 11:38:  Everyone's working away: James is integrating the site tree to the frontend form panel, Ronald is working on the transport package for a one-click install, Jude is working on the live preview for edits and Joss is finishing his HTML5 Sample Site Installer which will host UpFront demo site and documentation.  

Update @ 1:38: Lunch is delivered :P

Update @ 2:00: Lunch is finished... now back to some jammin'

Update: 3:30:  MODx HTML5 Sample Site is almost done!  This wasn't really planned, but our good friend Joss developed this in just under 48 hours, finishing it up here in our office this morning as part of the Jam to be released alongside the UpFront editor. Indeed, Passion is Infectious!

WYSIWYG is done!  Time to start adding some CSS stylesheets. 

Update @ 3:59: Jude get's Iced

Update @ 4:20PM: Unskinned screenshots of UpFront- CSS begins

Update @ 5.30: Just finished skinning UpFront! Preview coming soon...

Update @ 5.40: Ronald get's Iced

Update @ 5.47: Sneak peak!

Update @ 6:06: Iced for second n00b git mistake of the day:

Update @ 6.35 PM: Ronald is using PackMan to package UpFront together, and Joss is fixing up our documentation website.

Update & 7:03PM: Joss gets Iced.

Update @ 8:30: Check it out - Alpha 0.1 released: More info here on the official UpFront Editor website.

SCREENSHOTS!!!

Catch up at upfront.butter.com.hk - time for dinner and peace out!

For a recent project that we will announce and provide further blogging insights upon, we were presented with a particularly tought challenge. We had to build an ecommerce site where purchasing a product is a significant workflow for a user. This site is about purchasing custom tailored suits - it allows users to completely customise their suit; the fabric, number of buttons, type of pocket and so on. This does not lend itself to a simple checkout process, and having mind-mapped and wireframed out the process, it became apparent that the usual ecommerce 'formula' wasn't going to work.

In order to provide a quick, seamless checkout process we decided to build a completely ajax'd workflow. But one of the usual pitfalls of a javascript based workflow is that usability can suffer in places that we normally take for granted. Things like the browser back/forward buttons, bookmarking etc often get tossed to the side and users are expected to complete a workflow from start to finish without interruptions. We recognise that is not realistic, and for the best possible user experience, we weren't happy tossing aside functions for 'coolness' and speed alone.

So the research began and Sammy.js was brought to my attention. Having been introduced to, and subsequently falling in love with the connectors/processors/extJS setup that the backend of MODx Revolution ingeniously uses, I decided that this RESTful evented javascript framework could be what I was looking for.

First up, a little bit of background on sammy.js. An explanation of what Sammy.js is, by the author:

Sammy is a tiny javascript framework built on top of jQuery. It's RESTful Evented JavaScript.

... Working heavily with Sinatra, I realized that the simple route definitions and structure it provided could be a great fit with jQuery/JavaScript. Not only does it allow you to respond to specific URLs, but utilizing the URL hash (#) you can create single page applications that still respond to the back button in your browser (ala Gmail).^{[official website]}

As it relates to the problem we were looking to solve, Sammy.js would allow us to handle all the routing of our workflow, and a user would be able to go back and forward through the workflow as they please using their browser history (e.g. #/start -> #/choose -> #/alter -> #/fitting -> #/checkout).

This demo isn't going to go into any detail on how we executed the online tailor website, that post will come later. For now, I've thrown together a 20 minute demo that demonstrates the most basic principle of how you can use Sammy.js with MODx Revolution.

What this demo does:

When the page loads, the highlighted div in the middle of this post with the ID #main-app will be injected with a link. Clicking on this link will execute a 'route' (#/start) which posts to a MODx connector that in turn returns a list of recent comments in JSON format that have been posted on this blog. Using the Sammy.Template.js plugin, each comment in the result set is formatted according to a preloaded template. Try clicking the back and forward buttons in your browser between clicking the link, and when the AJAX request has completed. This might be useful for someone who wants to have comments show on their site, but only when a user clicks 'see all comments'.

Toggle: Show Comments | Hide Comments

What is so cool about that then?

Well, we now have bookmarkable links to different workflow states on this page. After clicking the link above to load blog comments, your window.location will update to http://www.butter.com.hk/blog/archives/#/start. If you reload the page with the hash inside the URL, Sammy.js will forward you to the corresponding UI state that you left the page on. When your workflow contains more than a handful of steps, this is incredibly useful. On top of that, since Sammy.js has formatted each of the comments for us, our http requests are smaller and the server has done less work.

The Code:

To get this demo up, you need to register a few javascripts in the head of your page. I've used a basic snippet to do this for each file in sequence, like so:

[[include?
	&filename=`web_assets/snippets/loadAsset.php` 
	&path=`https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js`
]]
[[include?
	&filename=`web_assets/snippets/loadAsset.php` 
	&path=`demo-assets/sammy/blockui.js`
]]
[[include?
	&filename=`web_assets/snippets/loadAsset.php` 
	&path=`demo-assets/sammy/sammy.js`
]]
[[include?
	&filename=`web_assets/snippets/loadAsset.php` 
	&path=`demo-assets/sammy/sammy.template.js`
]]
[[include?
	&filename=`web_assets/snippets/loadAsset.php` 
	&path=`demo-assets/sammy/demo.js`
]]
[[include?
	&filename=`web_assets/snippets/loadAsset.php` 
	&path=`demo-assets/sammy/demo.css`
]]

The loadAsset.php file makes use of $modx->regClientStartUpScript($path); to throw each file into the head of the page. You could easily place these files in the head inline, if that makes sense for your site.

Sidenote - Jude is close to packaging up a more advanced version of this snippet which will compress the assets on the fly, retrieving from cache after the first load. More to come on that later.

The following four files are 'library' files. Unless you're a fan of core hacking, you won't be editing these files at all.

• https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
• demo-assets/sammy/blockui.js
• demo-assets/sammy/sammy.js
• demo-assets/sammy/sammy.template.js

The next few files are the ones to be concerned with for this demo.

Demo.js

;(function($) {

var app = $.sammy('#main', function() {
	this.debug = true;
	//open your firebug console for some debug awesomeness.
	this.element_selector = '#main-app'; 
	//which element are we rendering our 'app'?
	var baseURL = 'demo-assets/sammy/';
	var connectorURL = baseURL + 'connector.php';
	
	
	this.use(Sammy.Template);
	//we will be templating our comments using the sammy.template.js plugin, so declare usage here.
	
	var loading = '
 Just a moment...
';
	this.before(function(context){
		
		$.blockUI({ message: loading });
		//before any routes are executed, run some code in here if you like. How about a loading indicator? BlockUI is pretty nifty.	
				
	});
	
	this.get('#/start', function(context){
		
		this.swap('');
		//clear out the main app div.
		
		var params = {
			'action': 'getcomments'
			,'start': 0
			,'limit': 20
		};
		
		$.ajax({
			url: connectorURL, 
			data: params,
			async: false,
			success: function(items) {
				items = eval(items);
				//datatype: json would be tidier but this demo isn't perfect.
				comments = items.results;
				$.each(items.results, function(i, item) {
					//loop our result.
					context.render(baseURL + 'partials/comment.template', {item: item}, function(rendered){
						context.$element().append(rendered);
						//append the comment to the main app div after it has been templated.
					});
					
				});

				$.unblockUI({});
				//activity has finished, so let's unblock the UI.
			}
		});
	});
	
	this.get('#/', function(context) {
		//mirror of the function below, this shouldn't be required but for my shoddy demo it is =)
		var item = {
    		url: window.location.href
    	};
    	context.render(baseURL + 'partials/start.template', {item: item}, function(rendered){
    		context.swap(rendered);
    	});
		$.unblockUI({});  
    });
    
    this.get('', function(context) {
    	var item = {
    		url: window.location.href
    	};
    	context.render(baseURL + 'partials/start.template', {item: item}, function(rendered){
    		context.swap(rendered);
    		//'swap' in the content retreived from the partial.
    	});
		$.unblockUI({}); 
    });
    
});

	$(function() {
		$.blockUI.defaults.css = {}; 
		app.run();
		//fire up the app on domReady, or any event you prefer.
	});

})(jQuery);

The concept of 'Routes'

As you'll see in the code above, events in the app are handled via routes. Routes directly mirror the URL hash tag, and will be executed upon a change to the window.location.hash. That will happen as soon as your user clicks a link that has a #/verb appended to it.

By declaring the following code in the this.before() function, a block of code will get executed regardless of the route. This could be useful for a number of reasons, I've used it here to display some UI feedback in the form of a loading message before any routes are executed. When routes finish executing, that loading message is then hidden to indicate that activity has finished.

this.before(function(context){		
	$.blockUI({ message: loading });
	//before any routes are executed, run some code in here if you like. How about a loading indicator? BlockUI is pretty nifty.	
});

Note that blockUI is not part of Sammy, it's a jQuery plugin that is documented here

Templating results

In the #/start route, we are sending an ajax request to a MODx connector that will serve comments in json format in the response. Each one of those will need to be formatted into HTML to make them readable on screen. Using Sammy.Template.js, we can do this with only a few lines of code. Each item within the json response will be applied into the following template file:

	
    

        <%= item.name %>:

        <%= item.ago %>
    

    

        
<%= item.body %>
    
	

Properties within each item are accessed in the following format: <%= object.fieldName %>

Get these files:

• jQuery.js
• demo-assets/sammy/blockui.js
• demo-assets/sammy/sammy.js
• demo-assets/sammy/sammy.template.js
• demo-assets/sammy/demo.js
• demo-assets/sammy/partials/start.template
• demo-assets/sammy/partials/comment.template
• demo-assets/sammy/demo.css

There's obviously tonnes of potential uses that you could dream up with MODx + Sammy.js - the fact that MODx Revolution has such things as connectors and processors only makes it easier.

- The Ninja

At what point does our integrity fold over? How far does a company bend for a client in the name of a stronger portfolio? Are concessions provided to all with an unlimited supply of ‘condiments’?

These are examples of questions many web development companies, like ours, ask themselves on a daily basis. When a client asks for his website to ‘pop’ and when we don’t produce exactly what ‘pop’ means in the eyes of that ‘client’ because of that vague, poorly articulated, direction, we are coined incompetent. Or better yet, the client signs off on every design, font size, and layout provided - yet when their father–in-laws cousins boyfriend points out that they cannot read the font (because they are blind as a bat), the client changes their mind and all of a sudden need ‘a few minor changes’ (wtf do u know about minor changes?). Then comes the tipping point – 1 week before beta launch the ‘client’ feels as though the professionalism of the site has been compromised by the large font size – now we are on tilt.

Imagine – you are trying to be selective with clients. You meet them and they seem quite pleasant and reasonable - then comes the tipping point and their frustration gets poured on the messager. Their demanding and irrational behaviour comes out when they don’t know how to express their thoughts - much like a baby cries when they want something. Would we try, repeatedly, to decipher what they may want, to no avail, all on our tab? Or vice-versa – the client has been nothing but helpful and forgiving, producing what is agreed to and even creating a relationship that will last long past this particular project - would we grant concessions then?

Whether or not they are a good client, bad client, or friend is beside the point. It is a matter of principal, one that in the web-industry has been neglected for too long. Everybody knows somebody that can ‘build’ a website, you know, the friend of a friend – good, go use the ‘friend of a friend’ and see what happens. 

All too often service-based companies that pride themselves on client servicing in hopes of referral business get margins cut and integrity beaten by ‘the big guys’. Or maybe a better title is ‘the insecure guys’ who feel they need to prove their worth to the pay grade above them. Well I have a message for you, do yourself a favor and kick rocks!

Where do you draw the line? What is your company’s philosophy?

-The Suit

A couple of years ago in a previous job I had gathered a little momentum in my team for a code jam - the idea being that a few intense hours of collaboration on an otherwise ignored idea could be the springboard for a fun project. In the end it never happened, getting people together for a code jam on their own time isn't the simplest thing. As anyone in the web development industry knows, client projects always find a way to take precendence above unproven internal projects. I put the idea aside and forgot about it.

Having been inspired by Mark Zuckerburg's 'Face Mash' coding frenzy in The Social Network, this past month Jude and I started a little competition: Who can build a small scale MODx brochure site the quickest. We each picked a project and setup a time where everyone in the office knew we were 'wired in' and were not allowed to disturb us. We also picked forfeits for each of the losers. These were very small projects, they had a handful of templates and around 10 - 15 pages of content.

In the spirit of competition, I am going to rub it in Jude's face by telling everyone that I won. My time was 70 minutes, his time was 90. I will not be disclosing what his forfeit is, because it probably isn't suitable for this blog ;)

After we finished the competition, it became apparent that given that everything is in place, we can be remarkably efficient (e.g. in the context of our competition, those things were design, content, sitemap etc.)

So now we're ready to put the previously discarded code jamming concept to the test with a project that we hope will provide significant utility to anyone using MODx Revolution. We have many, many ideas bouncing around in our office, some would say too many. But given the restrictions we are placing on ourselves for this code jam, we were able to filter out a lot of those ideas and focus on one that is realistically acheivable in a day. Although we do not intend to finish the project in its' entirity in a single session, we will be tackling a request that we see a lot of in the MODx forums: A front end Resource editor for MODx Revolution.

First up, here's our rules for the code jam:

• Each iteration of the project will be coded in a single non-work day, between 3 or 4 developers (whoeever wants to participate and work on a weekend). All phones are off, emails are unread/unanswered, and IM clients are switch off.
• Each developer will be responsible for one part of the project. 
• At the end of the day we will blog about our progress, and set another date for the next code jam. We will release our days work to the community on github. Depending on the state of it, we may submit it as a package.
• Core hacking is not allowed.
• We will start at 10AM, and finish at 7PM. Afterwards, we will gorge ourselves on food and beer as we celebrate what awesome ninja's we are.

Any breaking of the above rules will result in being Iced. Ice blocking is not allowed.

Here's our main set of features for the first release:

• Allow editing of all core resource fields (e.g. pagetitle, longtitle).
• Allow editing of all Template Variables.
• Support form customisation.
• Provide the full site tree within the editing interface.
• Respect all access policies.
• Reuse as much core code as possible, e.g. whatever can be sent to existing processors will be.
• By the same logic, we will use ExtJS & MODext to render the interface.
• Provide translation packages in English and Chinese.

End Goals:

• As premiere partners of MODx, we intend to do our best to spread adoption of the best open source CMS in the world. We think that releasing a good front end editor for Revo would help with that.
• To finally put the code jam concept to the test, hopefully along the way inspire others to finally start and finish the ideas that got lost along the way.
• To familiarise ourselves with Git as we try to improve our internal workflow, and to release the code onto GitHub so that the community can continue to improve our initial offering.

If we get round to a second release, there's many features that we can add to make the front end editor a true alternative to the existing manager interface. To list a few: Preview mode (e.g. view changes on the page without saving), drag and drop of elements and files, custom tv types. We'll be taking suggestions after our first release.

Conceptual Wireframes:

(rollover for an expanded view).

So - when is this happening? It's pencilled in for January the 8th, with christmas and new years out of the way, we'll have a clear road ahead to make this happen.

- The Ninja

1. Our employees were born on a computer that was designed, programmed and sold by our own hands.
2. We had a programming competition with superman. The loser had to wear their underwear on the outside.
3. Our design team also work as consultants. You may have heard a few of their clients: Da Vinci, Gaudi etc…
4. We have a core belief of  “being porno.”
5.  Side note “Knock Knock.” “Who’s there?” …….(very long pause)…. Flash.
6.  When life gives us lemons, we create a spiritually uplifting website.
7. When we look at code it gets smarter.
8. We employed a ninja, and then fired him for not being awesome enough. (http://stephchev.posterous.com/i-am-a-digital-ninja-via-davideatslife-marcir)
9. We are the life of the conferences we’ve never attended.
10. We speak fluent code, in English.
11. Our legend precedes us like the su precedes the do.
12.  We won the best ever website award using a typewriter.

- The Heckler

 

Just had the opportunity to listen to David Siegel's keynote speech - which to say the least was very enlightening and thought provoking.  David started his presentation by acknowledging that Web 3.0 is an evolution of the way in which we perceive and utilize the web.  He asked how can the web solve fundamental problems in business considering that we spend 53% of our time searching for the "right" kind of information - roughly half the time spent researching is spent on filtering information and deciding whether it is relevant.  While not providing an explicit answer, his position revolved around the paradigm shift of "pulling" information rather than having information being "pushed". 

How do we "pull"?  He defines the dynamic as Semantic Web and provided 5 fundamental and defining variables for the Web 3.0 era:

 - having unambiguous content
 - having information that is findable and accessible
 - that information/data is interoperable
 - that information is not duplicated and move in the direction of modular data that is reuseable
 - that the data can be pulled

If Web 1.0 was about populating and pushing information onto the web, Web 2.0 as my partner eloquently describes is allowing users to react to that information.  Web 3.0 based on my understanding is how can the web become more user-centric and customized based on experience and preferences.

- GC

You may be familiar with xkcd's comic #149, and the ensuing tee-shirt. This has been a bit of a running joke in the Butter office, often coming up when teaching someone the basics of linux commands. As it's one of our developer/project manager's, Eve's, last day today, I decided to put together a little parting gift in the form of a bash script.

For anyone that's interested here's the code:

#!/bin/bash
if [ "$UID" -ne  0 ]; then
 echo "make your own damn sandwich.";
 exit $E_NOT_ROOT;
else
 echo '

                   _.---._
               _.-~       ~-._
           _.-~               ~-._
       _.-~                       ~---.
   _.-~                                 ~\
.-~                                    _.;
:-._                               _.-~ ./
`-._~-._                   _..__.-~ _.-~|
 /  ~-._~-._              / .__..--~----.
\_____(_;-._\.        _.-~_/       ~).. . \ 
   /(_____  \`--...--~_.-~______..-+_______)
 .(_________/`--...--~/    _/           /\
/-._     \_     (___./_..-~__.....__..-~./
`-._~-._   ~\--------~  .-~_..__.-~ _.-~
    ~-._~-._ ~---------   / .__..--~
        ~-._\.        _.-~_/
            \`--...--~_.-~
             `--...--~
'
fi

On a side note, I'll take this opportunity to wish Eve the best of luck for the future. Eve was Digital Butter's first employee, and our office is definitely not going to be the same without her. I know she will be missed by both our team and our clients.

One of the most interesting people we've come across so far during our developer hunt is the extremely talented developer Joss Crowcoft. Joss was passing through Hong Kong last week, and we were lucky enough to meet up with him for lunch. After lunch, Joss demonstrated his upcoming jQuery plugin - jQuery AppMenu and I'm happy to tell you that he has since released it. The plugin creates an Apple flavoured alt+tab menu for websites. Although it currently doesn't work on Windows (due to keyboard constraints) we think it's awesome, and will certainly be making use of it on a few of our upcoming projects. Check out the screenshots below, and then head over to Joss' website to download it!

I'm in Solvang getting very drunk - and of course, along the way punishing more steak. This is what North America is for right?

We're hiring! Looking for a developer in Hong Kong who can find our easter egg. Watch out for the rickroll...

We recently launched http://macau.womguide.com, the first bilingual site by WOMguide (word of mouth guide). The guys at WOM put on a good launch party so we didn't turn down our invitation.

Jude was lucky enough to be serenaded by the cheeky guitarist, he doesn't look at all uncomfortable.

WOMGuide Macau Launch Party from Digital Butter on Vimeo.

WOMGuide had a launch party for their Macau site (http://macau.womguide.com) last night (09/09/2010). Beer, pork buns, egg tarts and a questionable acoustic guitar player... What more could you want?

Macau is famous for it's portguese style egg tarts and pork buns - after devouring 4 of the pork buns, I now know why...

Having been talking about how we could maximize our office's space recently, here is a site that I found inspiring:

http://wherewedesign.com

And some good examples that I picked:

Raw Design Studio

---

SelgasCano

As our company is based in Hong Kong, our clients often require a multi-lingual site. Luckily for us, the MODx team have given us the perfect tools for internationalization, or i18n, in MODx Revolution. In this tutorial I'll show you how we handle i18n, making use of contexts and lexicons. There is two parts to achieving this. First, we create a context for each language, and set up a plugin to handle the request and load the appropriate context. Then, we'll use lexicons to handle any text in our templates, chunks and snippets.

Contexts

Lets start by creating contexts for each language. This will separate your content by language in the resource tree, keeping it nicely organised and allowing us to select content from the appropriate language simply by switching the context. To create a context, select Contexts from the System menu in the MODx manager and click create new. Enter a context key, and optionally a description and save.

The Plugin

The next step is to give each context a setting containing the Language key (or cultureKey). To add a context settings, just click on the context in the resource tree, and select the Context Settings tab. Now you can enter your content for each language in its respective context.

Next, we need to create a plugin to load the correct context for the selected language. To create a plugin, select the elements tab on the site tree and click the new plugin button.

Now we give our plugin a name (we usually call it gateway, you can use whatever makes sense to you) an optional description and category, and finally the code. For those of you less experienced in writing PHP, don't be daunted, it's a simple switch statement. In our implementation, each language will require its own subdomain (eg en.example.com) except for the default language, as this will be loaded for the primary domain (eg www.example.com). We pull the domain from the http_host option and switch the context accordingly. In this example we're only using two contexts/languages, with the default being Chinese. To add an extra language you just need to add a case (and a subdomain and context to go with it).`

		//make sure our plugin does not run on the mgr context (the manager)
			if($modx->context->get('key') != "mgr"){
				//grab the current domain from the http_host option
				switch ($modx->getOption('http_host')) {
					case 'en.example.com':
						//switch the context
						$modx->switchContext('en');
						//set the cultureKey
						$modx->setOption('cultureKey', 'en');
						break;
					default:
						// Set the default language/context here
						$modx->switchContext('chinese');
						$modx->setOption('cultureKey', 'zh');
						break;
				}
			}
	

Finally, we need to set the plugin to run on the onHandleRequest event by selecting the System Events tab and checking the box for OnHandleRequest, don't forget to save.

Lexicons

Now lets move on to Lexicons, the core of i18n in MODx. A lexicon is simply a collection of language entries. A lexicon entry is any piece of text that will appear in your templates, chunks or snippets. In MODx the entries are separated into files by namespace, language and topic. We like to create a namespace for our lexicon entires to separate anything that we create from the core lexicon. To create a namespace, select Namespaces from the System menu and hit the Create New button. Enter a name for your namespace (we generally use the site name here) and a path to the namespace. For the path we like to use the core/components directory which is also where all the namespaces for 3PCs live but you can place it anywhere you see fit. Remember, this is a full path to the directory, so it makes sense to use the {base_path} or {core_path} options as appropriate (eg. {core_path}components/directory_of_namespace).

Before we create the entries we need to set up the directory structure. So in your filesystem, navigate to the directory of your namespace (create it if you haven't already) and create a directory called lexicon. Inside the lexicon directory we create another directory for each language. In our case one named 'en' and one named 'zh'. Inside that folder we create the lexicon files. The convention for naming these is topic.inc.php so if your topic is cart the file will be cart.inc.php. If you would like to group these further, you could create a directory (eg. store) and have your php file in there. To specify this in your lexicon call (which we'll cover a little further down) you would use directory.filename as the topic (eg. store.cart).

Storing an Entry

Now to create an entry. Inside your topic.inc.php file, we need to add to the $_lang array. The convention for this is $_lang[key] = value. The value can contain HTML, snippet calls or placeholders (passed in the lexicon call).

A lexicon entry where the key is store.your_cart and the value is 'Your cart':

		$_lang['store.your_cart'] = "Your cart";
	

A lexicon entry where the key is store.more_info and the value contains some text with link to more info:

		$_lang['store.more_info'] = "Click here for more info.";
	

A lexicon entry where the key is store.cart_count and the value uses a snippet call to fetch the number of items, followed by the text 'items':

		$_lang['store.cart_count'] = "[[!ShoppingCart? &action=`getCount`]] items.";
	

A lexicon entry where the key is store.hello and the value uses a placeholder containing the name:

	$_lang['store.hello'] = "Hello [[+name]]!";
	

Retrieving an Entry

Lexicon entries can be called in with a MODx tag, or with PHP code.

Here's' how to call a lexicon in template/chunk. This will call the entry with the key store.name from the file namespace_name/cart.inc.php It will use the current cultureKey by default, but if you need to specify a language you could do so by passing the 'language' parameter (eg. &language=`en`).

		[[%store.hello? &topic=`cart` &namespace=`namespace_name`]]
	

In this lexicon call we're setting a placeholder called name which will be available in the entry:

		[[%store.hello? &topic=`cart` &namespace=`namespace_name` &name='Jude']]
	

There's a little more to calling lexicon entries with PHP. First we have to make sure the lexicon service is loaded:

		$modx->getService('lexicon','modLexicon');
	

Now we select a topic. The syntax is namespace:topic so the below would load the topic 'default' from the store namespace:

		$modx->lexicon->load('store:default');
	

Finally, we can use the lexicon method to call an entry. Again this will default to the current cultureKey, but can be specified in the load method by prepending the language (eg. $modx->lexicon->load('en:store:default')). This would get an entry with the key 'store.hello':

		$modx->lexicon('store.hello');
	

This will get an entry with the key 'store.hello' and pass the placeholder 'name' with the value 'Jude':

		$modx->lexicon('store.hello', array('name' => 'Jude'));
	

I should feel guilty about showing this massive pigout Jude and I had a couple of weeks back, yet somehow I don't...

Douglas Young inspired everyone in the room with his version of how G.O.D has gotten to where it is now.

A few months back I created a custom TV renderer for Evo that I thought was super cool, until I saw some of the things extJs will allow you to do in Revo and then forgot about it...

Still, I came back to a project I used it on and where I used the CMS as an editor (rather than developer) and really appreciated this TV so I thought I would show it and see if anyone had any ideas how this might be best employed in Revo.

It works off a very similar structure to Jeff Whitfields plugin for EvoGallery coupled with ManagerManager where jQuery is being used to improve/enhance an existing TV form field.

My requirement in this case was to have a list of resources on the homepage be displayed in a specific order, whereby the admin is supposed to be able to choose which resources are displayed as well as in which order to display them. In context, this site is an F&B portal that frequently reviews and promotes restaurants, hence the need to 'promote' certain resources on to the homepage.

I have seen a couple of tutorials now on how to promote resource to the homepage using TVs (on the actual resource itself) and applying a TV filter with Ditto. That can work, but in this case I want to order the resources too, so a simple TV on a resource isn't going to work. Plus, drag and drop reordering would be pretty neat, clients have come to expect that after all.

Long story short - here's the TV in action, I have to give most credit to the jQuery plugin developer for this one, I've simply applied his brilliant plugin to any multiple select field in the resource edit panel:

So behind all of that is a normal multiple select TV field, but with the enhancements that the jQuery plugin gives you, you're now able to actually sort the list as well as see all of the items you've selected from the list. The quick search is pretty cool too - especially when your list starts growing past the 100 mark. It's all done client side so this is only scalable to a certain extent.

Now to actually using the TV itself, I've created a custom snippet that reads the TV value and processes the ID's of the selected resources one by one *in order*. Code looks something like this, but don't hold me to it:

//assume tvValue is passed in a snippet call
$tvValue = (isset($tvValue)) ? $tvValue : '';
$resources = explode(",", $tvValue);
foreach($resources as $resourceId){
//load your resource fields here and apply templating here

Next up - applying this to revo using MODext!

- JB

We’ve got a few projects on right now where email delivery is really important (ecommerce order confirmation etc). Postmark seems to check all the boxes for features, pricing is fair, and they have a nice API for us to be able to integrate it into our own ‘app’.

I’m about 25% through these basic ‘wireframes’ for the email control panel we’re intending to use in multiple MODx Revolution projects. The panel will be a third party component (3PC), initially integrated into a shopping cart package that we’re also working on.

Early days… but so far so good, it’s crazy how quick you can go with MODext =)

I think this is an example where we’re *really* starting to see now the power of the new MODx manager together with extJs. I can’t wait to see what else people start to come up with as more start learning MODext.

zaigham:

RT @splittingred: Updated Gallery 1.0 for #modx #revo - now adds custom TV with resizing/rotating/crop/more : http://bit.ly/8ZyHWD

Some vids of this in action:

http://assets.modxcms.com/videos/gallery-crop2.mov
http://assets.modxcms.com/videos/gal-resize.mov

I almost didn’t notice that the ‘Gallery Browser’ is not in fact the MODx Browser… but something much more streamlined for that specific TV. Looking forward to poking through Shaun’s code to see how he did that =)

Today we’ve soft-launched a new site called ‘Shi Wai Yuan’ or ‘世外源’ in Chinese. Here’s a little intro, taken from the actual website:

Shi Wai Yuan is a luxury lifestyle website that focuses on Wine, Travel and Leisure, Luxury Goods, Health, Sports, Automobiles, Entertainment, Culture and Etiquette, Sustainability and being Green and Environmentally conscious, Cuisine and Culinary Arts, and Homes and Property. Education is one of the core elements of Shi Wai Yuan.

^ http://en.shiwaiyuan.com/about/our-philosophy.html

It’s aimed at the Chinese market primarily, and it has some interesting and unique content - I’ve enjoyed watching the tongue-in-cheek etiquette videos especially:

For a site like this we wouldn’t choose to build it in anything other than MODx Revolution.

Right now we’ve got 2 contexts setup for the site, one for each language. But we’ll be adding a third when we launch an ecommerce section of this site in a month or two.

Having launched a handful of sites making use of contexts, I have to say I think it’s my favorite addition to MODx and I think it extends its’ capabilities exponentially.

In case it’s of interest, here’s a list of the snippets we used to develop this site, accompanied by some of our own custom snippets of course:

• getResources
• FormIt
• GoogleSiteMap
• Breadcrumbs
• Gallery
• SimpleSearch

The site is built in two languages, English & Chinese. We’ve done quite a few multi-lingual sites recently, but this one has by far been the most smoothly and efficiently executed now that we have learned from our past experiences with translation management.

One of the rules we will be sticking to is quite a simple one: as a developer, you are not allowed to close a file in your IDE if even one measly bit of hard coded text is left in there… chances are, you’ll forget about it and hunting down loose hard coded language strings is not a fun job for anyone.

I’m also really impressed at how fast this whole system is running - without any specific extra work other than using the MODx caching system, the pages are rendering in around ~0.1 seconds - and that’s before we’ve even had time to do any heavy optimization work or tried out any of the advanced caching abilities (e.g. memcache).

One of the cool design elements of Shi Wai Yuan is the dynamically changing mood-setting background of the site. At this point the site has 6 different backgrounds (grapes, wood, leaves, sky, steel & carbon fibre), each supposed to be somewhat relevant to the section of the site being viewed; so you’ll find the background of the site is grapes when you’re viewing the wine and spirits section of the site, and greenery when you’re browsing the health section.

This is actually pretty easy to do - we’re just applying different classes to the <body> tag of the site, so that different background graphics can be loaded via CSS.

body.leaf {
background:url(“../images/background_leaf.jpg”) repeat scroll 0�0 #EFEFEF;\
}

^ This loads the site with leaves in the background.

body.sky {
background:url(“../images/background_sky.jpg”) repeat scroll 0�0 #EFEFEF;
}

^ This loads the site with clouds in the background

So the CSS is very simple, we just need to be able to define which class the page should load with, depending on the section of the site we’re in. This is also really simple using MODx Revolution, you can create a Template Variable for every template, set the type as ‘image’ so that your content editors can select images from the resource browser and you can then define your <body> tag in your templates as so:

For obvious reasons, you don’t want to have to do this to EVERY page on your site, that would be a painful chore (and your editors might forget)… So, there’s a few options, the simplest would be to use a default value for the template variable. For our needs we opted to use @INHERIT for the default value of the TV, meaning that we can define the image just once at the top level and all sub pages will inherit it’s parents’ field value (and so on up the tree). This means that by default, if we only set the field for pages at the root level of the site, then all pages beneath root level will have the same background as it’s ‘ultimate parent’.

(Evo is also capable of this in the same manner described above, but you should be using Revo by now =P)

The best part about this is the flexibility - it gives you the power to set a different background at the page level if you need to, but also allows you to change the background of an entire section by just setting one field (for those of us who are lazy).

More info on @INHERIT in these two links:

• http://www.gregorysmart.com/2010/04/02/modx-at-bindings-inherit/
• http://sottwell.com/tv-bindings.html
• http://svn.modxcms.com/docs/display/revolution/INHERIT+Binding

Coffee, Kettle chips, and Evelyn Lin (NSFW). Those are just a few of the inside jokes that make the office so incredibly fun (and I’m not just being paid to say that!). All jokes and fun aside, learning MODx has been an incredible experience.

I remember back in January, when I first joined the team, I was still unaware of any CMSes. I had learned to code HTML and CSS, and then tried to read up on bits and pieces of PHP. I’m a good learner, but I’ve never had someone who’s had the patience of personally teaching me how to do it.

And then I built my first MODx site on Evolution. Instantly, I understood the concept. What was there not to get? That should be the pagetitle? Replace it with [*pagetitle*]! You need to use another field in there? Replace it! Essentially, it was a search and replace game. Just replace everything that needed to be dynamic, and you had your original website again. Converting frontend code to a CMS was just that easy. With that, I fell in love.

This past weekend, someone made a prop bet with me. We had received a project with a client who’s from a design firm. They had already provided a “website” (I use that term loosely, because if you had seen the source code, you would’ve cried out in horror too). So the prop bet was this: build a website in a workday, and I would get a packet of Kettle chips (salt+pepper is absolutely money. Don’t let anyone tell you otherwise). Eventually, I managed to get the deal to doing it on a weekend, while getting 2 personal days in return. We shook.

So with the difficulty level only ever rising to finding hex color codes, I pretty much re-frontend coded the site, while at the same time, adding in placeholders. I woke up at 4pm. Made myself some pasta. Sat down at 5pm, and started coding. No distractions, no meetings, just a perfect work environment. I finished the whole thing by midnight.

It was amazingly fun. Beating the deadline. Being able to consolidate my knowledge of MODx without having to look up anything in the documentation. I was already well-versed, knew exactly where to start, and what my direction was. I built a website on my very own, without any questions asked. (I even had time to insert all the content too.)

Granted, it’s taken me 5 months to get to this stage, with many people supporting me along the way, being patient with me, teaching me all that I needed to know. I’m a naturally curious person, and it’s helped me learn so much. I know we've been getting a lot of rep for building out Revo sites, but in all honesty, the simplicity of Evo gets so much done. (Earlier today, James accidentally wrote out [ [+session.lang ]] on an Evo site, and I had to remind him that he was back in Evo.)

- Eve Lin

PS - Some day I’ll gush over my love for keyboard shortcuts, Reddit, Mac apps, multi-finger swipes, bacon, funny comments in source code, our inappropriate jokes, web_assets, and my hatred for screencasts.

We’re building out a large scale bilingual portal using MODx revolution (due to launch in 10 days), and because of the range of different content the site has, we’ve had to create a kind of ‘sub-templating’ strategy for our templates.

The idea is to keep the number of site templates in check - too many templates always leads to a maintenance nightmare - for us as the developers as well as the end user CMS admins.

In this particular site, we have a 3 column layout that goes as follows:

• Left sub-navigation
• Content area with resource specific content for an article, or if it is a folder, then a list of recently edited articles inside that folder.
• Right column with varying content, depending on the section of the site that you are viewing. For example, when viewing a page within the alcohol & spirits section of the site, the right column should feature a top 10 list of wines and a top 10 list of champagne. Those top 10 lists aren’t used in other sections of the site. In some scenarios, we may also want to override the content of the right column for one single page.

So we need to give CMS admins the ability to choose what sits inside the right column, and in what order it should be showing.

Internally we decided to name the right column blocks as ‘widgets’. We decided that we would be able to build everything we needed with only two templates - one for article folders, and one for articles themselves. Both templates have been assigned three template variables, where each one is intended to load a widget in the right column.

We’ve also created a category in the chunks tree that will contain all available site widgets. If we need new widgets later on, they will be inserted inside this category and will become available for selection for CMS admins.

^ How we’ve organized the elements tree.

We’ve previously used categories for organisational purposes only - but in this case there’s actual functional use (see @SELECT binding below).

The three right widgets template variables have been setup as ‘single select dropdown lists’ where options are drawn dynamically from the right widgets chunks category using an @SELECT binding:

@SELECT name FROM modx_site_htmlsnippets WHERE category = 7

The default value of the TV has been set to @INHERIT, meaning that the choice of right column widgets will cascade down the resource tree, unless a CMS admin decides that they wish to override the configuration for any single resource.

So now that we have assigned those TVs to our two templates, here’s how it renders on the resource edit page:

Lastly, to actually render the widgets inside the right column, we have this block of code inside the template:

<div id=”ls-right-col”>





</div>

The MODx parser will evaluate each of those tags as follows (in the example that Top 10 Wines has been chosen):

3. Contents of the Top 10 Wines chunk, which can contain any content you like.

More to come on this new portal soon =)

Recently, we’ve been planning on consolidating the various hosting plans that we’ve collected onto a single (new) server, but as is often the case in this industry, it’s difficult to find time for these in-house things. This month, we’ve had a lot of trouble with one of our providers, who happen to be hosting the main bulk of our DNS records. After the 3rd instance this week of the DNS being down (not to mention the entire server being down for 48 hours a couple of weeks ago), we made the decision to go through with the migration ASAP when we received this, very enlightening response to our support ticket.

Support Ticket #1940 has been updated

Description:
Hello,

Please check now.

Thanks

So, I’ve spent the last few days setting up a shiny new cloud server to host all of our projects. Once set up, the only major issue was the lack of fancy control panel to manage the virtual hosts. While this may suit the developers down to the ground, our interns and office staff, who often get the pleasure of this grunt work, would struggle with the Linux CLI. After exploring the existing options and being unable to find anything suitable we decided to build one.

I started by setting up a basic control panel that would store these sites and the full virtual host entries, based on a template, in a MySQL database. I then wrote a PHP CLI script to pull the entry from MySQL, and if necessary create a vhost file and the document root/log directories. I modified Apache’s init script to call my PHP script on start/reload. Perfect!

Next, came the issue of being able to reload Apache’s configuration after adding one of these sites. I created another script that would reload Apache if a certain file existed (created by my control panel), then delete it. Finally, I set up a cron job to run this check every minute.

…Just like a bought one.

- Jude.

I can't resist showing some kind of teaser - following in the footsteps of Jason & Shaun, we're in the middle of building out our shiny new (MODx Revolution powered) blog to showcase some of the more technical & intimate details of what goes on here.

We're planning to start by blogging about building the blog itself - as well as the basics, it's going to have a couple of 'experimental' cool features and we've given ourselves an excuse to build 3PC's, custom TV input types and custom TV output types.

Looking forward to launching it after we've skinned it =)

 ^ Wireframes for the blog - to be passed onto our designers.

^ Backend in development...

The first thing that struck me was how many *good* packages are already available for MODx in a short space of time since we started building sites in Revolution (most coming out of Shaun McCormick's underground lab). You can build a blog very very easily now using a few core snippets and even through drag and drop from the elements tree.

Adding special touches isn't hard either - I installed Shaun's Gallery package and was amazed when I turned on the gallerific plugin, dragged the Gallery element into a document and it just worked - even without adding my own css.

zaigham:

RT @splittingred: New: SimpleSearch, a simple search Extra for #modx #revolution http://bit.ly/dAnSub

I heard from Jason and Ryan that Shaun is known for pumping out quality code in a 10th of the time a normal human being would be - now I'm starting to see they weren't lying as this stream of amazing packages keeps coming and coming.

I have no idea how he keeps this up but it's amazing to watch...

1. First we need to create the user:
2. 
3. 
4. Now that the user has been created we will now need to set the user permissions for the user:
5. 
6. 
7. Remember to be careful when setting user permissions. For example Administrators will be able to edit the whole of your site.
8. 
9. 
10. 

1. 
2. 
3. You'll now receive an email with instructions on how to reset your password.

1. If you don't know your password follow the "How to Reset Your Password" how to here. If you are logged in change your password through your profile:
2. 

Wufoo is a pretty neat tool - the UI is awesome and the service itself is brilliant. We'll be using it for a Fortune 500 company website that we're building at the moment.

In the meantime I've started to use it to help me export multilingual forms to be used externally with FormIt in MODx revolution. Saves a few important minutes here and there.

This week we've been working on getting two new MODx revolution sites close to completion. After learning lots with a couple of recently launched large scale sites our workflow is becoming more and more efficient. Will share more on that later =)

These two sites we're building are both bi-lingual (english + chinese) and both have ecommerce sections. One in particular will be getting quite a bit of press up in China, and we'll be excitedly blogging about it as that date approaches.

I'm really starting to appreciate the power of using contexts in Revolution, the screenshot below shows 3 contexts for one of the sites, using this tutorial we'll be launching the site with subdomains for each context:

store.domain.com, en.domain.com and domain.com - elegant and tidy =)

After a great week in North America I'm preparing to sit through the 14 hour flight back home to Hong Kong. Will have good memories from the trip - beautiful Vancouver, lots of overeating and meeting a bunch of great people at MODxPO.

 

Got our FoxyCart t-shirt - but only after striking a bargain with Brett that we'll send him a shot of Eve (our awesome developer in HK) wearing it. (Pics coming soon - in a week when we arrive back in HK). EDIT - We tried hard but she's too self conscious =P

Brett's talk showed how knowledgeable he is in the e-commerce space - we've built many many ecom sites (checkout this one done in revo) but only after listening to Brett did we realise how much more thought he has had to put into understanding the space to launch FoxyCart. Up until now we haven't used FoxyCart but after seeing Brett's demo I think we'll be trying to use it very soon.

If anything ecommerce/MODx related interests you I recommend watching Brett's talk on Patrick Rice's (@AMDBuilder) site.

Ryan was kind enough to invite all the out-of-towners over to his lovely home to meet the family and experience a BBQ, Thrash style.

It was great listening to the stories of how MODx unfolded - how Jason, Ryan, Shaun & Jeff all came to work together - inspirational stuff. I don't think there are many others out there who have gone through an open source build process and come out the other side with something that is so powerful and well thought out.

The BBQ also gave us a chance to mingle with some other MODx-ers who make up this great community. It was great meeting y'all, and we'll keep in touch.

We're heading back to Hong Kong in 2 days - the plan is to upload a bunch of case studies on some of the site's we've recently built in MODx with a few code snippets to add a few more in-context tutorials of building sites in Revo to do our part in convincing people to make the transition over from Evo to Revo in the coming months. We'll also be posting up a few upcoming site launches on our blog - we think we're doing some exciting stuff with MODx that people should see.

Thanks to Ryan Thrash for the recommendation to go to Bob's chop house. I Could barely move after this...

Sorry for the poor photo quality - it's taken on a blackberry.

Cool talk showing how to use managermanager to make the backend easier for your clients to use. We've used it a fair bit - Jeff has some really cool widgets though - one to be uploaded later this week for drag and drop 'carousel/cycle' type features.

The site being shown was Hadleighs Bespoke - very nice looking heavily javascripted site.

Props to Dell for recognizing what a great platform MODx is.

We can see parallels with a site we built a while back - navigation on the restaurants page is somewhat similar to the attribute based navigation Dell is using, in our case TV values are being used for navigation to choose restaurants by cuisine, ratings, locations etc. (see the restaurant selector in the left column of WOMguide.com)

The way we built the backend looks pretty similar to how Dell have done it, without all the manager manager customisations. We'll write up later on about how that live updating restaurant selector is able to give search results previews in real time without crashing the server =) Our solution is actually to use a free Java based fulltext search engine called DBSight.

Also has some other cool features - Try searching for 'chiken' in the the quick search, and you'll be prompted 'did you mean chicken'. All of this comes dynamically from TV field values found in the database.

Just heard from Ryan Thrash about the current state of MODx and the future position. Very exciting stuff, all the core team seems super enthusiastic about executing that vision.

Next up is Jeff Whitfield - schedule has been changed slightly.

Just heading downstairs now to meet everyone for breakfast. Looks like an awesome day ahead of us.

Hope you're all jealous =P

Just finished beers with the team and the rest of the bunch that have come to Dallas for the MODxPO.

Very exciting, but time for bed now so we don't miss breakfast.

Well that wasn't easy... 14 hours later and we're in Dallas.

The hotel is pretty nice, nice rooms. We're gonna go hunting for the bar now =)

Will upload some photos shortly.

After launching 5 sites in as many days leading up to our trip (we loved the deadlines), we celebrated by attending WOM's launch party for their new Mobile optimised site, WOMobile While the site was in beta for the past month, it was finally revealed to the public at another great party after the recent success of their 5 year anniversary party.

We'll be sure to post some event photos when we get back to Hong Kong.

When we find some time, we'll do a write up of how we built this on top of the existing MODx Evolution system that powers the main WOMguide.com site.

EDIT: Here's some photos (taken from WOMguide.com)

So we finally have time to upload a few of our case studies while waiting in Seattle's airport for a connection to Houston... "are we there yet.."

The day before we left Hong Kong for this trip to North America and MODxPO we launched a site for our good friends Mark, Laura and Neville - Gizzy & Nacho.

This is our first e-commerce site built in MODx Revolution - and we really packed in the features for this one:

• Full Inventory management 3PC using MODext, xpdo etc with database export to Excel.

• A point-of-sale system allowing Gizzy & Nacho to sell inventory in their brick-and-mortar store front while producing receipts & invoices. All whilst maintaining a live-updated inventory database that is reflected online.

• Templated invoicing & receipts

• Dual checkout mode - either as a member or as a guest. Members can keep delivery addresses on hand, and have access to promotion codes and store credit (if applicable). 

• Embedded dual currency payment options handled by AsiaPay that supports Visa and Mastercard, as well as China's two major payment gateways.

• Customers can be assigned store credit, as well as promotion codes to apply custom discounts to order totals.
• Custom discount rules are applied only to items that are not already marked as on sale.
• Custom shipping policy/pricing based on customer delivery address.
• Email 3PC using the modMail service to apply custom HTML templates to any and all customer service communications.

Would love to hear your thoughts =)

Next stop, Houston.

Prior to booking our flights to Dallas, we spent the better part of the last 2 months building out a fairly large scale portal using MODx Revolution. As part of our process, we took to learning all that Revolution has to offer - in particular having fun with extJs, xPDO and lexicons.

This global portal features a unique B2C and B2B concept.  The site allows wine-o’s the opportunity to interact with the site by leaving tasting notes and rating wines, it also features a B2B component that allows events to be posted and perhaps most functional, it allows retailers to upload their entire inventory database. 

The site is still technically in beta and will continued to be worked on - the database is still in the early early stages. For all the wine-o's out there, hopefully you'll find some use out of this site and contribute to the ever growing database =)

A couple of links:

• Home: http://the-wine-guide.com/
• A Wine, with global Inventory: http://the-wine-guide.com/wine-detail-page.html?&wine=2593&retailers=worldwide#inventory_list

For the techies (& without giving up anything confidential) - here's a couple of snaps from the backend, pretty much all the wine database content is managed via custom built 3PC's making heavy use out of MODext and xPDO.

List of Components for wine/event/venue/promotion management:

The 'Wine Manager' 3PC. MODext being used for data listing as well as filtering. Really realised the power of MODext and the datagrids in particular here.

Quick editing a wine - just double click on a cell in the datagrid:

Handling inventory - data entry is done via CSV file upload. Wine merchants will be supplying their inventory in pre-templated Excel sheets. Using this component, not only does wine inventory get uploaded, unrecognised wines are inserted into the database. This database is going to get very big very quickly.

Lastly, this whole system is built in 3 languages. The inbuilt lexicon management tool did the trick pretty nicely =)

Come find us if you're at the MODxPO or leave us your thoughts and comments.  

EDIT: Forgot to mention that we heavily heavily used FormIt for the user input modules on this site. That snippet is incredible, thanks to Shaun McCormick for developing something so robust and well thought out.

Woke up @ 4.30AM (:|

Now we have 2 changes to get fom Vancouver to Dallas:

• Vancouver -> Seattle
• Seattle -> Houston
• Houston -> Love Field

We're 5 hours away from making the trip to Dallas via Seattle & Houston. Only a day and a bit to go now til MODxPO... =)

Pancakes and bacon breakfast this morning helped us forget the whiskey, tequila and 'pabst' beers that were enjoyed in Downtown Vancouver last night.

Views like this help too.

2 days til MODxPO - Tomorrow we make our way to Dallas.

As part of my first trip to North America, I'm being shown all the best parts of the way of life out here.

Eddie (Glen's childhood friend) cooked us huge steaks before the Canucks lost last night. Amazing BBQ skills...

3 days to go to MODxPO, we took the long route from Hong Kong to Dallas and stopped by Vancouver for 3 nights. Not the best flight in the world thanks to a couple of sleeping pills that didn't quite have the expected effect I was looking for...

Plans for today:

• Do some MODx work for the clients we left behind in HK
• Do some shopping
• North American BBQ
• Watch Cannucks
• Drink Beer

Flights are booked from Vancouver to Dallas - not exactly the easiest trip it turns out, with 2 transfers within the US before we even get to Dallas.