Blog

It’s working!

As John Travolta said in the movie "Broken Arrow":

I now know how his character felt when he said that, I felt it myself today!

In his case, he had just detonated his first nuclear bomb, and had experienced the electromagnetic and seismic shock waves from the blast. In my case, I had just sold my first AustinMash! ad, and had experienced the “Oh Shit, this is working!” shock wave after the meeting. Both experiences are of comparable potency, don’t you think?

Many, many thanks to Rodney Barkalow, general manager of Central Texas Harley-Davidson, for taking a chance on something new. Also, special thanks to Denny and Brad for supporting the idea, and to Bob and the rest of the CTHD crew for their hard work over the years.

As the first real customer, Rodney snagged the UT tower Skyline parcel (number 8), a whole 877 pixels in size. Wow, three days after official launch, and already AustinMash! is profitable. I say god-damn what a rush!

Ok, now I just need the image from CTHD so I can post the ad, and I also need to get the ads from the auction winners. Wow, actual customers! I guess this means I need a login page for them, and an account maintenance page, and I need to set up the weekly reports… and… and… time to get off the top of the mountain I’ve been shouting from, and back to work!

Pixels, anyone?

I had an opportunity to participate in a benefit organized to help out a fellow rider, who had suffered an accident a few weeks ago. The event itself was fun, with free live music and lots of partying going on, and it was great to see a lot of my friends whom I had kinda neglected while I slaved away at the keyboard producing this site for you. But the real fun for me was that I chose to make this my “coming out” event - the official unveiling of AustinMash! upon an unsuspecting public. And you know what? The reactions were great!

Check out my snazzy shirt!

Keep in mind this is a benefit for an injured biker, so the folk there were mainstream, real-life people from all walks of life, as opposed to the attendee list of, say, a webinar on the collaboration features of Microsoft’s VS.Net 2.0. For this reason, I was particularly interested in initial reactions to the pixel ad concept and its execution in AustinMash!

Well, there were the few people who don’t get this whole internet thing, and that was ok - great band, huh? But those that got it seemed genuinely surprised and enthused, and I did get a high level of interest from small business owners - yeah! It was especially gratifying when, at one point, I stepped away from my display, and observed someone I had talked to earlier showing someone else my site. Coooool.

The main idea was to kick the whole chicken-and-egg problem off center by donating some pixels to the silent auction. That way, the benefit benefits, and I get some ads for the site, which will hopefully form the nucleus of the snowball I’m trying to build. Plus of course, I get the word about my site out to all the other vendors at the event, and any other business owners or managers who attend.

Sounds like a plan, let’s go peddle some pixels !!

It’s deja-vu all over again

The browser wars of yore, back when Internet Time set the pace, was an innocent era, pre-spam, pre-Sasser, before grandmothers were sued by record labels. Ahh yes, the good old times, when you coded for the only browser that mattered, and what joy when they introduced the concept of layers! Now, in these modern times of Web 2.0, the mainstream browser (the one from Microsoft) has evolved from a clunky competitor to rule the world, but the new alternative browsers are as important as ever. Problem is, they all have their peculiarities in how they respond to script commands, and now it’s back to the future in cross-browser coding…

There may be some disagreement now over the “correct” way to code web pages, but the reality is that anyone who aims to make a web site accessible to a wide audience will make sure it works correctly in Internet Explorer first, then may take the time to see that is works ok in other browsers, depending on their intended audience. One way to ensure compatibility is to limit the user experience to reading and navigating, and keeping the interaction and page layout as simple as possible. I could’ve taken that route, but that’s not the way of this site.

It has been interesting navigating the ins and outs of standards-compliant scripting and styling, at least as implemented by Mozilla. A welcome departure from the past was that by and large, changes made to accommodate Firefox also worked in IE, so code branching was kept to a minimum. Oh, there was still the occasional quirk, like brand F seems to include border thickness in an element’s width, while IE does not, but that can be handled with a global adjustment factor - see? I knew fudge factors would come into play at some point (see Jan 7th blog entry)

I also took this opportunity to get my feet wet with AJAX for the real-time statistics on the PixelList page. Well, I say that only because this is my first use of dynamic XML in a non-IE browser, so I’m using the XMLHttpRequest object native to Firefox. As it turns out, I’ve been using Javascript and XML (the JAX in AJAX) in IE for several years now, as a way to dynamically render sections of a page, so this is not all that new to me. Anyway, as the Asynchronous nature of AJAX (yes, that’s the first A) is not really necessary in this application (the content of the page has already loaded, it’s no big deal to wait for the server response with the stats XML), I think I may keep things simple and just use DJAX. Sorry, I don’t tend to go around swinging a sledgehammer to tap in a finishing nail, but at least I’ve got a feel for the tool, and it’s right there in my box in case I get the urge to build something more substantial.

