Last year I needed to built a component to view data both spatially and temporally for work.  I tried searching for something open source, but nothing existed.  All I found was lots of people asking for such a component.  So in Nov of 2007 I decided to build it.  Why post it in Jan of 2009 then?  Well let’s just say “process.”  It’s not easy to release open source software when you work at a company.  But anyway…

The component uses and synchronizes OpenLayers map API with MIT’s SIMILE timeline.

A demo is available here.

And the project can be found here:

http://code.google.com/p/maptimeline/

find ./ -name ".svn" | xargs rm -Rf

I’ve been using the Kohana framework for about a week now. It has the performance of Code Igniter, while making some better design decisions imo (like the ability to actually access the GET parameters). Although many people love all the magic that comes with CakePHP (hats off to them for a superb framework!), I prefer to know how the data is traveling through the pipes. This is especially important with new frameworks where sometimes you have to dig into the core to see whats happening.

A test fixture allows you to have a consistent database for testing. Sure you could write a bunch of SQL statements, but that’s not easily maintainable. Read: Schema changes will break your scripts. Fixtures can be XML, JSON, or the newly popular YAML (which I will demonstrate here).

YAML is a human-readable data serialization format. It’s like XML, but without all the braces. Please see the link for more as I want to focus on fixtures for this article.

Great, you’re back. Now back to fixtures. I follow the convention of clearing the database when the test runs and leaving it as is when my test finishes. This allows me the chance to go back into the db if I want to check its state. Besides, wiping the db won’t serve any purpose other than to lose that state.

The most important library is my Fixtures library. It takes a reference to a database instance and a fixtures path. You will then call its load method to load the file into the database. That’s it! I’m using the Spyc library to parse YAML.

I’ll give you the quick flow of things, post snippets of a couple files and package up all the code for your downloading pleasure.

Flow

1. Unit test controller gets called
2. Instantiates Fixture class
3. Loads all YAML files from unit_test config file
4. Tests run

Code explained

/application/controllers/unit_test.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

class Unit_test_Controller extends Controller {
 
	const ALLOW_PRODUCTION = FALSE;
 
	// stores database config group to use
	protected $DB_GROUP = NULL;
 
	public function index()
	{
        $this->DB_GROUP = Kohana::config('unit_test.database_group');
 
		// setup a db reference
        $this->db = Database::instance($this->DB_GROUP);
 
		// load fixtures for test
        $this->fixture = new Fixture($this->db, Kohana::config('unit_test.fixtures_path'));
		$fixt_files = Kohana::config('unit_test.load_fixtures');
		foreach ($fixt_files as $fixt){
			$this->fixture->load($fixt);
		}
 
		// Run tests and show results!
		echo new Unit_Test;
	}
}

This is your entry point into the test harness. You’ll call it just like any other controller. While the Database library uses the ‘default’ group defined in /config/database.php, I want to use a separate Database connection. I defined it as ‘test’ and I have defined that name in the /config/unit_test.php file.

It creates a new Fixture object with the database connection and path where it can find my fixtures. Then calls load() for each file defined (in the config file).

Bug: As I am posting this I just found a bug where if you have multiple files that you are loading that use the same table all but the last set of inserts will be removed because I am truncating in the load file. I should just do this to the table once per run.

/application/libraries/Fixture.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

class Fixture_Core {
    protected $db;
    protected $fixture_path;
 
    function __construct($db, $fixure_path){
        if(!is_dir($fixure_path)){
            exit("{$fixure_path} is not a valid path to fixtures.  Please redefine in config.");
        }
        $this->db = $db;
        $this->fixture_path = $fixure_path;
    }
 
    /*
     * loads fixture data $fixt into corresponding table
     *
     * @param String $fixt Name of fixture file to load (without the extension). Found in the fixtures folder of the test directory
     */
    function load($fixt){
        $Spyc = new Spyc;
        $fixt_data = $Spyc->YAMLLoad($this->fixture_path.DIRECTORY_SEPARATOR.$fixt);
 
        # $fixt_data is supposed to be an associative array outputted by spyc from YAML file
        foreach($fixt_data as $table=>$data){
    	     $this->db->query("TRUNCATE TABLE {$table}");
            foreach($data as $idx=>$row){
                $this->db->insert($table, $row);
            }
        }
    }
}

