Ping... Ping...

This is not new stuff people. Back in 2003 I was wanting to set up some type of ping thing. That was before I had signed up with Technorati and it may not have even existed yet. (I'm too lazy to check. Someone else will know. OK, I'm not too lazy to check. My anal retentive perfectionist beat up my inner sloth. Archive.org has records of Technorati back to 2002. Moving on....)

So, prompted by Jeneane— who always has more energy than me and who just sent me an email kicking my slothful behind for not having pinged Technorati in, like three centuries, and she even asked Kevin about it, so now the embarrassing truth is out in the upper echelons of the Technorati elite— I have written a script to ping Technorati when my weblogs update. As I write this I have not tested it, but when I publish this post I will know if my crappy Python hacking skillz are worth anything.

Even though it's been done before, I'm sure, here is some code you can use in Python to do the same:

import httplib sData = '<?xml version="1.0"?>\n' sData = sData + '<methodCall>\n' sData = sData + ' <methodName>weblogUpdates.ping</methodName>\n' sData = sData + ' <params>\n <param>\n' sData = sData + ' <value>'+blog_name+'</value>\n' sData = sData + ' </param>\n <param>\n' sData = sData + ' <value>'+url+'</value>\n' sData = sData + ' </param>\n </params>\n<methodCall>' h = httplib.HTTP('rpc.technorati.com') h.putrequest('POST', '/rpc/ping') h.putheader('User-Agent', 'JNGM Pinger') h.putheader('Host', 'rpc.technorati.com') h.putheader('Content-Type', 'text/xml') h.putheader('Content-length', '250') h.endheaders() h.send(sData)

This code snippet runs in the middle of a script I have called update.py which slurps a text file into my weblog database and posts the new article. Now you know. Wasn't that exciting?

Now I just need to figure out how to do that new-fangled tagging thing all the kids are doing these days. Crazy kids. (Shakes cane).

Woohoo! We're pinging left, right, and center over here.

[Link] Comments: [0] Project: [Homegrown Blogging]

Make a Container Stretch the Full Length of a Web Page with CSS

Oftentimes I do little side web projects for friends and family, and I just recently finished one. The design they wanted involved a pale centered column of content with shading on either side that stretched the full height of the screen. This kind of layout would have been pretty simple to accomplish with tables using Microsoft Internet Explorer, but I wanted to keep up with current web development standards and keep everything as compliant as I could. Turns out this was really hard to figure out!

Perhaps the Oracle of Google failed me, or perhaps I just wasn't using the right search terms, but I couldn't find any resources out there that gave me a good working example, so I'm providing that here. The result seems to work OK in Firefox, Safari (there are other problems viewing this site in Safari, but the full height issue seems to render OK), and MSIE.

