I'm frequently amused to find that something I need will appear just about when I need it.  The engineer in me knows that it's just coincidence, and that the fact that it happens A LOT doesn't change the odds of it having happened or happening again.  The engineer figures that it's probably just that I notice more when I magically find what I need than when I don't.  But the mystic side of me thinks that's flawed.  After all, it happens A LOT.  Something I don't have I go looking for, and the web being what it is, I usually find what I'm after pretty quickly. 

But I'm talking about stuff that COMES TO MY DOOR, so to speak.  It happened with the logo-fade-over thingy, which wasn't really an immediate need, per se, but suddenly the solutions shows up in my RSS reader just a few weeks after I thought about it. Tivo-ed serendipity, but serendipity nonetheless.

I just helped my church build a new website these past few weeks.  It gave me the opportunity to stretch my CSS skills just a little bit.  The design, done by a very talented member of the church, didn't really require that much by way of CSS-fu, but it was another lesson in what works on which browsers, and how to fix others (IE, we really need to talk, ok?).  I was having a problem with the rendering in Opera (by all accounts, the most standards compliant browser), but with no clear way to selectively target just Opera, I was resigned to just ignoring it.  Opera, after all, accounts for just 1% of our visitors.  Then this nifty little css browser selection hack showed up unbidden, and two lines of code later, Opera is fixed.  See, serendipity.

I'm also working on a project for a friend who wants to add an e-commerce-esqe feature to her Wordpress-powered site.  I looked around and determined that everything already out there is either not well supported or way too well supported (read: way too many features for her minimalist needs).  None were a very good fit.  So I start crafting a plugin for her, and the biggest problem is that I really need to create a new type of post that she and her guest authors can use to enable the e-commercy stuff she needs, but in the simplest way possible.  It's an uphill struggle, then serendipitously,  Wordpress 3.0 (and stubbed in 2.9) offers up exactly what I need.  Just that quick, I'm back on track and soon to release the plugin.  (I'll link to her site in a future entry when I get her upgraded and the plugin installed.)

This blog is run on a blogging platform called, um, ready?... Serendipity.  But all this work on Wordpress of late has me thinking I may have to change over.  It's serendipity, I think.

 

I released version 0.4 of NArchivist, my cloud-based backup/archiving solution, about a week ago.  I should have made a blog entry about it then, but I've been tied up with other things.  Plus, I wasn't entirely sure I wasn't going to have to make another quick-fix release.  This is largely because I gutted the encryption sub-system to satisfy two requirements.  First, it needed to support streaming of very large files to and from the data stores, and second, it had to work on my older CentOS5 servers.  Version 0.3 was built with a tool called m2secret, which I used to encrypt the files I was backing up.  Ok, no worries, except I found out the hard way that m2secret needed Python 2.5 and, alas, my CentOS5 servers only had Python 2.4.  Upgrading wasn't really a good option.  Plus, m2secret operates by reading the entire file into memory, then encrypting it, then sending it to the target.  Fine, for small(-ish) files, but for larger files this could be a real problem.  I knew this going in, but wanted a quick solution that I could fix later.  Bumping into the Python 2.4/2.5 problem made it later.  So I fixed it.

This has pushed back my Windows support a bit, and my creation of a web-based interface for the system.  But that'll be along fairly soon.  No choice, really; I need the thing myself. 

I just put up a site at espositoholdings.com.  I've had the domain for a while now.  I got it on a whim, because I thought it would be kinda funny, the first step in building a massive empire of web properties.  One of my cousins does graphic design as a hobby (he's quite good, really, when he can put the time in), so he whipped up a logo for thing, also because he thought it was kinda funny.  It's this:

So I had this domain and this logo just sitting there.

I had this idea that each of the little squares should hold a logo for one of the "web properties" and it would animate in some way when you moused over it.  A couple of months ago, I can across a neat little effect on Chris Coyier's CSS Tricks site where moving your mouse over a "black" image "reveals" the portion the mouse is over.  Which reminded me of my earlier notion, but it still took me until today to jump in and actually try to get it done.   I started off with the techniques in Chris' article, but it wasn't quite what I wanted.  Let's examine what he did, and how I differed, shall we?

The basics are a set of regions, defined by CSS to have a particular size and position over the image, with jQuery used to catch the mouse hover event over each region and then turn on and off the correct "revealed" image.

Chris' method was to create five different images, one for each "state."  There was the regular "nothing highlighted" image, and since he had four "hot spots," there were four more images, each with three parts black and one revealed.  Since each element in his image was basically the same width, and all lined up horizontally, the CSS placement was really pretty simple.

My Way or the Highway

I didn't really want to create four different versions of my logo (I have only three "hot-spots" rather than the four Chris has), partly out of laziness, partly because I wanted to be able to swap those images out whenever I felt like it. So I set about to define the area above each square in the logo which would be my hotspot.  This was pretty simple to calculate, and a bit of trial-and-error got it looking OK.  Then I created the small (54x54) logos which would appear magically inside their respective squares.  These are PNGs with transparent backgrounds, so they look natural when revealed.

The HTML markup is a dead ripoff of Chris's, as is most of the CSS and jQuery code. But I made a couple of changes.  First, Chris used absolute positioning for his elements, but since they stack next to each other, that wasn't such a big deal, and he could give them each the same basic styling.  Where he had just one selector for those elements:

 

.home-roll-box { position: absolute; z-index: 1000; display: block;  height: 334px; top: 0; width: 25%; }

I made a generic one, and then picked out each area using the clever Attribute Selector technique (boy, that Chris Coyier is a handy guy!), thus:

.rollover { 
  display: block;
  height: 54px;
  position: absolute; 
  width: 54px; 
  z-index: 1000; 
}
.rollover[id="tcms"] { top: 18px; margin-left: 72px; }
.rollover[id="narchivist"] { top: 74px; margin-left: 18px; }
.rollover[id="openingup"] { top: 128px; margin-left: 72px; }  

That got my rollover areas positioned, but since I have three images to fade in and out in three different locations, and they are all smaller than the main logo image, I couldn't just superimpose them on the main logo.  So a bit more JS does the job:

    $(".rollover").each(function (i) {
      // move the logo into the corresponding rollover area
      var logo = "#" + $(this).attr("id") + "_logo";
      $(logo).css ("top", $(this).css("top"));
      $(logo).css ("margin-left", $(this).css("margin-left"));
      });

This walks through each "rollover" area, grabs it's top-position and left margin, and then applies them to the corresponding image.

I like the results, but of course that's always subjective.  I'm open to other opinions.

Well, after a bunch of non-NArchivist work, I finally got back to my current pet project (though I'm really itching to get back to my REAL pet project, the TurtolCMS), and now NArchivist, my backup software, will not only back files up, but it can actually RESTORE them as well.  One would hope that would be a standard feature.  I've just "released" version 0.3 on SourceForge.   New features include:

• A basic desktop client from which you can select files to restore.  Of course, any file you would overwrite via a restore is first backed up (if necessary). 
• RackSpace CloudFiles support, so now you can store your backups to two truly distinct clouds, thus making your data a bit more secure. 
• After every backup session it backs up its own database.  You might think this would only be needed after a backup session in which files were uploaded, but since we also record "last-seen" data to catch file deletions, the database goes up every time.  Versioned, of course.  

Next, I'll have to make the website a bit more complete.  Which is to say complete at all.  After that, I'll try to get it running on Window, and flesh out the web-based interface I started.