Here I’m essentially leveraging the parsing of the Spyc library which handles the loading and parsing of the YAML file. Then I’m simply inserting it into the appropriate table.

Hope that helps!!

Download

kohana_test_fixtures.zip

Luckily for us, it’s not 1999 and calling what I do “building a website” frankly just hurts my feelings (I much prefer web app because web sites were always static pages without much business logic behind it.)

I haven’t lived on this planet long enough to see many programming languages evolve… that is until JavaScript. When I first started building web sites (yes, I called it that back then), the JavaScript I wrote looked like this:

<html>
<head>
<title>Party like it was 1999</title>
<script language="javascript">
<!--
function changeBg(obj, newColor) {
    obj.style.backgroundColor = newColor;
}
-->
</script>
</head>
<body>
<a href="#" onClick="changeBg(this, '#00aaff'); return false;">change background</a>
...

This code makes me cringe! For several reasons. Let me explain…

1. I never want to see onClick events embedded in your HTML (or presentation markup). Instead, move it to an external file and link it. This goes for the majority of your JavaScript calls, like changeBg() too
2. You are flooding the global namespace with new functions. Not only is it unmaintainable, it’s also completely devoid of any organization.

The Right Way

Thanks to guys like Paul Buchheit (G-Mail), we have been able to uncover other extremely useful aspects of JavaScript. As JavaScript comes into its own we need to embrace best practices and write beautiful code.

At work, I’ve noticed that while other engineers write great Java code, their JavaScript sometimes looks like a last minute thought. I don’t think this is due to laziness, but rather that they are unaware of the fact that you can apply design patterns to JavaScript just as you would other languages. Usually.

JavaScript Patterns

As I started to write this post I found a bunch of other bloggers already felt the itch and wrote very informative articles on this same topic. So to avoid reinventing the wheel…

Singleton
Module Pattern
Revealing Module Pattern

I noticed some funky behavior today when I tried iterating over an array of values. I have loved Prototype for some time. It’s elegant style, ease of DOM manipulation, and ummm.. it’s style!

However, the behavior I just encountered I don’t care for. I know that Prototype modifies (extends) the builtin objects of Javascript, namely Array and Object. I like the added bang for the buck that I get. But look at this test:

var l_a = ["A","B","C"];
var l_r = "";
for(var l_x in l_a){l_r += l_x + " ";}
alert((l_r == "0 1 2 ") + "\n" + l_r);

What do you think that prints out? Chances are you’re wrong. It actually prints out the array… followed by all the functions used to extend the Array object.

false
0 1 2 each eachSlice all any collect detect findAll grep include inGroupsOf inject invoke max min partition pluck reject sortBy toArray zip size inspect find select member entries _reverse _each clear first last compact flatten without reduce uniq clone toJSON call

The same sort of problem happens if you were to use object literals instead of arrays. Let me show you the bad and good ways to use each of them.

Array looping, BAD

var l_a = ["A","B","C"];
var l_r = "";
for(var l_x in l_a){l_r += l_x + " ";}
alert((l_r == "A B C ") + "\n" + l_r);
 
Output:
false
A B C each eachSlice all any collect detect findAll grep include inGroupsOf inject invoke max min partition pluck reject sortBy toArray zip size inspect find select member entries _reverse _each clear first last compact flatten without reduce uniq clone toJSON call

Array looping, GOOD

var l_a = ["A","B","C"];
var l_r = "";
for(var l_x = 0;l_x < l_a.length;l_x++){l_r += l_a[l_x] + " ";}
alert((l_r == "A B C ") + "\n" + l_r);
 
Output:
true
A B C

Object looping, BAD

var l_a = {};
l_a["a"] = "A";
l_a["b"] = "B";
l_a["c"] = "C";
var l_i;
var l_r = "";
for(var l_x = 0;l_x < l_a.length;l_x++){l_r += l_a[l_x] + " ";}
alert((l_r == "A B C ") + "\n" + l_r);
 
Output:
false

Object looping, GOOD

var l_a = {};
l_a["a"] = "A";
l_a["b"] = "B";
l_a["c"] = "C";
var l_i;
var l_r = "";
for(var l_x in l_a){l_r += l_x + " ";}
alert((l_r == "a b c ") + "\n" + l_r);
 
