Website Optimization. Conversion Rate Optimization

The art and science of persuading your site visitors to take actions that benefit you.

Crediblity

Site must appear credible: Often a gut reaction.
Source credibility theory: Perceived expertise and trustworthiness.

• Professional web design
• Intuitive navigation (good usability)
• Clear unique selling point
• Loads fast
• Use ‘trigger words’ that users are scanning for
• Benefit-oriented content, that focuses on visitors needs and goals

Reassure users with:

• privacy policy link
• trust logos: Verisgn / Better Business Bureau / etc

Six psychological principles of persuasion, use them:

• social proof: Testimonials of people like you. Popularity (best selling xyz).
• reciprocity: Give first, initiate.
• consistency / commitement: Foot-in-the-door
• liking / similarity: develop user personas, speak their language
• authority
• scarcity: list how many products left, how long till sale is over

These come from Robert Cialdini’s Influence

Media

Brand is: Company name, logo, and tagline. Make them good.

Hero shot: Include one high quality prominent picture of your product, or of someone enjoying it. Put image on left and text on right for easier reading. Make it relevant. Make image clickable for larger view. Give it a strong caption – headlines and captions are most read part of page.

Interactivity increases conversions: Video, animation, live chat, something the user can interact with. Be subtle and tasteful.

Personas:

• Demographics: Age, gender, income, education
• Psychographics: Personality type
• Geographic: Local, national, international?
• Customer pain points and goals: What is the problem they are trying to solve? What is the single most important factor to them?
• Value proposition / unique selling points: Why you and not the competition?
• Benefit hierarchy: What benefits / features of your product are important to the customer? Order them by importance.
• Key frustrations and objections: What is their biggest frustration with companies in your industry and/or products like yours?
• Buying criteria: What factors do they weight when making the buying decision?
• Risk reversal: What risks are your customers taking when buying your product, and can you avoid those? 100% money back guarantee, free trial, free return shipping, etc.
• Keyword phrases: How do your customers refer to your product, what words do they use to search for it?

Unique Selling Proposition: “Oh I’ve heard of you, you’re the company that …”

Write for the web:

• Brief. Bold. Inject personality.
• Active voice, start with a verb.
• Front load with keywords, users scan the first one or two words of each title / link / bullet.
• Think newspaper headline.
• Use sub-headings.
• Write for scanning: Half the words. One idea per paragraph. Bullet lists. Highlight keywords.

Develop primary and secondary responses:

1. Primary response is your main call to action, typically ‘Buy Now’.
2. Secondary response is something for people who are not quite ready to buy now. Don’t lose them. Instead get them to sign up for newsletter, or download a PDF brochure, etc.

Show don’t tell. Encourage customer’s emotional mental imaging.

Links get highest clickthrough at 7 – 12 words. Repeat keywords that brought users to your site (ad words) in the links.

Avoid jargon, hype, and wimpy could should may might. Be positive – this will absolutely happen as soon as they give their credit card number!

Always be closing: Actually ask them to buy. Ask them to perform the call to action.

Metrics

Conversion metrics

What are your objectives – what does a ‘conversion’ mean?

• Sell product: Count completed orders, count additions to shopping basket.
• Ad clicks: For ad-supported site.
• Distribution / Downloads: PDF, software, etc.
• Informational: Read a page, view a video.
• Comments: A blog could make getting a user to comment a conversion.
• Sign-ups: Joining the site. Registering for the newsletter or for a beta invite, etc.

What to track, what to care about:

• Unique visitors.
• Average time on site. Pages per visit. These measure how engaged the user was in your site.
• Bounce rate: % of users who left within a short period of time, and without browsing to a different page on your site. High bounce rate pages need some work, or the campaign that lead them there incorrectly needs some work (wrong adwords being targetted for example)
• Conversion rates: Whatever you define a conversion to be.
• Entry points: Which pages do your users first land on? Also called ‘primary content consumption’.
• Exit points: Where do users stop browsing and leave? If it’s the ‘payment complete’ page, fine. If not, needs looking into.
• ROI (return on investment) by keyword and campaign, an cost per conversion: Track your advertising spend’s effectivness.

Business metrics you should be tracking anyway:

• Revenue per order
• Profit per order

Performance metrics:

• Number of HTTP requests
• Total size of data needed to view page
• Load times with empty cache and with full cache:
  • Server processing time
  • Start render – until then page is blank
  • Onload / document ready – JS starts
  • Fully loaded and executed.

