Lab 10 Material - October 30th, 2008

Files under


figleaf is a code coverage recording and analysis tool. Basically, it "watches" Python execute code, records which lines are executed, and then annotates your program with the results.

(I installed it on arctic; you'll need to do source ~ctb/python-env.csh to be able to run it.)

Basic usage: to record,

figleaf <program> <arguments>

To annotate,


So, for example, try running


and then


Now open the 'html/index.html' file in your browser to see what lines of code were executed.

Coverage info is saved in the file .figleaf, and automatically aggregated; to start fresh, rm this file.

Now try running

rm .figleaf
figleaf 0 0
figleaf2html -d html-0


rm .figleaf figleaf 1 0 figleaf2html -d html-1


rm .figleaf figleaf 1 1 figleaf2html -d html-2

and look at the various differences. (The -d flag specifies what output directory to use for the annotation output.)

Coverage analysis is a useful way to target your testing efforts: code that is not executed by any tests is, by definition, untested... You'll see more about this in the next few weeks.

CSS (Cascading Style Sheets)

(a.k.a. the Shortest Introduction to CSS You'll Ever Have)

content (HTML) vs presentation (CSS) vs behavior (JavaScript)

HTML documents consist of head and body:



The body contains the page content and is what is shown; the head contains information about the page, including things like title:

<title>this is my page title</title>

and CSS stylesheets to apply to this document:

<link rel="stylesheet" type="text/css" href="style.css">

We'll play around with the example 'example.html' and 'style.css' in the lab-10/ files directory a bit.

The book "The Ultimate CSS Reference" (Olsson & O'Brien) is very good: see

Personally I recommend using, the Open Source Web Design site, as a source for basic CSS styles. (Be careful of their licenses tho.)