Developer Notes: July 2007

Saturday, July 21, 2007

Image Alignment Example (improved)

This one is similar to the previous post, only now we have images stacked vertically (using two different classes) and with captions underneath the images:

If you want to copy/use/test this example, remember to save the file with a .xhtml extension; you may find the browser has problems rendering it if you save the file with, for example an .htm or an .html extension.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Image alignment demo</title>
<style type="text/css">

body {font-family:Verdana; font-size:80%; width:800px; margin:auto;}

h1 {text-align:center;}
p {margin:1em 0; padding:0;}

.align-left {text-align:left;}

.align-left .image {float:right; margin: 0 0 1em 1em; background:#eee;}
.align-left .image-cr {float:right; margin-left:1em; background:#eee; clear:right;}

.align-right {text-align:left;}

.align-right .image {float:left; margin: 0 1em 1em 0; background:#eee;}
.align-right .image-cl {float:left; margin-right:1em; background:#eee; clear:left;}

.caption {font-family:Arial; font-size:0.9em; text-align:center; font-weight:bold; padding-bottom:0.2em;}

</style>

</head>
<body>

<h1>Image Alignment example</h1>

<p class="align-left">

<div class="image">
<img src="http://farm1.static.flickr.com/104/290001369_c466a82696_m_d.jpg"
alt="The West Pier" />
<div class="caption">The west pier...</div>
</div>

<div class="image-cr">
<img src="http://farm1.static.flickr.com/104/290001369_c466a82696_m_d.jpg"
alt="The West Pier" />
<div class="caption">The west pier... again</div>
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec auctor
lectus non nunc. Mauris ac odio quis libero mollis fermentum. Nulla
facilisi. Phasellus eget ante. Aenean nulla metus, auctor nec, congue
in, condimentum ac, ligula. Aliquam erat volutpat. Curabitur iaculis
nisl eget mi. Proin posuere varius lorem. Nullam id tortor. Morbi
euismod. Aenean ante diam, interdum sed, sollicitudin eu, commodo et,
odio. Vivamus porttitor lacus at mauris. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Mauris dictum scelerisque quam. Vestibulum sed dolor eu ligula gravida
viverra. Integer nonummy ligula. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus.
</p>

<p class="align-left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec auctor
lectus non nunc. Mauris ac odio quis libero mollis fermentum. Nulla
facilisi. Phasellus eget ante. Aenean nulla metus, auctor nec, congue
in, condimentum ac, ligula. Aliquam erat volutpat. Curabitur iaculis
nisl eget mi. Proin posuere varius lorem. Nullam id tortor. Morbi
euismod. Aenean ante diam, interdum sed, sollicitudin eu, commodo et,
odio. Vivamus porttitor lacus at mauris. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Mauris dictum scelerisque quam. Vestibulum sed dolor eu ligula gravida
viverra. Integer nonummy ligula. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus.
</p>

<p class="align-right">

<div class="image">
<img src="http://farm1.static.flickr.com/99/289984988_1c2300aa1d_m_d.jpg"
alt="Lewes" />
<div class="caption">November 5th in Lewes...</div>
</div>

<div class="image-cl">
<img src="http://farm1.static.flickr.com/99/289984988_1c2300aa1d_m_d.jpg"
alt="Lewes" />
<div class="caption">the same pic...</div>
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec auctor
lectus non nunc. Mauris ac odio quis libero mollis fermentum. Nulla
facilisi. Phasellus eget ante. Aenean nulla metus, auctor nec, congue
in, condimentum ac, ligula. Aliquam erat volutpat. Curabitur iaculis
nisl eget mi. Proin posuere varius lorem. Nullam id tortor. Morbi
euismod. Aenean ante diam, interdum sed, sollicitudin eu, commodo et,
odio. Vivamus porttitor lacus at mauris. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Mauris dictum scelerisque quam. Vestibulum sed dolor eu ligula gravida
viverra. Integer nonummy ligula. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus.
</p>

<p class="align-right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec auctor
lectus non nunc. Mauris ac odio quis libero mollis fermentum. Nulla
facilisi. Phasellus eget ante. Aenean nulla metus, auctor nec, congue
in, condimentum ac, ligula. Aliquam erat volutpat. Curabitur iaculis
nisl eget mi. Proin posuere varius lorem. Nullam id tortor. Morbi
euismod. Aenean ante diam, interdum sed, sollicitudin eu, commodo et,
odio. Vivamus porttitor lacus at mauris. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Mauris dictum scelerisque quam. Vestibulum sed dolor eu ligula gravida
viverra. Integer nonummy ligula. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus.
</p>

</body>
</html>

Friday, July 20, 2007

Image Alignment example

Here's some sample code for using css and xhtml to align an image to the left or right within a paragraph:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Image alignment demo</title>
<style type="text/css">

body {font-family:Verdana; font-size:80%; width:800px; margin:auto;}

h1 {text-align:center;}
p {margin:1em 0; padding:0;}

.align-left {text-align:left;}
.align-left img {float:right; margin-left:1em;}

.align-right {text-align:left;}
.align-right img {float:left; margin-right:1em;}

</style>

</head>
<body>

<h1>Image Alignment example</h1>

<p class="align-left">
<img src="http://farm1.static.flickr.com/104/290001369_c466a82696_m_d.jpg" alt="The West Pier" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec auctor lectus non nunc. Mauris ac odio quis libero mollis fermentum. Nulla facilisi. Phasellus eget ante. Aenean nulla metus, auctor nec, congue in, condimentum ac, ligula. Aliquam erat volutpat. Curabitur iaculis nisl eget mi. Proin posuere varius lorem. Nullam id tortor. Morbi euismod. Aenean ante diam, interdum sed, sollicitudin eu, commodo et, odio. Vivamus porttitor lacus at mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dictum scelerisque quam. Vestibulum sed dolor eu ligula gravida viverra. Integer nonummy ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

<p class="align-left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec auctor lectus non nunc. Mauris ac odio quis libero mollis fermentum. Nulla facilisi. Phasellus eget ante. Aenean nulla metus, auctor nec, congue in, condimentum ac, ligula. Aliquam erat volutpat. Curabitur iaculis nisl eget mi. Proin posuere varius lorem. Nullam id tortor. Morbi euismod. Aenean ante diam, interdum sed, sollicitudin eu, commodo et, odio. Vivamus porttitor lacus at mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dictum scelerisque quam. Vestibulum sed dolor eu ligula gravida viverra. Integer nonummy ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

<p class="align-right">
<img src="http://farm1.static.flickr.com/99/289984988_1c2300aa1d_m_d.jpg" alt="Lewes" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec auctor lectus non nunc. Mauris ac odio quis libero mollis fermentum. Nulla facilisi. Phasellus eget ante. Aenean nulla metus, auctor nec, congue in, condimentum ac, ligula. Aliquam erat volutpat. Curabitur iaculis nisl eget mi. Proin posuere varius lorem. Nullam id tortor. Morbi euismod. Aenean ante diam, interdum sed, sollicitudin eu, commodo et, odio. Vivamus porttitor lacus at mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dictum scelerisque quam. Vestibulum sed dolor eu ligula gravida viverra. Integer nonummy ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

<p class="align-right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec auctor lectus non nunc. Mauris ac odio quis libero mollis fermentum. Nulla facilisi. Phasellus eget ante. Aenean nulla metus, auctor nec, congue in, condimentum ac, ligula. Aliquam erat volutpat. Curabitur iaculis nisl eget mi. Proin posuere varius lorem. Nullam id tortor. Morbi euismod. Aenean ante diam, interdum sed, sollicitudin eu, commodo et, odio. Vivamus porttitor lacus at mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dictum scelerisque quam. Vestibulum sed dolor eu ligula gravida viverra. Integer nonummy ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

</body>
</html>

Friday, July 13, 2007

Starting Firefox with the Profile Manager

If you need to create a "test" user for firefox (for example, if you're testing user settings or want to test out an add-on but not damage your normal profile:

Run firefox from the commandline:

firefox -ProfileManager

You can then create a test user.

Monday, July 2, 2007

Quick Perl template for Line and String Manipulation

We've got to tamper with some flat files (ultimately turning them into valid xml) - here's some quick notes (in the form of a *very* simple perl script) on the steps involved in:

- taking a filename as an argument (argv[0])
- opening the file
- keeping tabs on the line you're working on within the file (we use $. for this)
- getting access to the contents of each line within perl (we use $_ for this)

With this in mind, I can now use some extra arguments in the loop to start cutting up the data any which way. But here's a basic perl template for showing the line number and the string of text for each file in perl:

#!/usr/bin/perl

my $filename = $ARGV[0];

$lines = 0;

open(FILE, $filename) or die "Can't open `$filename': $!";

while () {

# so perl keeps the line number in a variable called $. (just in case you wondered)

print "I'm working with line number $.\n";
# perl stores the contents of each line in $_ so to dump the contents of the line to std_out:
print "$_";
# all other steps for each line would go here...
# show the end of the process for each line - a visual separator
print "================================\n";
# move to the next line
next;
}

close FILE;

you would run this using something like:

./the-name-of-your-file.pl the-name-of-the-textfile.txt

Developer Notes