Test in several browsers, as load times will vary. Test from several worldwide locations. webpagetest.org

The best answers are given by security expert Bruce Shneier – why open wireless. The second best answer is that Tor hacker Jacob Applebaum also runs open WiFi.

Here are my answers, and the reasons why you should join us.

What’s changed?

The only difference between an encrypted wireless network and an open wireless network is that the part between your computer and the router is no longer encrypted by the router. Anyone can listen in, and anyone can connect to your router and access the big wide Internet.

The part between your computer and your router is only a tiny part of the journey your data takes between you and, say, your online bank. None of the part after the router has changed; if it was encrypted before, it still is, and if it wasn’t is still isn’t, and you should fix that. Read one for how.

Reason: It’s nice

Have you ever used anyone else’s open router? Maybe one named ‘dlink’, ‘linksys’, or a Mac AirPort? I bet you were happy that was there for you. When you move into a new home, when you have problems with your connection, or simply when you’re out and about, it’s great to have a free network. Opening up my network is my small way of giving back.

Myth: Bad people in your front garden

The first question most people ask about open wifi is this: What if someone uses my connection to do something bad?

To use your connection, they would have to be a direct neighbour of yours, or sitting outside your house.

Isn’t it more likely they would go that extra block to the warm and dry coffee shop?

Do you hear of coffee shop owners going to jail much? What about the ‘dlink’ and ‘linksys’ people? “Bad People” typically have their own Internet connection.

Real Risk: Eavesdropping

You might be worried that other people will steal your secrets. Again, they’d have to be sitting in your front garden.

There’s a much better place to steal people’s online banking data, than your front garden: in a coffee shop, at a conference, or, best of all, in an airport.

Reason: It makes you safer

You should setup your machine so that all your connections are encrypted, wherever you are. Opening your home wireless gives you that extra discipline.

• Secure your web browsing. When doing anything senstive, make sure you are using the ‘https’ protocol (your browser will be showing a padlock).

• Secure your email. If using webmail, make sure it’s over https. GMail, to Google’s great credit, has that as the default. If you are using regular email, makes sure you use the encrypted protocol – IMAPS or POPS.

• Secure you IM conversations. Google Talk is encrypted if your client supports it (Pidgin does). Skype is encrypted. As far as I could tell, Yahoo Messenger isn’t, so avoid it.

Weak Risk: Your neighbourhood hacker

If you’re using Windows, you should be running a personal firewall on your machine. I believe there is now one built-in to Windows. Make sure it is switched on.

Administration

Most computers will auto-connect to any available wireless network when they start up. If you notice the same machines on your network every day for a while, they are probably auto-connecting. You’ll need to add rules to your router to ban their MAC address, shunting them back to their own router.

The point of open wireless isn’t to make your neighbours Internet connection redundant, but to temporarily help people out. Your neighbours don’t want to use your connection, as their is typically faster for them (they are closer to their router).

Happy sharing!

• When a process dies.
• When a machine stops responding to network requests
• When your machine has too high load average, memory consumption, or CPU usage.
• When a file changes, hasn’t changed for a period of time, or grows beyond a certain size.

It can run a script of your choosing to attempt to fix the problem. It has an HTTP interface that shows you essential stats about the services you are monitoring. For detailed graphs, I recommend Munin.

Here’s how to get it working on Ubuntu:

Editing the config file

Edit the single line to startup=1.

The config file that comes with monit is well commented, but just in case here’s the breakdown.

Set Monit to check services every two minutes (120 seconds), and log to /var/log/daemon.log

Setup email alerts:

Switch on the HTTP interface, allow access from anywhere, and require a username and password. Make it a decent password, because the HTTP interface allows you to stop and start services.

Monitor the machine itself:

Then monitor all the services running on that box.

If you monitor the totalcpu resource, note that is a percentage of all CPUs. On a 4 CPU machine, 25% represents a process consuming 100% of one CPU.

For the Apache monitor, the PID file is defined in /etc/apache2/envvars, and is usually /var/run/apache2.pid.

Here are the service monitoring lines from my config:

Quick Code

Start monit, and query it:

You need the HTTP interface to use the ’status’ command.

Monitoring MySQL replication

To monit MySQL replication, create a script to touch a file if replication is still running. Put that script in cron. Get monit to check that file.

The idea comes from replication monitoring with monit, where they use Ruby.