Output:
true
a b c

Long story short…

When using arrays always iterate over the elements with:

for(var l_x = 0;l_x < l_a.length;l_x++){}

When using object literals always iterate over the elements with:

for(var l_x in l_a){}

The bookmarklet I build is meant to enable analysts to clip content from the web and add it to a “notebook.” These notebooks are used by analysts to organize information and collaborate. We are also leveraging a triple store backend to connect similar keywords and make assertions which will ultimately allow these analysts to find more relevant information and catch the bad guy. But enough of what I do, let’s get back to the bookmarklet stuff.

So I had originally had all the code inside the link. The real problem with this is that new versions require an “install” and that is not what the web was about. So after some thinking I realized that I could just embed a file in the bookmarklet, so updates can be made seamlessly (or once the file cache expires).

While I was going through this process I came across some strange behavior when trying to attach the script element to the BODY. Another caveat to this approach was that if some arcaic website is still using FRAMESET there actually won’t be a BODY tag. More of a reason to attach it to HEAD.

Code is below:

javascript:function loadScript(scriptURL) {
  var scriptElem = document.createElement('SCRIPT');
  scriptElem.setAttribute('language', 'JavaScript');
  scriptElem.setAttribute('src', scriptURL);
  document.getElementsByTagName('head')[0].appendChild(scriptElem);
}
loadScript('http://localhost/bookmarklet.js');

It’s amazing how many people are doing “startups” in that area. I put startups in quotes though because a startup isn’t anything less than a great idea that hasn’t been fully executed yet. Second, I should clarify “amazing” too. Obviously Silicon Valley is the mecca for high-tech startups in the world, but you don’t actually realize what that means until you start to talk to people there. Here in San Diego I can count the number of people I know working on startups on one hand. Ok, maybe 2 hands if you count people wanting to get involved, but haven’t made that first step yet.

While I was catching up with Sameer and Shirin over dinner they were telling me how the majority of their friends (aside from working at Google) work in startups.

That said, here’s a summary of what I got from the Velocity conference. I had a great time and Steve Souders and the O’Reilly team really did a great job putting this together. My only suggestion for next time would be to show some more real examples. For example, I know that in order to scale you need to shard, partition and replicate the databases. You need to profile and test, then profile and test again. Maybe I was looking for more of a workshop, but it was very informative and I hope you return next year!

Here’s what I got…

Performance Overview and Tools

• Plan for perf from day 1
• Set expectations ahead of time
  • why do users of World of Warcraft accept downtime each week (and pay for the service), but users of Friendster/twitter don’t? Expectations.
• Even after you solved YOUR performance problems, ads become the root of the problem!
  • Artur has a cool hack to overwrite document.write to get around this problem
• Measure the right things
  • No cache scenario is really important
• When optimizing perf you can’t just look at the mean average, you have to look at the median, percentile, and outliers too.
• Automated testing and profiling needs to be part of the process!
• keep historical records of how features perform
• consider keeping some (small amount of) profiling code in production
• Tools
  • Kite
    • Real-time testing from multiple locations
    • Interactively test perf from desktop, last mile, and cloud
    • available in Aug
  • Jiffy
    • measure individual pieces of page rendering (script load, AJAX execution, page load, etc.) on every client
    • report those measurements and other metadata to a web server
    • aggregate web server logs into a database
    • generate reports
    • has Firebug plugin
  • Doloto
    • analyzes application workloads and automatically performs code splitting
    • code gets processed and only necessary initialization code gets transfers right away
    • the rest of the code is replaced by short stubs and transferred lazily in the background
  • CloudStatus
    • Provide service to monitor uptime and availability for AWS, Google appengine, etc
  • Fiddler (profiling tool)
    • Written by my old mentor from Microsoft!
    • measure request size, page wgt
    • analyze caching, compression, page composition
    • simulate low-speed/high-latency connections
    • breakpoint debugging
    • traffic modification
    • perf test walkthrough
  • AOL PageTest
    • Online version: http://www.webpagetest.org
    • http://pagetest.wiki.sourceforge.net/

Optimizing Page Load Times

• Apache changes
  • use gzip, far future expires and etag
  • Don’t use advanced compression (run time cost)
