Categories
Burningbird

Time to trim

Recovered from the Wayback Machine.

Now that I’ve had fun with CSS and stylesheets, it’s time to cut back on their number.

A dynamic stylesheet is a very effective approach to styling your site, but not if you also combine this with a dynamic stylesheet selector as I do. The reason is that when each page is accessed, all stylesheets are loaded the first time you access the page. For regular visitors, once loaded, static stylesheets should be cached and not loaded again unless they change. Dynamic stylesheets, on the other hand, are always loaded.

Having one dynamic stylesheet isn’t a bother because I’m using a lot more resources just to serve this page, the recent comments, and other functionality.

However, three dynamic stylesheets, two of which access external files, combined with multiple static sheets isn’t thrifty, and I am a thrifty developer.

Now that I’ve had fun with styles, time to cut back. Which styles to drop, though, is an issue.

Question for those with a spare minute: what is your preferred stylesheet at this site, and why? Is anyone using the dynamic stylesheets?

Categories
Burningbird

Setting expectations

My ISP, Hosting Matters made several changes to our accounts on the first without any prior warning.

Yeah, darn them. First, they increased the amount of disk space each customer has, which means that now I’m just going to have to go out and find something to fill all that extra space–such as add back the photos I had to remove when I merged all my old accounts. Then they increased our bandwidth a month so that even if my Flash movies were to take off–ahem–I would have bandwidth…and to spare. Oh, and they actually had the nerve to increase the number of databases for each account, too. I suppose now I’m going to have to use that extra database for some development work, or something useful.

And to make matters worse, when I emailed them to ask what’s up with the accounts, they responded back in five minutes.

Just for that, I’m just going to have to continue being a customer with them. That will teach them.

Categories
Burningbird

Mainlining aggregation feeds

No worries that I’m going to fill up my space with photo shows and old writing from now defunct web sites. It’s okay to have a bit of fun now and again, but neither is particularly toothsome, or amenable to this environment.

I did want to say that the title of the last post really does have to do with the song, not my own personal state. I have no intention of quitting weblogging at this time. I may take long breaks now and again – we all do. But quitting sounds too much like giving up smoking or drinking or drugs.

“So, how much did you do a day?”

“I was up to posting two, sometimes three times a day.”

“Shit! No, really?”

“Yeah. On a really bad day, I’d post five or even ten posts.”

“Ten posts! Man, I’m amazed that you’re still standing here, sane.”

“Yeah. First it was posting from my computer at work, like normal people. Then I actually started to write to my weblog during my off-hours.”

“Off-hours! Geez, nobody blogs during off-hours.”

“I know, tell me about it. From there it was a downhill race to the bottom: moblogs, weblogging conferences, the whole thing.”

“Wow. I’m suprised you didn’t end up in an alley somewhere, begging dimes for online time at the nearest Internet cafe.”

“It was close. I was touch and go there for a while. When I thought about mainlining my aggregation feed, though, that’s when I knew I needed help.”

“Smart. So, when are they going to let you out of the restraints?”

So, I may take long break, and any of us may take a break and not return, but I’m not going to quit. Besides, where else are you going to find such an equal opportunity A-List basher like me?

But I am sick as a dog tonight from some kind of tick toxic/allergic reaction. Fever of 102, babies. It’s bad enough that I have the normal risks with ticks everyone has–to also be allergic to them seems unfair. However, there is no such thing as a ‘hidden’ tick with me, because the bite mark gets badly inflamed.

Unfortunately, the bites also leave a scar. I have so many bite scars around my ankle now, that I’m thinking of getting a tatoo to connect the dots.

I know, too much sharing. I told that to a friend this week, “You’re sharing too much”. I was joking, really I was – I would never tell a person they’re sharing too much in all seriousness. I might run into a closet and burst into insane laughter; but I would never tell them they’re sharing too much.

*tap* *tap* Hello? Hello? Is this thing working?

Damn, I forgot. Happy Canada Day!

Categories
Media

I’ll be seeing you

Unfortunately, all of these shows have been lost to time and Flash no longer being supported.

One song, three different singers, and three different Flash movies, all made by yours truly – you’ve been warned. I got a wee bit carried away with the zoom. Click on the photo to take you to launch page. Then click on the photo in this page to launch the Flash movie. Note to modem users–take up knitting. Movie sizes are approx 1.5M each.

Dame Vera Lynne was known as the Forces Sweetheart during World War II. Though better known in her native Britain, her song Auf Wiederseh’n Sweetheart was the first UK-based recording to top the charts in the United States. She was appointed DBE (Dame Commander of the British Empire) in 1975.

Dame Lynne’s lovely, and slightly dramatic version of “I’ll Be Seeing You” comes with the flourishes that were very popular with romantic songs in the 1930’s, and into the early 40’s.