I ported the script to Python, as a Django management command.

The crontab:

The shell script:

The Django command:

Quick Code

Add these lines to /etc/monit/monitrc:

Happy monitoring!

Here are my notes from setting it up, they are brief, but should help you get going.

All the monitored machines run a small daemon called munin-node. One machine is the central server. Every few minutes it gathers data from all the nodes (including itself), generates the graphs, and writes out some HTML files.

In my case I have a proxy running Nginx and acting as the Munin central server, and two nodes each with Apache and MySQL.

Everything that Munin monitors is in a separate plugin. Most of the ones you’ll need are bundled, but might need switching on.

If you only have one machine, that is your only node. Do both steps on that machine.

On each node

Edit /etc/munin/munin-node.conf and add these lines:

If your Apache is not on port 80, edit the plugin config file /etc/munin/plugin-conf.d/munin-node and change or add these lines:

Link the Apache plugin (it may already be linked, no problem)

Switch on Apache ExtendedStatus

Outside of the Location section, add ExtendedStatus On Quick Code

Install the Perl www packages (the Munin Apache plug needs them):

Bounce munin-node and apache

On the central server

Setup a crontab to run the data gathering task every five minutes

Add this line

Edit /etc/munin/munin.conf and set the nodes you want to gather data from, and their IP addresses.

Run it!

Look in /var/www/. You should see a munin directory.

Setup your web server to point to the HTML files. If like me you’re using Nginx, edit /etc/nginx/sites-available/mydomain.com, and add these lines

Create the htpasswd file, or see password protecting a folder with Nginx.

Try it out, by browsing to http://myserver.com/munin. myserver.com is of course the address your Nginx is serving.

You should see some graphs, but they will be blank, or display Nan instead of numbers. Be patient. In 10 – 15 minutes Nan will be replaced by numbers, and the graphs will slowly start appearing.

Add nginx monitoring

A bit of fancy footwork required here. This might of improved by the time you read this.

Download Munin plugins nginx request and nginx status.

Replace the very first line of each one, the one that says @@PERL@@ with this line

Comment out the rest of the header. Open the file in vim, hit Esc, and type

Note: I’m obviously missing an install step here. If you know, please help me in the comments

Copy the plugins into munin’s available plugins directory

Edit your nginx config to switch on status. Edit /etc/nginx/sites-available/mydomain.com and add these lines:

Restart nginx: sudo /etc/init.d/nginx restart

Link the plugins into the active plugins directory

And you should be set. Happy monitoring!

Run commands starting with $ on Unix. Run commands starting with mysql> in the MySQL client.

The easy way: Skip the problem

If you hit both databases at the same time, with the same INSERT, they will create their own record, and try and replicate to the other, which already has that record, causing a duplicate error.

In a simple case like that, you just want to skip the offending statement:

More details on skipping MySQL duplicate errors

Most of the time, you skip one statement, and replication breaks again straight away, because there’s a whole queue of problem statements coming up.

The right way: Rebuild

If you are not sure that you can skip the duplicate, or if replication has been broken long enough that your two servers are out of synch, pick one database to be the master, and rebuild the other from a copy of that master.

First make sure your site is only using the master server. Stop any processes that might modify data on the server you need to rebuild.

We have two database servers:

• Good Server: The good one, with the correct data.
• Rebuilding Server: The one we are fixing. All it’s data will be erased with the Good Server data.

You’ll need a unix command line and SQL command line on both servers. If you don’t already use it, after you’ve got this fixed, I recommend checking out Screen.

1. On the Good Server

Dump data from the Good Server. The master-data switch adds a statement at the end of the file to start replication.

The quick switch makes dumping large tables use a lot less memory, so on a VPS it’s much faster.

All tables will locked during the dump.

Replace ‘my_database’ with your database name.

2. On the Rebuilding Server

Copy the dump onto the Rebuilding Server. Replace ‘myuser’, ‘good-server’ and ‘my_database’ as appropriate.

Load the dump. This can take a few minutes for a large database.

You should see Slave_IO_Running: Yes and Slave_SQL_Running: Yes. The master-data switch to mysqldump, in step 1, started replication at the right place for us. How nice. I love MySQL.

The \G means show vertical instead of the usual horizontal. It works with any MySQL command.

Now you have statements flowing Good Server –> Rebuilding Server. Next we need to get data going the other way.

Make a note of the File and Position rows.