• Javascript changes
  • reduce DOM elements
  • lazy load components
  • use GET unless you need POST
  • use JSON instead of XML (don’t want to walk the XML tree!)
  • minify with YUI compressor + HTTP compression
  • use jQuery
• Content changes
  • minify JS+CSS as part of build process
  • render most of content on server side (instead of using JS+DOM for example)
  • fewer serialized actions
  • eliminated DNS lookup
  • move your contents closer to your customers (use a CDN)
• Trim cookies
  • moving them away from your root domain and root path “/” bc those will be sent with EVERY page request
  • compress cookies (heads) not just bodies
  • grouping multiple smaller files into fewer bigger ones (image clustering)
  • eliminating them by moving your static content to a different domain
  • trim down the # of requests and redirects (round trips)
• Work on improving perceived performance
  • cheat when you can by updating UI then do the work
• Unique tricks
  • After page load, download external CSS and JS for upcoming page views
• See my notes on Julien Lecomte’s High Performance Ajax for more great tips

Optimizing Images

• Choose PNG over GIF
  • avg savings of 20%
• Crushing PNGs
  • most image programs DO NOT optimize
  • cmdline tools:
    • pngcrush
    • pngrewrite
    • optipng
    • pngout
  • avg savings of 16%
• strip needless JPEG metadata
• reducing their color palettes
  • convert truecolor PNG to palette PNG (PNG8)
  • PNG8 has 256 colors, truecolor has millions
• far future expires (harder than it seems)
• combine images
  • use sprites

Scaling

• Use Memcached
  
  • high-performance, distributed memory object caching system, generic in nature, but intended for use in speeding up dynamic web applications by alleviating database load. Handles the majority of your reads. It’s practically a requirement, but not a substitute for bad design!
• Use a CDN
  • Panther - cheap and good (recommended by someone from stardoll.com)
  • Akamai - expensive, but top of the line
• Increase cache hits (with edge caching)
  • doesn’t like squid
  • loves varnish
    • a bit unstable
    • segfaults under load (running trunk)
• Database scaling options
  • Vertical partitioning - splits table columns into separate tables or even splitting of tables into separate databases. You can use a view to read the data again, but can’t insert/delete from a view. Speaker was against this approach.
  • Replication
    • most apps are read intensive, which is handled by memcached
    • does not help to scale writes (bc all slaves in a master-slave setup must get written)
  • Sharding
    • “only” solution for large scale apps
    • can be hard to implement if not designed for…needs planning
    • want most queries to be run on same shard
      • good: sharding blogs by user_id
      • bad: sharding by country_id (large portion can come from same country)
    • techniques
      • fixed hash sharding
• DB scaling tips
  • if you have problems bc foreign key obj, look if db offers cluster indexes. will cut down on disk seeks.
  • app should be unaware of partition strategy. app should ask where a user lives and go get it
  • you start with a normalized db, but you need to denormalize when you start scaling
  • have triggers that hit processing nodes to figure out how to build a new row to add to db as denormalized data
  • if you are a brand new startup don’t worry about partitioning, sharding
  • better to launch to all then have a private beta and hope those users are still interested in 6 months
  • good to think about how you could use sharding down the road
  • • • • even IDs on A, odd on B
      • data dictionary
        • user 25 has data on server D
        • dict can become bottleneck
      • mixed hashing
    • HiveDB
    • HSCALE

Operations

• Think about how your architecture will scale when design it, but don’t shard or partition until you have to. You’re bottlenecks might not be what you think.
  • LinkedIn underestimated the number of events/messages that would occur in the system. To scale they had to denormalize and duplicate that event for each user it was sent to.
  • SmugMug didn’t realize they would get 1000s of comments on a single photo, so they needed to re-architecture how they handle comments.
  • SmugMug was logging all people that were viewing the photos, but after a huge traffic burst the site crumbled. They had to adjust how they were logging (I didn’t pick up how).
• The Cloud
  • There needs to be an MVC framework for the backend, much like the MVC frameworks that exist today for the frontend (RoR, CakePHP, Pylons)
  • Data centers are unsustainable in their current form. Energy costs will double in next 5 yrs. We need Active power management. Basically, when you leave the room, turn off the light. Which means power down servers that you don’t need. Virtualize.
  • You beat complexity by automating it