So you want some kind of container (I'm using <div>, but you can use anything that can be absolutely positioned, I think) that stretches the full height of the screen. Easy! Just set the height to 100%, right? Well, not quite. Simply setting the CSS height attribute doesn't work if the content inside your container extends past the height of the "viewport"-- if you have to scroll down, you'll see that the background colour of your container doesn't continue past the bottom of the initial viewable area when the page loads. The example below demonstrates what I mean with some code.

  • Example 1: A container with height set to 100% looks OK as long as the text isn't too long.
  • Example 2: But as soon as the text's height exceeds the viewable area, there's a problem.

So how about we don't set the height attribute at all? Well, this is OK too, except when the content in your container is too short to reach the bottom of the screen. This is pretty obvious, but I also demonstrate it in the example below.

  • Example 3: Clearly we don't want to leave the default height on the container-- if the text is too brief, it won't stretch to the full height of the viewable area.

One workaround is to just create a background image that repeats vertically. This isn't too bad, but then you'll need a fixed width column in the middle. In most cases there's nothing wrong with this solution-- however, I really wanted a fluid layout, something that looked good and scaled well no matter what resolution was being used to view it, down to a minimum of 800x600. So a fixed-width centre column in my layout just wasn't going to to cut the mustard.

My solution, then, was to combine the two methods explained above. I used two containers: one, absolutely positioned, had its height attribute set to 100% and would stretch to the bottom of the page when the content was short. Above it on the z-axis would be another container that held the text itself and had no height attribute set. Its height would shrink and contract according to how much text it held-- if the text caused you to scroll down to the bottom, this container would continue on down until the very bottom, keeping the background colour consistent no matter how much text showed up.

  • Example 4: A demonstration of the technique with a lot of text.
  • Example 5: An example of the technique showing a small amount of text.

One thing I haven't mentioned yet was the shading I wanted to show up on either side of the container. I created a small image that would look like a drop shadow for either side of the main column. I needed one strip of vertically-repeating shading to show up on the left and right of the page.

I couldn't set this image as the background image of the main container, because I could only use one image for the background. I needed at least one extra container to just hold the shadow image-- but that left me back at the beginning of my problem. How could I get the container for the shadow to match the height of the main container?

It turns out I needed four extra containers-- two for each side. Two of the containers would be parent containers of the main content, and would stretch down as far as the text did. The other two were absolutely positioned and set with a height attribute of 100%. These would stretch down as far as the inital view of the page when it loaded. I used four containers in this way to help keep the symmetry of the page. Any other way was too difficult to make sure that everything lined up with the right widths.

Although I don't think I am the first to stumble across this technique, I did find it pretty useful. Any time I'd like to have multiple columns with different background images or colours that stretch all the way down the page, all I have to do is add one extra empty div. When compared to creating a table layout, if you count all the extra <tr> and <td> tags you need to define the table, one extra set of tags seems a small thing. The CSS needed for the actual layout itself is pretty minimal.

[Link] Comments: [18] Project: [HTML/CSS Practice]

Geeks Needing Makeovers?

One of my new tasks at work is to find news articles that would be of interest to our clients and do a little link, description write up for our corporate homepage. Most of these are pretty straightforward marketing and businessy press release type things that I get at Australian IT News. Today I was taking a brief browse in between other frantic tasks to try and pick out something newsworthy-ish when I came across this article and stopped up short.

The headline confused me into thinking it was another of those "single geek guy can't find a girlfriend" type of articles, so I was expecting a certain degree of lameness. Apparently, though, the article is actually even lamer-- it's about how IT work is so unglamorous that girls don't want to study technology and move into the field.

They fall back on the same tired arguments that IT is too technical for most girls. It needs to be made to seem more creative and enticing for those non-technical female types so they won't feel too nerdy studying engineering or information technology.

Sigh.

I think one of the reasons why I like the Fatshadow blog so much (despite the fact that it's not at all technical) is that I can relate to Tish Parmeley's battle with the cultural perception of fat bodies. Even after the development of geek chic and the reclaiming geekiness movement, I really get tired of hearing about the cultural perception of technically inclined people.

I believe that a female person's interests are not defined by gender, but are culturally influenced. I believe that women learn from society what they are supposed to be good at and are interested in. Yes, there are gender-based differences. I'm not saying we're all exactly the same. I just think it's BS that because I have 2 x chromosomes, I'm somehow statistically more likely to do something. I don't buy it. Sorry. So why cater to cultural influence? Why not change it?

I don't understand why all the implications of the word "geek" (intelligence and technical interest and like of computers being primary in this context) also go hand in hand with uncool or boring or bad.

And also, why is the solution to glam up IT? Why isn't it OK to be unglamorous? Isn't there a bigger cultural issue at stake here? Like wtf is the big deal with glamor in choosing a career? Are we all such television-soaked zombies that we can only imagine doing something with our lives that's featured in a prime time drama? I don't think there's much material in my professional life for a popular television show-- but my work satisfies me and I'm happy with what I do. In fact, I'm glad it's not glamorous. I don't have time for that.

The only thing I think the article really hit on that was important was:

Students also have difficulty naming male and female role models working in, or associated with, IT.

Well, yeah, duh. Maybe because as a culture we don't a) value technical skill and prowess as much as athletics or sex appeal b) value women? And maybe because, historically, women were discouraged from technological fields because it was a boy's club, and it wasn't OK for women to do something not perceived as girly?

I don't disagree with some of the points in the article-- that IT classes can be boring and don't tap into the full potential of what you can do with computers (I was bored with some of my CS classes at uni. I was also incredibly bored in English 101.)-- that there aren't enough female mentors and role models in IT. I'm just frustrated that the article comes up with a dumb bandaid for a deeper problem that just perpetuates negative stereotypes and underlying cultural issues. Let's get to the meat, here, people!

[Link] Comments: [2] Categories: [Link, Comment]

Marking Up Poetry

Marking up a poem in HTML is a pain in the neck. The phrase "square peg in round hole" comes instantly to mind. I've been publishing poems on the web since... hmm... around 1997 or something? and I still haven't hit upon a good solution for displaying my poetry in all its indented, stanzaed glory.

Apparently, XHTML2 will partially address the problem by introducing a new tag: <l> </l>. But I'm starting to think that going all the way over to pure XML styled by CSS might be a better solution, although it will have disadvantages.

HTML Markup Methods for Poems

I see two main hurdles for getting a poem to look like a poem on a web page. The first one is how to break the lines up and break groups of lines into stanzas. The second issue is how to handle weird indents and spacing. Both of these can be tackled by such a huge number of ways that it makes me go cross- eyed, but basically it can be broken down into something like the following.

P's and BR's - Brute Force Manual HTML

One way to mark up verses would be to use a paragraph (<p> tag) for each verse and line breaks (<br />) at the end of each line. It works, but it's not pretty, and I agree with Dorothea that it's a bit of a nasty way to go about it.

Similarly, if you're going to stick with plain vanilla HTML methods of styling a poem, you'd use a non-breaking space character to add your indents (or if you're cummings, random leaps of space inside a line), since HTML ignores tab characters altogether and doesn't stack additional space characters.

As suggested, these methods are pretty ugly under the hood, but they'll do in a pinch. The only thing worse would be putting the entire poem inside a <pre> tag. Ew.

Styled DIV's

Anything inside a div tag will be visually placed onto its own "line" without the standard margin additions that browsers add onto paragraph tags. Adding CSS styles (through either the style attribute, or by adding class attributes that have defined styles in a stylesheet) to the divs will cover spacing between stanzas and indentations, but carry the additional overhead of having to write styles in addition to marking up the document itself. Since I write up all my HTML by hand, it gets a bit tiresome to type something like: <div class="stanza indent5">There once was a geek with a poem,</div> for every line. The additional problem with using DIV's is that they're not very semantically appropriate tags for poetry. At least you can somewhat conceptually shoehorn the idea of a stanza into the idea of a paragraph.

XML Alternative?

Currently I use a bastardized version of the two diametrically opposed methods described above: styled P tags. It also falls into the trap of being pretty semantically unsound (each line is in a <p> </p>, and given a class if it's a) indented or b) the first line of a new stanza). But I just hate line breaks. They're annoying to type and they're just dumb. So this was my evil Frankenstein monster compromise of the moment.

After doing some reading, though, I think I can come up with a better one. It's still a bit wanky, but due to the slippery nature of markup, just about any solution will have some wank factor.

XML can be styled by CSS, so why not mark up the poem in pure XML that makes semantical sense and make it look right with an accompanying stylesheet document? Styled XML can potentially be embedded through various means in an HTML document, or I can alternatively just deliver the poem as a straight XML document.

I'm going to have to test this out through a proof-of concept example, but tonight I will be exploring my creative side and making lino cut prints instead. Stay tuned. Or not.

[Link] Comments: [1]

Portfolio Update

Long overdue, I spent a few minutes reworking my online portfolio so that it no longer used outdated and semantically incorrect table layouts. It was a bit of an embarrassment, really, but since I'm currently employed (knock on wood-- not that I'm worried), I hadn't made it my highest priority. I have an itching urge to go back through as many of my example sites as I can and redo the old ones in XHTML/CSS also. But that will have to wait.

I also added my current position, as well as some other random stuff relevant to a résumé / CV / portfolio / whatevertheheckyouwannacallit. I decided to go ahead and stress my convertedness to this whole new movement in web dev, I dunno what to call it... standards-based isn't quite right, since tables are clearly part of the HTML standard. The Church of Zeldman? Hee.

It's interesting to see how much my web dev skills have matured, just in the past few months.

[Link] Comments: [0] Categories: [Techo]

Stick this in yer Aggregator

It didn't take much tweaking to add templates that handle xml-based syndication formats. Basically I just had to add a couple of lines in my main script to change the content type to text/xml for the two feeds. So now at http://www.jngm.net/rss/ and http://www.jngm.net/atom/ you can get an instantly-updated feed of the top few jngm.net posts. Both validate at feedvalidator.org.

I wonder if anyone is actually going to subscribe. If you do, please comment or email me (that is, if anyone reads this, heh). I'm curious!

Further development continues to be slow as I continue my attempts at writing 50,000 words in one month. Gulp.

[Link] Comments: [2] Project: [Homegrown Blogging]