3. On the Good Server

Set the slave here to be in synch with Rebuilding Server. Use the file name and log position from the previous step.

4. On the Rebuilding Server

Start the processes that point to the Rebuilding Server’s database. Done!

Monitor replication

The database is done, but you’re not done yet.

If you don’t already have good monitoring, take 15 minutes to setup Monit on all your production servers.

Monit is easy to setup (a word away from the monster that is Nagios), and will save again and again.

Once you have Monit working, take another 15 mins to monitor MySQL replication with Monit.

Now you’re done :-)

Telnet to your server:

telnet 127.0.0.1 11211

List the items, to get the slab ids:

stats items
STAT items:3:number 1
STAT items:3:age 498
STAT items:22:number 1
STAT items:22:age 498
END

The first number after ‘items’ is the slab id. Request a cache dump for each slab id, with a limit for the max number of keys to dump:

stats cachedump 3 100
ITEM views.decorators.cache.cache_header..cc7d9 [6 b; 1256056128 s]
END
stats cachedump 22 100
ITEM views.decorators.cache.cache_page..8427e [7736 b; 1256056128 s]
END

Thanks to Boris Partensky in the Memcached group here

There you go!

Luckily for me, message queues are this years Hot New Thing, so there’s some good options. I looked at RabbitMQ, Gearman, Beanstalkd and StompServer.

I’d like the message queue to play nice with Python, with Ubuntu, and take almost no memory, as I’m on a Virtual Private Server, and I’d like it to stay up forever. I want small and solid.

Summary

Memory size is the resident set size, obtained like so: ps -Ao pid,rsz,args | grep <name>. If there is a better way of estimating memory please let me know in the comments.

RabbitMQ

An all-singing all-dancing “complete and highly reliable Enterprise Messaging system”. With language like that you’d expect horrible bloat and per-cpu licensing, but happily that’s not the case. It’s straightforward to setup and relatively lean.

The protocol, AMQP, comes from the financial world, and is intended to replace Tibco’s RendezVous, the backbone of most investment banks. There’s lots of documentation, lots of users, a healthy ecosystem, and it looks good on your CV.
I tried RabbitMQ first, and liked it so much I almost stopped my evaluation right there and deployed it.

The best tutorial for using it from Python is here: Rabbits and Warrens

Publisher

Quick Code

Consumer

Quick Code

Gearman

Gearman is a system to farm out work to other machines, dispatching function calls to machines that are better suited to do work, to do work in parallel, to load balance lots of function calls, or to call functions between languages.

Developed by Danga Interactive (essentially Brad Fitzpatrick, who brought us Memcached and Perlbal). Used by LiveJournal, Digg and Yahoo.

Ubuntu users: Make sure you install package gearman-job-server, which is the newer leaner C version of Gearman. Don’t install gearman-server, that is the old Perl version. Also install package gearman-tools to get the command line tool.

Client

Worker

Beanstalkd

Beanstalkd is a fast, distributed, in-memory workqueue service. Its interface is generic, but was designed for use in reducing the latency of page views in high-volume web applications by running most time-consuming tasks asynchronously.

Developed for a very popular Facebook Application. The smallest memory footprint: after startup, connecting, sending a few messages, it’s resident memory size (rsz) was still only 0.5 Mb!

To install the server:

• sudo apt-get install libevent-dev
• wget http://xph.us/dist/beanstalkd/beanstalkd-1.3.tar.gz
• tar xvzf beanstalkd-1.3.tar.gz
• ./configure
• make (there’s no install step, it just generates the file ‘beanstalkd’)

To install the Python library:

• wget http://pybeanstalk.googlecode.com/files/pybeanstalk-0.11.1.tar.gz
• extract it
• sudo python setup.py install

There’s a good tutorial here: http://parand.com/say/index.php/2008/10/12/beanstalkd-python-basic-tut orial/

Producer

Quick Code

Consumer

Quick Code

StompServer

StompServer is a lightweight pure Ruby STOMP server.

To install the server on Ubuntu:

• sudo apt-get install ruby-dev rubygems
• sudo gem install stompserver

To install the Python library:

• wget http://stomppy.googlecode.com/files/stomp.py-2.0.1.tar.gz
• extract it
• sudo python setup.py install

There’s a good Python / Stompserver tutorial here: http://morethanseven.net/2008/09/14/using-python-and-stompserver-get-s tarted-message-q/