• Cloud computing services
  • RightScale - leverages AWS EC2
  • AWS
  • b-hive
  • joyent
  • gogrid
  • Verio
  • EngineYard
  • 3tera
  • sun powerofnetwork.com
  • Eucalyptus (open-source)
    • open-source software infrastructure for implementing cloud computing on clusters
    • compatible with EC2
    • wants to be the common denominator
    • doesn’t focus on the scalability

Tuning Recommendations

• Memcached
  • network
    • ensure network processing is distributed across CPUs
    • bind memcached to CPUs not processing interrupts
  • run memcached 1.2.5 with 4 threads (default)
  • use in 64-bit mode for a large cache size
  • run in multi-threaded mode
• MySQL
  • 5.1 has several perf improvements over 5.0
  • joins over sub-queries
  • use limits
  • innodb
  • avoid too frequent FS flushes
    • innodb_flush_log_at_trx_commit = 2
  • separate read/write databases
  • avoids trashing query cache
• Apache
  • network stack: tune TCP time-wait if handling lots of conn
  • do not load modules that you do not need (in httpd.conf)
  • tune ListenBacklog(8192), ServerLimit(2048), MaxClients(2048)
• PHP
  • turn off safe_mode if you don’t need it
    • safe_mode = off
  • increase realpath_cache_size if you have lots of files
    • realpath_cache_size = 128K
  • use xcache (stability problems? … participant in audience said he uses it in large scale and works great) or APC

Miscellaneous

I was at the IE8 session and they spoke about a few new object enhancements.

• XDomainRequest - cross domain communication w/o server-side proxy
• Improved XMLHTTPRequest obj now with timeout attribute

My notes will be available live here:

Feel free to leave your comments if their are specific questions you want asked.

From his post:

As a user, I can say pretty unequivocally that session expiration sucks. Is it really so unreasonable to start doing something in your web browser, walk away for an hour — maybe even for a few hours — then come back and expect things to just work?

As programmers, I think we can do better. It is possible. I am inundated with session timeout messages every day from a variety of sources, but I’ve never once seen a session expiration message from gmail, for example. Here’s what I suggest:

Create a background JavaScript process in the browser that sends regular heartbeats to the server. Regenerate a new cookie with timed expiration, say, every 5 or 10 minutes.

Continue reading ‘Your Session Has Timed Out’…

Without presentation a web page is just text. In the early days of building web sites styles and colors were mixed with JavaScript and large animated gifs. Yes, during those days they were referred to as “web sites,” no one called them “web apps” yet. And to be frank, with all that work that went into it that hurt my feelings. Anyway, today I’m going to go beyond just showing how to get Mako working with your templates, but go as far as show you a better way to structure your templates in a Rails-like fashion.

I’m going to leave explain Mako to the developers, but in exchange I will give you some real examples.

Some of my methods are borrowed for Ruby on Rails. I essentially have 3 parts to my presentation layer — layouts, views, and elements.

Layouts, views, and elements oh my!

A layout is the largest of the 3 containers and contains the page’s chrome (header, footer, sidebar) as well as all page scripts and stylesheets.

A view is the meat of the page. This is where all the content resides. Views are organized into folders based on their respective controller. For example, the home controller would have a folder called home where all of its views would reside.

An element is a component that may be shared by multiple views. For example, the home controller may have 2 different views, say the welcome screen and a dashboard screen. Both views might want to share pieces of the view that are the same. These would be elements. Elements are located within a specific view folder.

Below is a figure of the relationship:

And here is what the file structure would look like:

Layout details

Let’s get started by looking at the layout. As I said before, this is the chrome of the page. I like to keep all my external scripts (CSS and JavaScript) in 1 place though. At first it wasn’t so straightforward with Mako, but by overwriting function definitions this is possible.

Here’s a bare bones default layout I have created for this project.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<%
# 
# layouts/default.mako
# The default layout to wrap the page contents.
#
%>
#########################################################
#########################################################
### Begin HTML Template
###
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My first app</title>
 
${ h.javascript_include_tag('global', builtins=True) }
${ h.stylesheet_link_tag('/css/styles.css',media='all') }
${self.additional_head_tags()}
 
