The Geeky Stuff Behind the Blog

NOTE: this page really needs an update, seeing as I now have a job using php to build Web applications. Nonetheless, the basics here still apply.

At first I was going to name this page “All the stuff I learned while building this blog,” and that’s a long list. Just accept that a lot of this stuff was new to me. I have definitely been getting my geek on lately. I plan to keep this as a living diary of the technology here, so people who wonder “how’d he do that?” can get at least a partial answer. Of course, if you’re curious about something, just ask!

I chose WordPress because it’s a pretty straightforward system based on php, which lets the server custom-build web pages, and MySQL, a database that keeps all the stuff handy, if the php code asks nicely for it. The thing is, I’ve never used php before. I’ve used some other systems that use similar concepts, but php is the open-source Web engine for the common man.

As an aside, iBlog, my old blog system doesn’t use any of that fancy stuff. It’s made to work with Web servers that are off limits to the blogger — without those fancy tricks on the sever the blog software has to generate (in my case literally) thousands of files and keep track of which ones need updating when I correct a spelling error. So for what it was built to do, iBlog was really remarkable. No longer am I tied to the crappy .mac service, however, so iBlog’s greatest strength means little to me. My adventures extracting 1300 episodes out of iBlog is documented here.

But I digress. At this rate the page will be about six miles long.

Let’s start with the banner, shall we? It’s done with Flash, and uses the following techniques:

  • Traditional Flash Animation
  • ActionScript 3.0 (out the wazoo)
  • Code-controlled animation
  • Dynamically loaded text and images
  • Dynamically loaded and tracked audio (All For Me Grog!)
  • XML
  • Dynamically loaded external Flash Files
  • ExternalInterface to communicate with JavaScript on the Web page (unnecessarily, it turns out)

To provide the XML data for the poetry corner I created a WordPress page with a custom database query. I use php to turn the random poem request into XML which is returned to the Flash animation. Flash makes a separate request for the image indicated in the XML.

You may have noticed an occasional duck fly across the window as well. That was trickier to implement than I thought it would be. There is a flash movie defined in a div tag with no visual elements at all, who’s job is to load the ducks and other animations randomly, and pass information about the browser window. The loaded movies communicate with the browser through a series of javascript functions to control size and location of the div. By calling those functions periodically, the animation can move over the screen.

Alas, my drawing skills did not see the same improvement as my Flash programming skills. So it goes.

On the php/WordPress side, I think most of the things I’ve done are pretty ordinary, but I sure learned a lot doing them. There are some features I miss from iBlog, like the ability to make categories go in reverse order (for the serial fiction on this site) and the ability to stick a post at the top of each category, not just the main page. I’ve got the reverse-order thing mostly working; the first step was pretty easy but the page forward/page back controls are confused and it looks like I’m going to have to do some real coding there.

I was very pleased to see that right out of the box I could control the text of different categories independently. WordPress does a good job of putting all kinds of identification over each piece it generates so the CSS can affect exactly the right elements. Way to go, WordPress! (I had to hack that into iBlog.) I’m still getting the text just right, but I know I can.

Today I developed my first WordPress widget! Those are the pieces that make up the content on the sidebar. I wanted to bring my old stat counter over from the previous blog, and I was surprised to see that no one had widgitized their code before. The instructions at Site Meter’s site were out of date (and badly executed), so there I was with a lump of javascript and a sidebar but no way to glue them together. So, I made a widget. And because I’m me, I made it much fancier than i needed to, though it will be another day before you can actually taste the fanciness for yourself.

Long have I wanted to have rounded corners on my blog episodes and now I do. I had to do a fairly significant restructuring of WordPress templates to avoid having to write the code several times, and I think I can optimize further, but at least I don’t have all those copies of the same thing running around. I bet most geeks tweaking the code make the same changes I did; I’m kind of surprised it doesn’t just start out that way.