Sender

Quick Code

Listener

Quick Code

Results and Conclusions

I’d be happy working with any of these four. All four were easy to setup, fast, decent in memory consumption, and had good Python libraries.

RabbitMQ has the most mindshare (it is the only one which registers on Google Trends), but it took the most memory and is the most complex to use. It looks like a great product, but it’s Message Oriented Middleware, not an in-memory job queue, so it’s not what I’m looking for.

StompServer had the least documentation, and took several times more memory than Gearman and Beanstalkd. In seems the most immature project, but would probably be a good choice for someone working in Ruby.

Beanstalkd is great. I would like to see it in the Ubuntu repositories, and it’s Python lib in PyPI, but aside from that, I can’t fault it. I’m not choosing it, because Gearman is even better.

Gearman was designed for exactly the problem I have, takes almost no memory (1.4Mb), has a great pedigree (Danga), is widely deployed (LiveJournal, Digg, Yahoo), is in Ubuntu, has a Python library in PyPI, and someone helped me out on the #gearman IRC channel straight away. It even has queue persistence and clustering. So, Gearman it is.

• James Bennett: So you want a dynamic form
• Malcolm Tredinnick: Advanced Formset usage in Django

The steps are, create the group and add relevant users to it:

Change the project directory to be owned by that group, and accessible by no-one else:

Set the GUID bit on all the directories, so that new files and directories are created owned by the group:

Change the umask for everyone, so that new files are created with read and write permissions for the group:

The last part, changing the umask, isn’t ideal. It works on Debian and Ubuntu, because every user has their own group. I would rather a more focused solution, just for that directory – suggestions welcome.

References:

Mercurial and permissions
Multiple Committers
Change Ubuntu global umask
Collaboration models

My talk will be entitled How and Why to Extend Firefox in Javascript (and Thunderbird, Komodo, and Songbird). I will post the slides here in June.

See you there!

The game had a splash screen of a Far Side comic, then a short video of me tromping through the woods like a Neanderthal, which my Dad filmed and which I digitized with a very early video capture card.

In Borland’s Turbo C++ 3.0 I wrote a basic graphics engine to display the tiles of the world, and an event loop so I could move the main character around the world. I drew sprites for a proto-human (the micro zooid), dirt, rocks and sticks. He could walk around the world, and pick up and put down rocks or sticks.

Then I took a break to plan. I have a proto-human, rocks, and sticks. How do I get to civilization?

Edit /etc/subversion/servers
Add this line at the end: neon-debug-mask = 511

That showed me this error: auth: '/' is inside auth domain: 0.

This means that the path I was requesting (the root of the repo) was not considered inside the AuthDigestDomain I had set in Apache.

It turns out that at some point in the upgrade of Apache, Subversion, or a library, the AuthDigestDomain requires a scheme. I had
AuthDigestDomain svn.myserver.com
whereas it should of been
AuthDigestDomain http://svn.gkgk.org.

So now you know.

Foxden is a Firefox extension that allows you to tile all the web applications you use on one page. Imagine being able to see your email, your calendar, your bug tracker, feeds, twitter, whatever you use, on one page. Take a look at my setup:

As you can see, I have (counter clockwise from top left) my email, calendar, feed reader, todo list and a local text file for taking notes.

It’s free, should work wherever Firefox 3 works, and it could be yours right now.

Download the Foxden Firefox extension

• 50 items on the page (reddit pages 1 and 2)
• No next button at the bottom. You read then you go back to work.
• Floating filter removing the things that make you go Rrrrrr!
  • pictures
  • US politics
  • swearing (curse)
  • posts about reddit
  • WTF, OMG.

Right click on the link below and bookmark it, then browse to reddit and click the bookmark.

Eddit: Reddit bookmarklet

Tested on Firefox 3, Opera 9 and IE 7.

The idea is to reduce the noise and up the signal. The filters mean less noise, the 50 items mean more signal, and the lack of ‘next’ button means less distraction.

Eddit uses jQuery which reddit already pulls in. The bookmarklet simply loads and runs a Javascript file from my server. If you want to modify it, here is the non-minified source code of Eddit. If you change it remember to edit your bookmarklet to load your new file.

Historical note: Eddit was originally built on AppJet as a proxy, but that violated Reddit’s TOS, and it really belonged on the client anyway, so it’s a bookmarklet now.

