Categories
Technology

Stuck battery in new TiBook

Recovered from the Wayback Machine.

I have one of the first runs of the TiBook released in 2001. Yeah, I know – never buy a first anything from Apple.

Anyway, it’s a wonderful computer that puts up with all sorts of abuse. However, I can’t get my battery unstuck. I can get it to the point where it seems to release just a tad, but it’s caught on something that won’t come lose. I gather this was a problem with the early TiBook designs, and they’ve since fixed the design.

Anyone have any suggestions on how I can get the battery out without breaking the laptop? Or sending it in to Apple? If you do, well, I’ll think up some suitable reward to go with my sincere appreciations.

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.

Categories
Technology

A tale of two technologies

I just published the first two parts of the four-part Tale of Two Monsters. These are something different, with the first covering legends and old sci-fi movies; the second covers the field known as cryptozoology and if you’ve not heard of it, you’ve heard of the beasties this field investigates.

Fun stuff. Well, I thought it was fun stuff. These four articles took considerable time to research, and I met all sorts of interesting people online through them.

I still have to edit the last two, to make sure the data is up to date. So much has happened with giant squid research, that I know I’m badly out of date in the third article. Once these are finished, then I have a few other old stories to port, and can get to the new stuff–a couple of LAMP essays, including one on the concept of open source Java (J-LAMP?) How appropriate that Apple’s hot new server comes with a Java-based blogging tool.

Is the Java community feeling threatened by the upstarts, PHP and Python, and their grandaddy, Perl? Guess it’s time for another Parable of the Languages.

I also discovered a very fun new toy, and am creating not one but three FLASH movies featuring the same song recorded by three different women, and using my photographs and other graphics.

Playing time aside, I was delayed with today’s publication because of work commitments and this and that. Additionally, I wanted to use page breaks with these very large articles, which meant finishing up my WordPress tweaks. Now, you have an option with larger articles of accessing each individual page by clicking on the page number; or selecting to read the entire article, as one unbroken page. I’ve also added code so that the comments only show at the end of the article, not at the end of each page.

The second Tale of Two Monsters references a site called Blather. If you’re into UFOs, Nessie, odd science, the occult, conversing with fellow druids, Greenpeace, or very different and very interesting people, you really need to spend some time at this site.

And this will make Dave Winer and the RSS Advisory Board members happy: Blather features RSS 2.0 feeds.

updateBlather is using Movable Type. Wow, talk about future meeting past with a clash and a bang. However, I love the idea of the cryptozoologists getting weblogs–these guys are pros at conspiracy theory. Compared to them, we’re rank amateurs.

What made me happy was finding a copy of Attack of the 50 Foot Woman, which I haven’t seen in years. I know it’s a turkey – but they were the best kind.

Next week…The Wasp Woman!

Categories
Technology

Google Email

I had received a Google email invitation a week or so back. Originally I created the account under shelleyp, but I’ve since moved to an account with ‘burningbird’ as the recipient. The original name is too close to my primary email account. And nobody, I mean nobody spells my name correctly.

I used a Google invitation to ‘move’ my account, and closed down the old one. However, Google is like a lot of ‘beta’ social software apps – it doesn’t close an account down cleanly. Email still goes to my old account without bouncing back, and I have no way to access it.

First thing engineers should design into a new social software application: the exit.

If you want to reach me via email, you might send it to me at the new account. I don’t have any spam there…yet. I think you can figure out how to form the email address from what I’ve given in this post.

If you’ve sent email to the old Google email account– marriage proposal, death threat, an invitation to join you in hot, torrid, sex, or a great job offer (hopefully not all in the same email)– you might want to resend it to the new address; the Google engineers have the original now, and they’re at home, with their feet up on the coffee table, drinking beers, and making a whole lot of fun of what you’ve written.

And yes, if I get any invitations, I’ll offer them online.

Categories
Technology

Clashing colors

Hell grant soon we hear again the swords clash!
And the shrill neighs of destriers in battle rejoicing,
Spiked breast to spiked breast opposing!
Better one hour’s stour than a year’s peace
With fat boards, bawds, wine and frail music!
Bah! there’s no wine like the blood’s crimson!

Ezra Pound’s Sestina: Altaforte

What a serendipitous time to introduce my latest stylesheet creation: Clashing Colors. It’s been said that our words are all that matter; that the colors and pages we wrap around ourselves are but a gilding of a lily, and why is it that we don’t provide full feeds in RSS files?

What matter our page design?

It’s also been asked: why can’t we all just get along? Yes, why can’t we get along. Is it because we’re both unique and imperfect?

I have found there are six degrees of separation between these statements:

Why can’t we all just get along

…why can’t we complement each other

…why isn’t this environment more complementary than contentious

…so much of our writing to each other is contentious

…contentious or not, all that matters is the writing

…all that matters is the writing

What matters our page design?

Clashing Colors uses PHP to dynamically generate colors for different elements of the stylesheet. It also uses a random photo generator, except unlike Random Shot, the photos are all weather related and in black & white. The bit of code and CSS that controls blockquote is as follows:

blockquote {
<?php
$hx = substr(‘000000’ . dechex(mt_rand(0, 0xffffff)), -6);
echo “color: #” . $hx . “;”;
?>
}

Just use the $hx=substr… statement for each color area.

When I was playing with this page, I was surprised at how many times an attractive color combination appeared. Perhaps we worry too much about making sure everything fits together, and should just let chaos reign.

The man who fears war and squats opposing
My words for stour, hath no blood of crimson
But is fit only to rot in womanish peace
Far from where worth’s won and the swords clash
For the death of such sluts I go rejoicing;
Yea, I fill all the air with my music.

Papiols, Papiols, to the music!
There’s no sound like to swords swords opposing,
No cry like the battle’s rejoicing
When our elbows and swords drip the crimson
And our charges ‘gainst “The Leopard’s” rush clash.
May God damn for ever all who cry “Peace!”

And let the music of the swords make them crimson!
Hell grant soon we hear again the swords clash!
Hell blot black for alway the thought “Peace”!

Then again, maybe not.

update

To save a specific set of colors, do a screenshot of the page and then use a color ‘eyedropper’ application to pick out the individual colors. Adobe Photoshop has this functionality, as does several other graphics tools. Or you can download a shareware application that works quite nicely.

Just don’t update the page until you grab that copy.