CSS3 is sneaking into the blog as well, gradually and insidiously. If you go to the comment screen for a single episode you will see navigation helpers above the episode. (This is technically a page, so it doesn’t get the helpers.) On some browsers the links in the navigation section will be over a translucent background with rounded corners. At this moment, only Safari and Firefox support both the translucency and the rounded corners, but they do the corners in a non-standard way. I might write more about it as an actual episode, to share the geekly love.

And… huh. I have “allow comments” checked, but there’s no sign of the stuff. I threw in the line of code that hopefully will work without destroying everything.

15 thoughts on “The Geeky Stuff Behind the Blog

  1. I notice you now have the muddled events calendar up and running in the sidebar. There’s one holiday you’re currently missing: Five O’Clock Somewhere’s official holiday, National Cat-Herders Day, December 15.

    meowin’ meowin’ meowin’, keep them kitties movin’
    gotta go on herdin’ … MEOWHIDE!
    don’t try to understand ‘em, just feed and pet and tend ‘em,
    they got needs that cannot be denied
    put ‘em up, head ‘em up, herd ‘em up, round ‘em up, run ‘em in, MEOWHIDE!

    • The calendar is a very impressive plugin which automatically hooked to the online Muddled Calendar, so it was very little work for me to put it there. Unfortunately, it lacks seemingly obvious features like expressing the date in the Muddled System. I could hack them in, but then every time there’s an update to the plugin I would have to go redo my hacks. On a plugin this complicated, that might not be easy.

      I’ll probably go back to rolling my own, based on the code from the old blog.

      This comment is by a test user, Jerry II, to see if I can go back and edit it.

    • Note that I redid your comment under ‘Geeky Stuff’ so blog feature discussions could be in one place and so if anyone finds the CSS article through search the discussion there (if any) will be relevant.

      I don’t mind off-topic commenting (in fact, my favorite threads are almost all off-topic), but this seems like a good place to discuss blog features.

  2. hi, i like the duck.. any link to see how it’s done?
    i’m getting into php and WP lately and i’m likin it
    jquery very powerfull as well..
    saludos

    • The duck turned out to be pretty tricky, though now that I’ve figured it out hopefully I can make it simpler for others. The duck is a Flash animation that calculates where it should be on the screen and calls a javascript function on the Web page to set its location.

      When I have a moment I intend to make little how-to pages for some of the features here at MR&HBI. Come on back!

  3. You may have noticed that I’m fiddling with the look of comments right now; I’m not sure how things will end up but I’m pretty sure that some browsers will show things more prettily than others. I haven’t found the ideal design yet, though.

  4. Currently putting in some performance enhancements behind the scenes. The effect on your viewing experience should be only positive, but if you get any odd failures or if things don’t look right, I’d appreciate it if you’d drop me a line.

  5. And the geeky stuff in the background image is… the plans for building a home-made Dalek! I still have that magazine from 1973 and it was a nice surprise to stumble upon it here.

    • You got it! Hooray! It’s embarrassing to admit how much time I spent retyping all the text with a different font to match the header I had back then (one of these days I’m going to get that header right), and fiddling with the color palette to make the result load faster.

  6. I did some stuff to the things and I’m wondering now if people out there can tell if there’s been a change in the load times for this blog, and in performance overall. People with slow connections would probably notice the biggest change.

  7. I haven’t really noticed a difference, but then now that I’m running Chrome and have fairly high speed at work and even higher speed at home, I’m no longer at the low-performance end of the spectrum.

  8. I’ve temporarily disabled the duck and his pal shatner until I can figure out why they aren’t cleaning up properly anymore. That may not be for a few days. I apologize for any excessive quacking.

  9. It looks like the ShareThis folks are (who provide the icons at the bottom of each episode to make it easier for readers to tell their friends about the magically wonderful stuff they read here) are fiddling with their code right now. I apologize for any inconvenience.

Leave a Reply to Jerry Cancel reply

Your email address will not be published. Required fields are marked *