In the Flex framework, you are expected to call invalidateDisplayList on the framework to say you need an update, and actually do the update when the framework calls your updateDisplayList method. This is the invalidation / validation pattern.

I went searching in the Flex code to understand how this invalidation / validation step ties in with Flash’s event model. I ignored properties and sizing, and edited the code down to the bare essentials.

Here is what happens when you change the label of a button:

1. Your code

2. Button.as

This is what you are meant to do, if you build your own Flex component. You save the new value (in _label), record that it needs updating (labelChanged = true), and tell the framework that you are ‘dirty’, and hence need updating (invalidateDisplayList).

3. UIComponent.as

UIComponentGlobals.layoutManager is a mx.manager.LayoutManager

4. LayoutManager.as

The last line adds our button to the list of objects that need validating.

The line before, callLaterObject.callLater, is where the action happens, so let’s follow it. callLaterObject is an mx.core.UIComponent

5. UIComponent.as

Here we are, at the very heart of the framework. The doPhasedInstantiation method (parameter method) is added to the list of methods to call later. Then we listen for the FlexEvent.RENDER and FlexEvent.ENTER_FRAME events. This is starting to look familiar.

sm is an instance of mx.core.SystemManager.

6. SystemManager

This is it, the interface between the Flex framework and the Flash player. We listen to the familiar RENDER and ENTER_FRAME events.

7. flash.display.Stage.invalidate

As in step 5 invalidate was called on the stage, Flash will fire a RENDER event when we enter the next frame, cued by the ENTER_FRAME event.

A Flex application is only two frames (preloader on frame 1, application on frame 2), but once the second frame has been reached ENTER_FRAME will keep firing at the frame rate, which by default is 24 frames a second.

So about 1/24 th of a second after we call invalidate, RENDER gets fired, which takes us back down from Flash into the Flex framework.

8. UIComponent.as

This calls all the callLater methods, including LayoutManager’s doPhasedInstantiation, which we added to that queue in step 5.

Note that we stop listening to the ENTER_FRAME events. As far as I can tell, there is no main loop in Flex, it’s all event driven. If nothing is happening in your application, then usually nothing is happening in the Flex framework.

9. LayoutManager.as

Iterate through all the objects that need updating, and call their validateDisplayList method. In step 4, our button was put on invalidateDisplayListQueue.

10. UIComponent.as

The button class doesn’t override validateDisplayList, so it’s parent gets the call. It in turn calls updateDisplayList, which is what we have been waiting for.

11. Button.as

And here we are, our updateDisplayList finally gets called. textField is a Flex specific subclass of flash.text.TextField, and is what actually gets rendered by the flash player.

12. The actual displaying

Flash completes the RENDER event, and renders the button to the screen, with it’s new label. And there you are, a new label on your button. How nice.

You’re an experienced server-side programmer, with a background in C/C++/Java/C# or Python, but no Flash experience. You want to learn Flex. Which book should you buy to learn Flex 3? I have speed-read the following, so that you don’t have to:

Good Flex Books

0. Getting started with ActionScript3 with mxmlc

A free online tutorial, which gets you writing your first ActionScript class, compiling it, and running the resulting SWF in flash player.

1. Foundation AS 3.0 w/ Flash CS3 and Flex – Steve Webber – Friends of ED

Flex is an application framework built on top for Flash, so you need to understand Flash to learn Flex. This book gets you building ActionScript apps. It explains some parts in Flash Authoring, but usually presents a pure ActionScript alternative, which only requires a text editor and mxmlc from the Flex SDK.

Learn about the Flash events, frames, graphics, etc. There’s a small bit of Flex at the end, but this will give you a solid foundation. And if, like me, you’re from a server-side background, playing an MP3 and graphing it in real time will be a lot of fun!

2a. Adobe Flex 3.0 For Dummies – Doug McCune

Don’t let the title put you off, it’s a very good introduction to Flex, and one of only two books that explains the component lifecycle, and the invalidation pattern. Will get you up to speed fast. Most of what isn’t covered here is in the online Flex API.

2b. Programming Flex 3 – Chafic Kazoun – O’Reilly

Good coverage of all of Flex, including explaining what’s Flex and what’s Flash, and explaining the component lifecycle. More complete than the For Dummies. Up to the usual high O’Reilly standard. If you’re an experienced programmer, and you know how Flash works, get this one.

3. First Steps in Flex – Bruce Eckel and James Ward – MindView