This is a modern recording of “I’ll Be Seeing You” by Bobbi Carrey. Carrey has a most unusual past–a degree in romance languages, a Master’s in Visual Studies, an MBA, 15 years working in the financial industry, including four years as VP at Fidelity Investments, a professor at Harvard, and a photographer. Then she bagged it all a couple of years ago and became a cabaret singer. Wow. That’s all I can is…wow.

This song is from Carrey’s first CD, Between The Wars, featuring music popular between the two World Wars. I wasn’t sure about Carrey’s voice at first – it seemed too sweet, and a bit light for one of these old ballads. But after listening to it a couple of times, I could visualize a young girl, sitting at her porch at night, thinking of her distant love and singing to the Moon. It is another variation on the song, and one that does work. But it was helped by the instrumentals, and the extraordinary song arrangement.

This song has, in my opinion, an almost perfect arrangement. The clarinet playing is just right, perfect, and segues into the ballad with wonderfully delicate precision.

Not all the songs on the CD worked–Carrey just doesn’t, at this time, have the type of voice for many of the songs of that era (not enough raw energy or depth of personality in her voice). However, given time, and with maturity, if the she and her collaborators continue to create other arrangements such as “I’ll Be Seeing You”, they could become something very special. It’s worth the cost of the CD for this song, alone.

If Dame Vera Lynne was the Forces Sweatheart for the British, Jo Stafford was The Girl Back Home for the American troops. She was one of the top female singers during World War II, known for her romantic ballads.

She started her career singing with her sisters, than with a group known as the Piped Pipers, staying with them until going solo in 1944.

This version of “I’ll be Seeing You” is sung with little embellishment, and a relatively simple, though traditional orchestration characteristic of ballads during the mid to late 1940’s. It is a true, and enduring, classic.

Unfortunately, I couldn’t find a copy of Billie Holiday’s version of the song online, or you’d have four flash shows.

I’ll be seeing you
In all the old familiar places
That this heart of mine embraces
All day through.

In that small cafe;
The park across the way;
The children’s carousel;
The chestnut trees;
The wishin’ well.

I’ll be seeing you
In every lovely summer’s day;
In every thing that’s light and gay.
I’ll always think of you that way.

I’ll find you
In the morning sun
And when the night is new.
I’ll be looking at the moon,
But I’ll be seeing you.

lyrics by Irving Kahal, music by Sammy Fain

Categories
Burningbird Graphics/CSS

Mary Janes and Site Design

Recovered from the Wayback Machine. The stylesheets still actually work. Pick one, and reload the page in the Wayback Machine.

This page describes both the techniques and the materials I used to create my stylesheets. At the end of the document is links to locations where I’ve borrowed photographs, technology, or graphics – whit my deepest appreciation for same. A permanent link to this page will be added at the bottom of the stylesheet option list.

My designs don’t necessarily fit the current mode popular with weblogs–shadow background, with sidebar contained within the same block as the text and floated to the left or right; large, graphical title bar at the top, all against a simple patterned or plain backdrop. Mine are centered, true; and some of the styles do have a graphic at the top. However, there’s nary a shadow anywhere, and there won’t be because shadows aren’t compatible with my ‘floating cloud’ sidebar look.

Relatively simple as my styles are, there is an interesting trick or two used in the stylesheets that I thought I would share. However, before you try any of these yourself, you might as well be warned that I’ve never used CSS in the proper manner; nor are my techniques always the proper techniques. However, they do validate, and they are accessible.

Main page elements

All of my pages have one main element, a DIV block, that’s centered in the middle of the page. The CSS for this is:

div.wholething{
margin: 90px auto 25px auto;
width: 730px;
text-align:center;
}

In this centered block are two columns: one in an element called the sidebar; the other the main content. I make use of the float CSS attribute to float the main content to the right; I set its contents to be left-justified, compensating for the parent container’s using of centered text-align. If I did not do this, the parent element’s text alignment would propagate to all contained elements:

.mainblog {
float: right;
text-align: left;
background:#fff;
width: 450px;
font-family:verdana, arial, sans-serif;
font-size: 10px;
padding: 30px;
border:1px solid #999;
}

Normally, DIV elements would align vertically, but the use of float forces the main content to align horizontally with the sidebar, to the right, rather than the bar flowing beneath it. All that’s left for the sidebar then is remove its margins, set its width, and align the text to the left.

.sidebar
{
text-align: left;
width: 200px;
margin-top: 0px; margin-bottom: 0px;
padding: 0px 10px 20px 0px;
font-family:verdana, arial, sans-serif;
font-size: 8pt;
}