Well, at least some of my goals for this site are being reached. Now I need some ads… Not to worry, the marketing machine has been working in the background, and may bear fruit in a week or so. Stay tuned…

Ping! Got another one…

I got some good feedback from some friends and family members, and my wife continues to make good suggestions, so I’m tweaking the site here and there. Like, changing the structure of the “content” pages (like the FAQ and the Blog) to accommodate browsers set to less than 1000 pixels in width. Also, it seems that with no ads on the home page, it is not readily apparent what the site is all about (a marketing duh !?)- so I need to come up with something to direct the first time visitor, I guess.

You know what’s fun? Watching the visitor and hit counts go up. Look - another visitor just arrived! I made a web page that runs on my laptop, that accesses the same site stats straight from the AustinMash! server that the PixelList page uses. This way I can check traffic on the site in real time without actually going to the PixelList page and logging another hit. Now, the PixelList site stats refresh every second (the pixel stats every 5 seconds - fairly optimistic, aren’t I?), but my laptop page can be set to refresh from every 1/2 second to every 2 hours. Hey, another visitor - cool! Right now it’s set to update every minute, and I must admit, it’s exciting to see the numbers go up. I suspect, however, that my wife might be getting tired of my constant verbal updates. Look honey - another one!!

Collisions are no accidents, it seems

File this entry in the “What Have I Done To Myself?” bucket. I was fairly happy with the ad-picking code for the home page grid, but hey, it’s pretty easy to draw out a rectangle when the grid is empty. Now it was time to add some code to keep the selected ad area from overlapping any existing ads.

At first glance, this effort seems pretty straightforward: as the potential pixel purchaser expands the grid parcel they want, check to see if there is an existing ad in the way, both in the horizontal and vertical directions, and if so, prevent the new grid parcel from expanding under it in that direction. So conceptually, I just need to know all the x coords and y coords of the upper left corner of each existing ad, to compare them against the coords of the user’s mouse. Since the ad locations are already being generated by PHP code accessing the ad data in the database, it is fairly simple to construct a couple of JavaScript arrays to hold the X and Y coords.

After working this code into the page, it quickly becomes apparent I also need to know the height and width of each ad, since the purchaser will very likely not start his ad on the same grid row or column as the “collision” ad I am trying to avoid. If he starts one row below the top of an ad that is to the right, then I need to know the height of the ad to see if it is in the way

In order to keep the x coords and the heights, and the y coords and widths, grouped together in the arrays, I set them up so that each item in each array is actually a new, 2 item array, with for example the x coord of ad 1, and the height of ad 1, as a small array, which is the first item in the X coords (horizontal) array.

This way, as the code traverses the horizontal and vertical coordinate arrays looking for the next potential ad collision, when it finds it, it will also have the “thickness” of the ad, and so can calculate if there really is a collision or not.

Ok, so I get this working, and it seems to do ok, although the new ad selection rectangle does not behave as smoothly as I would like. No problem, I can tweak it later, but first let’s see how it behaves when there are multiple existing ads on the page, not just this one test ad.

Consider this scenario:

With multiple ads scattered around the page, the code runs into an ordering problem. In order to determine which is the next ad in either direction, the coord arrays need to first be sorted in ascending order. Well, the horizontal sort for these three ads is 2-3-1, while the vertical sort is 1-2-3. So, I ended up with the selection rectangle being limited by the horizontal position of one ad, and the vertical position of another! That ain’t gonna fly…time to step back and rethink my approach to the problem - again.

In case you are wondering, let me explain why all the effort. It starts with the CEO voice, who says: Maximize Revenue! The President voice then echoes: Optimize the Pixel Sales Process! The Engineering VP voice hears this, confers with the Marketing voice, and decrees: Develop a streamlined pixel purchase system - make it simple, fast, and accurate - strive for zero re-work! Naturally, the Product Manager voice then puts in his two cents: Allow Skyline parcel purchase from any page, enable grid ad selection directly on the home page, minimize clicks, maximize accuracy, make it fun and easy! So here I was, the guy actually doing the work, trying to meet requirements. Luckily these particular voices are all in my head, so they normally sing in a smooth chorus, but at times like this they can sound like so much heavy metal.

The codemonger in me warns me to go back, forget it, don’t even try. But the Furion in me hopes I won’t listen…

So I soldier on. After a bit of reflection, it becomes clear I only need one array, with each item in it holding all 4 values of interest for each ad: x coord, y coord, width, and height. And, after futzing around with the previous versions of the collision detection code, I now came up with a wonderfully elegant solution that only takes 2 lines of code in one IF statement, inside of a single FOR loop for each axis, as opposed to the complicated nested mess I had before. I love it when that happens - that’s how I know the solution is right!

Theoretically, this new algorithm should now work in all ad placement scenarios, but I can’t help but still hear the Legal voice muttering something about liabilities, so the “overlapping pixels” disclaimer remains on the buypixels page, for now…