It only took 9 years, but I finally updated my whole site to use a static generator tool. In the meantime, Webby has been discontinued, and Jekyll has become the dominant tool of choice. It took a little while, but I’m happy to feel full in control of things again.
In the process of converting I’ve fixed a few broken links, removed several that couldn’t be fixed (Unmaintained Web Applications strikes again) and removed Google Analytics (sorry for contributing to privacy erosion for the sake of vanity stats).
It’s been fun (and occasionally cringe-inducing) to scan over the blog history while I was doing tweaks on the conversion to Jekyll. Knowing my history, I won’t try to claim that I’ll start updating the site regularly now, but I’ll probably make an attempt for a little while, at least.
I meant to post about this a long time ago, but when Blogger discontinued publishing via FTP, I hit some snags trying to create a new setup for my blog and website. If you see this, then I guess I’ve got it working now; the blog is hosted by Google, and the non-blog parts of the site are served up from an EC2 server at Amazon.
Back to what I meant to post about so very long ago: Say Anything’s new self-titled album came out November 2009. It’s an excellent album. I was going to link to a track-by-track explanation of the songs that Max Bemis provided in an interview with AltPress, but apparently it’s dropped off the internet. Instead, I guess I’ll just say: check out the album.
Instead of working on the conversion of the blog to Webby, I spent much of the day playing with jQuery and JavaScript. A good portion was mostly wasted time attempting to make the loading of the syntax-highlighting scripts more dynamic. While this ultimately failed, it did get me to re-learn a lot of JavaScript and jQuery.
Rather than put that time completely to waste, I decided to prettify the archives section. Without JavaScript enabled, you get a linked list of links for each month of each year that I’ve published something. Now, with JavaScript, I transform that list of links into drop-downs for each year, where you can select the month within the year, and it will take you to the archive page for that month.
Now, for the code. First, on each blog page (via the template), I load my JavaScript file, and I load jQuery via Google AJAX Libraries API:
1
2
3
4
5
6
7
8
9
<script type="text/javascript" src="/js/main.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.3.2');
google.setOnLoadCallback(function() {
prettify_archives();
});
</script>
This runs prettify_archives function:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function prettify_archives() {
var years = [];
$("#archives > ul > li").each(function() {
var year = new RegExp(/\s(\d{4})/).exec($(this).text())[1];
if ($.inArray(year, years) == -1) {
years.push(year);
}
});
years.reverse();
var html = ['<h4 style="margin:0;">Archives</h4>'];
$(years).each(function() {
html.push('<select style="width: 11em;" ' +
'onchange="document.location.href=this.options[this.selectedIndex].value;">');
html.push('<option selected="selected">' + this + '</option>');
$("#archives > ul > li:contains('" + this + "') > a").each(function() {
html.push('<option value="' +
$(this).attr('href')
+ '">'
+ $(this).text()
+ '</option>');
});
html.push('</select><br />');
});
$('#archives > ul').replaceWith(html.join("\n"));
}
So, I stayed up way too late last night uploading version after version of this website. I updated the version of the syntax-highlighter I used on the one code sample I’ve posted. Nothing special there, but the fall-back when Javascript isn’t enabled is nicer, as it’s a pre-tag, instead of a text-area like before.
I fixed all the pages to have the extension .html instead of .shtml. The .shtml was leftover from when I used to use server-side-includes instead of a combination of Blogger templates & Webby layouts to handle common layout issues. Here’s the content of the .htaccess file I used to make sure old links are given a permanent (301) redirect to the new extension:
1
2
3
RewriteEngine On
RewriteBase /
RewriteRule ^(.*)\.shtml$ /$1.html [R=301,L]
During the process, I noticed that Blogger wasn’t producing an archive index page anymore. So I added archives to the sidebar for each blog. I made my css rules a bit more generic by making sidebar sections a class, instead of duplicating rules for different ids.
All of this took a bit longer than it should because any changes on the Blogger side required republishing the whole site (actually twice, once for the main blog, once for the politics blog). Whereas, for the non-blog content, I could run Webby locally, rsync it to my VirtualBox Ubuntu Server VM, and test it locally. So my next task is to figure out how to turn an export of this blog into Webby source files so that I can manage the whole process locally (and get my blog posts into version control as a bonus).
Despite the utter wasteland that is this blog, I’ve decided to start posting to yet another place on the internet: Twitter. The theory goes that if you’re interested in knowing the minutiae of my life, you can follow me on Twitter (or subscribe to my Twitter feed or what have you). I, knowing that everyone looking at my Twitter posts has implicitly consented to being bombarded with inane details about my day, can safely post such details with the concern of them being “blog-worthy”, or even “Facebook-status-worthy”.
Now, if only I can do something interesting, I may have a reason to post something to my blog again…
Today, I found the first reference to my name in my Bloglines search feed. Stefano Demiliani apparently liked my tip on seeing rel="nofollow". I guess I need to keep posting useful stuff if I want to become an active member of the blogosphere...
I recently sent in a question to Blogger support about my Delete Comment icons not showing up, because they'd replaced the code that put in an image tag from the template with a span filled with a non-breaking space. As usual, after I ask for help, I figured it out myself. It turns out you have to put <$BlogMetaData$> into your template so that you can get some style sheets that set the icons on the Delete Comment, E-mail Post, and Edit Post spans.
Speaking of which: that's right, there's a new feature for you, the reader. Now there's a handy button to let you send an e-mail to someone about one of my posts. There's also a nice feature for me: a way to click on an icon on a post, and take me straight to editing it in Blogger. The new e-mail feature was announced today, which led me to disover the rest of all of this.
The down-side to use the BlogMetaData tag is that it includes a tag for something to do with the Blogger API, that I don't quite undestand. Unfortunately, the current implementation of auto-discovery for Firefox brings up that feed along with my actual site feed, which could confuse user's of Firefox coming to this Blog (or others like it) in the future. However, it appears that Bloglines auto-discovery handles it properly, only showing my actual site feed. I guess it's time to go work on getting a bug filed against Firefox's auto-discovery to get it fixed, then.
After a bit of looking and playing for another method, I decided to give up and use my first CSS-hack for IE. Ugh. Basically, IE doesn't support position: fixed, so instead of falling back to position: absolute, it falls back to position:static, placing my navigation bar at the bottom of the page, as that's where it falls in the source.
IE also doesn't understand the child selector: >. So, I changed the style on the navigation section to use position:absolute, then I add another style rule that IE doesn't understand to add position:fixed back:
body > #navigation_section { position: fixed;}
It's unfortunate to have to resort to such hacks, but it gets the job done. And now my site looks decent in IE, and exactly how I like it in Firefox. Opera still has an issue, but it's clearly a bug: if you zoom-out and zoom back in, the page will display correctly. If anybody wants to check out how my site looks in Safari or Konqueror, I'd appreciate it (I haven't got my Linux box hooked up, and won't for a while).
Lot's of little changes involved in the redesign. The primary goal was a color change: the red on blue of the "Wheat" design (look for the alternate style-sheet of that name to see it, though some template changes on the Blog have also occurred). Unfortunately, the blue for links I liked so much was a bit hard to see on white. However, I think that bolding all links takes care of that nicely, with the added bonus of making links stand out more. I really like that minor change. A lot of the other color changes are just to add variety.
The other major change was moving the navigation section to the right. This gets it out of the way, so that you can view the content.
Unfortunately, I just got around to checking out how it looked in other browsers. Crap. The navigation section is at the bottom in IE, and it overlaps the content section in Opera. Man. I spent so much time on this already, and now I have to bugfix. I guess that'll have to wait until tomorrow. Until then, check out the page in a Mozilla-based browser, such as Firefox to see how it's supposed to look.
Google's indexing of this site at it's new location has been interesting. For a while, only the main page was indexed. Now it seems like only the next level deeper is indexed (you can see the indexed files by searching for '*' in the Google search bar on the side of the page). Since that gets this blog page indexed, I'm pretty happy. Hopefully in a couple of weeks Google will index the blog archives and my actual writings.
Speaking of Google, as an active Blogger user, I got into the Gmail beta. I don't really have a need for another web-based e-mail address, but it does have some nice features. Most of the focus of news reports on Gmail have been the 1 GB of storage for free. But the neat stuff is searchable mail, mentioned frequently in the privacy-complaint news pieces on Gmail :), and categorizable mail (you can label pieces of mail for easier finding, as well as 'star' important e-mails). To me, though, the really cool feature is the fact that it attempts to display your e-mails grouped as conversations, rather than just a series of individual e-mails. I find that feature very neat, and hope to see it in traditional e-mail clients for my standard e-mail account.
Beyond that, now that I'm really doing web application programming at work, I find the interface to be pretty interesting. I'm sure that will get tweaked as time goes by, so I look forward to checking up on it every once in while. If you want to help me play with it, you can e-mail stephen.duncan@gmail.com. (I guess that putting it up here will check it's spam filtering capabilities...)
So, I gave all my posts real titles (titles in the Atom feed had been the first 20 characters of a post). Not sure if that's what did it, but Blog Lines now recognizes my blog just fine. The RSS portlet panel extension has bugs that someone has posted fixes for. The My Yahoo RSS portlet never claimed to support Atom feeds anyhow.
The strange thing is that the feed still doesn't validate. So I'll check on that. Maybe look for another site that attempts to validate an Atom feed. But I guess my problems are mostly resolved, for now.
So, first I discover that Blogger supports Atom feeds (rather than RSS). Cool. Most readers support it, or so they say. However, I'm having trouble with various readers I want to use. SharpReader works fine, but I'm not always on Windows, and I don't really want another program. The Mozilla extension I mentioned earlier, however, only partially works. The My Yahoo RSS portlet doesn't seem to recognize it all. Nor does Bloglines, which I'd like to use for more extensive feed tracking.
As I'm trying to check into this problem, I found an Atom validator. My site doesn't validate. But the error message isn't very useful.
So, I'm a bit lost. I've got two hypotheses at the moment: the server's not sending the right MIME-type (I'll check with Ryan later), or the fact that my blog entries don't have titles is a problem. That one I'll check on now, I guess...
Ok, so the Archive is done now too. I've deleted some old posts (just stupid ones with results from random internet quizzes: too much table hell to fix). You'd be surprised how much trouble ampersands in URL's can be when trying to validate your blog entries. All done now.
With all the trouble I've gone through to get this Blogger template working, I think I'll at least stick with it until Moveable Type releases their 3.0 version.
Until then, please send me feedback about the site via e-mail. I intend to do some work on the CSS for the blog, as well as work on some better alternate stylesheets in the future. Remember to use a more advanced browser (i.e. not IE) to get the intended view and full features of my site. :)
Well, if you've visited before, you'll notice that my Blog is now integrated with the rest of my website. It's also valid XHTML (well, at least as valid as the rest of the site; Some disagree). Obviously, if I switch to a system allowing comments, maintaining validity will be harder...
The Archive still has to be done (it's using the old template, and I have to go over old posts to classify links, and to make sure no bad html is in them. But, for now, it's off to bed...
AltaVista: Image Search results for: war on drugs
(Yes, I'm having fun going through the logs for my webpage)
I am the number one image search for War on Drugs on AtlaVista. Pretty damn sweet.
Somebody find a copy of the Charlie Canola story on my site after going through 9 other pages of matches for "airsick"
How sad is that?
And, with a template change, my blog even works again. Yay!
Oh hey. I have a Blog. Whaddyaknow. Maybe I just update once in a while. Eh, oh well.
Testing this out. Yes Ryan and Jason, I'm just being a sheep following in your leads . . .