<script type="text/javascript">
<!--
###
### Scripts to execute once DOM is loaded
   function init() {
      ${self.additional_jscript_init()}
   }
   Event.observe(window, "load", init);
 
###
### Custom scripts for the specific page inheriting this layout
   ${self.additional_jscript()}
//-->
</script>
</head>
<body>
 
 
<div id="wrap">
### **********************************
### HEADER
### **********************************
   <div id="header"><h1>Simple Pylons Examples - My First App</h1></div>
 
### **********************************
### MAIN CONTENT
### **********************************
   <div id="main">
      ${ next.body() }
   </div>
 
### **********************************
### SIDEBAR
### **********************************
   <div id="sidebar">
      ${self.sidebar()}
   </div>
</div>
 
</body>
</html>
### End HTML Template
###
#########################################################
#########################################################
### Define funcs that may be inherited and overwritten in child templates
###
<%def name="additional_head_tags()"></%def>
<%def name="additional_jscript_init()"></%def>
<%def name="additional_jscript()"></%def>
<%def name="sidebar()"></%def>

You might have noticed that aside from the common HTML declarations I have a few other python expressions that make function calls and look like that are pulling in additional content. If you noticed that, you are right!

I have set up a simple way to get JavaScript code included when the DOM loads, the ability to load other external script files, as well as modify the sidebar.

For example, I’m telling Mako to take all JavaScript initialization calls and place them at line 26.

26

${self.additional_jscript_init()}

Towards the bottom of the page I am defining these functions, although I plan to overwrite them in the views, which I will show you next.

It’s all about the View

Although the layout is the chrome of the page, your view is the entry point, and the doorway from the controller out to the user.

An entry point in your controller would look something like this:

return render("/home/list.mako")

Here we are calling the list view for the home controller. The view will then decide what layout it should use, bring in any elements it needs, fill in any places where variables need to be filled, and send it off to the user.

Here is an example view of the list view:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<%inherit file="../layouts/default.mako"/>
<%
# 
# templates/home/list.mako 
# Displays list of user names to demonstrate end-to-end
#
%>
#########################################################
#########################################################
### Override inherited funcs
###
###############################
### additional_head_tags()
<%def name="additional_head_tags()">
    ${parent.additional_head_tags()}
    <script src="${h.url_for('javascript')}/example.js" type="text/javascript"></script>
</%def>
###############################
### additional_jscript_init()
<%def name="additional_jscript_init()">
    ${parent.additional_jscript_init()}
    modify_footer();
</%def>
###############################
### sidebar()
<%def name="sidebar()">
    ${parent.sidebar()}
    <%include file="elements/sidebar.mako"/>
</%def>
###
#########################################################
#########################################################
### Begin HTML Template
###
 
<h2>Welcome</h2>
Hey, how are ya?

In line 1 we are telling the view what layout to use.

1

<%inherit file="../layouts/default.mako"/>

Starting in line 14, we are overwriting a function that we defined in our layout. Since we don’t want to completely overwrite it thought, we make a call to the parent (the layout) first. Here we are including an additional JavaScript file.

14
15
16
17

<%def name="additional_head_tags()">
    ${parent.additional_head_tags()}
    <script src="${h.url_for('javascript')}/example.js" type="text/javascript"></script>
</%def>

And a sprinkle of Elements

From the example above, we are including a sidebar element at line 28.

28

<%include file="elements/sidebar.mako"/>

This allows us to share components between views and even layouts. Elements have access to the global c variable just as the layout and views do. As a convention I like to call out what variables need to be defined for an element to work towards the top of the file. As such, an example should follow…

1
2
3
4
5
6
7
8
9
10
11
12

# 
# element/sidebar.mako 
# Sidebar element
#
# Required defined vars:
#  c.active_users - An array of active users {Users database objects}
#
%>
<p>Ads</p>
% for user in c.active_users:
    ${ user.name }<br/>
% endfor

Here we are assuming that we have several active users that we wish to loop over. The object would be obtained in the calling controller as follows:

users = meta.Session.query(model.User).filter_by(date >= time.now()-86400*7)
c.active_users = users

Download

That concludes the 3 part series of Zero to 60 with Pylons

If you wish to see the full, bare bones project in action you can download here.