Opening Up - Flotsum

Serendipity

nospam@example.com (Todd D. Esposito) — Tue, 25 May 2010 18:50:37 -0500

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.

Goofin' with CSS and jQuery

nospam@example.com (Todd D. Esposito) — Fri, 19 Feb 2010 01:32:14 -0600

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.

Absenteeism

nospam@example.com (Todd D. Esposito) — Mon, 04 May 2009 07:57:35 -0500

The problems with being, as I so often am, distracted by too many interests and projects, are many. I thought about working another clause into that first sentence so to further demonstrate my fractured lifestyle, but I got thinking about something else. Anyway, this is just a very quick entry to point out that I really should take more time (a) to update this blog and (2) to just do things correctly in the first place so that when I change a password (for example) it doesn't fubar something else (i.e.) this blog which shouldn't have relied on that particular password anyway. Sorry for the downtime. I suck.

Evolution or Revolution?

nospam@example.com (Todd D. Esposito) — Sat, 06 Sep 2008 00:13:49 -0500

I've been thinking a bit recently about the title and ostensible purpose of this blog. Now, mind you, this blog is largely a cathartic exercise on my part, not by any means an important bit of... well, anything. But still, I like things to have some sort of order, consistency and meaning. Originally, I started this thing talking about the various facets of life in an Open Source company. It was intended to be very much my personal expression of my personal philosophy, centered around how that philosophy related to running my business. With a bit of other hijinx thrown in whenever I got bored.

Since then, of course, the business itself has gone away, leaving in its wake the TurtolCMS software project. And this blog (or at least it's tagline) with no clear meaning. I'm no longer running an open source business. Yes, as I've hinted, I intend to, and have several irons in the fire (both iron and fire being Open Source, naturally). But I'm not, at present, actually running an open source company. I'm managing an Open Source project, but that (at present) drives no income, and without income there really can't be said to be any business.

So, do I evolve the direction of this thing to follow along with whatever I'm doing right now? Could be boring, but really I guess I'm doing that already, as I've had to post something from time to time, just to brain-dump. Eventually, I suppose, it will evolve back into a blog about my (next) Open Source business. But how long before that happens? Will I still care?

Or do I revolutionize it entirely into... what else? I don't think the intarweb needs another site that links to other sites for the sake of it. I'm just not into that. Not enough catharsis.

So, coming up:

Another book review (actually, two, but combined into one) not at all related to software, Open Source or Business, just because I wanna; and a post commenting on a story run on another (more widely read) blog, but not just so I can link to it; and the announcement of another release of the TurtolCMS, any day now.

Not Dead Yet....

nospam@example.com (Todd D. Esposito) — Mon, 04 Aug 2008 00:58:33 -0500

"Not Dead Yet" was uttered at about 85 MPH on a desolate stretch of country road, some 15 years ago, by my pal Andrew with a huge grin on his face. He and I had gone, one fine early spring day, to get my '73 Javelin/AMX (don't worry that you don't know what that is, not many do) out of storage. It was, even then, starting to show its age, and I hadn't had the time to really get it back into shape. So, after checking the fluid levels, tires, belts, hoses and other bits, we set out to "blow the carbon out of her." That's car-geek code for flooring it until you're just plain scared of how fast you're going.

One moment, we're pulling out onto the road, slowly, carefully, motor shaking slightly, grumbling moderately. The next, we're burning gas, and roadway, at an alarming pace (this was when gas was cheap, mind you), the hissing sound of the V8 swallowing huge volumes of relatively cold air into the cowl-induction system and the outright angry roar of the exhaust pure music to our ears. Yes, it was showing its age, but my Jav wasn't dead yet.

Some while back in this blog, I noted that just because my company, Turtol, had gone defunct, our product the TurtolCMS, wouldn't. This is because it is Open Source Software, and as such can survive the death of the parent company, provided there is sufficient energy, somewhere, to keep it going. I'm pretty attached to the TurtolCMS, but because I've been making other plans and pursuing other opportunities (yes, yes, eventually, I'll let you in, when things are more stable), I haven't been able to put the energy in.

Recently, that changed. One of my "other opportunities" will be based on the TurtolCMS. To further that, I, along with Roberto (late of Turtol, also), have been working on the next version. We made some significant advances, but most of the work has been focused on taking a slightly worn-out engine and rebuilding it so that it will be even better in the future. We'll do some benchmarking in the very near term, hoping to see quite a lot of performance improvement. We have some plans in place which we expect to provide even larger gains in performance, features and usability. But it's Not Dead Yet.

Look for the release of TurtolCMS v0.6 in a week or so in all the usual places.