Within the sidebar, all my side images and blocks for comments and whatnot flow naturally within the tall, narrow container, each item set to a width of 200px. To see how these elements are positioned within the main web page, I’ve provided a text-based version of the index page. To see the stylesheets, view the source for this page, grab the URL for each stylesheet and view it directly in your browser.

Feel free to use any of the ideas presented in this document, or copy the stylesheets for experimentation and use in your own pages. A link back would be nice.

There’s nothing special with this layout except that traditionally sidebars items are visually contained within some overall constraining environment. My sidebar elements don’t – not even within the style designated as Walker Evans where I use what looks like a slip of film underneath the items. Even within this stylesheet, the elements break out of the boundary of the film, ever so slightly to the left. So they look like they’re layered on the film, rather than contained in the film.

Accessibility

Though I may make fast and loose with the rules of CSS, my CSS and XHTML is valid, as tested with the W3C validation tools. In addition, I also try to make sure the site is fully accessible. For instance, the main content page is one of the first items in the page, so that someone using a voice browser gets access to the writing, quickly.

I also provide a minimal stylesheet that doesn’t have any image downloads for those not interested in the images, or any of the specialized coloring.

If I miss something needed for accessibility, please let me know.

Sidebar images

The first trick to my stylesheets has to do with the sidebar images. Now, I could have used JavaScript to change the images based on the stylesheet picked, and this is a prefectly good approach. However, I wanted to keep my use of JS to a minimum.

What I did was create nine different DIV elements, each with a different background image. Using this approach, I can alter the images in the DIV elements for each style. If I have a style, like Old Bird or Minimal, that doesn’t use sidebar images, nothing shows for these elements in the page.

Now normally, with proper CSS and XHTML, elements contain something, but what a bother. If my sidebar image blocks must be said to contain something, then let them contain the clothes fairies wear when they’re not flying around naked on diaphanous wings.

See there? Tiny little Mary Janes.

Switching Styles

Stylesheets are linked into the page via the LINK tag, included in the HEAD section. Contrary to expectations, most browsers honor the LINK tag in the body, but not all – Mozilla is one that won’t. I found this out when I tried this shortcut, and that sharp-eyed poet, Joseph Duemer tapped me on the shoulder and asked, “Why is nothing showing?”

(Additionally, embedding a LINK element in the body is an invalid use of the element, and results in invalid XHTML.)

After resolving the issue of what to do with LINK, one stylesheet is then defined to be the primary one, pulled up by default and what people get if they don’t have access to JavaScript. I’ve settled on Fire & Ice as the default stylesheet. All other styles are listed as alternatives, and you can even access these directly if your browser supports listing of alternative stylesheets. Otherwise you can use the JavaScript to switch the styles. Very simple, very uncomplicated JavaScript.

The Javascript to run the styleswitcher comes from A List Apart, which also goes into detail on how to set a primary stylesheet, as well as adding links for alternative stylesheets. You can download the JavaScript from ALA, or here.

Add the JavaScript to the page with the following:

<script type=”text/javascript” src=”http://weblogname.com/styleswitcher.js”></script<

Change the “weblogname.com/styleswitcher.js” to whatever the URL is for the JavaScript file. All that’s needed now is to add the stylesheet entries for people to choose, as mine are listed in the sidebar. The syntax for the links themselves is also listed in the ALA article.

All the elements are in place now for the static stylesheets – the main page components and how to switch between styles. To make the stylesheets dynamic requires a few additional tricks.

Dynamic Stylesheets

In the case of my site, dynamic stylesheets means stylesheets that have been modified by PHP before the stylesheet is returned to the requesting application.

Typically, a stylesheet is defined with a specific extension: css. When served there’s some assumptions associated with this extension about what the server does with the page, and then what the browser does with it. The same with a page with a PHP file extension. In this extension, the web server knows that the PHP needs to be processed before the page is returned.

The two can be combined with a simple little trick–adding the following to the very top of the dynamic stylesheet will return the page to the browser as type text/css:

<?php
// declare the output of the file as CSS
header(’Content-type: text/css’);
?>

Now I can dynamically generate colors for Clashing Colors; or generate new sidebar images for Random Shot.

Or I can test the temperature of the post and adjust everything.

Dynamic stylesheets can have some latency problems. See the end of the post for an effective workaround for this.

Emotive

The last stylesheet I’ll discuss is the Emotive stylesheet style. With this stylesheet, there’s a neutral stylesheet that’s used for the front page, but each individual post has an associated look based on the tone and content of the writing.

This particular technique used the WordPress ability to define a custom field for each post. This custom field has an associated named key/value pair in the database, the values of which can be accessed with a WordPress function, get_post_custom_values, passing in the key, in this case ‘tone’.

Once the value is accessed, it’s then passed to the emotive PHP program, using the following:

<link rel=”alternate stylesheet” media=”screen” title=”emotive” href=”/emotive.php?tone=

Since these keywords are only available within the loop to process a specific post, I had two options for handling the link/php pairing. The first is embed the LINK tag in the body and process it when I process the other individual post’s information; the second is to keep the LINK tag in the head, and move the PHP post processing up.

The first choice works, but not with all browsers, and not especially great, and it doesn’t validate. Since I didn’t want to hear from a series of people about how my page does not validate because I used the LINK tag in the body, I went with the second approach.

The how-tos on moving the loop up is specific to WordPress only, and a better approach would be to just provide a copy of the page, here. The technique can work with other weblog tools, using whatever post-specific value, such as category or other value.

Within the emotive.php itself, the code to manage the different tones is:

?php
// declare the output of the file as CSS
header(’Content-type: text/css’);

$mood=$_GET[’tone’];
if (isset($mood)) {
if ($mood <> “”) {
$file = $mood . “.php”;
include $file;
}
else {
setneutral();
}
}
else {
setneutral();
}

function setneutral() {
global $backgroundcolor, $blockquote, $A, $Avisited, $Ahover, $border, $img1, $image1,$img2, $image2,$img3, $image3,$img4, $image4,$img5, $image5,$img6, $image6,$img7, $image7,$img8, $image8;

$backgroundcolor=”fff”;
$blockquote=”999″;
$A=”666″;
$Avisited=”000066″;
$Ahover=”ccc”;
$border=”000″;
$image1=”/mm/blank.gif”;
$img1=”1″;
$image2=”/mm/blank.gif”;
$img2=”1″;
$image3=”/mm/blank.gif”;
$img3=”1″;
$image4=”/mm/blank.gif”;
$img4=”1″;
$image5=”/mm/blank.gif”;
$img5=”1″;
$image6=”/mm/blank.gif”;
$img6=”1″;
$image7=”/mm/blank.gif”;
$img7=”1″;
$image8=”/mm/blank.gif”;
$img8=”1″;
}

?>

Each of the tones is defined in its own file, such as thinking.php or tranquil.php and so on. The file consists of nothing more than definitions for each of the items replaced, similar to those shown in the setneutral function in the code block just shown.

If the stylesheet is called without passing in a tone, the neutral style is what shows – and it’s pretty plain. Otherwise, the associated tone file is included into the code, and its values are used as replacements in the stylesheet. For instance, the following is the CSS definitions for several elements, using dynamic values:

BODY {
background-color: #<?php echo $backgroundcolor; ?> ;
}
blockquote {
color: #<?php echo $A; ?>;
}
div.update {
color: #<?php echo $A; ?>;
}
A {
color: #<?php echo $A; ?>;
}
A:visited {
color: #<?php echo $Avisited; ?>;
}
A:hover {
color: #<?php echo $Ahover; ?>;
}

You might notice from this example that the stylesheet definitions seem a little sparse. The reason for this is that the other, non-dynamic style settings for each element are defined in a second CSS stylesheet, the one known as “Minimal”.

This second stylesheet is also given the same title as the dynamic stylesheet, but it’s placed first in the header. What happens then is when the JavaScript loads the style titled ‘emotive’, both CSS files are loaded, the static one first. Since this is faster than the dynamic, and can cache, the emotive style suffers minimal disruption between pages. The only things that change are the colors and the images – not the layout or the positioning. Minimizing the changes to the latter helps minimize the latency effect with using a dynamic stylesheet that changes with each page.

In fact, using a static stylesheet in conjuction with a dynamic one, and stripping everything that doesn’t change out of the dynamic sheet, helps to control most stylesheet latency–that disruption that can occur when a stylehsheet is being loaded.

Credits

The ice photos for Fire & Ice are from the NOAA Photo Library, the Antarctica collection. There are some amazing pictures in this collection.

The fire photos for Fire & Ice are photos generously donated into the public domain by Jon Sullivan. The cherry and vegetable photos in Lemon Shake-Ups are also Sullivan’s work, and lovely work it is, too. My thanks for their use.

Most of the rest of the photos used in the sheets are mine, except for the Einstein photo in Emotive and Deep Thoughts. I found it and a couple of other computer-generated images used with Deep Thoughts at this site.

The clipart used with Lemon Shake-ups came from About’s Web clipart pages.

The cabinet member photos for the Presidential Cabinet stylesheet (which started as a gag), came from the White House, except for GW Bush on his horse, which came from the George Bush senior Presidential Library. The photo was morphed by placed Jr in front of the Alamo.

The monkey drawings are public domain drawings that can be found by searching on the terms “copyright free illustrations” in Yahoo, and then clicking on the Images tab. You’ll recognize several images used on O’Reilly books in the collections.