Very short (140 pages) and very tight tour of Flex (with a peppering of OO basics). Comes out of the Flex classes the authors have taught. As the name implies, it’s a great first exposure book, which will get you working in Flex fast.

It’s too short to cover the component lifecycle, how Flash and Flex relate, or how to work without the GUI (with mxmlc). Almost all the examples are in MXML, when in practice you’ll mostly write ActionScript classes.

If you’re short of time, a manager, or you’re learning Flex because you have to, this is the book for you. If you have more time and interest, prefer Programming Flex 3.

4. Flex 3 Cookbook – Various authors – O’Reilly

Lots of helpful stuff in here. Not a good book to learn from, but a good second Flex book.

Average Flex Books

Essential Guide to Flex 3 – Charles E. Brown – Friends of ED

Very basic. It would get you going, but only just. It’s a fair title, which delivers what it promises – just the essentials. Takes 600 pages to cover what First Steps in Flex does in 140. Prefer First Steps in Flex or Flex 3 for Dummies.

Flex 3 in Action – Tariq Ahmed – Manning

A disappointing book from Manning, which usually does better. This would get you going, as it covers all the Flex basics, but doesn’t go any further. No coverage of the invalidation pattern or component lifecycle, no mention of Sprite at all, and a poor index. A plus is that it includes a voucher for a free PDF version of Flex 4 in Action, when it comes out. Prefer Programming Flex 3, the O’Reilly book.

Poor Flex Books

Creating Mashups with Flex and AIR – Chris Korhonen – Friends of ED

Pick any two buzzwords, and publish. This book is all over the place, with lots of bits of content, but nothing substantial at all.

Pro Flex on Spring – Chris Giametta – APress

Here we go again, you got your two buzzwords, let’s print. This is a Flex 2 book. The first three chapters are hand waving about project setup (staffing, tools, installing, etc), then in the next chapter we’re overriding updateDisplayList, without any mention of how that fits into the overall framework.

AdvancED Flex 3 – Shashank-Tiwari – Friends of ED

This book is all about connecting Flex to other things, such as Java, PHP, Twitter, Salesforce, etc. But I wanted to learn Flex, not the Salesforce API! It also uses updateDisplayList without telling you what’s going on.

A plus point is that this is the only book I found that doesn’t toe the Adobe Consulting party line on Cairgorm, the ‘official’ Flex MVC framework, inspired by Java’s Struts. He points out it’s design shortcomings, how Struts isn’t a good match for Flex, and offers two alternatives.

Learning Flex 3 – Alaric Cole – O’Reilly

Should really of been called ‘Using Design view in Flex Builder’, as that’s pretty much all it covers. It takes forever to get going (’Who uses Flex’, ‘How Flex relates to C’, etc), and then has helpful sidebars telling you how to add comments using only the mouse (Click the Source menu, select ‘Add block comment’). Doesn’t deserve to be an O’Reilly ‘Learning …’ book, and I think Tim knows, because it didn’t get an animal for the cover.

On the plus side it is the most visually appealing book in the list. If you don’t read books without pretty pictures, and don’t own a keyboard, this might be the Flex book for you.

Special Mention – An Unusual Flex book

Flex 3 Component Solutions: Building Amazing Interfaces with Flex Components – Jack Herrington – Friends of ED

I really liked this book. It is essentially a catalog of third party Flex components, which, here, means graphical widgets. He covers the open source libraries, such as AS3CoreLib, FlexLib, and Degrafa, and the commercial ones such as as3components.com, and ILOG’s Elixir.

With First Steps in Flex, this is also the only good coverage of using Flex’s states, which the other books show, but don’t explain, and don’t use in a helpful fashion.

Finally there’s a great tip to use Google’s Sketchup 3D modeller to pre-render an animation, as an alternative to PaperVision3D.

Use the left and right arrow keys to rotate, the forward and back arrow keys to move.
The barrel of the tank is the little black line. That’s the front.

No, your tank can’t fire. Avoid the mathematical blobs. YEAH!
The longer you live, the more points you get. A score above 100 is, like, totally AWESOME! Good luck Bro.
Let me know in the comments how much you score.

This game is for Paul, who quit the comfortable life of a Brighton based software engineer, to go teach maths in Birmingham. Turns out there is a point to maths – it’s computer graphics.
The L.A. theme is just because I had that picture in my collection (which I took from the Griffith Observatory), and I’m a little nostalgic about it.

Download the source code. This code should be considered licensed under the GNU General Public Licence.

You’ll need the free Flex SDK to build it, and the standalone flashplayer (or know how to embed Flash in HTML) to run it.

Once you have those, unzip the source into a directory, and run:
mxmlc MathDodger.as ; flashplayer MathDodger.swf

If you are interested in ActionScript (not just for animators!), I suggest starting with the Senocular tutorial.

this in inner functions

1. If you are not in an object, this refers to the global window object.
2. If you are in an object’s method, this refers to that object,
3. except in an inner function, when this refers to the global window object again.

Number 3 is what you need to watch for. It is considered a bug in Javascript. Here is an illustration of the three cases:

The Firebug console will display this:
    Globally: [object Window]
    In an object's method: [object Object]
    In an inner function: [object Window]


To get inner functions to see your object, you need to copy this into a local variable. Thanks to closures inner functions can see all the local variables of the containing function.

This will display what you expect:
    In an object's method: [object Object]
    In an inner function: [object Object]


this in object callbacks

Object scope is not preserved when you pass one of your object’s methods as a callback. Example:

This prints:
    test: [object Object]
    onEvent: [object Window]


This is the case because when you pass this.onEvent as a callback, you are passing a function, like you might pass a string or an integer. The setTimeout function doesn’t know that it belongs to an object.

The answer is again to use the closure (that’s often the answer in Javascript), and wrap your call in an inner function, remembering the previous point about inner functions.

As expected, this prints:
    test: [object Object]
    onEvent: [object Object]


We save this in a local variable, then pass an inner function as the callback. That function has no context, but it does have a copy of our object saved in it’s _this variable. It calls onEvent on our object.

That’s enough work for now

The post title is inspired by this clip:

Happy Javascripting!

Let’s assume code for a whimsical Moose Observation Project, and translate it from Python to Javascript.

The Python

Here is mop.py:

The Javascript

And here is mop.js:

Using it

In Javascript:

The details

Let’s look at the interesting parts in more detail. Note that below when I say property I mean attribute or method.

The module is just a namespace

Because you don’t know what other scripts might be included on a page that uses your script, you need to use the smallest amount possible of the global namespace. Create an object, and put everything else you define in that object. Yahoo, for example, puts everything they write in the YAHOO object / namespace. Here our namespace is called MOP.

new: The class is a function which returns an object

The two parts of Javascript that make object oriented programming possible are the new operator applied to a function, and the prototype attribute of that function.

When a function call is preceded by the new operator, it gets given a new object called this, and it returns it. The Moose function is your constructor It is good practice to define your object’s data in there, same as it is in Python. It returns your new instance.

If you forget the new operator, you get no warning. The function is called as a function instead of as a constructor. this is bound to the global window object, and the function returns undefined. Your call is perfectly valid, yet it does something very different to what you wanted. A lot of Javascript is like that!

prototype: Instances can have methods – but ignore that

A significant difference between Javascript and most other languages is that in Javascript object instances can have properties. In most other languages, only the class has properties, and all instances share them. We’re trying to be Pythonic, so let’s not use this feature, but knowing about it helps to understand the prototype attribute.

When you call a method on an instance, if that method is not found, it will try it’s prototype attribute. The prototype attribute is shared amongst all instances constructed with the same constructor (because prototype is an attribute of the constructor function). If we put all our methods on the prototype, we get the same behavior as in a more traditional object-oriented language.

Object literals keep things tidy

I’m using an object literal to list the methods of the Moose class. Here is the equivalent code without using an object literal:

I think an object literal wraps the functions up more neatly and saves some typing.

Private methods

Javascript, like Python, doesn’t give you anything built in to declare an access level – everything is public. Using closures, you can have private methods in Javascript – examples here and item 6 here – but that’s not how Python does it.

In Python the convention is to prefix private methods with a single underscore. They can still be called, but you are warning the user that they are now on their own, all bets are off. Let’s simply carry that convention over to Javascript: _default_sound is a private method.

Conclusion

• Put everything in a namespace.
• You class is a function.
• That function is your constructor. You declare your attributes in that constructor.
• You call that function with the new operator.
• The methods of your class go on the prototype attribute of that function.
• Use the underscore-prefix convention to mark a private method.

Javascript and Python have a lot in common, and applying some of Python’s Zen to Javascript helps me impose some order on the chimera that is Javascript. I hope it helps you too.